+++ WEB DESIGN UPDATE. - Volume 20, Issue 04, July 21, 2021. An email newsletter to distribute news and information about web design and development. ++ISSUE 04 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: BOOKS. 03: CASCADING STYLE SHEETS. 04: COLOR. 05: EVALUATION & TESTING. 06: EVENTS. 07: HTML. 08: JAVASCRIPT. 09: MISCELLANEOUS. 10: NAVIGATION. 11: STANDARDS, GUIDELINES & PATTERNS. 12: TYPOGRAPHY. 13: USABILITY. SECTION TWO: 14: What Can You Find at the Web Design Reference Site? [Contents ends.] ++ SECTION ONE: New references. +01: ACCESSIBILITY. Automated Accessibility Testing, a Few Scenarios By Rian Rietveld. "…If you test only during a commit to GitHub, you're too late. It can be a nice extra check, but it is too expensive and too time-consuming to wait until then to do it. Testing during development, in your own browser, is faster and offers you more options. Moreover, you see the whole story, not only in code, but also in terms of the user experience, and you can quickly perform additional manual tests…" https://www.a11y-collective.com/blog/automated-accessibility-testing-a-few-scenarios/ A Bad Accessibility Trend I've Noticed By Eric Bailey. "A bad accessibility trend I've noticed is industries with a lot of gravitas thinking that their use cases are somehow different and special…" https://ericwbailey.design/writing/a-bad-accessibility-trend-ive-noticed/ I Heart CC: Why and How to Caption Videos Folks Love | Accessibility NYC Meetup Recap By Equal Entry. "On July 13, 2021, Accessibility New York City hosted a Meetup entitled 'I Heart CC: Why and How to Caption Videos Folks Love.'… Presenter Meryl Evans, a marketing and accessibility consultant, talked about why quality matters in captioning and how to create awesome captions…" https://equalentry.com/why-and-how-to-caption-videos-folks-love-a11ynyc/ Everyday Accessibility By Michele A. Williams. "…Below are practical, intentional steps you can start today to create and share more accessible social media, digital, and multimedia content…" https://www.a11yproject.com/posts/2021-06-14-everyday_accessibility/ Best Practices for Audio & Video Text Alternatives By Knowbility. "There were a few questions from attendees that we didn't have time to answer during Knowbility's Audio & Video: Alternative Content for Accessibility webinar on June 21, 2021. Our team of experts, including your presenter Eric Eggert, answered these overflow questions for you…" https://knowbility.org/blog/2021/best-practices-for-audio-video-text-alternatives Voice Search: An Accessibility Feature Adopted En Masse By Rebecca Feinberg. "…Voice search is yet another example of a feature that best serves individuals with disabilities that has been co-opted by the masses because of convenience…" https://www.tpgi.com/voice-search-an-accessibility-feature-adopted-en-masse/ Using Scaffolding Strategies to Introduce Accessibility Topics Project Lead By Dr Sarah Lewthwaite. "…Whether teaching a class or running a training session, accessibility teachers can benefit from using scaffolding approaches, particularly when working with learners who are unfamiliar with digital accessibility and disability inclusion…" https://teachingaccessibility.ac.uk/resources/using-scaffolding-strategies-to-introduce-accessibility-topics/ The Accessibility Stalemate By Christian Heilmann. "…next time you feel like calling out a great video or presentation for lack of 'accessible format' or captions, maybe do something about it instead. Write about the video or the presentation and publish your musings in a perfect, accessible format. Good luck." https://christianheilmann.com/2021/07/20/the-accessibility-stalemate/ Lawsuits Over Digital Accessibility for People With Disabilities Are Rising By Ann-Marie Alcántara. "New reliance on e-commerce and other digital experiences during the pandemic has exposed problems with accessibility online, advocates say…" https://www.wsj.com/articles/lawsuits-over-digital-accessibility-for-people-with-disabilities-are-rising-11626369056 +02: BOOKS. * Jarrett, Caroline. "Surveys That Work: A Practical Guide for Designing and Running Better Surveys",‎ Rosenfeld Media, 2021 * Scott, MacDonald, and Powers. "JavaScript Cookbook, 3rd Edition", O'Reilly Media, Inc., 2021 +03: CASCADING STYLE SHEETS. Custom Properties and @property By Peter Paul Koch. "You're reading a failed article. I hoped to write about @property and how it is useful for extending CSS inheritance considerably in many different circumstances. Alas, I failed. @property turns out to be very useful for font sizes, but does not even approach the general applicability I hoped for…" http://www.quirksmode.org/blog/archives/2021/07/custom_properti.html Designing for the Unexpected By Cathy Dutton. "As devices continue to diversify in dizzying ways, how can we make sure our work on the web stays as relevant as ever for the long haul? Cathy Dutton shares how practitioners must design for the unexpected by peering through the lenses of content-first and situation-first approaches. In doing so, you'll ensure your designs are ready both for the paradigms of the present and the twists of the future, come what may." https://alistapart.com/article/designing-for-the-unexpected/ +04: COLOR. From A Colourblind Designer To The World: Please Stop Using Red And Green Together By Andrew Wilshere. "…To include colourblind users in your design, follow these rules: Avoid combining red and green in user interface design and information design. Add text labels and icons so that colour isn't doing all the work. Support colour choices by combining them with different styles and textures. Choose less problematic colours wherever possible. If you have to use red and green, differentiate them by adjusting saturation and value…" https://baselinehq.com/blog/colourblindness-information-ui-design-red-green-problems-tips-tricks.html +05: EVALUATION & TESTING. Remote Usability Testing Costs (Video) By Kate Moran. "We compare the budgets needed for different kinds of qualitative user research: in-person usability testing vs. remote studies run by software (unmoderated) or run by a human moderator." https://www.nngroup.com/videos/remote-usability-testing-costs/ Sample Sizes Needed to Exceed NPS Benchmarks By Jim Lewis and Jeff Sauro. "…In this article, we complete the set of common analyses for NPS benchmark testing with a description of newly developed sample size estimation procedures…" https://measuringu.com/nps-benchmark-test-sample-size/ +06: EVENTS. AI and Disability: A Double-Edged Sword (with Wendy Chisholm and Jutta Treviranus) July 22, 2021. Online https://ocadu.zoom.us/webinar/register/8216255212711/WN_T9Z9icenRbisr5M-y0uRWw Semantic HTML and CSS Code Challenges: Flexbox challenges 1-4 event (with Jen Kramer) July 22, 2021. Online https://www.linkedin.com/events/semantichtmlandcsscodechallenge6820069107354927104/ Audio Description Institute August 2-6, 2021. Online https://interland3.donorperfect.net/weblink/weblink.aspx?name=E144393&id=69 eduWeb Digital Summit Xpress August 3-5, 2021. Online https://eduwebcommunity.org/ Intro to Audio Description August 12, 2021. Online https://go.3playmedia.com/wbnr-08-12-2021-ad UX Australia 2021 August 24-27, 2021. Hybrid http://www.uxaustralia.com.au/conferences/ux-australia-2021 UX Conference August August 28-September 3, 2021. Online https://www.nngroup.com/training/august/ +07: HTML. Accessibility of the Section Element By Scott O'Hara. "…The
does not presently expose any of its intended semantics, as defined in the HTML specification, to assistive technologies. It also does not have any impact on how the document outline or how any

elements within a
are exposed. Multiple

elements, even when contained within a
will still continue to be exposed as level 1 headings, even if their User Agent styling changes. Note: the widely accepted best practice is that a single

be used to indicate the primary topic of the page - idealy as the first element of the
…" https://www.scottohara.me/blog/2021/07/16/section.html The avif Image Format By Manuel Matuzović. "avif is a fairly new image format and for me it's one of the most exciting recent additions to web development. Why? On a website I recently built, I could reduce the total image size from 1.72MB to 172KB just by converting images to avif…" https://www.htmhell.dev/tips/the-avif-image-format/ +08: JAVASCRIPT. What is Tree Shaking? By Chris Ferdinandi. "Have you heard someone use the phrase 'tree shaking' while talking about JavaScript, and wondered what the hell they were talking about? This article's for you…" https://gomakethings.com/what-is-tree-shaking/ How to Play a Sound with JavaScript By Chris Ferdinandi. "Today, we're going to look at how to use vanilla JS to play a sound in the browser. Let's dig in…" https://gomakethings.com/how-to-play-a-sound-with-javascript/ +09: MISCELLANEOUS. Concern Trolls and Power Grabs: Inside Big Tech's Angry, Geeky, Often Petty War for Your Privacy By Issie Lapowsky. "Inside the World Wide Web Consortium, where the world's top engineers battle over the future of your data.…" https://www.protocol.com/amp/w3c-privacy-war-2653755082 Disability Language is a Nuanced Thing By Nicolas Steenhout. "…The good intention of being more inclusive doesn't excuse you from informing yourself…" https://incl.ca/disability-language-is-a-nuanced-thing/ gridless.design By Brad Frost. "…How layout plays out in code is fundamentally different than in vector design tools, and that needs to be recognized. Q: Well then, what's the solution? A: Actual collaboration and communication between designers and developers. I always welcome the opportunity to share mine and Dan Mall's Hot Potato Process…" https://bradfrost.com/blog/link/gridless-design/ +10: NAVIGATION. The Practice of Customer-Journey Management By Kim Salazar. "User journeys should be managed like products - by people and teams with specialized, journey-dedicated roles who continually research, measure, optimize, and orchestrate the experience." https://www.nngroup.com/articles/customer-journey-management/ +11: STANDARDS, GUIDELINES & PATTERNS. The 3-Second Frontend Developer Test By Jens Oliver Meiert. "…Do you validate [your HTML and CSS code]?…" https://meiert.com/en/blog/the-frontend-developer-test/ +12: TYPOGRAPHY. Bryan Font By Jon Hicks. "…his distinctive architect's handwriting was very evocative to me, and I decided I should try and capture it as a font. It could be something carrying his name that outlives him, and also something else to talk to him about…You can download the font for free in the Hicks.design shop, but there is a suggested donation to Parkinsons UK." https://hicks.design/journal/bryan-font +13: USABILITY. Principle of Closure in Visual Design By Alita Joyce. "People tend to fill in blanks to perceive a complete object." https://www.nngroup.com/articles/principle-closure/ Understanding The Specific Web Accessibility Requirements Of Older 'Silver Surfers' By Gus Alexiou "All too often, insufficient attention is paid to the needs of non-disabled older users online, who comprise a distinct but sizable subset of web accessibility use cases and exist on that, occasionally blurred boundary between conventional accessibility and general usability…" https://www.forbes.com/sites/gusalexiou/2021/07/20/understanding-the-specific-web-accessibility-requirements-of-older-silver-surfers/ How Many Happy Users Did Your Product Have This Month? By Christian Heilmann. "…We need a new metric of happy users. But I am still at a loss how to get to that one. One thing I know though is that chasing more users or interactions for the sake of growth doesn't make better products." https://christianheilmann.com/2021/07/15/how-many-happy-users-did-your-product-have-this-month/ User Frustrations in 2021 (updated) By Vitaly Friedman. "(… updated * Tiny scrollable panes * Tiny click targets * Unexpected content shifts * Menus opening on hover, not tap/click * Country selector dropdown * Generic error messages * Unsupported 'Back' button * Disabled 'Next' buttons…" https://twitter.com/smashingmag/status/1391767835333042176 Frustrating Design Patterns: Broken Filters By Vitaly Friedman. "Too often dealing with filters can be frustrating. Let's get them right. That means never freeze the UI on a single input, provide text input fallback and never auto-scroll users on a single input. Here's why…" https://www.smashingmagazine.com/2021/07/frustrating-design-patterns-broken-frozen-filters/ Change Management of the Product Experience, Part 2 By Scott Himmer. "…Developers of legacy software … have existing customers who have contributed to and have a vested interest in the legacy software…" https://www.uxmatters.com/mt/archives/2021/07/change-management-of-the-product-experience-part-2.php 12 Common UX Pitfalls Grocery E-Commerce Sites Suffer From By Edward Scott. "…Our benchmark of 5 Grocery sites shows that Grocery sites have a generally poor-to-mediocre UX. In particular, Cart & Checkout performs especially poorly. The 12 common UX issues discussed in this article can be a direct cause for users abandoning Grocery sites." https://baymard.com/blog/2021-grocery-ecommerce-benchmark [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 WebWaste & Sustainability Information. https://www.d.umn.edu/itss/training/online/webdesign/webwaste.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:lcarlson@d.umn.edu [Issue ends.]