+++ WEB DESIGN UPDATE. - Volume 16, Issue 52, June 19, 2018. An email newsletter to distribute news and information about web design and development. ++ISSUE 52 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: EVALUATION & TESTING. 05: EVENTS. 06: HTML. 07: JAVASCRIPT. 08: NAVIGATION. 09: TOOLS. 10: TYPOGRAPHY. 11: USABILITY. SECTION TWO: 12: What Can You Find at the Web Design Reference Site? [Contents ends.] ++ SECTION ONE: New references. +01: ACCESSIBILITY. Web Content Accessibility Guidelines (WCAG) 2.1 - Recommended By Alastair Campbell. "The latest update to the Web Content Accessibility Guidelines (WCAG) has now been launched and version 2.1 is now the 'recommended' version as of 5th June 2018.…" https://www.nomensa.com/blog/2018/wcag-21-accessibility-recommended New Web Content Accessibility Guidelines (WCAG) 2.1 - What, When, How By Jason Taylor. "What's the difference between version 2.1 over 2.0?…" http://blog.usablenet.com/new-web-content-accessibility-guidelines-wcag-2.1-what-when-how W3C Updates Website Accessibility Standards By Klein Moynihan Turco. "For the past four years, the World Wide Web Consortium ('W3C') has been working to update version 2.0 of the Web Content Accessibility Guidelines ('WCAG') in order to keep pace with rapid developments in the technology space…" https://www.lexology.com/library/detail.aspx?g=419a91de-ae97-4036-9e28-1e1af87f6243 What's New in WCAG 2.1? By Ricky Onsman. "WCAG 2.1 was published in its final form in June 2018…" http://intopia.digital/articles/whats-new-in-wcag-2-1/ WCAG 2.1: What Does It Actually Mean? By Robert DeLuca. "Publication as a W3C Recommendation finalizes the development process and indicates that the W3C considers the updated guidelines ready for implementation on web content…" https://frontside.io/blog/2018/06/14/what-is-new-in-wcag-2-1.html Welcome, WCAG 2.1! The Web Content Accessibility Guidelines get an update. By Becky Gibson. "Knowbility welcomes the efforts of the W3C to update WCAG to improve web accessibility for all. We are pleased to see the new WCAG 2.1 success criteria extend access to areas of disability not covered before…" https://knowbility.org/blog/2018/WCAG21-intro/ Smartphone Accessibility 201: Colors, Contrast, and Magnification, Oh My! By Kara VanRoekel. "This is article two of a series taking you through mobile accessibility basics for Android and iPhone to help get you ready to conduct an accessibility assessment on the mobile device of your choice…" https://www.levelaccess.com/part-2-colors-contrast-magnification/ Superior Court Rules Phone Calls, Email are Not Alternatives to an ADA-Compliant Website By Buckley Sandler. "…In addition to awarding $4,000 in statutory damages, the court issued an injunction to the defendants, ordering them to comply with Web Content Accessibility Guidelines 2.0 AA to ensure their website is ADA compliant." https://buckleysandler.com/blog/2018-05-31/superior-court-rules-phone-calls-email-are-not-alternatives-ada-compliant-website BECU will Restore Accessibility for Blind Customers to Its Website and Mobile Banking App By Derek Hall. "The change came after the National Federation of the Blind, its Washington affiliate and three blind individuals warned they might sue under the Americans with Disabilities Act and the Washington State Law Against Discrimination…" https://www.seattletimes.com/business/becu-will-restore-accessibility-for-blind-customers-to-its-website-and-mobile-banking-app/ +02: CASCADING STYLE SHEETS. Resilient, Declarative, Contextual By Keith J Grant. "…I want to look at three key characteristics of CSS that set it apart from conventional programming languages: it's resilient; it's declarative; and it's contextual. Understanding these aspects of the language, I think, is key to becoming proficient in CSS…" https://keithjgrant.com/posts/2018/06/resilient-declarative-contextual/ A Comprehensive Guide to Flexbox Alignment By Anna Monus. "Alignment is probably the most confusing aspect of flexbox…" https://webdesign.tutsplus.com/tutorials/a-comprehensive-guide-to-flexbox-alignment--cms-30183 The Firefox Shape Path Editor (Video) By Jen Simmons. "…The Firefox Shape Path Editor is a tool you can use in Firefox 62 or later to help you edit the basic shape in CSS…" https://www.youtube.com/watch?v=w8pksaGhjfA Creating a RevealJS clone with CSS Scroll Snap Points By Nicolas Hoffmann. "I wanted to test this CSS module for a long time (and some other things), I had the opportunity to do it with my slides for Sud Web 2018. Here is a return of experience…" https://medium.com/@Nico3333fr/creating-a-light-revealjs-clone-with-css-scroll-snap-points-306dfba71652 +03: COLOR. Considering Colour Blindness in UX Design (with five examples) By Lizzy Hillier. "Despite it affecting approximately one in 12 men and one in 200 women, colour blindness is often disregarded when designing for optimum user experience and accessibility…" https://econsultancy.com/blog/70084-considering-colour-blindness-in-ux-design-with-five-examples/ +04: EVALUATION & TESTING. The Three Essential Sources of Customer Insight By Gerry McGovern. "To truly understand customers it is essential to combine insights from the following research methods: Quantitative, Observational, Qualitative…" http://gerrymcgovern.com/the-three-essential-sources-of-customer-insight/ How to Test Visual Design By Kathryn Whitenton. "When evaluating fonts, colors, and other visual details, assess both aesthetic impressions and behavioral effects." https://www.nngroup.com/articles/testing-visual-design/ 10 Things to Know About the SUPR-Q By Jeff Sauro. "The SUPR-Q (Standardized User Experience Percentile Rank Questionnaire) is a standardized questionnaire that measures the quality of the website user experience…" https://measuringu.com/10-things-suprq/ +05: EVENTS. Who Teaches About Accessibility in Computing Courses? June 28, 2018. Online. http://easi.cc/clinic.htm Summer of WCAG 2.1 (Part 2) July 9, 2018. Boulder, Colorado, U.S.A. https://www.meetup.com/a11yFR/events/251445405/ Document Accessibility, Part 1: Word Accessibility and PDF Accessibility, Fundamentals July 17, 2018. Austin, Texas, U.S.A. https://www.microassist.com/instructor-led-training/accessibility-for-document-creators-2/ Putting WCAG 2.1 Into Practice July 30, 2018. Minneapolis, Minnesota, U.S.A. https://www.meetup.com/Accessibility-Twin-Cities/events/251015529/ Inclusive Design 24 (#ID24) October 11, 2018. Online. https://www.inclusivedesign24.org/ ARIA: What, Why and When Online. October 11, 2018. http://www.accessibilityassociation.org/content.asp?contentid=520 Interact London October 17, 2018. London, England, United Kingdom https://2018.interactconf.com/ World Usability Congress October 17-18, 2018. Graz, Austria https://worldusabilitycongress.com/ +06: HTML. Anatomy of Accessible Forms! Placeholder is a Mirage By Raghavendra Satish Peri. "…we will see why using a placeholder is not great from the accessibility stand & what needs to be done to use a placeholder attribute successfully…" https://www.digitala11y.com/anatomy-of-accessible-forms-placeholder-is-a-mirage/ +07: JAVASCRIPT. Hiding Complexity Through JavaScript Show/Hide Elements By Tom Johnson. "Principle: If you can't delete information to reduce complexity, look for ways to hide less-used information on the screen through JavaScript techniques, such as show/hide elements, expand/collapse toggles, navtabs, tooltips, and more…" http://idratherbewriting.com/simplifying-complexity/hiding-complexity.html +08: NAVIGATION. 5 Steps for Effective Diary Studies in Customer Journey Research (Video) By Kim Flaherty. "Diary studies are a longitudinal research method used to understand user interactions at different touchpoints, which is especially useful for omnichannel user research. Participants record their reactions as experiences unfold throughout the customer journey. " https://www.nngroup.com/videos/5-steps-diary-studies/ Show Me the Way to Go Anywhere - Navigation for Mobile Applications By Interaction Design Foundation. "It doesn't matter how great the functions and content, that your mobile apps serve, are - if your user can't find them, they aren't going to contribute to a great user experience…" https://www.interaction-design.org/literature/article/show-me-the-way-to-go-anywhere-navigation-for-mobile-applications +09: TOOLS. Color Tool By Material Design. Create, share, and apply color palettes to your UI, as well as measure the accessibility level of any color combination. https://material.io/tools/color/ +10: TYPOGRAPHY. Golden Rules of Typography on the Web By Richard Rutter. "Typography is what comes between the author and the reader. This is as true on the web as it is in any other medium. If a text has anything at all significant to say, it needs a typographer's care, which will in turn be repaid by the reader's attention. If you design websites or use CSS then you are a typographer whether you know it or not…" https://noti.st/rar/mz1rIY +11: USABILITY. Personalization versus Customization (Video) By Lexie Martin. "Users expect that the content they see will be relevant to their individual needs. Personalization and customization are techniques that can help you ensure that users see what matters to them." https://www.nngroup.com/videos/personalization-customization/ The Impact of Voice in UX Design: And What To Do About It By Jolina Landicho. "…for web and application designers, voice interaction represents, perhaps, the biggest UX challenge since the dawn of the touchscreen age…" http://www.uxbooth.com/articles/impact-of-voice-in-ux-design/ How You Can Aid User Scanning by Using Eyebrow Headlines By Anthony Tseng. "An eye-tracking study found that most users don't read entire headlines. Instead, they scan the left sides of headlines and only read the first few words…" http://uxmovement.com/content/how-you-can-aid-user-scanning-by-using-eyebrow-headlines/ My Head Hurts! Cognitive Friction in the Age of Mobile By Interaction Design Foundation. "…Cognitive friction occurs when the cues don't match our expectations. Learning to avoid cognitive friction in UI design can help make the user experience (UX) of products greater…" https://www.interaction-design.org/literature/article/my-head-hurts-cognitive-friction-in-the-age-of-mobile Experiments in Loading - How Long Will You Wait? By Ian Tate. "…Despite some individual variation, novel loaders as a whole had a higher wait time and lower abandon rate than generic ones…" https://www.viget.com/articles/experiments-in-loading-how-long-will-you-wait/ [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.]