+++ WEB DESIGN UPDATE. - Volume 16, Issue 25, December 14, 2017. An email newsletter to distribute news and information about web design and development. ++ISSUE 25 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: EVALUATION & TESTING. 04: EVENTS. 05: HTML. 06: INFORMATION ARCHITECTURE. 07: MISCELLANEOUS. 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. Final WCAG 2.1 Working Draft By Michael Cooper. "The Accessibility Guidelines Working Group has published a final Working Draft of Web Content Accessibility Guidelines (WCAG) 2.1 for wide review…" https://www.w3.org/TR/2017/WD-WCAG21-20171207/ WCAG 2.1 and Silver (AG): What is Next for Accessibility Guidelines By Glenda Sims. "Are you staying on top of your digital accessibility game? Don't be caught by surprise that a new version of W3C's Web Content Accessibility Guidelines (WCAG) is on the horizon…" https://www.24a11y.com/2017/wcag-2-1-silver-ag-next-accessibility-guidelines/ WCAG 2.1: The Final List of Candidate Success Criteria is Here By David MacDonald. "After 4 years of work, much research and public input, we're releasing our draft for wide review (this used to be called Final Draft) befor moving into Candidate Recommendation for WCAG 2.1. We will not be reviewing any more Success Criteria for WCAG 2.1…" http://davidmacd.com/blog/wcag-2.1-quick-guide.html Future Accessibility: a First Look at WCAG 2.1 (Video) By Alastair Campbell. https://www.youtube.com/watch?v=-pXtl8RTNwg How to Design an Accessible Web By Henny Swan. "Discover how the Inclusive Design Principles make apps and sites more usable for disabled users…" http://www.creativebloq.com/features/how-to-design-an-accessible-web Cognitive Accessibility Roadmap and Gap Analysis First Working Draft By Michael Cooper. "The Accessible Platform Architectures and Accessibility Guidelines Working Groups have published a first Working Draft of Cognitive Accessibility Roadmap and Gap Analysis…" https://lists.w3.org/Archives/Public/w3c-wai-ig/2017OctDec/0238.html A Developer's Guide to Better Accessibility By Melanie Sumner and Sean Massa. "Sean Massa and Melanie Sumner illustrate some core best practices that developers can take to make their work more accessible, test your code while developing, and some support resources." https://www.24a11y.com/2017/a-developers-guide-to-better-accessibility/ Web Accessibility: What You Say vs. What I Hear By Mikey Ilagan. "Issues identified through assistive technology such as screen readers are often treated as bugs-backlogged and forgotten in lieu of new feature development. Let me be clear: I think looking at accessibility this way is all wrong…" https://www.thinkcompany.com/2017/12/web-accessibility-what-you-say-what-i-hear/ Shifting from Fear to Motivation when Talking about Digital Accessibility Law By Lainey Feingold. "Lainey Feingold illustrates how the law can help make accessibility an integral way of doing business and how it is so much more than a legal obligation." https://www.24a11y.com/2017/shifting-fear-motivation-talking-digital-accessibility-law/ +02: CASCADING STYLE SHEETS. Styling Components - Typed CSS With Stylable By Bruce Lawson. "There's been a lot of debate recently about how best to style components for web apps so that styles don't accidentally 'leak' out of the component they're meant for, or clash with other styles on the page…" https://24ways.org/2017/styling-components-typed-css-with-stylable/ Tweaking Text Level Styles By Adrian Roselli. "This post is building on the post Short note on making your mark (more accessible) by Steve Faulkner at the Paciello Group blog…" http://adrianroselli.com/2017/12/tweaking-text-level-styles.html Design Systems and CSS Grid By Stuart Robson. "…Looking at the first couple of sketch files I felt this would be a great opportunity to use CSS Grid, to me the newer components need to be laid out on that page and grid would help with this perfectly…" https://24ways.org/2017/design-systems-and-css-grid/ Debugging CSS Grid Layouts With Firefox Grid Inspector By Chen Hui Jing. "…One of the things I had to wrap my head around was the fact that the grid we define on the grid container is not visible. You can apply borders to your grid items, but you cannot apply a border to your grid lines to see them. This is when a DevTools function like Grid Inspector comes in really handy…" https://www.smashingmagazine.com/2017/12/grid-inspector/ Understanding CSS Layout And The Block Formatting Context By Rachel Andrew. "There are a few concepts in CSS layout that can really enhance your CSS game once you understand them. This article is about the Block Formatting Context (BFC)…" https://www.smashingmagazine.com/2017/12/understanding-css-layout-block-formatting-context/ Getting Hardboiled with CSS Custom Properties By Andy Clarke. "Custom Properties have brought variables natively to CSS. How do you write a custom property? It's hardly a mystery. Simply add two dashes to the start of a style rule. Like this…" https://24ways.org/2017/getting-hardboiled-with-css-custom-properties/ +03: EVALUATION & TESTING. Writing Automated Tests for Accessibility By Marcy Sutton. "…Marcy Sutton explains that while automated tests for accessibility are no substitute for regular manual testing and testing with actual users, they can help free up your team a bit while communicating code quality to members of your team and potentially prevent regressions from deploying to production." https://www.24a11y.com/2017/writing-automated-tests-accessibility/ Automating Your Accessibility Tests By Seren Davies. "Seren Davies reminds us that unlike Christmas, accessibility testing should not come but once a year with a look at how to apply automated testing. By configuring tests to run against each commit, you can ensure that your site's accessibility compliance need not be left to chance." https://24ways.org/2017/automating-your-accessibility-tests/ +04: EVENTS. AssertJS Conf February 22, 2018. San Antonio, Texas, U.S.A. https://www.assertjs.com/ ConveyUX '18 February 27-March 1, 2018. Seattle, Washington, U.S.A. http://conveyux.com/ UX Immersion: Interactions March 5-7, 2018. Newport Beach, Califorina, U.S.A. https://uxi.uie.com/ ConFoo Montreal March 7-9, 2018. Montreal, Quebec Canada https://confoo.ca/en/yul2018 +05: HTML. Role="text" is (presently) Kinda Not a Thing, Sorta. By Scott O'Hara, Nicolas Steenhout. "It's a perfect example of a developer trying to make something accessible (appreciate the effort), but unfortunately it widely misses the mark on what one should be doing with ARIA attributes." http://incl.ca/roletext-presently-kinda-not-thing-sorta/ +06: INFORMATION ARCHITECTURE. How to Avoid Bias in Card Sorting (Video) By Kathryn Whitenton. "The items included in card sort studies affect results. Avoid bias by choosing items that proportionately represent your offerings." https://www.nngroup.com/videos/bias-card-sorting/ 12 Wireframe Examples from Some of our Favorite UX Designers By Kristin Hillery. "At the very beginning of the design process, we know it's tempting to dive right into picking fonts and colors. But there are a ton of benefits to kicking things off with wireframing-it saves time, makes it easier to spot usability issues, and lets designers focus on creating a solid user experience…" https://www.invisionapp.com/blog/wireframe-examples/ +07: MISCELLANEOUS. Origin Story By Jeremy Keith. "…To say that the web was made for sharing documents is like saying that the internet was made for email. It's true in the sense that it was the most popular use case, but that never defined the limits of the system…" https://adactio.com/journal/13187 How to Deal With Bad Design Suggestions By Kara Pernice and Kathryn Whitenton. "Gracefully respond to unsolicited design ideas, and prevent them from derailing good design. Turn them into UX learning experiences." https://www.nngroup.com/articles/bad-design-suggestions/ Meet Bruce Lawson, the British Web Warrior Who Draws his Inspiration from India By Alok Soni. "Bruce Lawson is sometimes known as Salman Khan of the UK in the tech community, owing to his love for Bollywood…" https://yourstory.com/2017/12/techie-tuesdays-bruce-lawson/ How Accessibility Saved My Professional Life By Dennis Deacon. "Dennis Deacon shares the story of his journey into accessibility and the life-changing moments that altered his professional career in a positive way." https://www.24a11y.com/2017/how-accessibility-saved-my-professional-life/ +10: NAVIGATION. How To Use Underlined Text To Improve User Experience By Nick Babich. "…In this article, I'll explain the concept of underlining and provide a few tips on how to use it to improve the web experience…" https://www.smashingmagazine.com/2017/12/underlined-text-improve-ux/ +08: TOOLS. Focus Order Favlet By Jonathan Avila. "Indicates focus order of the current document (excludes content inside iframes). Add the link below to your favorites or bookmarks -- in Chrome you can drag and drop it onto the bookmarks toolbar." https://labs.ssbbartgroup.com/index.php/Focus_Order_Favlet +09: TYPOGRAPHY. Accessibility in Resizing Text By Tim Wright. "Tim Wright discusses the impact that preventing text resizing on your sites has on mobile commuters and how small touches and looking at a problem a little differently can often be the difference between users returning and not coming back." https://www.24a11y.com/2017/accessibility-resizing-text/ Web Fonts are Critical to the Online User Experience - Don't Hurt Your Reader's Eyes By Interaction Design Foundation. "Bill Gates said; 'Content is King' and when it comes to the online user experience it is the 100% truth. Delivering a great user experience doesn't just mean delivering great content - it also means providing that content in a usable and useful format that encourages reading and interaction rather than clicking out of the site because it's unreadable…" https://www.interaction-design.org/literature/article/web-fonts-are-critical-to-the-online-user-experience-don-t-hurt-your-reader-s-eyes +10: USABILITY. How Do You Convince a Company that Tames Dinosaurs to Design Inclusively? By Dominic Berry. "Dominic Berry presents accessibility from an unlikely industry, and how to get the word out that accessibility makes usability better." https://www.24a11y.com/2017/convince-company-tames-dinosaurs-design-inclusively/ Usability Heuristics That All UI Designers Should Know By Steven Douglas. "As UI designers, we are confronted with design problems every day. Knowing how best to tackle these issues means investigating, analysing, testing and prototyping solutions until we get the answer that fits our user's needs…" https://usabilitygeek.com/usability-heuristics-ui-designers-know/ Variations on Practiced Patterns Cause Mistakes By Aurora Harley. "Past experiences and repeated practice inform user expectations. Deviations from a learned routine lead to user errors." https://www.nngroup.com/articles/practiced-patterns-mistakes/ A Crash Course in Content Design By Melanie Seibert. "…Content Design is when we are designing any type of content for the interface…" http://uxmas.com/2017/a-crash-course-in-content-design/ World Usability Day 2017 (Videos) By University of Minnesota. Videos and slides from the University of Minnesota's Usability Day are available online. The theme was "Inclusion through User Experience". https://it.umn.edu/world-usability-day-2017 [Section one ends.] ++ SECTION TWO: +11: 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.]