+++ WEB DESIGN UPDATE. - Volume 18, Issue 49, June 3, 2020. 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? https://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: HTML. 07: INFORMATION ARCHITECTURE. 08: JAVASCRIPT. 09: MISCELLANEOUS. 10: NAVIGATION. 11: TOOLS. 12: USABILITY. 13: XML. SECTION TWO: 14: What Can You Find at the Web Design Reference Site? [Contents ends.] ++ SECTION ONE: New references. +01: ACCESSIBILITY. Equivalent Experiences: What Are They? By Eric Bailey. "An equivalent experience is one that has been deliberately conceived of and built to be able to be used by the widest possible range of people. To create an equivalent experience, you must understand all the different ways people interact with technology, as well as common barriers they experience…" https://www.smashingmagazine.com/2020/05/equivalent-experiences-part1/ POUR Explained: A Beginner's Guide to Accessibility By ️Ren Cummings. "So what is POUR and why should I care…" https://dev.to/stories_of_ren/pour-explained-a-beginner-s-guide-to-accessibility-2233 An Accessible Word Document Checklist By Claire Brotherton. "While I focus on websites in my work, thanks to Deque University I've been learning about applying accessibility principles to other types of content…" https://www.abrightclearweb.com/accessible-word-document-checklist/ A11y Axioms - What are the Basic Truths About Accessibility? (Video) By Mike Gifford. "Mike wanted to do some basic modeling for accessibility and realized the need to simplify things. This is how the A11yAxiom project got started on Twitter. He wanted to define some essential truths in order to help people get a better sense of how to approach digital accessibility. This session will cover some of those approaches, and conclude with a Q&A at the end to see if we can't make them better…" https://www.youtube.com/watch?v=KAxJ9We74d8 Twitter Accessibility By TwitterA11y. "Adding descriptions to images is a great way to include everyone in your conversation. These descriptions, aka alt-text, enable folks who use screen readers to interpret images in Tweets. Starting today, you no longer need a setting to add alt text…" https://twitter.com/TwitterA11y/status/1265689579371323392 10 Things to Know About Twitter's Alternative Text for Images By Deborah Edwards-Onoro. "…As of May 2020, Twitter has finally updated their alt text support to be more fully-featured. Here's the latest updates about Twitter's alt text…" https://www.lireo.com/15-things-to-know-twitter-alternative-text-images/ How WCAG 2.1 Relates to Online User Experience with Switch-Based Tools By Sambhavi Chandrashekar and Lindsay McCardl. "Web Content Accessibility Guidelines (WCAG), organized under the four principles Perceivable, Operable, Understandable, and Robust, form the standards for building web pages that are accessible to users with disabilities…" http://scholarworks.csun.edu/handle/10211.3/215990 Microsoft Ability Summit 2020 (Videos) By Microsoft. https://www.youtube.com/playlist?list=PLtSVUgxIo6KqwPmsfQEDmgoC9-H9OXI2c How to Meet the Increased Demand for Website Accessibility By ️Kim Krause Berg. "Many people now depend on the web for basic necessities. It has uncovered the website accessibility issues most businesses have. Here's how to address them…" https://www.searchenginejournal.com/website-accessibility-meet-increased-demand/370074/ Four Years of Accessibility Data in Prominent US Networks By WebAIM. "An analysis of UCEDD, Institution, and US state/territory accessibility…" https://webaim.org/projects/uceddlongitudinal/ Feds Investigate College Twice Since 2017 for Disability Discrimination By Dana Gerber. "…The OCR met with an unnamed college official on Dec. 6, 2019 to discuss the barriers. On or about Dec. 20, 2019 and Jan. 3, 2020, OCR ran additional tests to determine if the college had removed the website barriers, and after confirming that it had, OCR closed the investigation…" https://berkeleybeacon.com/feds-investigate-college-twice-since-2017-for-disability-discrimination/ +02: CASCADING STYLE SHEETS. A User's Guide to CSS Variables By Lea Verou. "Long-requested but still underused, CSS custom properties for cascading variables offer revolutionary possibilities for collaboration and code reuse…" https://increment.com/frontend/a-users-guide-to-css-variables/ Global and Component Style Settings with CSS Variables By Sara Soueidan. "Or how I use CSS variables to create more manageable project styles and more portable patterns…" https://www.sarasoueidan.com/blog/style-settings-with-css-variables/ Programming CSS to Perform Sass Colour Functions By Jeremy Keith. "…You get the idea. It doesn't matter how many differently-coloured buttons I create, the effect of darkening or lightening their borders is all taken care of. So it turns out that the lighten() and darken() functions from Sass are available to us in CSS by using a combination of custom properties, hsl(), and calc()…" https://adactio.com/journal/16960 CUBE CSS By Andy Bell. "A CSS methodology oriented towards simplicity and consistency with a heavy dosage of pragmatism…" https://piccalil.li/blog/cube-css/ A First Look at 'aspect-ratio' By Chris Coyier. "Oh hey! A brand new property that affects how a box is sized! That's a big deal…" https://css-tricks.com/a-first-look-at-aspect-ratio/ +03: DRUPAL. The Olivero Theme Releases Its First Alpha By Mike Herchel and Putra Bonaccorsi. "…Olivero is a new theme that is slated to make it into Drupal core in version 9.1 as the new default theme (replacing Bartik). It's named after Rachel Olivero, who was a valued community member and accessibility advocate…we've done extensive testing with various devices, and browsers (yes - this theme supports Internet Explorer 11), and have done lots of accessibility work, although more still needs to be done…" https://www.lullabot.com/articles/olivero-theme-releases-its-first-alpha +04: EVALUATION & TESTING. The Case for Remote Moderated Usability Testing (Video) By Kate Moran. "Remote usability studies can be run completely by software (unmoderated), or a human UX researcher can facilitate the study, even if the test participant is remote (at home or their own office, rather than yours). https://www.nngroup.com/videos/remote-moderated-usability-testing/ About Time: A Practitioner's Guide to Task Completion Time Analysis By Bernard Rummel. "…The present paper is to turn the methodology on its feet, to make it more usable for practitioners. Statistics are only so interesting-unless they help figure out what is going on with users and interfaces. Well, let me show you how and why this toolkit has become indispensable for me, in particular in online user research…" https://uxpajournal.org/guide-task-completion-time-analysis/ SUSapp: A Free Mobile Application That Makes the System Usability Scale (SUS) Easier to Administer By Jeffrey Xiong, Claudia Ziegler Acemyan, and Philip Kortum. "…Through the examination of efficiency, effectiveness, and satisfaction measures, the data have shown that participants are able to use the SUSapp to complete the SUS on an iPhone in a reasonable amount of time. In addition, participants are satisfied with the usability of the app. For these reasons, one can conclude that the SUSapp is a usable application…" https://uxpajournal.org/susapp-mobile-system-usability-scale/ Getting Started with Quantitative Data Analysis By Krause Leia. "…Quantitative UX research helps you to better understand your customers, their preferences, behaviors, and the factors that affect their decisions. It can unveil a treasure trove of information via the right analytics, giving you the leverage you need to stay a cut above your competition." https://www.uxbooth.com/articles/getting-started-with-quantitative-data-analysis/ Understanding Users is Not Your Job (Video) By David Travis. "I answer the question, 'How can I make the development team get more involved in user research?'…" https://www.youtube.com/watch?v=R_Q6U8qJDxs Segmenting Users (Video) By David Travis. "I answer the question, 'Before the lockdown, I was carrying out field visits to users. Now I have lots of time on my hands for the analysis - but I'm struggling to identify the different groups. I feel like I'm making it up and I'd like a more structured method. Any tips?'…" https://www.youtube.com/watch?v=yVq1Bsi0rDw The Paradox of Usability Benchmarking (Video) By David Travis. "I answer the question, 'How do I go about using a summative usability test to benchmark UX'?…" https://www.youtube.com/watch?v=T38SEbL-o8U Should a Design Agency Test its Own Design (Video) By David Travis. "I answer the question, 'What are your thoughts on getting usability testing done by the same company who designed the product/app? What happens when the usability expert and the UX architect are the same.'…" https://www.youtube.com/watch?v=i3RKGunMLw0 +05: EVENTS. Web Accessibility for Drupal June 8-11, 2020. Online https://www.eventbrite.ca/e/web-accessibility-for-drupal-live-online-training-tickets-88747483111 XR Access Symposium July 20, 2020. Online https://xraccess.org/symposium/ Human-Centered Design July 20, 2020. Online https://aneventapart.com/event/online-0720 A Stay-at-Home Conference July 22-26, 2020. Online https://2020.sofaconf.com/ HighEdWeb 2020 Annual Conference October 19-20, 2020. Online https://2020.highedweb.org/ +06: HTML. Meeting Accessibility Challenges with Web Components By Jason White, Mark Hakkinen, Jennifer Grant. "Web Components comprise a suite of technologies under development by the World Wide Web Consortium (W3C) that together enable standard formats such as Hypertext Markup Language (HTML), and Scalable Vector Graphics (SVG) to be extended with new functionality…" http://scholarworks.csun.edu/handle/10211.3/180112 Tip: role=search By Steve Faulkner. "Tip: role=search does not equal …" https://twitter.com/stevefaulkner/status/1268115502485966851 Developer Who Wrote Vanilla HTML+CSS in Notepad Declared a Witch By Sam Sydeffekt. "A junior web developer Christopher Abbot-Blank attracted the attention of all his coworkers at Scalable Enterprise Solutions, LLC…" https://www.theolognion.com/developer-who-wrote-vanilla-html-css-in-notepad-declared-a-witch/ +07: INFORMATION ARCHITECTURE. How to Organize COVID-19 Information on Your Intranet By Kara Pernice. "Interviews with intranet designers and case-study analyses show that designers are positioning COVID-19 content on intranets all in one place and are making it easy to find and consume…" https://www.nngroup.com/articles/covid19-intranet-ia/ +08: JAVASCRIPT. A Guide to Accessible Interactive Components using React Libraries By Lindsey Kopacz. "…There are two points that I want to drive home about JavaScript frameworks: First, Front End JavaScript Frameworks render HTML. Second, JavaScript frameworks don't produce inaccessible HTML. Web developers produce inaccessible HTML. Before you read this blog post, I'd recommend brushing up on how to fix some common HTML errors…" https://www.a11ywithlindsey.com/blog/accessible-interactive-components-react Remediating Sites By Stuart Langridge. "…you need to make alterations to a web page that already exists, and where you can't change the HTML, so your job is to write some bits of JavaScript to poke at the page…" https://www.kryogenix.org/days/2020/05/14/remediating-sites/ +09: MISCELLANEOUS. ECAR Study of the Technology Needs of Students with Disabilities By Dana C. Gierdowski and Joseph Galanek. "Technology in higher education can be both an aid and a challenge for students with disabilities. Institutions and instructors can take steps to ensure that these students have equitable access, and those same measures can help all students, particularly during the era of emergency remote teaching.... https://er.educause.edu/blogs/2020/6/ecar-study-of-the-technology-needs-of-students-with-disabilities-2020 Responsive Design: Seams & Edges By Ethan Marcotte. "…A 'seam' is a term I use to describe where a responsive design breaks, which happens as screens change their shape-as they get wider, narrower, shorter, or taller…For me, that process begins with seams…" https://ethanmarcotte.com/wrote/responsive-design-seams-edges/ The F-word, Episode 3 Episode 3 (Podcast) By Vadim Makeev and Bruce Lawson. Vadim and Bruce talk about Web site resilience, HTML nesting rules, masonry layout, and the Web We Want. https://f-word.dev/episodes/3/ +10: NAVIGATION. How Search Engines Shape Gaze Patterns During Information Seeking: Google vs. Baidu By Feifei Liu. "Search-engine design alters users' gaze patterns on search-engine results pages, but only when users find the information on the page relevant to their current task." https://www.nngroup.com/articles/google-baidu-serp-comparison/ Journey Mapping for Remote Teams: A Digital Template By Sarah Gibbons. "A collaborative spreadsheet is an efficient, effective tool for virtual customer-journey mapping. Because of the format and structure it affords, almost everyone will be able to access and easily use it." https://www.nngroup.com/articles/journey-map-digital-template/ +11: TOOLS. sus-app By Jeffrey Xiong, Claudia Ziegler Acemyan, and Philip Kortum. ReactNative app to help usability researchers collect SUS (system usability scale) scores https://github.com/jeffreyxiong/sus-app/ +12: USABILITY. Website Performance is Getting Worse By Gerry McGovern. "Website design is still more amateur than professional. Most websites would not pass a basic quality control test…" https://gerrymcgovern.com/website-performance-is-getting-worse/ Modern Touch-Friendly Design By Addy Osmani. "I recently spoke to veteran UX designer Steven Hoober about designing for touch interfaces. Hoober's "Design for Fingers, Touch, and People" encourages UI designers to…" https://addyosmani.com/blog/touch-friendly-design/ +13: XML. Making RSS more Visible Again with a /Feeds Page By Marcus Herrmann. "A few years ago you could easily tell if a page offered an RSS feed. Browsers (at least good ones) had a feed symbol close to their location bar, and if you were really lucky (or used a really good browser), that indicator was even a button, empowering you to subscribe to a website with only one click. Fast forward to today…" https://marcus.io/blog/making-rss-more-visible-again-with-slash-feeds [Section one ends.] ++ SECTION TWO: +14: 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.]