+++ WEB DESIGN UPDATE. - Volume 20, Issue 07, August 12, 2021. An email newsletter to distribute news and information about web design and development. ++ISSUE 07 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: EVALUATION & TESTING. 04: EVENTS. 05: HTML. 06: JAVASCRIPT. 07: MISCELLANEOUS. 08: TOOLS. 09: TYPOGRAPHY. 10: USABILITY. 11: WEBWASTE & SUSTAINABILITY. SECTION TWO: 12: What Can You Find at the Web Design Reference Site? [Contents ends.] ++ SECTION ONE: New references. +01: ACCESSIBILITY. Writing Great alt Text: Emotion Matters By Jake Archibald. "Good alt text means that screen reader users get the same 'meaning' from the page as a fully sighted user. But sometimes that's easier said than done…" https://jakearchibald.com/2021/great-alt-text/ Accessibility in E-Commerce: Use 'ALT' Text to Communicate the Core Content of 'Informational' Images (55% of Sites Don't) By Alex Krzyminski. "…In this article we'll discuss 1 basic requirement for making images accessible to users aided by screen readers and other assistive technologies: Use alt text to communicate the core contents of an image (55% of sites don't)…" https://baymard.com/blog/informational-image-accessibility Accessible Design From the Get-Go By Roman Shamin. "Accessibility when designing for a screen is not an exception to the Pareto principle. We believe that just about 20% of designer effort can solve up to 80% of accessibility challenges for digital interfaces. Read on for an extensive collection of practical tips that can help you build a great foundation for a11y-right at the mockup stage…" https://evilmartians.com/chronicles/accessible-design-from-the-get-go WCAG 3.0 May Introduce New Rating Scale for Accessibility By Bureau of Internet Accessibility. "The W3C Web Accessibility Initiative is considering a new conformance model for Web Content Accessibility Guidelines (WCAG) 3.0…" https://www.boia.org/blog/wcag-3.0-may-introduce-new-rating-scale-for-accessibility How Accessible Names Can Help (Or Frustrate) Your Users By Bureau of Internet Accessibility. "The Web Content Accessibility Guidelines (WCAG) 2.1 includes success criteria for accessible names, which can be simply defined as the 'names of user interface elements.' Accessible names play an important role in helping people use the internet, but misunderstandings about their role can lead to significant accessibility issues…" https://www.boia.org/blog/how-accessible-names-can-help-or-frustrate-your-users Web Accessibility for the Human Experience: When We Can Help By Kim Krause Berg. "…you'll learn: Who is web accessibility for? What is the value of accessibility QA testing and audits? Do you need to design and build digital experiences for persons with disabilities? …" https://www.searchenginejournal.com/web-accessibility-best-practices/415631/ Unpacking the Potential of Voice Content By Preston So. "This author, designer, and developer highlights how content delivered through the medium of voice goes beyond screen readers to serve the people who interact with our designs…" https://medium.com/indeed-design/preston-so-unpacking-the-potential-of-voice-content-924eeb852032 The Case of the Ouch! Demonstrating Inaccessible UX to Bring Organisational Change (Video) By Angela Hooker. "Angela Hooker's talk at Collaborate Virtual 2021. A conference about the art of collaboration and team design…" https://www.youtube.com/watch?v=cvKWuvbdjB0 The ADA at 31: How are We Doing? [excerpt] (Video) By Sharron Rush. "…How can people who call themselves designers be so narrow in their thinking, so uncreative, so unimaginative that they're not thinking in the broad way of broad accommodation, making environments, whether physical or digital environments, that are welcoming and comfortable and open?…" https://www.youtube.com/watch?v=7vW8XdvdKM4 How to Hire Awesome Sign Language Interpreters and Make Attendees Happy By Meryl K. Evans. "…Just like multilingual speakers, people who prefer sign language find it easier to follow a signing interpreter over the captions. This is especially true because sign language captures the emotion of speech better than text captions. Captions are not equivalent to ASL…" https://equalentry.com/how-to-hire-sign-language-interpreters/ +02: CASCADING STYLE SHEETS. CSS Nesting, Specificity and You By Kilian Valkhof. "Native CSS nesting is coming to browsers soon. With nesting, that you might be familiar with from Sass or Less, you can greatly cut down on writing repetitive selectors. But you can also really work yourself into a corner if you're not careful. This is an overview of how you can already use it today, the pitfalls and how to avoid them…" https://kilianvalkhof.com/2021/css-html/css-nesting-specificity-and-you/ Using Absolute Value, Sign, Rounding and Modulo in CSS Today By Ana Tudor. "…this article is going to show how, using CSS features we already have, we can compute the values that abs(), sign(), round() and mod() should return. And then we'll see what cool things this allows us to build today…" https://css-tricks.com/using-absolute-value-sign-rounding-and-modulo-in-css-today/ A CSS Grid Layout with Pictures Down One Side Matched Up with Paragraphs on the Other (Video) By Chris Coyier. "This is the video version of a blog post we did asking the question: How do you make a layout with pictures down one side of a page matched up with paragraphs on the other side?…" https://css-tricks.com/video-screencasts-2/208-a-css-grid-layout-with-pictures-down-one-side-matched-up-with-paragraphs-on-the-other/ CSS accent-color By Adam Argyle and Joey Arhar. "Bring your brand color to built-in HTML form inputs with one line of code…" https://web.dev/accent-color/ Aligning a Button Label Vertically By Ahmed Shadeed. "…this issue is related to the font itself. Each font has a different line-height and that comes with a different spacing above and below the text…" https://ishadeed.com/article/button-label-alignment/ Using HSL Colors In CSS By Ahmed Shadeed. "In this article, Ahmad Shadeed explains what HSL is, how to use it, and shares some of the useful use-cases and examples that you can use right away in your current projects." https://www.smashingmagazine.com/2021/07/hsl-colors-css/ Is it Time to Ditch the Design Grid? By Michelle Barker. "I came across this website, Gridless Design recently, and it immediately struck a chord…" https://css-irl.info/is-it-time-to-ditch-the-design-grid/ +03: EVALUATION & TESTING. Getting the Most Out of Surveys By Jason Stockwell. "Results are the reason we run any research, and surveys are no exception. Survey results can help to provide meaningful insights, shape product plans, prove or disprove hypotheses and expand on original ideas…" https://www.uxbooth.com/articles/getting-more-out-of-your-surveys/ Six Ways to Improve Participant Recall By Jeff Sauro and Jim Lewis. "…The following techniques (summarized from the influential books The Psychology of Survey Response and Survey Methodology) may improve recall, but keep in mind that the evidence for their effectiveness is stronger for some techniques than for others…" https://measuringu.com/six-ways-to-improve-recall/ Qualitative Usability Testing: Study Guide By Kate Moran. "Unsure where to start? Use this collection of links to our articles and videos to learn about planning, conducting, and analyzing qualitative user testing." https://www.nngroup.com/articles/qual-usability-testing-study-guide/ Better Charts for Analytics & Quantitative UX Data (Video) By Kathryn Whitenton. "Spreadsheet defaults don't generate the most meaningful visualizations of UX data. Modify charts to enhance Context, Clutter (less of it than spreadsheet software likes!), and Contrast." https://www.nngroup.com/videos/better-charts-analytics-quantitative-ux-data/ How-To Guide for Success When Running a Website Review By Paul Boag. "Successful website reviews can be invaluable in increasing conversion and improving the user experience. In this post, I teach you how to ensure success…" https://boagworld.com/digital-strategy/website-review/ UX and Net Promoter Benchmarks of Mass Merchant Websites By Jim Lewis and Jeff Sauro. "With the COVID-19 pandemic's effect on consumer shopping behavior (e.g., increased online shopping for delivery or contactless pickup), mass merchant revenues rose dramatically…To better understand this domain, we benchmarked the user experience of the following mass merchant websites…" https://measuringu.com/mass-merchant-benchmarks-2021/ +04: EVENTS. Inclusive Usability Testing August 12, 2021. Online https://events.humanitix.com/digital-access-free-webinar-inclusive-usability-testing Accessibility: (2/4) Testing August 12, 2021. Online https://www.meetup.com/IxDA-Birmingham-AL/events/279068838/ JavaScript & Friends Conference August 19 and 20, 2021. Online and Columbus, Ohio, U.S.A https://www.javascriptandfriends.com/ Break Silos & Build Bridges: Bringing UX + Data Engineering Together August 26, 2021. Online https://www.meetup.com/STLXMeetup/events/279852699/ W3C Web Accessibility Initiative Cognitive Accessibility with Steve Lee September 8, 2021. Online https://www.w3.org/blog/talks/event/w3c-web-accessibility-initiative-cognitive-accessibility/ Voice Content, Multimodal Accessibility, and the Story of Ask GeorgiaGov September 14, 2021. Online https://www.meetup.com/A11yNYC/events/279891351/ +05: HTML. Accessibility Testing and iframes By Jeff Singleton. "…Yes, iframes are a problem when it comes to accessibility testing. Yes, iframes are commonly used o webpages and get passed over too often. Because of this, we thought we needed to say a few words about iframes…" https://convergeaccessibility.com/2021/08/09/accessibility-testing-and-iframes/ Reversing Ordered Lists By Manuel Matuzović. "You can reverse ordered lists by using the reversed attribute…" https://www.htmhell.dev/tips/reversing-ordered-lists/ Accessibility Savvy: Semantic HTML and Accessibility (Video) By Crystal Preston-Watson. "In this video I explore how the use of semantic HTML leads to improved accessibility on websites and web applications. The video features both code examples and keyboard navigation and screen reader (VoiceOver) demonstration…" https://www.youtube.com/watch?v=qSNUi7pRmWg The title Attribute - What is It Good For? (2005) By Steve Faulkner. "…Don't use them on any element to convey important information unless you provide device independent access to the information…" (Steve has been reminding us for a very long time that the title attribute has serious issues.) https://files.paciellogroup.com/resources/articles/WE05/ +06: JAVASCRIPT. How To Build Resilient JavaScript UIs By Callum Hart. "Embracing the fragility of the web empowers us to build UIs capable of adapting to the functionality they can offer, whilst still providing value to users. This article explores how graceful degradation, defensive coding, observability, and a healthy attitude towards failures better equips us before, during, and after an error occurs…" https://www.smashingmagazine.com/2021/08/build-resilient-javascript-ui/ How to Sanitize HTML Strings with Vanilla JS to Reduce Your Risk of XSS Attacks By Chris Ferdinandi. "…Today, we're going to look at one last approach: sanitizing. Let's dig in…" https://gomakethings.com/how-to-sanitize-html-strings-with-vanilla-js-to-reduce-your-risk-of-xss-attacks/ Choice Words About the Upcoming Deprecation of JavaScript Dialogs By Chris Coyier. "It might be the very first thing a lot of people learn in JavaScript: alert("Hello, World");…" https://css-tricks.com/choice-words-about-the-upcoming-deprecation-of-javascript-dialogs/ Google vs. the Web By Chris Ferdinandi. "Last week, I learned that the Google Chrome team is planning to deprecate alert(), prompt(), and confirm(), the three browser-native ways to surface a modal window to users…This is a massive, break-a-ton-of-web kind of change that has really shown just how much power the Chrome team has over the platform…" https://gomakethings.com/google-vs.-the-web/ +07: MISCELLANEOUS. Plan Ahead: Designing for Translation By Deborah Edwards-Onoro. "Have you ever visited a website in a different language, only to discover content wasn't translated correctly?…" https://www.lireo.com/designing-for-translation/ Happy Birthday, WWW - 30 years of Mining a Landfill for Valid Code By Chris Heilmann. "Today the World Wide Web is 30 years old. I've worked on it since 1997 or so and I saw a lot of technologies and design trends come and go…" https://christianheilmann.com/2021/08/06/happy-birthday-www-30-years-of-mining-a-landfill-for-valid-code/ Resigning from the AMP Advisory Committee By Jeremy Keith. "…I can't in good faith continue to advise on the AMP project for the OpenJS Foundation when it has become clear to me that AMP remains a Google product, with only a subset of pieces that could even be considered open source…" https://adactio.com/journal/18350 +08: TOOLS. View Source By Neatnik. "View the source of any web page on the internet. Not everyone wants to fiddle with mobile developer settings to view a page's source. This web page makes it easy to do from anywhere…" https://neatnik.net/view-source/ +09: TYPOGRAPHY. 'A Stirring Moment Preserved Forever Through Typography': Morisawa, The Official Font Provider for Tokyo 2020 By olympics.com. "We interviewed Morisawa's President and CEO, Mr Morisawa Akihiko, and Mr Sakamoto Keitaro of the Strategist, Type Design department, to learn about the profound world of typography and their involvement in the Tokyo 2020 Games…" https://olympics.com/tokyo-2020/en/news/morisawa-official-font-tokyo-2020 +10: USABILITY. Frustrating Design Patterns: Disabled Buttons By Vitaly Friedman. "How can we make disabled buttons more inclusive? When do they work well, and when do they fail on us? And finally, when do we actually need them, and how can we avoid them? Let's find out. Part of our ongoing series on design patterns…" https://www.smashingmagazine.com/2021/08/frustrating-design-patterns-disabled-buttons/ How Can You Improve Products by Focusing on Better Icon Usability? By Armantas Zvirgzdas. "…icons are failing, because people tend to assign different icon meanings based on their browsing experience…" https://uxplanet.org/how-can-you-improve-products-by-focusing-on-better-icon-usability-1da98cdbdf9c UX vs. Service Design By Sarah Gibbons. "User experience is focused on what the end user encounters, whereas service design is focused on how that user experience is internally created." https://www.nngroup.com/articles/ux-vs-service-design/ +11: WEBWASTE & SUSTAINABILITY. Sustainable Web Design, An Excerpt By Tom Greenwood. "Climate change is a daunting problem to face, but in this excerpt from Sustainable Web Design, Tom Greenwood provides clear guidance on how we can track and moreover address the carbon footprint of our websites in order to lessen our impact on our planet." https://alistapart.com/article/sustainable-web-design-excerpt/ Is Your Website Hosted Green? By The Green Web Foundation. "One day the Internet will run entirely on renewable energy. The Green Web Foundation believes that day should be within reach, and develops tools to speed up the transition towards a green Internet…" https://www.thegreenwebfoundation.org/ A Way to Think About the Environmental Impact of Streaming Services Like Netflix By Chris Adams. "…if you want some constructive steps to follow, I've outlined a few in this post, and the reasoning behind them…" https://www.thegreenwebfoundation.org/news/a-way-to-think-about-the-environmental-impact-of-streaming-services-like-netflix/ Making Digital Waste Visible By Gerry McGovern. "…The first step in the recipe was 'to clean your email mailbox. Because we wanted to give something very simple to start with…'" https://gerrymcgovern.com/making-digital-waste-visible/ How to Measure the Carbon Footprint of a Remote Team By Tom Greenwood. "Our friend Mike Gifford from Civic Actions recently asked on the Climate Action Tech Slack group: How do you best measure the CO2 of a distributed team? If everyone is working from home, how to best measure an organization's Scope 1 & 2 emissions?…" https://www.wholegraindigital.com/blog/remote-team-carbon-footprint/ [Section one ends.] ++ SECTION TWO: +12: 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 WebWaste & Sustainability Information. https://www.d.umn.edu/itss/training/online/webdesign/webwaste.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.]