+++ WEB DESIGN UPDATE. - Volume 15, Issue 49, June 1, 2017. An email newsletter to distribute news and information about web design and development. ++ISSUE 49 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: BOOKS. 03: CASCADING STYLE SHEETS. 04: EVALUATION & TESTING. 05: EVENTS. 06: HTML5. 07: JAVASCRIPT. 08: MISCELLANEOUS. 09: NAVIGATION. 10: USABILITY. 11: XML. SECTION TWO: 12: What Can You Find at the Web Design Reference Site? [Contents ends.] ++ SECTION ONE: New references. +01: ACCESSIBILITY. Design Before Code: Thinking About Accessibility from the Ground Up - Part 2 By Caitlin Geier. "...This post will offer technical guidance on some of the practical issues of building accessibility into your design process, and I'll take a deeper look into elements that need more thought in the design phase, including some advice on using pattern libraries to help with accessibility..." https://www.deque.com/blog/design-before-code-part-2/ Floating Labels are a Bad Idea By Adam Silver. "After writing Placeholders are Problematic some people suggested the floating label pattern. We are often seduced by novel patterns that save space but this pattern is a bad idea. Here's why..." https://medium.com/simple-human/floating-labels-are-a-bad-idea-82edb64220f6 Best Practices for Creating Accessible Video for Blind and Low-Vision Viewers By: Elisa Edelberg. "When recording video content - whether it be a lecture in front of a large audience, a small presentation in a meeting, or a movie trailer - there are several best practices to make adding audio description easier, or even alleviate the need for audio description altogether..." http://www.3playmedia.com/2017/05/12/best-practices-for-creating-accesible-video-for-blind-and-low-vision-viewers/ How to Add Captions or Subtitles to a Video By Ryan Knott. "People who are deaf or hard of hearing rely on captions (or subtitles) to understand your video's content. But there are a lot of other great reasons for using them, as well..." https://blogs.techsmith.com/tips-how-tos/add-captions-subtitles-video/ User Facing State By Scott O'Hara. "...The main thing I want you to take away from all of this is that if you are only toggling classes to visually manage state of your components, you are likely not appropriately conveying that state to users of assistive technologies. You need to be using the appropriate elements (s are your friend!), and managing the appropriate attributes and their values to make truly accessible user experiences..." https://css-tricks.com/user-facing-state/ Target Size: Screenshots With Target Boundaries By Detlev Fischer. "What would happen if target size became a new WCAG Success Criterion..." http://www.3needs.org/en/testing/target-size.html Accessibility and the Self-Organizing Team By Justin Stockton. "...Once the team has a better understanding of what accessibility is and how it effects their role, it is usually much easier to get them to take on accessibility related tasks..." https://www.paciellogroup.com/blog/2017/05/accessibility-and-the-self-organizing-team/ +02: BOOKS. Coady, Geri. Color Accessibility Workflows, A Book Apart, 2017. +03: CASCADING STYLE SHEETS. An Introduction to CSS Grid By Charlotte Jackson. "I recently ran a class at work to introduce some of my colleagues to CSS Grid..." http://www.lottejackson.com/learning/an-intro-to-css-grid +04: EVALUATION & TESTING. Lab Testing Beyond Usability: Challenges and Recommendations for Assessing User Experiences By Carine Lallemand and Vincent Koenig. "...Results indicate that the laboratory setting has a strong impact on the participants' perceived UX, and support a discussion of the quality and limitations of laboratory evaluations regarding UX assessment..." http://www.uxpajournal.org/lab-testing-beyond-usability/ To Intervene or Not to Intervene: An Investigation of Three Think-Aloud Protocols in Usability Testing By Obead Alhadreti and Pam Mayhew. "...In this paper, we have compared the performance of the traditional concurrent think-aloud method with two interactive versions of the method:.." http://www.uxpajournal.org/intervene-think-aloud-protocols-usability-testing/ How to Turn UX Research Into Results By Cindy McCracken. "...with a little preparation, it's a straightforward process to turn your research insights into real results..." http://uxmastery.com/how-to-turn-ux-research-into-results/ 5 Techniques to Identify Clusters In Your Data By Jeff Sauro. "...The process involves examining observed and latent (hidden) variables to identify the similarities and number of distinct groups. Here are five ways to identify segments..." https://measuringu.com/identify-clusters/ Eye Tracking in Retrospective Think-Aloud Usability Testing: Is There Added Value? By Fatma Elbabour, Obead Alhadreti, Pam Mayhew. "...One of the most popular usability testing methods is known as the think-aloud protocol, which as the name implies refers to the act of verbalizing thoughts of a certain cognitive process. ..." http://www.uxpajournal.org/value-eye-tracking-think-aloud-usability-testing/ Demystifying Website Heat Maps: A Complete Guide for Enterprise Buyers By Rory Gallagher. "Heat maps: It's probably the broadest, most popular category of insight tools available to any company that wants to understand and improve the user experience on their website..." http://www.eyequant.com/blog/demystifying-website-heat-maps +05: EVENTS. We RISE Women in Tech Conference June 23-24, 2017. Atlanta, Georgia, U.S.A. https://werise.tech/ TypeCon August 23-27, 2017. Boston, Massachusetts, U.S.A. http://typecon.com/ Pacific Northwest PHP September 7-9, 2017. Seattle, Washington, U.S.A. http://pnwphp.com/ Generate London September 20-22, 2017. London, England, United Kingdom https://www.generateconf.com/london NCDevCon October 7-8, 2017. Raleigh, North Carolina, U.S.A. http://ncdevcon.com/ Interact London October 18, 2017. London, England, United Kingdom http://2017.interactconf.com/ +06: HTML5. HTML5: Where the Core Web Technology is Headed Now By Paul Krill. "The staple of the open web platform, the HTML5 standard is undergoing both incremental and fundamental change..." http://www.infoworld.com/article/3198460/web-development/html5-where-the-core-web-technology-is-headed-now.html Under-Engineered Custom Radio Buttons and Checkboxen By Adrian Roselli. "I keep seeing overly-complex controls with additional elements as style hooks, scripting to make up for non-semantic replacements, images that need to be downloaded, and so on..." http://adrianroselli.com/2017/05/under-engineered-custom-radio-buttons-and-checkboxen.html +07: JAVASCRIPT. I'd Like To Talk To You About ARIA Abuse From A Screen Reader User's Perspective By Amanda Rush. "As a screen reader user, I've seen abuses that make me want to strangle developers. I think the worst abuse I've ever come across, (and I'm sorry I can't find it again to provide a demonstration of it), was one where role='alert' was used to deliver advertisements and calls to action on a website..." https://www.customerservant.com/aria-abuse-users-perspective/ Managing State in CSS with Reusable JavaScript Functions - Part 2 By Luke Harrison. "...In this article, I'll be providing some solutions to these shortcomings, as well as baking in more features and general improvements to make our reusable function even more powerful..." https://css-tricks.com/managing-state-css-reusable-javascript-functions-part-2/ What Is Event Bubbling in JavaScript? Event Propagation Explained By Giulio Mainardi. "Event bubbling is a term you might have come across on your JavaScript travels. It relates to the order in which event handlers are called when one element is nested inside a second element, and both elements have registered a listener for the same event (a click, for example)..." https://www.sitepoint.com/event-bubbling-javascript/ +08: MISCELLANEOUS. The Revolution Will Not Be Handheld By Gerry Gaffney. "...changes are occurring that seem likely to challenge the hegemony of the handheld device. Perhaps it's a good time to look up from our screens and take in our surroundings..." http://www.uxpajournal.org/revolution-not-handheld/ Designing and Debugging with Ducks in Your Web Projects By Daniel James. "If you keep up with the jargon within the web development and design industry it's likely that at some point you will have come across the term "duck" at least once or twice. Apart from it being fun to feed bread to them, ducks in the web industry hold at least two completely different meanings." https://css-tricks.com/designing-debugging-ducks-web-projects/ +09: NAVIGATION. Why Headings and Landmarks are so Important (Video) By Rob Dodson. "Today, I want to talk about headings and landmarks...the importance that they play in accessible navigation..." https://www.youtube.com/watch?v=vAAzdi1xuUY The 5 Steps of Successful Customer Journey Mapping By Kate Kaplan. 'Five key steps comprise a standardized framework for customer journey mapping that can be scaled to any scope or timeline." https://www.nngroup.com/articles/customer-journey-mapping-process/ Design Trend: Side Navigation Is Everywhere, but Does It Work? By Carrie Cousins. "There's a trending topic in website design navigation: sidebar menus. More designers are working with vertical side navigation for projects, with a specific location on the left side for many of these website designs." https://designshack.net/articles/navigation/side-navigation-trend/ +10: USABILITY. Better Form Design: One Thing Per Page (Case Study) By Adam Silver. "In 2008, I worked on Boots.com. They wanted a single-page checkout with the trendiest of techniques from that era, including accordions, AJAX and client-side validation..." https://www.smashingmagazine.com/2017/05/better-form-design-one-thing-per-page/ Product Page UX: All Products Need at Least One 'In Scale' Image (28% Get It Wrong) By Christian Holst. "Our testing shows that 42% of users will try to grasp the size of a product though the product page images, but without an 'In Scale' image this becomes needlessly difficult and inaccurate." https://baymard.com/blog/in-scale-product-images +11: XML. Stuff at the Top of an SVG By Peter Nowell. "If you've ever opened up an SVG file to look at the code, you've probably thought to yourself: 'What's all that stuff at the top?..." https://medium.com/@pnowelldesign/stuff-at-the-top-of-an-svg-f3ad198eb54e [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.]