+++ WEB DESIGN UPDATE. - Volume 19, Issue 19, November 4, 2020. An email newsletter to distribute news and information about web design and development. ++ISSUE 19 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: JAVASCRIPT. 08: MISCELLANEOUS. 09: NAVIGATION. 10: TYPOGRAPHY. 11: USABILITY. SECTION TWO: 12: What Can You Find at the Web Design Reference Site? [Contents ends.] ++ SECTION ONE: New references. +01: ACCESSIBILITY. Mobile Screen Reader Testing By Scott Vinkle. With the rise of mobile-first computing, let's add accessibility testing to our workflows. We'll explore mobile screen readers, common gestures, and how to test on real-world devices and simulators. https://scottvinkle.me/blogs/blog/mobile-screen-reader-testing Understanding SC 2.5.4 Motion Actuation By Sathish Kumar. "Success Criterion 2.5.4 Motion Actuation (Level A): Functionality that can be operated by device motion or user motion can also be operated by user interface components and responding to the motion can be disabled to prevent accidental actuation, except when…" https://www.digitala11y.com/understanding-sc-2-5-4-motion-actuation/ Solid Start By Erik Kroes et al. "Are you a person that makes digital things for other people? Awesome-because this page is all about making things for people. There are four ways you can improve your creation for everybody. All four are testable, fixable and they improve usability for everybody…" https://www.solidstart.info/ I Disagree with the Advice on Dialogs By Adrian Roselli. "…URL does not change; no Back button; Esc or click/tap outside should not be same as pressing Back; dialog not in history object; right-clicking does not (should not) offer open in new window, add to bookmarks, etc. Simpler , quicker, more accurate rule of thumb: If it GOES someWHERE use a link.If it DOES someTHING use a button…" https://twitter.com/aardrian/status/1321947480112680960 I Don't Particularly Agree with this Line, Either By Phil Sherry. "I don't particularly agree with this line, either: 'Keyboard users are (usually) a subset of screen reader users.' There are plenty of keyboard-only users who have never used a screen reader…" https://twitter.com/nonswearyphil/status/1321952037408526339 5 Steps to Design Apps with Keyboard Accessibility in Mind By Francine Navarro. "…In this article, you'll learn about keyboard accessibility guidelines, as well as 5 steps to keep in mind when designing apps to make sure that they are keyboard accessible…" https://www.shopify.com/partners/blog/keyboard-accessibility Live Chat Accessibility, WCAG 2.0 AA Conformance By Kris Rivenburgh. "I've researched the accessibility of live chat widgets available on the market because I put one on my website…" https://krisrivenburgh.com/live-chat-accessibility-wcag-2-0-aa-conformance/ Social Media Influencer Holly Tuke Chats to NCBI (Podcast) By Holly Tuke. "Holly Tuke from York, England chats about being awarded Social Media Influencer 2019 by RNIB, her surprise at the success of her blog highlighting all aspects of life with a vision impairment and her passion at making all websites more accessible and inclusive…" https://www.buzzsprout.com/981742/6181348 What is Section 508 and Why Does It Matter? By Allen Hoffman. "In 1990, the signing into law of the Americans with Disabilities Act (ADA) provided a real foundation for accessibility in the U.S. and across the world as a model. Similarly, Section 508 of the Rehabilitation Act and its subsequent refreshes serve as major milestones for accessibility by defining the scope of responsibilities for accessibility in the U.S. Federal Government…" https://www.deque.com/blog/what-is-section-508/ GW Meets Department Of Education's Standards For Website Accessibility By Michelle Vassilev. "Three years after a disability discrimination complaint was filed against the University (George Washington University), officials have met the Department of Education's standards for website accessibility…" https://www.gwhatchet.com/2020/10/25/gw-meets-department-of-educations-standards-for-website-accessibility/ +02: CASCADING STYLE SHEETS. ARIA in CSS By Jeremey Keith. Sara tweeted something recently that resonated with me: 'Also, Pro Tip: Using ARIA attributes as CSS hooks ensures your component will only look (and/or function) properly if said attributes are used in the HTML, which, in turn, ensures that they will always be added (otherwise, the component will obv. be broken)'. Yes! I didn't mention it when I wrote about accessible interactions but this is my preferred way of hooking up CSS and JavaScript interactions…" https://adactio.com/journal/17566 Native CSS Masonry Layout In CSS Grid By Rachel Andrew. "There is now a specification for native CSS masonry layout, as part of the Grid Layout spec. In this article, Rachel Andrew explains how it works with the help of a couple of demos you can try out in Firefox Nightly…" https://www.smashingmagazine.com/native-css-masonry-layout-css-grid/ More on content-visibility By Chris Coyier. "Back in August 2020, when the content-visiblity property in CSS trickled its way into Chrome browsers, Una Kravets and Vladimir Levin wrote about it and we covered it. The weirdest part is that to get the performance value out of it, you pair it with contain-intrinsic-size on these big chunks of the page where you insert some arbitrary guess at a height…" https://css-tricks.com/more-on-content-visibility/ Comparing Various Ways to Hide Things in CSS By Marko Ilic. "You would think that hiding content with CSS is a straightforward and solved problem, but there are multiple solutions, each one being unique…" https://css-tricks.com/comparing-various-ways-to-hide-things-in-css/ +03: DRUPAL. How to Prepare Your Drupal 8 Site to Move to Drupal 9 By Gábor Hojtsy. "If you're currently on Drupal 8, you can expect a similar experience with Drupal 9 when it is released later this year in June. As Dries has said, 'The big deal about Drupal 9 is…that it shouldn't be a big deal'…" https://dev.acquia.com/blog/how-prepare-your-drupal-8-site-move-drupal-9 +04: EVALUATION & TESTING. Improving the Prediction of the Number of Usability Problems By Jeff Sauro and Jim Lewis. "Paraphrasing the statistician George Box, all models are wrong, some are useful, and some can be improved…" https://measuringu.com/improving-prediction-of-the-number-of-usability-problems/ Average UX Improvements Are Shrinking Over Time By Kate Moran. "On average, UX changes have a smaller impact on quantitative metrics. This trend means that UX has substantially advanced since 2006." https://www.nngroup.com/articles/ux-gains-shrinking/ 3 Types of Roadmaps in UX and Product Design By Sarah Gibbons. "Roadmaps that include UX work can have 3 scopes: product, field, and specialty. Understanding these and their benefits can focus your process, effort, and goals." https://www.nngroup.com/articles/roadmap-types/ +05: EVENTS. 2020 National Federation of the Blind of Texas Convention November 6-8, 2020. Online https://www.nfbtx.org/events.php?id=65 HOW Design Live November 10-12, 2020. Online https://www.howdesignlive.com/ eAccessibility Course with David Berman November 12, 2020. Online https://wcag2.com/2020-november-12-accessibility-course-online/ 2020 Australian A11y Camp November 12-13, 2020. Online https://a11ycamp.org.au/ Mobile-First Intranet at Scale: Loblaw's Design Process November 17, 2020. Online https://www.nngroup.com/online-seminars/mobile-first-intranet-loblaw/ International Society for Technology in Education (ISTE) November 29-December 5, 2020. Online https://conference.iste.org/2020/ How to Produce Accessible Videos December 3, 2020. Online https://abilitynet.org.uk/training/how-produce-accessible-videos Accessibility Camp Bay Area December 5, 2020. Online https://www.accessibilitycampbay.org/ UX Conference December December 5-11, 2020. Online https://www.nngroup.com/training/december/ Government IT Symposium December 8-10, 2020. Online https://mngts.org/itsym/ Form Design Masterclass with Adam Silver January 19-27, 2021. Online https://smashingconf.com/online-workshops/workshops +06: HTML. What Width And Height Attributes Should You Use With Responsive Images? By Chip Cullen. "Best practice is now to re-include the width and height attributes for images, like we used to back in the day…" https://chipcullen.com/what-width-and-height-attributes-to-use-with-responsive-images/ GIFS and prefers-reduced-motion By Chris Coyier. "The element has a trick it can do where it shows different image formats in different situations. If all you are interested in is formats for the sake of performance, maybe you'd do…" https://css-tricks.com/gifs-and-prefers-reduced-motion/ +07: JAVASCRIPT. Why A Little Bit of ARIA Knowledge Can Get You Into Trouble By Graham Armfield. "…a little bit of knowledge (of ARIA) can really get you into trouble. Accessible development isn't a thing you should get a vague idea of, it's something that you have to commit to fully. You need to know if your skills are enough to fully create accessible modern sites. You need to know if you can put everything together in an accessible way. And you need to know if you can trust the source that you got your skills from…" https://www.hassellinclusion.com/blog/why-come-to-our-accessibility-for-developers-training/ How To Sanitize Third-Party Content With Vanilla JS To Prevent Cross-Site Scripting (XSS) Attacks By Chris Ferdinandi. "Third-party content (things like data from APIs and user-submitted content from form fields) can expose you to cross-site scripting (XSS) attacks if rendered into the UI as-is…" https://gomakethings.com/how-to-sanitize-third-party-content-with-vanilla-js-to-prevent-cross-site-scripting-xss-attacks/ Converting the Vue.js Markdown Editor Demo to Vanilla JS By Chris Ferdinandi. "…Today, I'm converting the Vue.js markdown editor demo into vanilla JS. Let's dig in…" https://gomakethings.com/converting-the-vue.js-markdown-editor-demo-to-vanilla-js/ +08: MISCELLANEOUS. Call for Images By Jennie Delisi. "Are you a designer? Know one? If so, please share…" https://www.linkedin.com/pulse/call-images-jennie-delisi-ma-cpwa/ Painting With the Web By Matthias Ott. "…By using static wireframes and static layouts, by separating design and development, we are often limiting our ability to have that creative dialogue with the Web and its materials. We are limiting our potential for playful exploration and for creating surprising and novel solutions. And, most importantly, we are limiting our ability to make conscious, well-informed decisions going forwardS…" https://matthiasott.com/notes/painting-with-the-web EDUCAUSE 2020 Student Technology Report: Supporting the Whole Student By Dana C. Gierdowski, Christopher Brooks and Joseph Galanek. The findings reveal that "Many students with disabilities do not have positive responses to how their institution supported their need for accessible content and/or technology accommodations." https://www.educause.edu/ecar/research-publications/student-technology-report-supporting-the-whole-student/2020/accessibility-and-accommodations +09: NAVIGATION. Designing for Customer Intentions: Part 1 By Lis Hubert and Diana Sonis. "…In this article we highlight the shortcomings of current navigation structures and introduce the Customer Intentions method, highlighting its benefits and real-world use cases and feedback. …" https://www.uxbooth.com/articles/designing-for-customer-intentions-part-1/ +10: TYPOGRAPHY. 7 Tips to Help Improve Your Web Typography Skills By Marc Andrew. "A good understanding of Typography (more than imagery, and colour in my opinion) is so important in the design of strong UIs…" https://marcandrew.me/7-tips-to-improve-your-web-typography-skills/ +11: USABILITY. 4 Trustworthiness Factors (Video) By Aurora Harley. "Users are constantly evaluating whether they believe what you're saying and whether to leave a website. You can do 4 things to make users trust you more and stay on your site." https://www.nngroup.com/videos/4-trustworthiness-factors/ Mobile UX: Avoid Using Subpages within the Product Details Page (26% Don't) By Edward Scott. "The amount of content available on a typical mobile product page makes maintaining an overview and sense of orientation difficult for many users…" https://baymard.com/blog/avoid-using-subpages My Chatbot is Dead By Adrian Zumbrunnen. "Why yours should probably be too…" https://azumbrunnen.me/blog/my-chatbot-is-dead-%C2%B7-why-yours-should-probably-be-too/ [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 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.]