Web Design Update: November 6, 2024

471 views
Skip to first unread message

Laura Carlson

unread,
Nov 6, 2024, 3:37:36 AM11/6/24
to webdev
+++ WEB DESIGN UPDATE.
- Volume 23, Issue 19, November 6, 2024.

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: EVALUATION & TESTING.
04: EVENTS.
05: HTML.
06: JAVASCRIPT.
07: MISCELLANEOUS.
08: TYPOGRAPHY.
09: USABILITY.
10: WEBWASTE & SUSTAINABILITY.

SECTION TWO:
11: What Can You Find at the Web Design Reference Site?

[Contents ends.]


++ SECTION ONE: New references.

+01: ACCESSIBILITY.

25 Accessibility Tips to Celebrate 25 Years
By Jared Smith.
"As WebAIM celebrates our 25 year anniversary this month, weve shared 25 accessibility tips on our LinkedIn and Twitter/X social media channels. All 25 quick tips are compiled below."
https://webaim.org/blog/25-tips/

Practical Accessibility Tips You Can Apply Today
By Kevin Andrews.
"…In this article, I'll share practical advice on marking up three common UI patterns the right way…"
https://piccalil.li/blog/practical-accessibility-tips-you-can-apply-today/

Responsive Design and Reflow
By WebAIM.
"…An important component of responsive design is reflow, which is how a web page adapts to fit viewports of different sizes…"
https://webaim.org/techniques/reflow/

Disabled and Obscured
By Steve Faulkner.
"The WCAG success criterion 1.4.3: Contrast (Minimum)  requires that: 'The visual presentation of text and images of text has a contrast ratio of at least 4.5:1'…"   
https://html5accessibility.com/stuff/2024/11/04/disabled-and-obscured/

Accessible Names
By New Zealand Government.
"An accessible name identifies a user interface (UI) element to assistive technologies and their users - this is especially important for interactive components."
https://govtnz.github.io/web-a11y-guidance/ka/fundamental-concepts-in-web-a11y/accessible-names-and-descriptions/accessible-names.html

Testing With a Screen Reader Is an Important Step
By Michael Harshbarger.
"When ensuring your website or mobile application is accessible, testing with specific screen reader and browser combinations is a crucial step…"
https://accessibilityfirstsolutions.com/testing-with-a-screen-reader-is-an-important-step/

Designing for Accessibility - Create Accessible User Experiences with AT User Flow Testing
By David Sloan.
"Many organizations on their journey to make digital products more accessible start with a focus on testing against standards such as the Web Content Accessibility Guidelines (WCAG). This helps ensure that basic accessibility requirements are met. But how do we know whether people with disabilities can use a product for its intended purpose?…"
https://www.tpgi.com/designing-for-accessibility-create-accessible-user-experiences-with-at-user-flow-testing/

Why Should All Organizations Establish Feedback Mechanisms for Accessibility?
By Bogdan Cerovac.
"European public sector websites and mobile apps are required to have feedback mechanism. I believe that such feedback helps any kind of organization, even single person businesses…"
https://cerovac.com/a11y/2024/11/why-should-all-organizations-establish-feedback-mechanisms-for-accessibility/

Accessibility and Inclusive Design Manual
By Andy Jones and Jake Lloyd.
"We decided to run a discovery to explore perceived challenges concerning the accessibility of [Department for Education] services. Our goal was to uncover areas where improvements could be made and identify where gaps in knowledge or practice existed. Through this research, we discovered that while teams were aware of accessibility requirements, many had limited experience with essential activities like commissioning accessibility audits, conducting internal testing, and writing accurate accessibility statements."
https://accessibility.blog.gov.uk/2024/10/29/accessibility-and-inclusive-design-manual-blog/

'Functionality' Is Not Constrained by Content
By Duff Johnson.
"Accessibility considerations for digital content aren't limited to navigation, reading and interaction. Users also need to be able to archive, comment, redact, extract, and more."
https://pdfa.org/functionality-is-not-constrained-by-content/

Accessible Election Results Map
By George Kerscher.
While this is US centric, I thought many would be interested. Pleased to share this news from Pete Bossley…"
https://lists.w3.org/Archives/Public/w3c-wai-ig/2024OctDec/0022.html

An Introduction to Disability Studies (Video)
By Jen DeMesquita.
"The a11y community is rich in technical knowledge, but what about knowledge of larger disability issues? Understanding the disabled experience is more than knowing about the WCAG…"
https://www.youtube.com/watch?v=gQoPai-soXo

Towards Designing a Set of Usability and Accessibility Heuristics focused on Cognitive Diversity: An Exploratory Case Study with Generative Artificial Intelligence
By Almenara Pascual and  Barrantes Sayago.
"This paper discusses the design and evaluation of a set of heuristics (U+A) to assess the usability and accessibility of interactive systems in terms of cognitive diversity in an integrated way…"
https://www.preprints.org/manuscript/202410.2444/v1

Legal Update: October 2024
By Ken Nakata.
"…This month's issue is all about New York-- and specifically about the Southern District of New York. This isn't by choice-- Lexis ONLY reported cases from there this month…"
https://convergeaccessibility.com/2024/11/04/legal-update-october-2024/


+02: CASCADING STYLE SHEETS.

CSS Masonry Layout Syntax
By Michelle Barker.
"…the term masonry for layout is used to describe the kind of grid layout where instead of items of various heights being aligned in neat horizontal rows, they are shifted to fill the leftover space, effectively creating a brickwork effect. It was popularised by the website Pinterest some years ago, and became a widespread UI design trend for a while…"
https://css-irl.info/css-masonry-layout-syntax/

Should Masonry Be Part of CSS Grid?
By Ahmad Shadeed.
"An exploration of examples showing masonry as both a part of CSS Grid and as its own display type…"
https://ishadeed.com/article/css-grid-masonry/

A Friendly Introduction to Container Queries
By Josh W. Comeau.
"For a very long time, the most-requested CSS feature has been container queries. That's been our holy grail, the biggest missing piece in the CSS toolkit. Well, container queries have finally arrived…"
https://www.joshwcomeau.com/css/container-queries-introduction/

State of CSS 2024 Survey Results
By Sacha Greif.
"Let me make a prediction: we'll look back at 2024 as the turning point between 'CSS Classic' and 'New CSS'…"
https://2024.stateofcss.com/en-US/


+03: EVALUATION & TESTING.

How to Conduct a Competitive Usability Evaluation (Video)
By Tim Neusesser.
"Competitive usability evaluations help you understand how your competitors solve certain design problems and how you might outperform them. These evaluations are often performed at the beginning of design projects to shift their direction toward areas of opportunity."
https://www.nngroup.com/videos/conduct-competitive-usability-evaluation/

Research Plans: Organize, Document, Inform
By Maria Rosala.
"Start every UX-research study with a plan. Research plans document goals, methods, and logistics."
https://www.nngroup.com/articles/pm-research-plan/

Screening Participants for User-Research Studies
By Maddie Brown.
"Well-written screeners ensure that your study participants are appropriate for your research goals, improve data quality, save resources, and reduce bias. "
https://www.nngroup.com/articles/screening-participants/

Thinking in Metrics
By Christina Wodtke.
"…When choosing metrics, one question reigns supreme: Will this metric change how we act? If the answer is no, its likely a bad metric…"
https://eleganthack.com/6501-2/


+04: EVENTS.

The State of Accessibility - Episode 3 with Mark Miller and David Sloan
November 14, 2024.
Online
https://www.tpgi.com/the-state-of-accessibility-episode-3/

Mid-Day Drupal Meetup
December 12, 2024.
Minneapolis, Minnesota, U.S.A.
https://www.meetup.com/twin-cities-drupal-group/events/btvnntygcqbqb/

UX Virtual Training
January 11-24, 2025.
Online
https://www.nngroup.com/training/january/

RESCHEDULED: Nicolas Steenhout - ARIA 101
January 21, 2025.
Online
https://www.meetup.com/portland-accessibility-and-user-experience-meetup/events/302719204/

Axe-con
February 25-27, 2025.
Online
https://www.deque.com/axe-con/


+05: HTML.

The body Element
By Heydon Pickering.
"When we create or discover new things, we label them too. These labels act like IDs, making it easy to access these things in the databases that are our minds…"
https://heydonworks.com/article/the-body-element/

The button Element
By Heydon Pickering.
"Some HTML elements, like some places, songs, and smells, have a disproportionate significance for some people. For example, among web accessibility practitioners, any mention of the <button> element will recall a multitude of painful failures and cherished triumphs. Such is the element's power to make or break the fundamental accessibility of a web interface…"
https://heydonworks.com/article/the-button-element/

Tooltip Best Practices
By Zell Liew.
"…In this article, I try to summarize the best practices mentioned by various accessibility experts and their work…"
https://css-tricks.com/tooltip-best-practices/


+06: JAVASCRIPT.

JavaScript Dos and Donts
By Mu-An Chiou.
"Do use JavaScript - When the core functionality of a feature cannot function with only HTM.…"
https://muan.co/posts/javascript


+07: MISCELLANEOUS.

Don't Just Present, Describe.
By Accessible Community.
"Read your slides and describe important visual information…"
https://mailchi.mp/7091fa4deaa0/accessibility-tip-dont-just-present-describe

The Open Source AI Definition - 1.0
By Remy Sharp.
"There's now an official definition of 'open source AI', which companies like Facebook have been using (prior to this definition) to effectively attempt to convince us (Devs) that the models are in keeping with the values of Open Source…"
https://remysharp.com/links/2024-11-02-131718ec

Two US Government Agencies Warn about Artificial Intelligence Hiring Technology that Discriminates against Disabled Applicants
By Lainey Feingold.
"Article includes resources for AI fairness in employment and beyond…"
https://www.lflegal.com/2022/05/disability-discrimination-hiring-tech/


+08: TYPOGRAPHY.

Flexible Typesetting Is Now Yours, for Free
By Tim Brown.
"Originally published in 2018, Flexible Typesetting has sold thousands of copies and given a new generation of designers fresh mental models to craft meaningful, multidimensional typography. It is required reading in elite design programs and has encouraged the rethinking of core curricula…"
https://tbrown.org/notes/2024/10/26/flexible-typesetting/


+09: USABILITY.

Confirming the Perceived Website Clutter Questionnaire (PWCQ)
By Jim Lewis and Jeff Sauro.
"…In this article, we briefly review the exploratory research we conducted and then analyze new data to validate what we found using a statistical technique called confirmatory factor analysis…"
https://measuringu.com/confirming-a-website-clutter-questionnaire/

Designing For Gen Z: Expectations And UX Guidelines
By Vitaly Friedman.
"…Let's take a closer look at Gen Z, how they use tech, and why it might be a good idea to ignore common design advice and do the opposite of what is usually recommended instead…"
https://www.smashingmagazine.com/2024/10/designing-for-gen-z/

Stripe Head of Design Katie Dill Reviews Startup Websites (Video)
By Katie Dill.
"Stripe's Head of Design Katie Dill is one of the most influential designers in Silicon Valley. Before joining Stripe she led the design team at Lyft and was Head of Experience Design at Airbnb. Throughout her career she's leveraged the power of great design to help build a few of the most successful companies in the world. So what's the secret to her success? For Katie it's all about focusing on the details, and making sure that every pixel counts…"
https://www.youtube.com/watch?v=DY5Z-uZ6ZMc

Touchscreens Are Out, and Tactile Controls Are Back
By Gwendolyn Rak.
"Rachel Plotnick's 're-buttonization' expertise is in demand…"
https://spectrum.ieee.org/touchscreens


+10: WEBWASTE & SUSTAINABILITY.

Sustainable Web Interest Group is Formed
By Tzviya Siegman.
"W3C is pleased to announce the formation of the Sustainable Web Interest Group. The mission of the Sustainable Web Interest Group is to improve digital sustainability so that the Web works better for all people and the planet…"
https://www.w3.org/blog/2024/sustainable-web-interest-group-is-formed/

Should Sustainability Be Beautiful?
By Tom Greenwood.
"…I believe that the choice between making things sustainable and making them beautiful is a false dichotomy arising from us misunderstanding the nature of beauty…"
https://tomgreenwood.substack.com/p/should-sustainability-be-beautiful

Business-As-Un-Usual
By Thomas Klaffke.
"This report from Thomas Klaffke is an incredible treasure trove of inspiring ideas for aligning work and business with the true needs of humanity and the planet."
https://substack.com/home/post/p-150668108


[Section one ends.]


++ SECTION TWO:

+11: 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:lcar...@d.umn.edu


[Issue ends.]
Reply all
Reply to author
Forward
0 new messages