+++ WEB DESIGN UPDATE. - Volume 18, Issue 51, June 17, 2020. An email newsletter to distribute news and information about web design and development. ++ISSUE 51 CONTENTS. SECTION ONE: New references. What's new at the Web Design Reference site? https://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: NAVIGATION. 07: USABILITY. SECTION TWO: 08: What Can You Find at the Web Design Reference Site? [Contents ends.] ++ SECTION ONE: New references. +01: ACCESSIBILITY. Building the Woke Web: Web Accessibility, Inclusion & Social Justice By Olu Niyiawosusi. "From banking to civil services to education, the Internet intersects every part of our lives in a way that was unthinkable 20 years ago. And yet the web remains inaccessible to vast swathes of people, with code issues far from the only roadblock. Olu explores the complexity of true accessibly, and offers a thoughtful approach to building a safer and more welcoming web." https://alistapart.com/article/building-the-woke-web/ Where Did the Focus Go? By Amber Wilson. "There was a bug in some of my code recently. A skip link was not working correctly. When it was focused and enter was pressed, focus was placed on the main content. Seemed okay. But, when tab was pressed to go into the main content, the focus went off to some place I could not see! I spent a few minutes trying to figure it out but could not. Then, I searched for how to programatically find focus…" https://amberwilson.co.uk/blog/where-did-the-focus-go/ Mug Handels By Eric Bailey. "My two-part piece on equivalent experiences is now live on Smashing Magazine. I have mixed feelings on it…" https://ericwbailey.design/writing/mug-handles.html Digital Accessibility, What's Beyond Guidelines By Rakesh Paladugula. "Common question by accessibility consultants is 'What is the guideline for this problem?' Is every problem experienced by the user is considered to be an accessibility compliance defect? For digital accessibility, what's beyond guidelines? Let's try to understand the thin line between compliance and digital accessibility, what's beyond guidelines…" https://www.maxability.co.in/2020/06/16/digital-accessibility-whats-beyond-guidelines/ Emoji Accessibility for Visually Impaired People (Video) By Garreth Tigwell, Benjamin Gorman, and Rachel Menzies. "Using our findings from both studies, we propose best practice when using emoji and recommendations to improve the future accessibility of emoji for visually impaired people." https://www.youtube.com/watch?v=uIbPcZq6izk Reminder: Accessibility Can't be Solved Automatically By Joe Dolson. "…no plug-in, toolbar, or overlay is 'fixing' your accessibility problems. They may be sticking a piece of used duct-tape over the gap, but the problem is still there. A tiny change to the underlying structure might break the so-called 'fix', or the fix may cause other, even bigger problems…" https://www.joedolson.com/2020/06/reminder-accessibility-cant-be-solved-automatically/ A Smashing Guide to Accessibility By Smashing Magazine. "At Smashing we believe a good website is an accessible website, one which is available to everyone, no matter how they browse the web. This guide highlights our content which can help you create more accessible sites and web applications…" https://www.smashingmagazine.com/guides/accessibility/ +02: CASCADING STYLE SHEETS. Inclusively Hiding & Styling Checkboxes and Radio Buttons By Sara Soueidan. "Checkboxes and radio buttons are two common examples of interactive form elements that we desperately want to have full control over styling but we don't. So we've been hacking our way around styling them by hiding said elements with CSS and visually replacing them with pseudo-elements or an SVG image - SVG, of course, being the more flexible, powerful, and accessible replacement. But an SVG image is, at the end of the day, just an image, so while it can visually replace a checkbox, it doesn't really substitute for it - the user still needs a checkbox to interact with…" https://www.sarasoueidan.com/blog/inclusively-hiding-and-styling-checkboxes-and-radio-buttons/ CSS Custom Properties and the Cascade By Jeremy Keith. "…CSS custom properties aren't like Sass variables. They aren't evaluated once and then set in stone. They're more like let than const. They can be updated in real time. You can update them from JavaScript too. It's entirely possible to update CSS custom properties rapidly in response to events like, say, the user scrolling or moving their mouse. If the browser had to recalculate the cascade every time a custom property didn't evaluate correctly, I imagine it would be an enormous performance bottleneck…" https://adactio.com/journal/16993 Striking a Balance Between Native and Custom Select Elements By Sandrina Pereira. "Here's the plan! We're going to build a styled select element. Not just the outside, but the inside too. Total styling control. Plus we're going to make it accessible…" https://css-tricks.com/striking-a-balance-between-native-and-custom-select-elements/ How CSS Variables Can Improve Efficiency and Consistency By Eric Karkovack. "Code repetition is one of the more frustrating aspects of CSS. Having to type out the same property values over and over throughout a stylesheet takes time. And when making changes down the road, it's too easy to miss a value…" https://speckyboy.com/css-variables-improve-efficiency-consistency/ Now You See It: Understanding Display (Video) By Rachel Andrew. "By the end of the hour, you'll understand how the display property underpins the layout system we have today, the things coming in the future, and be able to make more informed decisions when deciding how to build any part of your design, big or small…" https://noti.st/rachelandrew/qN6DnE/now-you-see-it-understanding-display CSS :is() and :where() Are Coming to Browsers By Šime Vidas. "The new CSS :is() and :where() pseudo-classes are now supported in the preview versions of both Safari (Tech Preview 106) and Firefox (version 78). Chrome's implementation remains behind flag…" https://webplatform.news/issues/2020-06-04 +03: COLOR. Color Craft and Counterpoint: A Designer's Life with Color Vision Deficiency By Noah Glushien. "There's a common cognitive dissonance about design: that good design can't come from designers with color vision deficiencies. Much to the contrary, people with CVDs are far more aware of color and usability gaps, and can be invaluable during the design process. Sharing his first hand perspective as a color blind web professional, Noah Glushien discusses his career, living with CVDs, and how to enhance projects." https://alistapart.com/article/a-designers-life-with-color-vision-deficiency/ +04: EVALUATION & TESTING. Heuristic Evaluation By Rolf Molich. "…Definitions; Frequent mistakes; Arguments for and against heuristic evaluation; Myths about heuristic evaluation…" https://dialogdesign.muld.digital/heuristic-evaluation/ How To Convert Between Five- and Seven-Point Scales By Jeff Sauro and Jim Lewis. "There is plenty of debate about the best way to quantify attitudes and experiences with rating scales. And among those debates, perhaps the most popular question is the 'right' number of response options to use for rating scales…" https://measuringu.com/convert-point-scales/ +05: EVENTS. Tenon Accessibility Bootcamp July 7-8, 2020. Online https://www.eventbrite.com/e/tenon-accessibility-bootcamp-tickets-108899465232 Accessibility in Higher Education - Considerations and Strategies During COVID-19 July 8, 15, and 22, 2020. Online https://events.educause.edu/courses/2020/accessibility-in-higher-education-considerations-and-strategies-during-covid-19 Inclusive Design Roundtable July 14, 2020. Online https://www.meetup.com/Cleveland-Accessibility-Meetup/events/270952671/ The Process of Accessibility: Part Two July 27, 2020. Online https://www.meetup.com/Accessibility-Twin-Cities/events/268635519/ UX/Usability Testing - IT Professionals with Disabilities Testing Your Product August 6, 2020. Online https://www.accessibilityassociation.org/content.asp?admin=Y&contentid=630 UX Australia 2020 August 25-28, 2020. Online http://www.uxaustralia.com.au/conferences/ux-australia-2020/ The Right Tool for the Job: Using Accessibility September 28, 2020. Online https://www.meetup.com/Accessibility-Twin-Cities/events/268450340/ +06: HTML. Beginners' Guide To Writing Good HTML By Bruce Lawson. "When Tim Berners-Lee invented the World Wide Web in 1989, there was no JavaScript, no CSS, only HTML. Although HTML has changed greatly over 30 years, expanding from its original 18 tags to well over 120, it retains its central importance: it is the foundational technology for the web.…" https://websitesetup.org/html-tutorial-beginners/ +07: NAVIGATION. Journey-Mapping Approaches: 2 Critical Decisions To Make Before You Begin By Kate Kaplan. "Before beginning any journey-mapping initiative, teams must decide between (1) a current-state or future-state map, and (2) an assumption-first or research-first approach. A hybrid approach for each decision works well for most teams." https://www.nngroup.com/articles/journey-mapping-approaches/ What's the Point of Site Search? By Tom Johnson. "Lately, I've been researching different options for doc search. I've lived for years with poor search in my docs, and I haven't paid a lot of attention to it. Search is one of those elements that's easy to ignore. Despite how easy it is to ignore search, search is one of the most common user behaviors, and one that most tech writers would consider to be important. So let's examine that paradox a bit more - how can search be so important and unimportant at the same?" https://idratherbewriting.com/blog/pointless-to-implement-site-search/ +07: USABILITY. Communicating Changes Throughout the Buyer's Journey: A COVID-19 Case Study By Kim Flaherty. "When emergency situations impact retail operations, stores must inform customers of resulting changes to services with salient communications across all channels." https://www.nngroup.com/articles/emergency-covid/ How UX Writing Can Help Create Good Design By Lesley Vos. "So you think that it's a fantastic design that makes users love and happily interact with your website. Think again…" https://usabilitygeek.com/how-ux-writing-can-help-create-good-design/ The Pareto Principle And UX - Why Should You Care? By Steven Douglas. "The Pareto Principle, or the 80/20 rule as its also known, is a productivity hack of sorts. The idea behind it is: 80% of the effects of any given process come from 20% of the effort put into it…" https://usabilitygeek.com/pareto-principle-and-ux/ UX Win: Oxford University Press Password Creation By Deborah Edwards-Onoro. "…Creating an account password should be easy and quick, given designers consider the user experience and provide the three crucial features for password creation. Thank you, Oxford University Press for keeping users top of mind in your password creation process." https://www.lireo.com/ux-win-oxford-university-press-password-creation/ 3 Pitfalls to Avoid if Implementing 'Quick Views' By Rebecca Hugo. "…Although our desktop research has consistently shown that 'Quick Views' can pose various usability issues for users if poorly implemented, as seen in our previous article Product List Usability: Avoid 'Quick View' Overlays, our newer mobile research has uncovered some hidden benefits for the feature specific to the mobile context…" https://baymard.com/blog/mobile-desktop-quick-views [Section one ends.] ++ SECTION TWO: +09: What Can You Find at the Web Design Reference Site? Accessibility Information. https://www.d.umn.edu/itss/training/online/webdesign/accessibility.html Association Information. https://www.d.umn.edu/itss/training/online/webdesign/associations.html Book Listings. https://www.d.umn.edu/itss/training/online/webdesign/books.html Cascading Style Sheets Information. https://www.d.umn.edu/itss/training/online/webdesign/css.html Color Information. https://www.d.umn.edu/itss/training/online/webdesign/color.html Drupal Information. https://www.d.umn.edu/itss/training/online/webdesign/drupal.html Evaluation & Testing Information. https://www.d.umn.edu/itss/training/online/webdesign/testing.html Event Information. https://www.d.umn.edu/itss/training/online/webdesign/events.html HTML Information. https://www.d.umn.edu/itss/training/online/webdesign/html.html Information Architecture Information. https://www.d.umn.edu/itss/training/online/webdesign/architecture.html JavaScript Information. https://www.d.umn.edu/itss/training/online/webdesign/javascript.html Miscellaneous Web Information. https://www.d.umn.edu/itss/training/online/webdesign/misc.html Navigation Information. https://www.d.umn.edu/itss/training/online/webdesign/navigation.html PHP Information. https://www.d.umn.edu/itss/training/online/webdesign/php.html Sites & Blogs Listing. https://www.d.umn.edu/itss/training/online/webdesign/sites.html Standards, Guidelines & Pattern Information. https://www.d.umn.edu/itss/training/online/webdesign/standards.html Tool Information. https://www.d.umn.edu/itss/training/online/webdesign/tools.html Typography Information. https://www.d.umn.edu/itss/training/online/webdesign/type.html Usability Information. https://www.d.umn.edu/itss/training/online/webdesign/usability.html XML Information. https://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: https://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.]