+++ WEB DESIGN UPDATE. - Volume 15, Issue 35, February 23, 2017. An email newsletter to distribute news and information about web design and development. ++ISSUE 35 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: DRUPAL. 04: EVALUATION & TESTING. 05: EVENTS. 06: HTML5. 07: JAVASCRIPT. 08: MISCELLANEOUS. 09: NAVIGATION. 10: STANDARDS, GUIDELINES & PATTERNS. 11: TOOLS. 12: TYPOGRAPHY. 13: USABILITY. SECTION TWO: 14: What Can You Find at the Web Design Reference Site? [Contents ends.] ++ SECTION ONE: New references. +01: ACCESSIBILITY. Four Levels of Accessibility Customisation By Alastair Campbell. "There are some interesting discussions on customisation going on with the work on WCAG 2.1, the much anticipated (I hope) update to the Web Content Accessibility Guidelines..." https://alastairc.ac/2017/02/four-levels-of-accessibility-customisation/ Today, I Learned About the Accessibility Tree By Michael Schofield. "The accessibility tree and the DOM tree are parallel structures..." http://libux.co/today-learned-accessibility-tree/ An Overview of PDF Inaccessibility By Jon Metz. "There's a lot of help online about making Portable Document Format (PDF) accessible. Even with all the advice out there, I still encounter people who find it difficult to make their documents friendly to people with disabilities..." https://www.paciellogroup.com/blog/2017/02/pdf-inaccessibility/ Not All Screen Reader Users Are Blind By Adrian Roselli. "The title says it all...the best approach to making a web site accessible (to screen readers or not) is by using proper HTML. If done well, ARIA is only needed for complex controls (tabs, trees, carousels, ...). Screen reader users still benefit the same way sighted users do from hidden elements, particularly visual (and in this case auditory) assaults such as mega menus." http://adrianroselli.com/2017/02/not-all-screen-reader-users-are-blind.html Learn How to Use ChromeVox Next Screen Reader (Videos) By Deborah Edwards-Onoro. "...One of the new features I think many people may have overlooked in Chrome 56 was the new ChromeVox screen reader..." https://www.lireo.com/learn-to-use-chromevox-next-screen-reader-videos/ Modal Dialogs and Accessibility: A Tricky Minefield By Shwetank Dixit. "...One of the most common pain points we find are inaccessible modal dialogs..." http://blog.barrierbreak.com/2017/02/14/modal-dialogs-and-accessibility-a-tricky-minefield/ Utilitarianism, Pragmatism/ Practicalism, and Perfection By Karl Groves. "I feel strongly that every person has an intrinsic sense of what is 'right' and what is 'wrong'..." http://www.karlgroves.com/2017/02/21/utilitarianism-pragmatism-practicalism-and-perfection/ +02: CASCADING STYLE SHEETS. Deep Dive CSS: Font Metrics, line-height and vertical-align By Vincent De Oliveira. "Line-height and vertical-align are simple CSS properties. So simple that most of us are convinced to fully understand how they work and how to use them. But it's not. They really are complex, maybe the hardest ones, as they have a major role in the creation of one of the less-known feature of CSS: inline formatting context..." http://iamvdo.me/en/blog/css-font-metrics-line-height-and-vertical-align Updated Working Drafts: CSS Display, CSS Sizing, CSS Box Alignment By Tab Atkins Jr. "The CSS Working Group has published several updated Working Drafts..." https://www.w3.org/blog/CSS/2017/02/17/display-sizing-align-update/ A Box Alignment Cheatsheet By Rachel Andrew. "...I'm doing a lot of work around the CSS Grid Layout and related specifications, and have created some detailed notes for myself about how various things work and interact with each other..." https://www.rachelandrew.co.uk/archives/2017/02/20/a-box-alignment-cheatsheet/ Toolbars, Keyboards, and the Viewports By Peter-Paul Koch. "All mobile browsers have two viewports. The layout viewport constrains your CSS - width: 100% means 100% of the layout viewport - while the visual viewport describes the area of the page the user is currently seeing. This visualisation of the two viewports might be useful as a reminder. Today's article studies what happens when these viewports change size. It also studies the resize event..." https://medium.com/samsung-internet-dev/toolbars-keyboards-and-the-viewports-10abcc6c3769 +03: DRUPAL. Drupal 8's Web Accessibility Improvements By Rich Lawson. "...Drupal 8 comes packed with loads of new web accessible features that help people with disabilities drastically improve their website navigation..." https://thoughts.duoconsulting.com/blog/drupal-8-web-accessibility-improvements +04: EVALUATION & TESTING. 5 Steps to Quick-Start A/B Testing By Jennifer Leigh Brown. "The debate was about the best color for the toolbar on the webpage..." http://www.uxbooth.com/articles/5-steps-to-quick-start-ab-testing/ +05: EVENTS. State of UX: Trends in Tools and Techniques March 9, 2017. Minneapolis, Minnesota, U.S.A. http://uxpamn.org/event-2471158 JS Remote Conf March 15-16, 2017. Online https://devchat.tv/conferences/js-remote-conf-2017 Midwest PHP March 17-18, 2017. Bloomington, Minnesota, U.S.A. http://2017.midwestphp.org/ UX in the City Oxford March 20-21, 2017. Oxford, England, United Kingdom. http://uxinthecity.net/2017/oxford/ Front May 9-10, 2017. (Correct date) Salt Lake City, Utah, U.S.A. https://www.frontutah.com/saltlakecity +06: HTML5. Accessible Form Placeholder Text By Zoltan Hawryluk. "...I personally am not a huge fan of placeholder text, and avoid them whenever possible (the simplest solutions are the ones easiest to implement). Any form field hints should be marked up using aria-labelledby instead. However, if for some reason you really need to use placeholder text, this script is a good tool to have in your back pocket" http://www.useragentman.com/blog/2017/02/20/accessible-form-placeholder-text/ Beyond XML: Making Books with HTML By Dave Cramer. "An overview of Hachette's trade book publishing system." https://www.xml.com/articles/2017/02/20/beyond-xml-making-books-html/ +07: JAVASCRIPT. JavaScript Without Loops By James Sinclair. "...These iteration functions are a great example of why (well-chosen) abstractions are so useful and elegant..." http://jrsinclair.com/articles/2017/javascript-without-loops/ JavaScript's Journey Through 2016 By Tara Manicsic. "...Every year there seems to be more and more ways to use JavaScript and 2016 turned out to be no different..." http://developer.telerik.com/topics/web-development/javascripts-journey-2016/ +08: MISCELLANEOUS. What is a Web Developer? By Peter-Paul Koch. "Last week I was the target of a good old-fashioned internet witch hunt when I dared to propose that you should be able to work without tools (frameworks, libraries, and so on) in order to be a web developer..." http://www.quirksmode.org/blog/archives/2017/02/what_is_a_web_d.html On Design Tools and Processes By Viljami Salminen. "...Our design products are becoming more and more dynamic, but our tools still treat them as blank canvases to paint on. Why?..." https://viljamis.com/2017/design-tools-processes/ The Secret History of Hypertext By Alex Wright. "The conventional history of computing leaves out some key thinkers..." https://www.theatlantic.com/technology/archive/2014/05/in-search-of-the-proto-memex/371385/ +09: NAVIGATION. Hamburger Menus Hurt UX Metrics (Video) By Kara Pernice. "Summary of user research on the effect of reduced visibility of the main navigation on websites when used in both mobile and desktop settings." https://www.youtube.com/watch?v=rdeoPuPzONg +10: STANDARDS, GUIDELINES & PATTERNS. Validating HTML5 Documents By Louis Lazaris. "... the validator will let you know if your markup conflicts with the specification, so it's still a valuable tool when developing your pages..." https://www.sitepoint.com/validating-html5-documents/ +11: TOOLS. WAVE Accessibility Extension 1.0.3 (FireFox Extension) By WebAIM. The WAVE FireFox Extension is back: "Evaluate web accessibility within the Firefox browser. When activated, the WAVE extension injects icons and indicators into your page to give feedback about accessibility and to facilitate manual evaluation." https://addons.mozilla.org/en-US/firefox/addon/wave-accessibility-tool/ +12: TYPOGRAPHY. Getting Started with Variable Fonts By Richard Rutter. "The following is an unedited extract from my forthcoming book..." http://clagnut.com/blog/2389/ Introducing OpenType Variable Fonts By John Hudson. "Version 1.8 of the OpenType font format specification introduces an extensive new technology, affecting almost every area of the format. An OpenType variable font is one in which the equivalent of multiple individual fonts can be compactly packaged within a single font file..." https://medium.com/@tiro/https-medium-com-tiro-introducing-opentype-variable-fonts-12ba6cd2369 +13: USABILITY. Beyond Usability: 3 User Experiences Reshaping Their Industries By Sarah Gibbons. "Rent the Runway, Uber, and Airbnb challenge the traditional experiences of their industries." https://www.nngroup.com/articles/3-user-experiences-reshaping-industries/ Narrative Biases: When Storytelling HURTS User Experience By Kathryn Whitenton. "Over reliance on narrative details and assumptions about cause-and-effect explanations can lead to errors in judgment by UX practitioners." https://www.nngroup.com/articles/narrative-biases/ The UX of Voice: The Invisible Interface By Jason Amunwa. '...In this post, we're going to explain some of the profound implications of the rise of voice interaction for UX design. Just as the internet began as a playground of raw new technical capability that embraced the guiding principles of intuitive, user-friendly product design over time, so too I see today's voice-enabled tools and devices in their infancy, with limitless potential ready to be unlocked through innovative, user-centered design..." http://www.dtelepathy.com/blog/design/the-ux-of-voice-the-invisible-interface How to Not Utterly Ruin Your Mobile App's User Interface By Luke Konior. "...I've seen every one of these mistakes made by designers of all levels of experience. There's no shame in that - a good UI design is a multifaceted challenge, and it's easy to overlook some aspects of it..." https://medium.freecodecamp.com/how-to-not-utterly-ruin-your-mobile-apps-user-interface-8433cee6477d [Section one ends.] ++ SECTION TWO: +14: 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.]