+++ WEB DESIGN UPDATE. - Volume 20, Issue 03, July 14, 2021. An email newsletter to distribute news and information about web design and development. ++ISSUE 03 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: EVALUATION & TESTING. 05: EVENTS. 06: HTML. 07: JAVASCRIPT. 08: NAVIGATION. 09: TOOLS. 10: USABILITY. 11: WEBWASTE & SUSTAINABILITY. SECTION TWO: 12: What Can You Find at the Web Design Reference Site? [Contents ends.] ++ SECTION ONE: New references. +01: ACCESSIBILITY. Making A Strong Case For Accessibility By Todd Libby. "…Accessibility is often overlooked or bolted on to the end of a project from the experiences in Todd's career in web development and design. The case for accessibility is something we as people who create and build things for the web should be implementing and advocating for from the inception of a project to the release or handoff and beyond." https://www.smashingmagazine.com/2021/07/strong-case-for-accessibility/ Automating the Accessibility Tests of Your Source Code with GitHub Actions By Adrián Bolonio. "Automating your accessibility tests with libraries like axe, pa11y, lighthouse, or unit tests directly in your GitHub repository is really easy with GitHub Actions…" https://www.adrianbolonio.com/en/accessibility-github-actions/ Five Ways to Include d/Deaf Users in Your Designs By Rachele DiTullio. "…Let's look at five ways that we can improve online experiences for d/Deaf users…" https://www.tpgi.com/five-ways-to-include-d-deaf-users-in-your-designs/ Accessibility and Inclusivity: Distinctions in Experience Design By Jennifer Leigh Brown. "…This article will explain the distinctions between these terms and their relevance to design and development teams…" https://www.uxbooth.com/articles/accessibility-and-inclusivity-distinctions-in-experience-design/ Get Started with Web Accessibility By Salesforce. Learn what accessibility is and how to make websites and apps accessible to people with disabilities. https://trailhead.salesforce.com/en/content/learn/trails/get-started-with-web-accessibility Access Guide By Alex Chen. "Hello! Access Guide is a friendly introduction to digital accessibility - specifically to help understand WCAG 2.1 (Web Content Accessibility Guidelines)…" https://accessguide.io/ Myths and Facts About Photosensitivity and Seizures By Bureau of Internet Accessibility. "…The simplest way to keep your site accessible for people with photosensitive epilepsy and other light-sensitivity disorders is to avoid flashing lights and high-contrast geometric patterns entirely. For a more nuanced approach, follow guidance in from the Web Content Accessibility Guidelines (WCAG)…" https://www.boia.org/blog/myths-and-facts-about-photosensitivity-and-seizures +02: CASCADING STYLE SHEETS. What's the Difference Between the Alignment Values of start, flex-start, and self-start? By Rachel Andrew. "In this post find out the difference between the alignment values of start, flex-start, and self-start in flexbox…" https://csslayout.news/whats-the-difference-between-the-alignment-values-of-start-flex-start-and-self-start/ Refactoring CSS: Introduction (Part 1) By Adrian Bece. "CSS refactoring is not an easy task - it needs to be done in a way that doesn't create problems. First we need to analyze the existing codebase, audit CSS codebase health, discover weaknesses, agree on the approach, and convince management to invest time and resources into the process…" https://www.smashingmagazine.com/2021/07/refactoring-css-introduction-part1/ Meet `:has`, A Native CSS Parent Selector By Adrian Bece. "The reasons that are often cited that make container queries difficult or impossible is things like infinite loops-e.g. changing the width of an element, invalidating a container query, which changes the width again, which makes the container query take effect, etc…" https://www.smashingmagazine.com/2021/06/has-native-css-parent-selector/ The Large, Small, and Dynamic Viewports By Bramus Van Damme. "There are some changes being proposed regarding viewport units. The additions - which have already landed in the editor's draft - define several viewport sizes: the Large, Small, and Dynamic Viewport…" https://www.bram.us/2021/07/08/the-large-small-and-dynamic-viewports/ +03: COLOR. Meta Theme Color and Trickery By Manuel Matuzović. "…I never really took much note of the theme-color meta tag, but now is a good time to learn about its features and limitations and try to discover some interesting use cases…" https://css-tricks.com/meta-theme-color-and-trickery/ +04: EVALUATION & TESTING. Why 5 Participants Are Okay in a Qualitative Study, but Not in a Quantitative One By Raluca Budiu. "Qualitative usability testing aims to identify issues in an interface, while quantitative usability testing is meant to provide metrics that capture the behavior of your whole user population." https://www.nngroup.com/articles/5-test-users-qual-quant/ How to Write a Survey Question By Jeff Sauro and Jim Lewis. "…Here are seven steps to writing a survey question…" https://measuringu.com/how-to-write-a-survey-question/ +05: EVENTS. Watch Party with Ashley Bischoff: Writing With Plain Language July 14, 2021. Online https://www.meetup.com/a11yTO/events/277464654/ The Business Case for Accessibility July 20, 2021. Online https://abilitynet.org.uk/webinars/business-case-accessibility-free-webinar Accessibility Events and Resources July 21, 2021. Online https://www.meetup.com/Cleveland-Accessibility-Meetup/events/279156540/ No, React Does Not Break Accessibility July 22, 2021. Online https://www.meetup.com/Nebraska-Digital-Accessibility-Meetup/events/276128559/ Why Winn-Dixie Doesn't Matter with Ken Nakata July 22, 2021. Online https://equalentry.com/register-for-why-winn-dixie-doesnt-matter-webinar/ UX Conference July July 24-August 6, 2021. Online https://www.nngroup.com/training/july/ Designing the Future to Be Accessible July 29, 2021. Online https://aem.cast.org/get-started/events/2021/07/designing-the-future-to-be-accessible +06: HTML. The Document Outline By Manuel Matuzović. "…An advice I like to give my students is to imagine that they're writing a paper for university when they're creating the outline for a web page. A paper always needs a title, and it has just one title (

). There are usually several main chapters in a paper (

) and sometimes there are also subchapters (

-

)…" https://www.htmhell.dev/tips/the-document-outline/ Preserved in HTML By Steve Faulkner. "Sometimes useful things on the web disappear, but in some cases they are preserved in HTML by the WayBack machine. 2 such articles (written by me) from the W3C HTML Wiki are re-birthed here: * Use h1 to h6 to identify document structure * Include a heading to identify article an section elements…" https://html5accessibility.com/stuff/2021/07/08/preserved-in-html/ +07: JAVASCRIPT. JavaScript Notes & Reference By Wes Bos. "Hey! Welcome to my Beginner JavaScript Notes + Reference…" https://wesbos.com/javascript Formatting Dates and Times with Vanilla JS By Chris Ferdinandi. "Today, we're going to learn how to format dates and times into a variety of outputs. Let's dig in…" https://gomakethings.com/formatting-dates-and-times-with-vanilla-js/ How Modern JavaScript is Ruining the Web w/Chris Ferdinandi (Podcast) By Matt Lawrence and Mike Karan. "…In this episode Matt and Mike sit down with Chris Ferdinandi to discuss the current state of JavaScript and more specifically why Chris thinks that it's ruining the web as we know it…" https://dev.to/mikhailkaran/how-modern-javascript-is-ruining-the-web-w-chris-ferdinandi-5eo3 +08: NAVIGATION. Making Links Easier to See and Read on GOV.UK By Chris Ballantine-Thomas. "…Our changes help solve 2 problems with links on GOV.UK that we discovered through feedback and an accessibility audit: 1. link text could be easier to read - especially when used in long lists or headings. 2. link hover states needed to be clearer - these used a slight change in colour that some users might not easily recognise…" https://designnotes.blog.gov.uk/2021/07/07/making-links-easier-to-see-and-read-on-gov-uk/ Scroll Snap Challenges By Adrian Roselli. "Though JS-free fixed table row and column headers have been possible for quite some time, Safari's and Chrome's recent fixes got some people pretty excited. Enough that folks are copying code samples in whole, without always paying attention to necessary considerations…If you want to use scroll snap properties, test the heck out of them both with users and in browsers. And probably across the more extreme cases of your content." https://adrianroselli.com/2021/07/scroll-snap-challenges.html +09: TOOLS. Tota11y Instructions By Bruce Lawson. "To help you do a quick check of a web page for the most common accessibility errors, we have a visual tool called Tota11y. It won't catch every problem, but it will catch the most common problems that we find on Babylon sites, and highlights them in your browser window, so you can check pages while you're editing content, before they ever go live…" https://brucelawson.github.io/tota11y/instructions Sa11y 2.0 By Adam Chaboryk. "Sa11y is an open-source accessibility checker geared towards content authors. Sa11y straightforwardly identifies errors or warnings at the source with a simple tooltip on how to fix them. Sa11y highlights content-related issues, with a focus on *quality* accessibility. View project site & demo…" https://ryersondmp.github.io/sa11y/ Release notes: https://github.com/ryersondmp/sa11y/releases/tag/2.0.3 Editoria11y (Drupal Module) By John Jameson. "Editoria11y (editorial accessibility) is a user-friendly accessibility checker that addresses three critical needs for content authors…" https://www.drupal.org/project/editoria11y Isolator By Ian Lloyd. "Here's a little bookmarklet that you may find handy. It isolates a section of the page which (hopefully) makes it a little easier to interrogate/test the markup…" https://twitter.com/lloydi/status/1413439368329670659 +10: USABILITY. The Current State of Homepage UX - 8 Common Pitfalls By Sally Collins. "…Avoiding the 8 common UX issues discussed in this article is the first step toward improving users' Homepage experience…" https://baymard.com/blog/2021-current-state-of-ecommerce-homepage-ux Is it Time for Web Designers to Retire the Slider? By Eric Karkovack. "It often seems like the most popular things can also be among the most divisive. That holds true for web design, just as it does in life. One prime example of this is the slider…" https://speckyboy.com/web-designers-retire-slider/ Usability Heuristics Applied to Virtual Reality By Alita Joyce. "Jakob Nielsen's 10 usability heuristics can improve the user experience of VR applications." https://www.nngroup.com/articles/usability-heuristics-virtual-reality/ UI Modes and Modals (Video) By Raluca Budiu. "Modes can be a hidden state and lead to user errors. But they can also make a user interface more efficient by allowing the same action to have different results, depending on the situation." https://www.nngroup.com/videos/ui-modes-modals/ DesignOps Maturity (Video) By Kate Kaplan. "DesignOps maturity is currently low according to 9 metrics we collected across 500 companies with UX teams." https://www.nngroup.com/videos/designops-maturity/ +11: WEBWASTE & SUSTAINABILITY. Data Center Planned Obsolescence (Part 2) By Gerry McGovern. "If you're constantly trashing your architecture and always buying the latest, most 'efficient' stuff then of course you can parade around saying how 'efficient' you are. The fact that your wasteful behavior is hidden underneath your creative accounting, and that this behavior is accepted and almost encouraged by established media and industry (keep watching Netflix) tells us we have a world built on maximum growth, maximum waste, maximum consumption…" https://gerrymcgovern.com/data-center-planned-obsolescence-part-2/ [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 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.]