WEB DESIGN UPDATE. – Volume 17, Issue 47, May 16, 2019.

lcarlson
image.png
May 15
+++ WEB DESIGN UPDATE.
– Volume 17, Issue 47, May 16, 2019.

An email newsletter to distribute news and information about web
design and development.

++ISSUE 47 CONTENTS.

SECTION ONE: New references.
What’s new at the Web Design Reference site?
http://www.d.umn.edu/itss/training/online/webdesign/
New links in these categories:

01: ACCESSIBILITY.
02: CASCADING STYLE SHEETS.
03: COLOR.
04: DRUPAL.
05: EVALUATION & TESTING.
06: EVENTS.
07: HTML.
08: MISCELLANEOUS.
09: NAVIGATION.
10: TOOLS.
11: USABILITY.

SECTION TWO:
12: What Can You Find at the Web Design Reference Site?

[Contents ends.]

++ SECTION ONE: New references.

+01: ACCESSIBILITY.

Global Accessibility Awareness Day 2019: Three Ways You Can Participate
By Deborah Edwards-Onoro.
“If you want to participate in GAAD, but don’t live near an inclusive
design or accessibility meetup group hosting the event, I’ve got you
covered…”

Global Accessibility Awareness Day 2019: Three Ways You Can Participate

WCAG 2.1 Primer (Alpha)
By GOV.UK.
“This document will help you get up to speed with WCAG 2.1 quickly and
avoid common mistakes people make when creating or updating web
content. You will find this really helpful if you design, build or
create web content…”
https://alphagov.github.io/wcag-primer/

How do You Test Success Criterion 1.3.5 on Mobile Applications? (Update)
By Chrissie Henning.
“At the time of publication we were not fully aware of the
ramifications of discussions and further post publication discussions,
in the WCAG working group, that have lead to the requirements for
conforming to this success criterion being more clearly defined…”

How do You Test Success Criterion 1.3.5 on Mobile Applications?

Shadows & Outlines Accessibility of Component Styling (Slides, Minutes, Video)
By Michael Gilbert, Philippe Clesca, Kunal D. Patel, Sky Ortiz, and
Jen Kozenski.
Google research & experience on WCAG Success Criterion 1.4.11:
Non-text Contrast.
Slides:
https://docs.google.com/presentation/d/1CFNxozlyO1lmiyRVCFuhQ_0t2c5QTLskY03CCeTpUuA/
WCAG Working Group Minutes:
https://www.w3.org/2019/05/14-ag-minutes.html#item01
Recording:
https://mit.webex.com/mit/lsr.php?RCID=42dc7191ccb949e681ad88d6de4f1622

Understanding SC 1.2.1 Audio-only and Video-only (Prerecorded)
By Raghavendra Satish Peri.
“This success criterion requires that audio-only & video-only content
are provided with alternative method of conveying information. A text
transcript can be provided for audio track & text transcript or audio
track can be provided for a video that doesn’t have an audio…”

Understanding SC 1.2.1 Audio-only and Video-only (Prerecorded)

Notes from the A11y Underground #1
By Steve Faulkner.
“I have been meaning to start a periodic noting of meaty articles and
threads related to subjects close to my technical heart. Today intent
meets action. Here’s a few that have tickled my fancy of late…”

Notes from the a11y underground #1

[DRAFT] (FAST) Checklist
By Accessible Platform Architectures Working Group.
“…The goal of Framework for Accessibility in the Specification of
Technologies (FAST) is to describe the features that web technologies
should provide to ensure it is possible to create content that is
accessible to users with disabilities…”
https://w3c.github.io/apa/fast/checklist.html

Some Accessibility Resources
By Scott O’Hara.
“If you’re just getting into accessibility (or a11y for short), or
you’re getting comfortable with what you know and want to build on
that, I recommend checking out the following resources…” (Thanks for
including the Webdev Newsletter, Scott!)
https://www.scottohara.me/note/2019/05/07/resources.html

Golden Rules of Social Media Accessibility (PDF)
By Jennifer Smith.
“How do you start creating accessible social media content…”
https://danya.com/files/sma_poster.pdf

Passed Your Accessibility Check? Don’t Be So Sure.
By Paul Rayius
“Why does my PDF file pass Adobe Acrobat’s Accessibility Checker but
fails using CommonLook’s PDF Validator or PAC3?…”

Passed Your Accessibility Check? Don’t Be So Sure.

Less Than 1% of Website Home Pages are Likely to Meet Accessibility Standards
By Claudia Cahalane.
“…To find out more about the report, AbilityNet accessibility and
usability consult Adi Latif spoke to Jared Smith, associate director
of WebAIM. You can find the video below of their conversation at
accessibility conference CSUN, below…”
https://abilitynet.org.uk/news-blogs/less-1-website-home-pages-are-likely-meet-accessibility-standards

RIT, Naz Caught in Explosion of ADA Website Lawsuits
By Berkeley Brean.
“All week News10NBC investigated the thousands of lawsuits accusing
the owners of restaurants, malls, art galleries and wineries of
discriminating against people with disabilities…”
https://www.whec.com/news/rit-naz-caught-in-explosion-of-ada-website-lawsuits/5340318/

Visually Impaired Man Sues Pokémon Company Over Non-ADA Compliant Website
By Stefanie Fogel.
“A visually-impaired man is suing The Pokémon Company because he says
one of its websites is not equally accessible to blind consumers and
violates the Americans with Disabilities Act…”
Visually Impaired Man Sues Pokémon Company Over Non-ADA Compliant Website

+02: CASCADING STYLE SHEETS.

The Dark Side of the Grid (Part 2)
By Manuel Matuzovic.
“This is part 2 of 3 in a series of articles about CSS Grid layout and
accessibility…”
https://www.matuzo.at/blog/the-dark-side-of-the-grid-part-2/

A Design Pattern Solved by Subgrid
By Rachel Andrew.
“I’ve been playing with this early implementation of the subgrid
feature in Firefox, and it occured to me that subgrid could solve a
less obvious use case…”
https://rachelandrew.co.uk/archives/2019/05/07/a-design-pattern-solved-by-subgrid/

Subgrid
By Chris David Mills, SphinxKnight, and Rachel Andrew.
“Level 2 of the CSS Grid Layout specification includes a subgrid value
for grid-template-columns and grid-template-rows. This guide details
what subgrid does, and gives some use cases and design patterns that
are solved by the feature…”
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_layout/Subgrid

Understanding Grid Placement Through Building a HTML Periodical Table
By Chen Hui Jing.
“I’ve been using CSS grid to build layouts for quite a while now, and
all my designs to date involved either a handful of explicitly placed
individual grid items, or 100% automatic placement…”
https://www.chenhuijing.com/blog/understanding-grid-placement/

How to Create Joined Bulletpoint Lists with CSS, BBC News-style
By Peter Cooper.
“When there are live events, BBC News often runs a ‘timeline’ style
list against stories. For example…”
https://dev.to/peterc/how-to-create-joined-bulletpoint-lists-with-css-bbc-news-style-1eem

+03: COLOR.

Color Tutorial
By Tom Jewett.
“Most of the things that you will design with computers-user
interfaces, Web pages, and even printed documents-will use color in
some way. This tutorial is designed to help you understand and specify
colors. It does not address the effective use of color, which is a
much more complex topic…”
http://colortutorial.design/index.html

+04: DRUPAL.

Which of Drupal and WordPress is the Most Accessible Content
Management System? (Podcast)
By Jonathan Hassell.
“…Graham Armfield in our team has been working to make WordPress
accessible for years. And Mike Gifford, who has been leading
accessibility work on Drupal, is another good friend of ours at
Hassell Inclusion. So in this month’s podcast we’ve put them together
to discuss their work…”

Which of Drupal and WordPress is the most accessible content management system? – Digital Accessibility Experts Podcast 5

+05: EVALUATION & TESTING.

A/B Testing vs. Multivariate Testing for Design Optimization (Video)
By Kate Moran.
“Like A/B testing, multivariate testing is a design optimization
method that involves experimenting with live traffic to find the best
impact on conversion.”
https://www.nngroup.com/videos/a-b-testing-vs-multivariate/

Validating a Lostness Measure
By Jeff Sauro.
“…how do you measure when someone is lost? Is this captured already by
standard usability metrics or is a more specialized metric needed? It
helps to first think about how we measure usability…”

Validating a Lostness Measure

+06: EVENTS.

Front
June 6-7, 2019.
Salt Lake City, Utah, U.S.A.
https://www.frontutah.com/conference/

DinosaurJS
June 20, 2019.
Denver, Colorado, U.S.A.
https://dinosaurjs.org/

Web Directions Code
June 20-21, 2019.
Melbourne, Australia
https://webdirections.org/code/

Incorporating Accessibility Into your Process and Team
July 2, 2019.
Online
https://levelaccess.zoom.us/webinar/register/WN_fc0zkLjzTsqRt04hUrYxaw

Codeland
July 22, 2019.
New York, New York, U.S.A.
http://codelandconf.com/

Mid-Atlantic Developer Conference
August 1-2, 2019.
Baltimore, Maryland, U.S.A.

Home

JavaScript and Friends Conference
August 2, 2019.
Columbus, Ohio, U.S.A.
https://www.javascriptandfriends.com/

+07: HTML.

A Delightful Reference for HTML Symbols, Entities and ASCII Character Codes
By Toptal Designers.
“HTML Arrows is a comprehensive reference website for finding HTML
symbol codes and entities, ASCII characters and Unicode hexadecimal
values to use in your web design…”
https://www.toptal.com/designers/htmlarrows/

Periodic Table of the Elements (Tutorial)
By Adrian Roselli.
“…this post is about a table of elements that is made up of non-table
elements. If that sentence made no sense, then you should enjoy this.
In other words, I may use the terms table and element in a confusing
fashion…”

Periodic Table of the Elements

The HTML5 Treasure Hunt
By Bruce Lawson.
Slides from Bruce’s International JavaScript Conference 2019 presneation.

+08: MISCELLANEOUS.

Guidelines for Brutalist Web Design
By David Bryant Copeland.
“…How amazing would it be to have readable text, clearly-marked
interaction points, unobtrusive advertising, all wrapped up in a
fast-loading site you could consume using the native tools of your
chosen device? …to start with left-aligned black text on a white
background, and to apply styling only to solve a specific problem.
This is good advice. Embrace this, and you embrace Brutalist Web
Design. Focus on your content and your visitors will enjoy you and
your website. Focus on decoration or tricking your visitors into
clicking ads, and your content will suffer, along with your visitors…”
https://brutalist-web.design/

A Crime Called Favicon
By Jens Oliver Meiert.
“At sum.cumo we have just opened a larger investigation into the
current situation and best practices with respect to favicons…”
https://meiert.com/en/blog/schmavicons/

Thoughts on the W3C’s May 2019 Advisory Board Election
By Elika J Etemad.
“The W3C Advisory Board is electing 7 of its 11 members this May…”
http://fantasai.inkedblade.net/weblog/2019/w3c-advisory-board-election/

A Report from the AMP Advisory Committee Meeting
By Terence Eden.
“I don’t like AMP. I think that Google’s Accelerated Mobile Pages are
a bad idea, poorly executed, and almost-certainly anti-competitive…”

A report from the AMP Advisory Committee Meeting

+09: NAVIGATION.

Customer Journey Mapping 101 (Video)
By Sarah Gibbons.
“The 5 components of a journey map and the benefits of using this
qualitative method as part of a UX design process to discover,
document, and share the bigger picture of what users want.”
https://www.nngroup.com/videos/journey-mapping-101/

+10: TOOLS.

Accessibility Reference (Chrome DevTools)
By Kayce Basques.
“This page is a comprehensive reference of accessibility features in
Chrome DevTools. It is intended for web developers who:
https://developers.google.com/web/tools/chrome-devtools/accessibility/reference

+11: USABILITY.

Split Buttons
By Page Laubheimer.
“A split button is a dual-function menu button that offers a default
action as well as the possibility of choosing a different action by
selecting from a set of alternatives.”
https://www.nngroup.com/articles/split-buttons/

Why I Don’t Believe in Empathic Design
By Don Norman.
“Human-centered design pioneer Don Norman, who coined the term ‘user
experience,’ explains why he’s not convinced by the current obsession
with empathy and what we should do instead…”
https://theblog.adobe.com/why-i-dont-believe-in-empathic-design-don-norman/

I Wrote the Book on User-Friendly Design. What I See Today Horrifies Me
By Don Norman.
“The world is designed against the elderly, writes Don Norman,
83-year-old author of the industry bible Design of Everyday Things and
a former Apple VP…”
https://www.fastcompany.com/90338379/i-wrote-the-book-on-user-friendly-design-what-i-see-today-horrifies-me

Trans-Inclusive Design
By Erin White.
“Design decisions across our projects can mean the difference between
affirmation and invalidation-and sometimes safety and danger. Erin
White explores the repercussions for trans, non-binary, and
gender-variant users and what we can do about it.”

Trans-inclusive Design

UX Research on Product Page Videos: Where and How to Embed Them (35%
Get it Wrong)
By Jamie Appleseed.
“Imagine investing resources into expensive video production and
implementing video players on your e-commerce site, and then your
users don’t watch the videos…”
https://baymard.com/blog/embedding-product-page-videos

4 Tips for Designing Apps for Older Users
By Jonathan Shariat.
“…Here are some of our design considerations…”
View at Medium.com

[Section one ends.]

++ SECTION TWO:

+12: What Can You Find at the Web Design Reference Site?

Accessibility Information.
http://www.d.umn.edu/itss/training/online/webdesign/accessibility.html

Association Information.
http://www.d.umn.edu/itss/training/online/webdesign/associations.html

Book Listings.
http://www.d.umn.edu/itss/training/online/webdesign/books.html

Cascading Style Sheets Information.
http://www.d.umn.edu/itss/training/online/webdesign/css.html

Color Information.
http://www.d.umn.edu/itss/training/online/webdesign/color.html

Drupal Information.
http://www.d.umn.edu/itss/training/online/webdesign/drupal.html

Evaluation & Testing Information.
http://www.d.umn.edu/itss/training/online/webdesign/testing.html

Event Information.
http://www.d.umn.edu/itss/training/online/webdesign/events.html

HTML Information.
http://www.d.umn.edu/itss/training/online/webdesign/html.html

Information Architecture Information.
http://www.d.umn.edu/itss/training/online/webdesign/architecture.html

JavaScript Information.
http://www.d.umn.edu/itss/training/online/webdesign/javascript.html

Miscellaneous Web Information.
http://www.d.umn.edu/itss/training/online/webdesign/misc.html

Navigation Information.
http://www.d.umn.edu/itss/training/online/webdesign/navigation.html

PHP Information.
http://www.d.umn.edu/itss/training/online/webdesign/php.html

Sites & Blogs Listing.
http://www.d.umn.edu/itss/training/online/webdesign/sites.html

Standards, Guidelines & Pattern Information.
http://www.d.umn.edu/itss/training/online/webdesign/standards.html

Tool Information.
http://www.d.umn.edu/itss/training/online/webdesign/tools.html

Typography Information.
http://www.d.umn.edu/itss/training/online/webdesign/type.html

Usability Information.
http://www.d.umn.edu/itss/training/online/webdesign/usability.html

XML Information.
http://www.d.umn.edu/itss/training/online/webdesign/xml.html

[Section two ends.]

++END NOTES.

+ SUBSCRIPTION INFO.

WEB DESIGN UPDATE is available by subscription. For information on how
to subscribe and unsubscribe please visit:
http://www.d.umn.edu/itss/training/online/webdesign/webdev_listserv.html
The Web Design Reference Site also has a RSS 2.0 feed for site updates.

+ TEXT EMAIL NEWSLETTER (TEN).

As a navigation aid for screen readers we do our best to conform to
the accessible Text Email Newsletter (TEN) guidelines. Please let me
know if there is anything else we can do to make navigation easier.
For TEN guideline information please visit:
http://www.headstar.com/ten

+ SIGN OFF.

Until next time,

Laura L. Carlson
Information Technology Systems and Services
University of Minnesota Duluth
Duluth, MN U.S.A. 55812-3009
mailto:lcar…@d.umn.edu

[Issue ends.]

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s