📝 Issue #450: Media Query-less RWD, 8 Ways to Ruin Onboarding, LA28 Logo, Reducing Design Debt, and more…

We’ve been relying on media queries to code responsive design for years, but the lack of container queries makes media queries impractical for component-based design. Geoffrey Crofte’s excellent tutorial walks us through the principles of building responsive design without relying on media queries.

User onboarding is an essential tool in retaining users, converting users into power-users, and growing a product. But it is so easy to get wrong. This week we take a look at eight easy ways to ruin your user onboarding, from making assumptions about users, to forcing users to complete onboarding immediately.

Ztext is an awesome little JavaScript library that uses CSS to create a 3D text effect. Because the library uses CSS, instead of Canvas or WebGL, all of your text is perfectly selectable, and Ztext is intelligent enough to turn itself off for screen readers. As well as text, it also works with images, SVG files, and emojis.

Design debt is all the corners you cut to reach a minimum viable product; it’s all the good ideas you had, that were abandoned to meet a deadline, or a budget. But it is possible to repay some of that debt. Antonio Solano proposes four practical steps for paying off design debt and fixing your product design.

Stitches is a free, fully featured styling library. With Stitches you can define themes using CSS variables, then intelligently inject just the styles you’re using, so users only download essential code. Styles can be defined with variants and are easily overridable, creating a simple component styling system for apps.

Page Laubheimer and Raluca Budiu’s in-depth study of the icons that indicate an accordion UI element is a fascinating examination that objectively measures the available options and reaches some practical conclusions, including which icon you should use, and whether it’s possible to link label text to a URL.

Loaf is an SVG icon library that’s wrapped up in an editor for Mac and Windows, that not only allows you to edit the icons in the collection, but animate them as well. The icons are hand coded with particular attention paid to accessibility and performance. The free version includes 72 editable icons.

This week Chrome began support for .avif, the newest image format for use on the web. Developed by the Alliance for Open Media in collaboration with Google, Cisco, Xiph.org, and Mozilla, it’s half the size of .jpg and 35% smaller than .webp. Dan Klammer explains how you can start using it in your projects.

Los Angeles is hosting the 2028 Olympic and Paralympic Games, and this week its dynamic logo was unveiled. Designed in collaboration with actors, sports stars, and assorted celebrated Angelenos, there are currently 26 variations with more on the way. Georgia Coggan reports on the reaction.