Web Design Update: September 16, 2020

[Laura Carlson]

+++ WEB DESIGN UPDATE.
- Volume 19, Issue 12, September 16, 2020.

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

++ISSUE 12 CONTENTS.

SECTION ONE: New references.
What's new at the Web Design Reference site?
https://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: JAVASCRIPT.
09: MISCELLANEOUS.
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.

A WCAG Overview - Web Content Accessibility Guidelines (WCAG) 2.1 and
2.0 Explained (Video)
By Eric Eggert.
"Hello! In this episode, I'll explain the structure to the Web Content
Accessibility Guidelines (WCAG) and how you can start following their
requirements…"
https://www.youtube.com/watch?v=rIebSHUZz_w

Latest Public Draft of WCAG 2.2 Features Nine New Success Criteria,
Other Updates
By Bureau of Internet Accessibility.
The Web Content Accessibility Guidelines will soon be enhanced with
the updates pending in WCAG 2.2. On August 11, W3C published its
latest draft of WCAG 2.2, revealing a number of new success criteria
since the first public draft published in February…"
https://www.boia.org/blog/latest-public-draft-of-wcag-2.2-features-nine-new-success-criteria-other-updates

Let's Make Accessibility Sustainable at Scale
By Neil Milliken.
"When you hear the word 'sustainability', do you immediately think of
the environment, green energy and windmills…"
https://atos.net/en/blog/lets-make-accessibility-sustainable-at-scale

What to Look for in an Accessibility Audit
By Glenda Sims.
"If your organization is completely new to digital accessibility, an
audit or assessment is a great place to start to see where your
organization stands."
https://www.deque.com/blog/what-to-look-for-in-an-accessibility-audit

How to Talk to Stakeholders about Web Accessibility: A Presentation Template
By Rachel Gallucci.
"Hint: It's more emotion than logic…"
https://uxdesign.cc/how-to-talk-to-stakeholders-about-web-accessibility-a-presentation-template-19bd512e805


+02: CASCADING STYLE SHEETS.

Interaction Media Features and Their Potential (for Incorrect Assumptions)
By Patrick H. Lauke.
"…The Media Queries Level 4 Interaction Media Features - pointer,
hover, any-pointer and any-hover - are meant to allow sites to
implement different styles and functionality (either CSS-specific
interactivity like :hover, or JavaScript behaviors, when queried using
window.matchMedia), depending on the particular characteristics of a
user's input devices…"
https://css-tricks.com/interaction-media-features-and-their-potential-for-incorrect-assumptions/

content-visibility: The New CSS Property that Boosts Your Rendering Performance
By Una Kravets and Vladimir Levin.
"Improve initial load time by skipping the rendering of offscreen content…"
https://web.dev/content-visibility/

How to Use CSS Masking
By Rachel Andrew.
"When you clip an element using the clip-path property the clipped
area becomes invisible…"
https://web.dev/css-masking/

How to Use CSS Clipping
By Rachel Andrew.
"Elements on web pages are all defined inside a rectangular box.
However that doesn't mean that we have to make everything look like a
box. You can use the CSS clip-path property to clip away parts of an
image or other element, to create interesting effects…"
https://web.dev/css-clipping/


+03: COLOR.

Accessible Color Standards - Designing in the Browser (Video)
By Una Kravets.
"Welcome to Designing in the Browser with our host, Una Kravets. Today
we're talking about color contrast! We'll go over what the A, AA, and
AAA conformance levels mean and how to ensure proper accessibility
compliance for your own site. We'll go over how to use Chrome
Developer Tools and preference media queries, such as
'prefers-color-scheme,' to make the right choices for your
applications and design systems…"
https://www.youtube.com/watch?v=sEDnmNtEaqQ


+04: DRUPAL.

Drupal 8 Migration: Migrating Hierarchical Taxonomy Terms
By Kevin Porras.
"When you migrate relations between two different entities, you
usually migrate the target entities first and then the source
entities…"
https://evolvingweb.ca/blog/drupal-8-migration-migrating-hierarchical-taxonomy-terms


+05: EVALUATION & TESTING.

7 Steps to Benchmark Your Product's UX
By Alita Joyce.
"Benchmark your UX by first determining appropriate metrics and a
study methodology. Then track these metrics across different releases
of your product by running studies that follow the same established
methodology."
https://www.nngroup.com/articles/product-ux-benchmarks/

Design Inquiry Through Data
By P. Kun et al.
"…The main research question we pursue in this dissertation is 'How
can designers integrate data practices into design inquiry?' We
address this question through conducting a Research-through-Design
program to gain, on the one hand, a better understanding of how the
fields of design and data science intersect, and on the other hand, to
develop methodological contributions for future data-rich design
practices. The resulting conceptual framework of Design Inquiry
Through Data has been constructed throughout a series of empirical
studies in which data-rich design practices are studied…"
https://repository.tudelft.nl/islandora/object/uuid:7e914dd9-2b53-4b2c-9061-86087dbb93b9?collection=research

When Remote Workshops Fail
By Therese Fessenden.
"For a successful remote workshop, pick the tools with low entry cost,
plan timing carefully, and create the expectation for active
participation."
https://www.nngroup.com/articles/remote-workshop-fail/


+06: EVENTS.

Inclusive Design 24 (#id24)
September 17, 2020.
Online
https://inclusivedesign24.org/2020/

Accessibility Design Slam
September 21, 2020.
Online
https://www.eventbrite.com/e/accessibility-design-slam-tickets-118866501907

Drupal GovCon
September 24-25, 2020.
Online
https://www.drupalgovcon.org/

Angular and Accessibility Webinar
September 29, 2020.
Online
https://accessibility.deque.com/angular-accessibility-webinar

Accessibility: Why it Matters & What You Can Do
September 29, 2020.
Online
https://www.meetup.com/Saint-Louis-Digital-Accessibility-Inclusive-Design/events/273155000/

UX Writing - A New Role for Technical Communicators?
September 30, 2020.
Online
https://www.eventbrite.com/e/ux-writing-a-new-role-for-technical-communicators-tickets-118878445631

12 Things You Need to Know About WCAG 2.1: How it Impacts Your Work &
Laws Around the Globe
October 1, 2020.
Online
https://go.3playmedia.com/wbnr-10-01-2020-wcag

Upgrading Your Drupal 7 Website: The Time is Now
October 1, 2020.
Online
https://www.eventbrite.com/e/upgrading-your-drupal-7-website-the-time-is-now-tickets-117806734113

An Event Apart, Online Together - Fall Summit
October 26-28, 2020.
Online
https://aneventapart.com/event/online-1020


+07: HTML.

Tooltips: Investigation into Four Parts (Video)
By Sarah Higley.
"Tooltips are both ubiquitous and originally designed on a
fundamentally inaccessible premise: that all users can see and
primarily navigate with a mouse. We're going to take a look at why
tooltips continue to have so many accessibility problems, where the
standards fall short, and some concrete recommendations and
alternatives…"
https://www.youtube.com/watch?v=lb0_v7D4kbs

Source Order Viewer in Edge 86
By Adrian Roselli.
"Edge 86 has introduced a feature that shows the source order of a page…"
https://adrianroselli.com/2020/09/source-order-viewer-in-edge-86.html


+08: JAVASCRIPT.

Callbacks vs. Custom Events in Vanilla JS
By Chris Ferdinandi.
"In your websites and web apps, you may occasionally want to run some
code in response to something that happens…"
https://gomakethings.com/callbacks-vs.-custom-events-in-vanilla-js/


+09: MISCELLANEOUS.

AVIF has Landed
By Jake Archibald.
"…AVIF is a new image format derived from the keyframes of AV1 video.
It's a royalty-free format, and it's already supported in Chrome 85 on
desktop. Android support will be added soon, Firefox is working on an
implementation, and although it took Safari 10 years to add WebP
support, I don't think we'll see the same delay here, as Apple are a
member of the group that created AV1. What I'm saying is, the time to
care about AVIF is now…"
https://jakearchibald.com/2020/avif-has-landed/

Mobile Devices are Too Expensive for Billions of People - and It's
Keeping Them Offline
By Teddy Woodhouse.
"Mobile devices, once seen as consumer luxuries, are today the
essential first step to getting online. But for billions of people
around the world, they remain too expensive. That's the conclusion of
new research from the Alliance for Affordable Internet and the Web
Foundation, looking at the affordability of mobile devices in 70 low
and middle-income countries…"
https://a4ai.org/mobile-devices-are-too-expensive-for-billions-of-people-and-its-keeping-them-offline/


+10: TOOLS.

No Mouse Days
By Marcy Sutton.
"Ever wanted a package that disables the mouse cursor one day a week
so you can test keyboard accessibility as a team? No? Well here you go
anyway. This package can be installed into a modern JavaScript app to
inject a CSS styling developer tool that disables the mouse cursor.
It's intended to encourage development of better keyboard support
through browser testing (you are testing, aren't you?)…"
https://github.com/marcysutton/no-mouse-days

A Simple, Accessible Modal Dialog Web Component
By Filament Group.
"This modal is built to be easy to use, dependency-free (aside from
feature polyfills), and accessible. It can be opened and closed
programatically or via links in a page, contains behavior to
gracefully support keyboard use (including focus management, focus
isolation, and closing via escape key), and is tested for optimal
accessibility for assistive technology. It also supports chaining of
modals, meaning that if you link to another modal from within a modal,
the new modal will cause the prior modal to close when it opens…This
modal is built to be easy to use, dependency-free (aside from feature
polyfills), and accessible. It can be opened and closed
programatically or via links in a page, contains behavior to
gracefully support keyboard use (including focus management, focus
isolation, and closing via escape key), and is tested for optimal
accessibility for assistive technology. It also supports chaining of
modals, meaning that if you link to another modal from within a modal,
the new modal will cause the prior modal to close when it opens."
https://filamentgroup.github.io/fg-modal/demo/


+11: USABILITY.

Component Driven User Interfaces
By Component Driven.
"The development and design practice of building user interfaces with
modular components. UIs are built from the 'bottom up' starting with
basic components then progressively combined to assemble screens…"
https://www.componentdriven.org/

How to Simplify Your Design
By Taras Bakusevych.
"Companies are in constant pursuit of building simple and usable
products. More features, new technologies, and advanced capabilities
but still in a lightweight and simple to use format. More often than
not, making it simple is the hardest thing there can be…"
https://uxmag.com/articles/how-to-simplify-your-design

Mask Interaction Delays with Progress Indicators (Video)
By Katie Sherwin.
"In case of slow response times in a user interface, indicate that the
wait time will soon be over by showing an animation. For longer delays
use a percent-done indicator."
https://www.nngroup.com/videos/progress-indicators/


[Section one ends.]


++ SECTION TWO:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

XML Information.
https://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:
https://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.]