Web Design Update: June 3, 2020

[Laura Carlson]

+++ WEB DESIGN UPDATE.
- Volume 18, Issue 49, June 3, 2020.

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

++ISSUE 49 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: DRUPAL.
04: EVALUATION & TESTING.
05: EVENTS.
06: HTML.
07: INFORMATION ARCHITECTURE.
08: JAVASCRIPT.
09: MISCELLANEOUS.
10: NAVIGATION.
11: TOOLS.
12: USABILITY.
13: XML.

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

[Contents ends.]


++ SECTION ONE: New references.

+01: ACCESSIBILITY.

Equivalent Experiences: What Are They?
By Eric Bailey.
"An equivalent experience is one that has been deliberately conceived
of and built to be able to be used by the widest possible range of
people. To create an equivalent experience, you must understand all
the different ways people interact with technology, as well as common
barriers they experience…"
https://www.smashingmagazine.com/2020/05/equivalent-experiences-part1/

POUR Explained: A Beginner's Guide to Accessibility
By ️Ren Cummings.
"So what is POUR and why should I care…"
https://dev.to/stories_of_ren/pour-explained-a-beginner-s-guide-to-accessibility-2233

An Accessible Word Document Checklist
By Claire Brotherton.
"While I focus on websites in my work, thanks to Deque University I've
been learning about applying accessibility principles to other types
of content…"
https://www.abrightclearweb.com/accessible-word-document-checklist/

A11y Axioms - What are the Basic Truths About Accessibility? (Video)
By Mike Gifford.
"Mike wanted to do some basic modeling for accessibility and realized
the need to simplify things. This is how the A11yAxiom project got
started on Twitter. He wanted to define some essential truths in order
to help people get a better sense of how to approach digital
accessibility. This session will cover some of those approaches, and
conclude with a Q&A at the end to see if we can't make them better…"
https://www.youtube.com/watch?v=KAxJ9We74d8

Twitter Accessibility
By TwitterA11y.
"Adding descriptions to images is a great way to include everyone in
your conversation. These descriptions, aka alt-text, enable folks who
use screen readers to interpret images in Tweets. Starting today, you
no longer need a setting to add alt text…"
https://twitter.com/TwitterA11y/status/1265689579371323392

10 Things to Know About Twitter's Alternative Text for Images
By Deborah Edwards-Onoro.
"…As of May 2020, Twitter has finally updated their alt text support
to be more fully-featured. Here's the latest updates about Twitter's
alt text…"
https://www.lireo.com/15-things-to-know-twitter-alternative-text-images/

How WCAG 2.1 Relates to Online User Experience with Switch-Based Tools
By Sambhavi Chandrashekar and Lindsay McCardl.
"Web Content Accessibility Guidelines (WCAG), organized under the four
principles Perceivable, Operable, Understandable, and Robust, form the
standards for building web pages that are accessible to users with
disabilities…"
http://scholarworks.csun.edu/handle/10211.3/215990

Microsoft Ability Summit 2020 (Videos)
By Microsoft.
https://www.youtube.com/playlist?list=PLtSVUgxIo6KqwPmsfQEDmgoC9-H9OXI2c

How to Meet the Increased Demand for Website Accessibility
By ️Kim Krause Berg.
"Many people now depend on the web for basic necessities. It has
uncovered the website accessibility issues most businesses have.
Here's how to address them…"
https://www.searchenginejournal.com/website-accessibility-meet-increased-demand/370074/

Four Years of Accessibility Data in Prominent US Networks
By WebAIM.
"An analysis of UCEDD, Institution, and US state/territory accessibility…"
https://webaim.org/projects/uceddlongitudinal/

Feds Investigate College Twice Since 2017 for Disability Discrimination
By Dana Gerber.
"…The OCR met with an unnamed college official on Dec. 6, 2019 to
discuss the barriers. On or about Dec. 20, 2019 and Jan. 3, 2020, OCR
ran additional tests to determine if the college had removed the
website barriers, and after confirming that it had, OCR closed the
investigation…"
https://berkeleybeacon.com/feds-investigate-college-twice-since-2017-for-disability-discrimination/


+02: CASCADING STYLE SHEETS.

A User's Guide to CSS Variables
By Lea Verou.
"Long-requested but still underused, CSS custom properties for
cascading variables offer revolutionary possibilities for
collaboration and code reuse…"
https://increment.com/frontend/a-users-guide-to-css-variables/

Global and Component Style Settings with CSS Variables
By Sara Soueidan.
"Or how I use CSS variables to create more manageable project styles
and more portable patterns…"
https://www.sarasoueidan.com/blog/style-settings-with-css-variables/

Programming CSS to Perform Sass Colour Functions
By Jeremy Keith.
"…You get the idea. It doesn't matter how many differently-coloured
buttons I create, the effect of darkening or lightening their borders
is all taken care of. So it turns out that the lighten() and darken()
functions from Sass are available to us in CSS by using a combination
of custom properties, hsl(), and calc()…"
https://adactio.com/journal/16960

CUBE CSS
By Andy Bell.
"A CSS methodology oriented towards simplicity and consistency with a
heavy dosage of pragmatism…"
https://piccalil.li/blog/cube-css/

A First Look at 'aspect-ratio'
By Chris Coyier.
"Oh hey! A brand new property that affects how a box is sized! That's
a big deal…"
https://css-tricks.com/a-first-look-at-aspect-ratio/


+03: DRUPAL.

The Olivero Theme Releases Its First Alpha
By Mike Herchel and Putra Bonaccorsi.
"…Olivero is a new theme that is slated to make it into Drupal core in
version 9.1 as the new default theme (replacing Bartik). It's named
after Rachel Olivero, who was a valued community member and
accessibility advocate…we've done extensive testing with various
devices, and browsers (yes - this theme supports Internet Explorer
11), and have done lots of accessibility work, although more still
needs to be done…"
https://www.lullabot.com/articles/olivero-theme-releases-its-first-alpha


+04: EVALUATION & TESTING.

The Case for Remote Moderated Usability Testing (Video)
By Kate Moran.
"Remote usability studies can be run completely by software
(unmoderated), or a human UX researcher can facilitate the study, even
if the test participant is remote (at home or their own office, rather
than yours).
https://www.nngroup.com/videos/remote-moderated-usability-testing/

About Time: A Practitioner's Guide to Task Completion Time Analysis
By Bernard Rummel.
"…The present paper is to turn the methodology on its feet, to make it
more usable for practitioners. Statistics are only so
interesting-unless they help figure out what is going on with users
and interfaces. Well, let me show you how and why this toolkit has
become indispensable for me, in particular in online user research…"
https://uxpajournal.org/guide-task-completion-time-analysis/

SUSapp: A Free Mobile Application That Makes the System Usability
Scale (SUS) Easier to Administer
By Jeffrey Xiong, Claudia Ziegler Acemyan, and Philip Kortum.
"…Through the examination of efficiency, effectiveness, and
satisfaction measures, the data have shown that participants are able
to use the SUSapp to complete the SUS on an iPhone in a reasonable
amount of time. In addition, participants are satisfied with the
usability of the app. For these reasons, one can conclude that the
SUSapp is a usable application…"
https://uxpajournal.org/susapp-mobile-system-usability-scale/

Getting Started with Quantitative Data Analysis
By Krause Leia.
"…Quantitative UX research helps you to better understand your
customers, their preferences, behaviors, and the factors that affect
their decisions. It can unveil a treasure trove of information via the
right analytics, giving you the leverage you need to stay a cut above
your competition."
https://www.uxbooth.com/articles/getting-started-with-quantitative-data-analysis/

Understanding Users is Not Your Job (Video)
By David Travis.
"I answer the question, 'How can I make the development team get more
involved in user research?'…"
https://www.youtube.com/watch?v=R_Q6U8qJDxs

Segmenting Users (Video)
By David Travis.
"I answer the question, 'Before the lockdown, I was carrying out field
visits to users. Now I have lots of time on my hands for the analysis
- but I'm struggling to identify the different groups. I feel like I'm
making it up and I'd like a more structured method. Any tips?'…"
https://www.youtube.com/watch?v=yVq1Bsi0rDw

The Paradox of Usability Benchmarking (Video)
By David Travis.
"I answer the question, 'How do I go about using a summative usability
test to benchmark UX'?…"
https://www.youtube.com/watch?v=T38SEbL-o8U

Should a Design Agency Test its Own Design (Video)
By David Travis.
"I answer the question, 'What are your thoughts on getting usability
testing done by the same company who designed the product/app? What
happens when the usability expert and the UX architect are the
same.'…"
https://www.youtube.com/watch?v=i3RKGunMLw0


+05: EVENTS.

Web Accessibility for Drupal
June 8-11, 2020.
Online
https://www.eventbrite.ca/e/web-accessibility-for-drupal-live-online-training-tickets-88747483111

XR Access Symposium
July 20, 2020.
Online
https://xraccess.org/symposium/

Human-Centered Design
July 20, 2020.
Online
https://aneventapart.com/event/online-0720

A Stay-at-Home Conference
July 22-26, 2020.
Online
https://2020.sofaconf.com/

HighEdWeb 2020 Annual Conference
October 19-20, 2020.
Online
https://2020.highedweb.org/


+06: HTML.

Meeting Accessibility Challenges with Web Components
By Jason White, Mark Hakkinen, Jennifer Grant.
"Web Components comprise a suite of technologies under development by
the World Wide Web Consortium (W3C) that together enable standard
formats such as Hypertext Markup Language (HTML), and Scalable Vector
Graphics (SVG) to be extended with new functionality…"
http://scholarworks.csun.edu/handle/10211.3/180112

Tip: role=search
By Steve Faulkner.
"Tip: role=search does not equal <input type=search>…"
https://twitter.com/stevefaulkner/status/1268115502485966851

Developer Who Wrote Vanilla HTML+CSS in Notepad Declared a Witch
By Sam Sydeffekt.
"A junior web developer Christopher Abbot-Blank attracted the
attention of all his coworkers at Scalable Enterprise Solutions, LLC…"
https://www.theolognion.com/developer-who-wrote-vanilla-html-css-in-notepad-declared-a-witch/


+07: INFORMATION ARCHITECTURE.

How to Organize COVID-19 Information on Your Intranet
By Kara Pernice.
"Interviews with intranet designers and case-study analyses show that
designers are positioning COVID-19 content on intranets all in one
place and are making it easy to find and consume…"
https://www.nngroup.com/articles/covid19-intranet-ia/


+08: JAVASCRIPT.

A Guide to Accessible Interactive Components using React Libraries
By Lindsey Kopacz.
"…There are two points that I want to drive home about JavaScript
frameworks: First, Front End JavaScript Frameworks render HTML.
Second, JavaScript frameworks don't produce inaccessible HTML. Web
developers produce inaccessible HTML. Before you read this blog post,
I'd recommend brushing up on how to fix some common HTML errors…"
https://www.a11ywithlindsey.com/blog/accessible-interactive-components-react

Remediating Sites
By Stuart Langridge.
"…you need to make alterations to a web page that already exists, and
where you can't change the HTML, so your job is to write some bits of
JavaScript to poke at the page…"
https://www.kryogenix.org/days/2020/05/14/remediating-sites/


+09: MISCELLANEOUS.

ECAR Study of the Technology Needs of Students with Disabilities
By Dana C. Gierdowski and Joseph Galanek.
"Technology in higher education can be both an aid and a challenge for
students with disabilities. Institutions and instructors can take
steps to ensure that these students have equitable access, and those
same measures can help all students, particularly during the era of
emergency remote teaching....
https://er.educause.edu/blogs/2020/6/ecar-study-of-the-technology-needs-of-students-with-disabilities-2020

Responsive Design: Seams & Edges
By Ethan Marcotte.
"…A 'seam' is a term I use to describe where a responsive design
breaks, which happens as screens change their shape-as they get wider,
narrower, shorter, or taller…For me, that process begins with seams…"
https://ethanmarcotte.com/wrote/responsive-design-seams-edges/

The F-word, Episode 3 Episode 3 (Podcast)
By Vadim Makeev and Bruce Lawson.
Vadim and Bruce talk about Web site resilience, HTML nesting rules,
masonry layout, and the Web We Want.
https://f-word.dev/episodes/3/


+10: NAVIGATION.

How Search Engines Shape Gaze Patterns During Information Seeking:
Google vs. Baidu
By Feifei Liu.
"Search-engine design alters users' gaze patterns on search-engine
results pages, but only when users find the information on the page
relevant to their current task."
https://www.nngroup.com/articles/google-baidu-serp-comparison/

Journey Mapping for Remote Teams: A Digital Template
By Sarah Gibbons.
"A collaborative spreadsheet is an efficient, effective tool for
virtual customer-journey mapping. Because of the format and structure
it affords, almost everyone will be able to access and easily use it."
https://www.nngroup.com/articles/journey-map-digital-template/


+11: TOOLS.

sus-app
By Jeffrey Xiong, Claudia Ziegler Acemyan, and Philip Kortum.
ReactNative app to help usability researchers collect SUS (system
usability scale) scores
https://github.com/jeffreyxiong/sus-app/


+12: USABILITY.

Website Performance is Getting Worse
By Gerry McGovern.
"Website design is still more amateur than professional. Most websites
would not pass a basic quality control test…"
https://gerrymcgovern.com/website-performance-is-getting-worse/

Modern Touch-Friendly Design
By Addy Osmani.
"I recently spoke to veteran UX designer Steven Hoober about designing
for touch interfaces. Hoober's "Design for Fingers, Touch, and People"
encourages UI designers to…"
https://addyosmani.com/blog/touch-friendly-design/


+13: XML.

Making RSS more Visible Again with a /Feeds Page
By Marcus Herrmann.
"A few years ago you could easily tell if a page offered an RSS feed.
Browsers (at least good ones) had a feed symbol close to their
location bar, and if you were really lucky (or used a really good
browser), that indicator was even a button, empowering you to
subscribe to a website with only one click. Fast forward to today…"
https://marcus.io/blog/making-rss-more-visible-again-with-slash-feeds


[Section one ends.]


++ SECTION TWO:

+14: 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.]