October 14, 2022 Weekly Roundup of Web Design and Development News

In this week’s web design and development resources roundup, you’ll discover a helpful personas guide, find out how to create a WordPress block theme, learn about CSS box animation performance, 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 and projects!

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

Tweet of the Week

Celebrate all victories. Honestly, I’m pretty good at focusing on this for my team’s victories, but rarely do it for myself. I should be better to current me. #heweb22

— Shelley Keith-Panulla (@shelleyKeith) October 12, 2022

User Experience

• Planning a dark theme for your new app or website? Ondřej Pešička takes a deep dive into dark mode UI design best practices, highlighting benefits, disadvantages, and what you need to consider. One recommendation: avoid using saturated colors, which can cause eye strain and cause accessibility issues.

• From Nielsen Norman Group, a helpful personas study guide with links to their introductory articles and videos. Learn how to create personas and best practices for applying them. (Note: guide resources are in recommended reading order.)

• From Button 2022, the content design conference held this week:

  Wise words from @candiwrites: Be clear on your vision, but flexible in your approach. Small steps can have big impact, and we should aim for progress over perfection. #Button2022 pic.twitter.com/yXdUiUnNpb

  — Rebecca Blakiston 🇺🇦 (@BlakistonR) October 10, 2022

• Help shape the future of User Experience Magazine and the Journal of User Experience (JUX), share your feedback in their short online anonymous publications survey (took me less than three minutes to complete).

• Join UX Research & Strategy on October 25, 2022 when they host Matthew Morrison presenting Recruiting Participants for User Research in B2B Companies. Morrison will discuss how he gets participants to sign up and steps he takes when faced with difficulties reaching our own customers. The webinar is free, but requires preregistration.

Accessibility

• Including information about people’s physical attributes in image alternative (alt) text, we normalize differences and celebrate diversity, says Aaron Gustafson. It’s important to improve and support representation in alt text.

• You’ll find a number of accessibility improvements in the upcoming WordPress 6.1 version, expected to be released November 1, 2022. Something I’m glad to see: both Twenty Twenty-Two and Twenty Twenty-Three themes will be designated as accessibility-ready (Personally, I’ve never understood how any default WordPress theme would be released without being accessible.)

• I like to tell people to write alternative text as if you’re describing the image to someone you’re talking with over the phone.

  Do not cram alt text with keywords just to improve search engine optimization. This will hinder alt text’s true purpose: improving accessibility. Focus on describing the photo’s content. Search engine optimization should not be the goal for writing good alt text.

  — Accessibility Awareness (@A11yAwareness) October 13, 2022

• Stephanie Eckles recommends you consider these four required tests before shipping that new feature. The tests are critical throughout development, not only at the end of development.

WordPress

• The first release candidate for WordPress 6.1 is available for download and testing. Can you help with testing and translating?

• Wondering which features in the WordPress Jetpack plugin are free vs. paid? You won’t find it on the Jetpack site, they have no support page for it. Which is why I wrote my post.

  

• WordPress users who aren’t designers or developer may have avoided building a custom theme because they didn’t have coding skills. That’s all changed with support for Full Site Editing in WordPress, where you can use a block theme to edit any part of the website without knowing how to code. Will Morris walks you though creating a WordPress block theme in three steps.

• If you haven’t found them already, hosted WordPress.com offers free webinars Tuesday through Thursday about creating WordPress sites. This month’s featured webinars are Compelling Homepages and Custom Blog Pages. Preregistration required.

CSS and HTML

• Since CSS box shadow animation can impact performance, keep box shadow animation minimal and only animate interactive elements, says Oscar Jite-Orimiono.

• Appreciate Rachel Andrew sharing slides and resources from her When New CSS Features Collide: Possibility and Complexity at the Intersections presentation at An Event Apart Denver this week.

• Over 7,500 developers shared their feedback in the recent survey and the results have decided on the syntax for CSS nesting. An overwhelming majority chose the @nest syntax.

• For #divtober, Lynn Fisher offers another impressive illustration, created with only one div element and CSS.

  See the Pen Single div CSS Playdate by Lynn Fisher (@lynnandtonic) on CodePen.

• Have you ever tried to add styles to every element in a container, except the hovered element? Krzysztof Gonciarz explains how to create a pure CSS gallery focus effect using :not with only HTML and CSS. The problem, as Gonciarz discovered, was how to deal with gaps. Pointer-events: none to the rescue!

What I Found Interesting

• The new Firefox Relay phone number, a new feature providing a masked phone number, is available to privacy-focused Firefox Relay subscribers at a cost of $3.99/month. Only available in Canada and the United States.

• Woohoo! Three records were broken during 2022 October Big Day of birding: 7,453 bird species were reported on 80,000 checklists from 34,670 contributors. Check out more results for the 2022 October Big Day. (On a personal note, I had a lovely October Big Day reporting 55 species from three counties. It was a warm October day with lots of sunshine.)

• Who knew there was a way to slice an onion to keep its shape? Not me. Note: this is how to cut an onion that will be cooked and keeps its shape. Not something you may care about when you want rings of onions on your sandwich.

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.