+++ 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…" https://www.lireo.com/global-accessibility-awareness-day-2019/ 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…" https://developer.paciellogroup.com/blog/2019/05/how-do-you-test-success-criterion-1-3-5-on-mobile-applications/#update 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…" https://www.digitala11y.com/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…" https://developer.paciellogroup.com/blog/2019/05/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?…" https://commonlook.com/passed-your-accessibility-check-dont-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…" https://variety.com/2019/gaming/news/pokemon-center-company-ada-lawsuit-1203208010/ +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…" https://www.hassellinclusion.com/blog/drupal-and-wordpress-accessibility-comparison-2019/ +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…" https://measuringu.com/lostness/ +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. https://www.middevcon.com/ 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…" http://adrianroselli.com/2019/05/periodic-table-of-the-elements.html The HTML5 Treasure Hunt By Bruce Lawson. Slides from Bruce's International JavaScript Conference 2019 presneation. https://speakerdeck.com/brucel/ijs-conference +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…" https://shkspr.mobi/blog/2019/05/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." https://alistapart.com/article/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…" https://medium.com/project-ronin/4-tips-for-designing-apps-for-older-users-4246450a953c [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:lcarlson@d.umn.edu [Issue ends.]