+++ WEB DESIGN UPDATE. - Volume 15, Issue 48, May 25, 2017. An email newsletter to distribute news and information about web design and development. ++ISSUE 48 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: EVENTS. 04: HTML5. 05: INFORMATION ARCHITECTURE. 06: JAVASCRIPT. 07: TOOLS. 08: TYPOGRAPHY. 09: USABILITY. SECTION TWO: 10: What Can You Find at the Web Design Reference Site? [Contents ends.] ++ SECTION ONE: New references. +01: ACCESSIBILITY. GAAD: I Wish I'd Known... By Ian Pouncey. "To celebrate Global Accessibility Awareness Day we've asked our accessibility engineers for things they wish they'd known when starting out in accessibility... https://www.paciellogroup.com/blog/2017/05/gaad-2017-i-wish-id-known/ Pragmatic Accessibility: A How-To Guide for Teams (Video) By Rob Dodson. "...This talk will explain how to effectively review a site for accessibility and how to build accessibility considerations into your team process so each team member knows their role, and has the appropriate training material. The goal is for attendees to walk away with an actionable process which they can immediately use to assess and improve their products' accessibility and overall user experience..." https://www.youtube.com/watch?v=A5XzoDT37iM Accessible Focus Management: Tab Order vs Focus Placement By Mark Magennis. "Ive been working on a video-based eLearning platform recently. We (the client and myself) seem to have tied ourselves in knots regarding how best to implement tab order and focus placement to give the most efficient user experience for sighted keyboard users and screen reader users. Having finally unravelled those knots, it all looks pretty simple really so I thought I'd share it..." http://interaccess.ie/accessible-focus-management-tab-order-vs-focus-placement/ Anatomy of an Accessible Auto Suggest By Adem Cifcioglu. "...These are my requirements to make an auto-suggest accessible. I've included code snippets throughout and linked to a working codepen at the end of the post..." http://uxmastery.com/anatomy-of-an-accessible-auto-suggest/ UX of Stairs: When Simple Tasks Aren't So Simple (Video) By Greg Tarnoff. "As a user experience professional, I work hard to consider the end user in developing products. However, without knowing it we all bring a bias to our work simply because we haven't experienced certain things others have. This bias leaves our products and users wanting...Two years ago my eyes were opened to this as I developed a disability that changed everything in my life. 'UX of Stairs' discusses the impact on my life this illness has had as well as how it opened my eyes to things in the physical and digital worlds that previously went unnoticed by me and many others... https://www.youtube.com/watch?v=TfiNP8iWDSo Quick Reference Checklist for Graphic Designers (PDF) By Tagged PDF. "Use the checklist below to ensure you are designing (PDFs)for accessibility..." http://taggedpdf.com.au/wp-content/uploads/2015/02/TaggingCheckListDesignerCopywriter.pdf Glacial Progress on Digital Accessibility By Carl Straumsheim. "Data from 700,000 classes show digital course materials have gotten only slightly more accessible to students with disabilities over the last five years..." https://www.insidehighered.com/news/2017/05/18/data-show-small-improvements-accessibility-course-materials Example Legal Action Against Inaccessible Websites By Ken Nakata. "...Organizations continuously come under fire from accessibility advocates, and recent litigation is targeting compliance with WCAG 2.0 Level A and AA..." https://insight.cryptzone.com/accessibility/example-legal-action-against-inaccessible-websites/ Website Accessibility in the United States: What Are Your Requirements Under the ADA? By Karl Groves. "...Whether or not ADA explicitly states that Websites must be accessible, one thing is for sure: The DOJ believes they should be and so do a whole pile of plaintiffs. Being proactive about accessibility turns the whole thing into a non-issue." http://www.karlgroves.com/2017/05/23/website-accessibility-in-the-united-states-what-are-your-requirements-under-the-ada/ Miami-Dade County Public Schools Settles Digital Discrimination Lawsuit By newswire.com. "Consent decree guarantees hearing impaired have equal access to closed caption video content, according to J. Courtney Cunningham, PLLC..." https://www.newswire.com/news/miami-dade-county-public-schools-settles-digital-discrimination-lawsuit-19572593 +02: CASCADING STYLE SHEETS. A Very Good Time to Understand CSS Layout By Rachel Andrew. "I've been building a set of common UI patterns for my CSS Grid resource site, Grid by Example..." https://www.rachelandrew.co.uk/archives/2017/05/24/a-very-good-time-to-understand-css-layout/ Gridded Headings By Eric A. Meyer. "In my ongoing experiments with both a realignment of meyerweb's design and CSS Grid, I came up with an interesting heading-and-subheading technique I'd like to share. It allows two elements to be centered as a block, while letting them text-align with respect to each other, while still line-wrapping if necessary." http://meyerweb.com/eric/thoughts/2017/05/19/gridded-headings/ Learn CSS Grid By Jonathan Suh. CSS Grid is a powerful tool that allows for two-dimensional layouts to be created on the web. http://learncssgrid.com/ +03: EVENTS. Web Rebels June 1-2, 2017. Oslo, Norway https://www.webrebels.org/ UX Burlington June 9, 2017. Burlington, Vermont, U.S.A. http://uxburlington.com/ Achieving Web Accessibility: Make Sure Your Online Presence Works - For Everyone June 14, 2017. Watertown, Massachusetts, U.S.A. http://www.perkins.org/get-involved/events/achieving-web-accessibility-make-sure-your-online-presence-works-for-everyone WCAG 2.0 - Operable June 21, 2017. Chicago, Illinois, U.S.A. https://www.meetup.com/a11ychi/events/233845763/ +04: HTML5. Google's Proprietary Fork of HTML Is Taking Over the Open Web By Nick Heer. "Ingrid Lunden, TechCrunch: As Google looks for ways to keep people using its own mobile search to discover content - in competition with apps and other services like Facebook's Instant Articles - the company is announcing some updates to AMP, its collaborative project to speed up mobile web pages..." https://pxlnv.com/linklog/amp-taking-over/ +05: INFORMATION ARCHITECTURE. Why IA Matters for UX - A Brief History of Information Architecture By Lucia Z.Wang. "...A well-designed wayfinding system helps us navigate a new environment in order to answer the following questions..." https://uxdesign.cc/a-brief-history-of-information-architecture-d26b17205e7b +06: JAVASCRIPT. To ARIA! The Cause of, and Solution to, All Our Accessibility Problems By Jon Whiting. "When WebAIM evaluates a client's website for accessibility, we often spend more time evaluating and reporting on ARIA use than any other issue. Almost every report we write includes a section cautioning against ARIA abuse and outlining ARIA uses that need to be corrected or, most often, removed. Ironically, this is often followed by a list of issues that can only be addressed with ARIA..." http://webaim.org/blog/aria-cause-solution/ +07: TOOLS. CADET from NCAM: Free Captioning Tool for Online Videos By Geoff Freed. "CADET is free, downloadable caption-authoring software that enables anyone to produce high-quality caption files that are compatible with any media player that supports the display of captions..." https://lists.w3.org/Archives/Public/w3c-wai-ig/2017AprJun/0178.html JavaScript Bookmarklets for Accessibility Testing By Paul J. Adam. "Bookmarklets for Accessibility Testing use JavaScript to highlight roles, states, and properties of accessibility elements on the page. They are accessible to screen reader users and work on any browser including mobile phones..." http://pauljadam.com/bookmarklets.html Announcing the BarrierBreak CSS Accessibility Extension By Shwetank Dixit. "Happy Global Accessibility Awareness Day, 2017! We see it fitting to announce a nifty little project we've been working on. It's a browser extension called the BarrierBreak CSS Accessibility Extension and you can install it in Chrome right now..." http://blog.barrierbreak.com/2017/05/18/announcing-the-barrierbreak-css-accessibility-extension/ ChromeLens By Zhi An ​NG. "ChromeLens is a Google Chrome extension that provides a suite of tools to help with web accessibility development." https://chrome.google.com/webstore/detail/chromelens/idikgljglpfilbhaboonnpnnincjhjkd?hl=en +08: TYPOGRAPHY. The Rules of Responsive Web Typography By Zell Liew. "...This article aims to provide both designers and developers with the foundation from which to begin communication on the subject of typography. We will cover necessary design principles and explore practical solutions for responsive typography..." http://www.creativebloq.com/how-to/the-rules-of-responsive-web-typography +09: USABILITY. Designing UX: Forms By Jessica Enders. "This is an excerpt from Chapter 5 of Jessica Enders's new book Designing UX: Forms." http://www.uxmatters.com/mt/archives/2017/05/designing-ux-forms.php Big Pictures on Small Screens: Remove, Resize or Reorganize By Amy Schade. "When using large-screen images on smaller screens, remove images that don't add information. Then, pay close attention to cropping, scaling and placement." https://www.nngroup.com/articles/big-pictures-small-screens/ Low-Hanging Fruits For Enhancing Mobile UX By Nick Babich. "... In today's article, I'll share seven UX design tips that I think are key for creating really great mobile user experiences..." https://www.smashingmagazine.com/2017/05/enhancing-mobile-design-ux/ Brand Vocabulary in the Context of UX: Key Terms Defined By Sarah Gibbons. "A cheat sheet of brand-related terms will help designers, developers, and product managers design experiences that reflect an organization's brand" https://www.nngroup.com/articles/ux-brand-terms-defined/ Your Digital Interface is Your Brand By Gerry McGovern. "...In the world of digital it is the digital architecture interface that creates the first and lasting impressions. Organizations need to take as much care of their digital buildings as they used to take of their physical buildings." http://gerrymcgovern.com/your-digital-interface-is-your-brand/ [Section one ends.] ++ SECTION TWO: +10: 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.]