April 1, 2022 Weekly Roundup of Web Design and Development News

Happy April Fool’s Day!

My joke for the day:

Why can April jump so high?

It’s spring.

Ok, on to the roundup!

In this week’s web design and development news roundup, you’ll learn about designing a better infinite scroll, discover what’s important when you implement accessibility policy, find a demo of the dialog element, and more.

If you’re new to my blog, each Friday I publish a post highlighting my favorite user experience, accessibility, WordPress, CSS, and HTML posts I’ve read in the past week.

Hope you find the resources helpful in your work or projects!

Want more resources like these on a daily basis? Follow me @redcrew on Twitter.

Tweet of the Week

"It doesn't really matter how you learn, as long as you learn. Always be learning is the mode." – @nickf

— Notably (@notablyai) March 30, 2022

User Experience

• In Smashing Magazine’s latest post on design patterns and techniques for designing better interfaces, Vitaly Friedman takes a closer look at designing a better infinite scroll. Friedman discusses the problems with infinite scroll as he offers important guidelines to consider.

• After two years of pandemic, I know many people will agree with the top 3 user experience takeaways from 1,100 hours of testing leading food delivery and takeout sites. Not surprised the top issue: finding and quickly ordering their favorite meal.

• As Nick Bobich explains in his What Is Microcopy? article, crafting effective microcopy includes understanding context and using language users are familiar with. In the case of Veeam’s on-page survey, a change in their phrase “Request a quote” to “Request pricing” resulted in an increase of over 160% in clicks to their lead generation form.

• I give a UX win to Best Buy for their My Best Buy terms and conditions update. Glad I didn’t have to visit a long web page with legalese to find out what the changes were.

  

• I like that they named it a library, makes it inviting to everyone. A reinvention of the design system, the Experience Library is a central place for content guidelines, tools, glossaries, techniques, and resources to help create better customer experiences (not limited to online experiences).

Accessibility

• It’s back! The WebAIM Million 2022 update, the annual accessibility evaluation of the home pages for the top million websites, was released this week. Yes, it’s disappointing there aren’t more improvements, but I’m staying focused on the positives. What I found: continuous measurable improvement in alternative text for images over the years. Thank you for all your work, WebAIM!

• The Cave at University of California Berkeley was a nurturing place for a generation of blind innovators, among them MacArthur Genius Grant winner Josh Miele and professor of neuroscience at Icahn School of Medicine at Mount Sinai Fatemeh Haghighi.

• Excited about the updates in Chrome and Edge DevTools!

  I love the full-page accessibility tree now available in @ChromeDevTools and @EdgeDevTools. Element names, roles, values, and states all in an easy-to-read tree view.
  Get on board, web devs. #a11y pic.twitter.com/RtdgJb70Xa

  — Allison Ravenhall (@RavenAlly) March 29, 2022

• Hosted by Knowbility, the 19th annual John Slatin AccessU Conference returns May 9-13, 2022 with a new model: both in-person and remote events. This year’s event includes keynotes, asynchronous sessions, deep dives, and live sessions. Purchase your tickets today!

• The first step for implementing accessibility policy in an organization is to support from leadership and getting executive sponsorship, says Kathy Keller, who worked as the Accessibility Coordinator the the Texas Deaprtment of Family and Protective Services.

• Next time someone says they’re working on creating a website that is ADA (Americans with Disabilities Act) compliant, tell them to stop saying that. As Adrian Roselli explains, ADA web site compliance is still not a thing.

WordPress

• While many WordPress users are excited about WebP support for images and the proposal to enable WebP by default in WordPress 6.0, I disagree about it being the default. Give people the option to enable, transition over time.

• Will Morris walks you through everything you need to know about WordPress firewalls, explaining why you should use them and reviewing three options for WordPress sites.

• Learn why and how to use WordPress block patterns on your sites, saving yourself time and effort. If you haven’t used them before, WordPress block patterns are a collection of blocks, saved to a template, and are shareable.

  Once you’ve placed a pattern on the page, it is entirely separate and independent from the source.

• Interesting approach Takashi Kitajima has taken, creating the Snow Monkey plugin which adds custom styles to WordPress core blocks. After you install the plugin, it adds a monkey icon inside the block toolbar, which provides a slew of formatting options: background color, font size, highlighter, line height and text.

CSS and HTML

• I’ve been a subscriber to their newsletter for years and I’m excited to learn CSS Weekly started a YouTube channel. One of the first videos, Start using color-scheme CSS property, is a ten-minute video walking you through how it works and why you should use it, along with a demonstration of how it works on Twitter, LinkedIn, Netflix, and The Verge.

• Congrats to Salma Alam-Naylor on improving their website performance by using the right tool for the job. Their challenge: build a website delivering as little JavaScript to the browser as possible. Key items that stood out for me: removing YouTube video from the home page, deleting Google Analytics from the entire site, and self-hosting fonts.

• Thanks to Una Kravets for her CodePen Dialog dialog demo. Timely, since the dialog element is stable in all modern browsers this month.

  See the Pen Dialog Demo by Una Kravets (@una) on CodePen.

• Handy! Placy is a free online service for generating image placeholders with data URLs. Create your custom dimensions, background color, text. You can get its data URL or download a PNG, JPG, or SVG.

• Long read, worth your time. And a bookmark. Learn how to adapt sites to devices needs, whether they use a pointer or not, with this guide to hover and pointer media queries. To be more specific, they’re media features: hover, pointer, any-hover, and any-pointer.

What I Found Interesting

• I’ve seen Snowy and Short-eared Owls during the day, but that’s not the norm for 200+ species of owls around the world. According to a research study published this week, millions of years ago owl behavior may have been different. Meet the ancient owl that embraced sunlight.

• It can seem like the world is filled with angry and hurtful people. Femy Praseeth reminds us to take a moment, look about, and spot kindness around us. And to make a decision to share some of our own kindness. To a kinder world. Thank you, Femy.

• A long-form research survey of 236 tech and design workers revealed people don’t only have pandemic burnout. They have pandemic clarity. Download the free report on how the pandemic changed tech and design workers’ career mindsets and motivations.

  I won’t tolerate harmful, oppressive, toxic environments. I don’t have to.

• Need a laugh? You will notice that a time-travel option is not included on this model, describing how Justin Lee avoided a speeding ticket had me laughing for several minutes . Makes me wonder if Lee is a comedy writer.

If you like what you’ve read today, share the post with your colleagues and friends.

Want to make sure you don’t miss out on updates? Subscribe to get notified when new posts are published.