Editorial

It might appear that the speed of shipping new CSS features to the web has slowed down, but the opposite seems to be true. From invoker commands and anchored container queries to scroll-state queries and tree-counting functions: CSS keeps evolving, and with it useful CSS techniques and libraries — and this newsletter highlights just that.

Today’s newsletter issue is kindly powered by our dear friends at Siteimprove, who help folks create high-performing, accessible content that’s easy to discover by both humans and AI. Thank you to the entire Siteimprove team for their hard work and kind support! 🧡

With the holidays coming up and things (sort of) slowing down this time of the year (don’t forget to breathe!), here's a quick overview of front-end & UX online workshops 2026 to help you plan next year:

• Behavioral Design Workshop UX
  with Susan and Guthrie Weinschenk. Jan 15– 29
• Deep Dive On Accessibility Testing Dev
  with Manuel Matuzović. Jan 19 – Feb 2
• Building With AI For Everyone Free
  with Christine Vallaure. Jan 20
• Design Patterns For AI Interfaces UX
  with Vitaly Friedman. Jan 22 – Feb 26
• Designing For Complex UI Masterclass UX
  with Vitaly Friedman. Mar 3–17
• Jump to all workshops →

As we are nearing the end of the year, I sincerely hope that you will have a chance to spend some peaceful and delightful time with your loved ones, old and new friends, and perhaps even total strangers.

Sending a lot of positive energy, enthusiasm, and love your way, everyone — to you and to wonderful people around you.

— Vitaly

1. Popover Hint

Let’s say you have an open popover — a menu or dialog, for example — and want to display another, unrelated popover, such as a tooltip or a link preview. popover=“hint” makes it possible, while keeping the primary popover open. Una Kravets explains how it works and how interest invokers (still experimental) enhance the approach further by removing the need for JavaScript.

2. Animations To Graphs

Stanko Tadić built a handy little tool for debugging animations and all other occasions when you want to break down a complex animation to examine it more closely: Monorail. It turns any CSS keyframe animation into an interactive graph and lets you drag or play through the timeline to see how the animated values change frame by frame.

3. Styling Alt Text

It’s frustrating when an image isn’t loading, but we can make the experience at least a little better by styling our alt texts. As Andy Bell shows, it’s just as simple as styling any other text. A nice detail to elevate your user interface and show you care, even when things don’t go as expected.

4. SVG To CSS Shape Converter

When it comes to CSS shapes, there’s probably no one who has such a large collection as Temani Afif. But not only that, he also creates useful tools that let everyone easily generate their own. To take advantage of the new shape() function, he has now created an SVG to CSS Shape Converter that converts path() shapes into shape() commands. It works with images and supports gradient coloration.

5. Adjusting Perceived Font Weight

Have you ever noticed that white text on a black background looks thicker than black text on a white background, although the weights are the same? Adam Argyle shows how you can adjust the perceived font weight for dark mode without layout shift, using variable fonts and the GRAD axis.

Upcoming Workshops and Conferences

That’s right! We run online workshops on frontend and design, be it accessibility, performance, or design patterns. In fact, we have a couple of workshops coming up soon, and we thought that, you know, you might want to join in as well.

As always, here’s a quick overview:

• Behavioral Design Workshop UX
  with Susan and Guthrie Weinschenk. Jan 15– 29
• Deep Dive On Accessibility Testing Dev
  with Manuel Matuzović. Jan 19 – Feb 2
• Design Patterns For AI Products + video course UX
  with Vitaly Friedman. Jan 22 – Feb 26
• Designing For Complex UIs + video course UX
  with Vitaly Friedman. Mar 3–17
• Jump to all workshops →

6. Responsive Letter Spacing

Take the following scenario: You want to apply reduced letter spacing to your typography, but in a way that transitions gradually. As font-size increases, you want the letter-spacing to decrease, tightening headings and large text while keeping smaller text readable. As Tyler Sticka shows, modern CSS is up to the challenge, and it takes only one CSS rule.

7. OKLCH Color Tools

The OKLCH color model makes working with colors much easier as the colors are more accurate in terms of how humans perceive them. To help you harness the power of OKLCH, Jakub Krehel created oklch.fyi, a suite of OKLCH tools. They let you explore the color space, create color palettes, compare OKLCH and sRGB gradients, and convert colors to OKLCH.

Accessible UX Research, eBook Now Available For Download 📚

We’ve got exciting news! eBook versions of Accessible UX Research, a new Smashing Book by Michele A. Williams, are now available for download! Which means soon the book will go to the printer. Order the eBook for instant download now or reserve your print copy at the presale price.

Accessible UX Research is your practical guide to making UX research more inclusive of participants with different needs — from planning and recruiting to facilitation, asking better questions, avoiding bias, and building trust. Download a free sample (PDF, 2.3MB) or get the eBook right away.

That’s All, Folks!

Thank you so much for reading and for your support in helping us keep the web dev and design community strong with our newsletter. See you next time!

This newsletter issue was written and edited by Geoff Graham (gg), Cosima Mielke (cm), Vitaly Friedman (vf), and Iris Lješnjanin (il).

Editorial

Designers are often opinionated, and that’s a good thing. We raise uncomfortable questions, voice concerns, and question decisions. But in the words of Andy Budd, “best teams don’t treat pessimism as a threat. They treat it as insurance.” Designers aren't trying to be difficult — just to make sure a vision survives first contact with reality.

In this newsletter, we feature a few helpful tools and resources for designers — with lessons learned, advice on design career, tools, and useful techniques.

Today’s newsletter issue is kindly powered by our dear friends at Penpot, a wonderful free, open-source tool for design and code collaboration, without handoff challenges and with support for prototyping, UI design, and code — all in one tool. Heads up to the entire Penpot team for their hard work and kind support! 🧡

We hope you’ve already set your alarm clocks: Join us tomorrow for Smashing Meets Easy Accessibility (free for everyone — please spread the love!). We’ve also prepared many front-end & UX online workshops to help you plan your events early next year:

• Figma Workflow Masterclass Design
  with Christine Vallaure. Dec 10–16
• Behavioral Design Workshop UX
  with Susan and Guthrie Weinschenk. Jan 15– 29
• Deep Dive On Accessibility Testing Dev
  with Manuel Matuzović. Jan 19 – Feb 2
• AI For Everyone: Deep-Dive Into Lovable Free
  with Chirstina Vallaure. Jan 20
• Design Patterns For AI Interfaces UX
  with Vitaly Friedman. Feb 16 – Mar 2
• Designing For Complex UIs UX
  with Vitaly Friedman. Mar 3–17
• Jump to all workshops →

Thanks for being smashing! 🧡 Happy designing, everyone!

— Vitaly

1. The Rhythm Of Your Screen

The length of a screen is not the problem; lack of rhythm is, argues Christopher Butler. To retain your users’ attention as they scroll and scan through a page, he shares four simple tips for better information architecture. They help you create structure and rhythm, making it easier for users to quickly process information.

2. Icon Design Principles

Designing high-quality icons is an art that requires a lot of practice to finally master it. But what exactly is the secret behind great icons? What do you need to consider to successfully convey meaning with just a few strokes? Helena Zhang explores the question, illustrating seven principles of great icon design through real-world examples.

3. Fixing A Broken Color Palette

Too many choices, inconsistencies, inaccessible combinations, and color names that are difficult to make sense of — fixing a broken color palette can seem like an overwhelming task. So, where to begin? Adam Wilson shares precious insights into how the Skyscanner team refined their color palette, along with process, naming, testing, and explorations to get there.

4. The Only Designer

Being the only designer at a startup is exciting but also exhausting. Maria Gonzalez knows this from her own experience, and so she decided to collect tips on being the only brand, communications, visual, or business designer at a startup. If you, too, have lived it and would like to share insights on what it’s like, you are welcome to contribute your story so others can learn from it.

5. Semantic Art Gallery

Imagine an art gallery curated just for you, based on your mood and imagination. That is what the Semantic Art Gallery is all about. The AI-powered art search engine finds actual artworks from history that embody the emotion or idea that you type in, no matter how poetic or nuanced your query might be. A breathtaking example of what can be achieved with LLMs, beyond the typical prompt bar for generation.

Upcoming Workshops and Conferences

For the last years, we’ve been running accessible, practical online workshops on frontend and UX, be it accessibility, performance, or design patterns. In fact, we have a couple of workshops coming up soon, and we thought that, you know, you might want to join in as well.

As always, here’s a quick overview:

• Figma Workflow Masterclass Design
  with Christine Vallaure. Dec 10–16
• Behavioral Design Workshop UX
  with Susan and Guthrie Weinschenk. Jan 15– 29
• Deep Dive On Accessibility Testing Dev
  with Manuel Matuzović. Jan 19 – Feb 2
• Design Patterns For AI Interfaces UX
  with Vitaly Friedman. Feb 16 – Mar 2
• How To Measure UX & Design Impact UX
  with Vitaly Friedman. Video course + UX Training
• Jump to all workshops →

6. A Synthesizer For Color

Frustrated by existing color palette generators, Ryan Feigenbaum created Color Palette Pro, a color palette generator with a synthesizer-like interface. It generates six different color palettes based on a base color, in four styles and across eight color spaces and formats. To dive deeper into what it is capable of, also be sure to check out Ryan’s blog post.

7. Lessons Of Design

After almost 20 years in design, Fabricio Teixeira decided to pause for a moment to write down what he finds compelling about his craft. Why does he do what he does? What lessons has he learned? And why does he choose to continue doing it? Lessons of Design is a treasure chest of design wisdom for both aspiring and experienced designers.

8. Design Career Milestones

Whether it’s working with challenging clients, developing a unique style, or balancing client work and passion projects, there are certain milestones that most designers reach during their professional lives. Readymag collected personal stories from experienced design leaders to reflect on common challenges and ways to master them.

9. Meet Design System Culture, Our Upcoming Smashing Book 📚

We have exciting news! We’re so happy to announce that “Maturing Design Systems,” a Smashing book by Ben Callahan, will soon be joining the Smashing Library! Ben’s insights and advice are so powerful, and we can’t wait to share this book with you! Pre-orders will be available soon.

You can read an excerpt of Maturing Design Systems, in which he explores the anatomy of a design system, explains how culture shapes outcomes, and shares practical guidance for the challenges at each stage — from building v1 and growing healthy adoption to navigating “the teenage years” and ultimately running a stable, influential system.

Stay signed up to our Smashing newsletter and be one of the first to know when Maturing Design Systems is available for preorder. We can’t wait to share this book with you!

That’s All, Folks!

Thank you so much for reading and for your support in helping us keep the web dev and design community strong with our newsletter. See you next time!

This newsletter issue was written and edited by Geoff Graham (gg), Cosima Mielke (cm), Vitaly Friedman (vf), and Iris Lješnjanin (il).

Editorial

Performance tooling! Web performance might seem daunting at first, yet there is no shortage of neat little helpers to help us all find bottlenecks and opportunities to boost it. This newsletter is just about that.

We’ll cover tools for HTTP header performance, TTFB testers, little helpers to track bottlenecks, and an image analysis tool — just a few helpful bookmarks to keep close when working on web perf-related issues.

Today’s newsletter issue is kindly powered by our dear friends at DebugBear, a useful performance tool to monitor and optimize performance, including Google CrUX Data and RUM. Heads up to Matt and the team for their hard work and kind support! 🧡

The Smashing team is always on the roll: there are still early-bird tickets to SmashingConf Antwerp 2026 🍫 left! Until then, we have online workshops to finish the year strong:

• Theming Design Systems Design
  with Samantha Gordashko. Dec 1–15
• How To Measure UX And Design Impact UX
  with Vitaly Friedman. Dec 1–12
• The New CSS Toolkit Dev
  with Kevin Powell. Dec 3–17
• Figma Workflow Masterclass Design
  with Christine Vallaure. Dec 10–16
• Jump to all workshops →

Thank you, dear friends, and off we go into the world of testing, documenting, and applying web accessibility!

— Vitaly

1. Testing TTFB Around The World

Time to First Byte (TTFB) measures how quickly visitors to your website receive a response from your server. And that varies, depending on where they are located in the world. To find out where your website is fast and where you need to improve, DebugBear’s TTFB Test tests TTFB from ten locations across the globe — from San Francisco to Tokyo, Helsinki to Sydney.

2. Useful WebPerf Snippets

Whether you need an overview of all resources that are blocking rendering or want to track all interactions as you click around a page, Joan León’s WebPerf Snippets are sure to come in handy. It’s a curated list of useful snippets for Core Web Vitals, interaction, and loading. You can paste them into the browser console or run them directly in Chrome DevTools.

3. HTTP Header Performance Analyzer

A misconfigured website header has a direct negative impact on a site’s performance. To help you ensure your server’s HTTP headers are optimized for speed, Arjen Karel created the HTTP Header Performance Analyzer. All you need to do is enter a URL, and the tool analyzes the header for caching, compression, protocol, and security optimizations.

4. Find And Fix Performance Issues

Does your site respect performance good practices? And are there any front-end problems that slow it down? Yellow Lab Tools makes it easy to find out. Created by Gaël Métais, the tool collects various metrics and statistics for a given URL, which are then categorized and transformed into scores. No worries, you’re not left alone with the detected issues: The tool also provides precise information on how to fix them.

5. Get Your <head> In Order

How you order elements in the <head> of your page can affect performance, and the Capo.js Chrome extension is a handy little helper for optimizing sort order. The script logs two info groups to the console: the actual order of the elements in the <head> and the optimal order. A color system makes it easy to spot any high-impact elements out of order at a glance.

6. Context-Aware Web Performance

A low battery, weak connection, or enabled data saver mode — wouldn’t it be cool if you could adapt the experience based on a user’s context? Obs.js makes it possible. It uses the Navigator and Battery APIs to get contextual information about your user’s connection strength, battery status, and device capability, so you can adapt delivery accordingly.

7. Image Analysis Tool

Optimizing images can significantly speed up page load time. If you want to explore how changes to image size, format, quality, and encoding affect your site’s performance, Cloudinary’s free Website Image Analysis Tool provides you with actionable insights. It analyzes the images on any given page and evaluates the optimization potential.

8. Upcoming Workshops and Conferences

That’s right! We run online workshops on frontend and design, be it accessibility, performance, or design patterns. In fact, we have a couple of workshops coming up soon, and we thought that, you know, you might want to join in as well.

As always, here’s a quick overview:

• How To Measure UX And Design Impact UX
  with Vitaly Friedman. Dec 1–12
• The New CSS Toolkit Dev
  with Kevin Powell. Dec 3–17
• Figma Workflow Masterclass Design
  with Christine Vallaure. Dec 10–16
• Behavioral Design Workshop UX
  with Susan and Guthrie Weinschenk. Jan 15– 29
• Deep Dive On Accessibility Testing Dev
  with Manuel Matuzović. Jan 19 – Feb 2
• Design Patterns For AI Interfaces UX
  with Vitaly Friedman. Jan 22 – Feb 26
• Designing For Complex UI Masterclass UX
  with Vitaly Friedman. Mar 3–17
• AI Design Patterns + Measure UX UX
  with Vitaly Friedman. Friendly UX bundles (30% off)
• Jump to all workshops →

9. Meet Design System Culture, Our Upcoming Smashing Book 📚

We have exciting news! We’re so happy to announce that “Maturing Design Systems,” a Smashing book by Ben Callahan, will soon be joining the Smashing Library! Ben’s insights and advice are so powerful, and we can’t wait to share this book with you! Pre-orders will be available soon.

You can read an excerpt of Maturing Design Systems, in which he explores the anatomy of a design system, explains how culture shapes outcomes, and shares practical guidance for the challenges at each stage — from building v1 and growing healthy adoption to navigating “the teenage years” and ultimately running a stable, influential system.

Stay signed up to our Smashing newsletter and be one of the first to know when Maturing Design Systems is available for preorder. We can’t wait to share this book with you!

That’s All, Folks!

Thank you so much for reading and for your support in helping us keep the web dev and design community strong with our newsletter. See you next time!

This newsletter issue was written and edited by Geoff Graham (gg), Cosima Mielke (cm), Vitaly Friedman (vf), and Iris Lješnjanin (il).

Editorial

What does success look like for your UX team? Hopefully, it’s not just the velocity of delivery or the number of completed Jira tickets per month. As designers become a bit less tactical and a bit more strategic, we have to find ways to measure UX, and what impact it has on business.

This newsletter is all about that — how to measure UX and how to establish design KPIs. From UX metrics and UX scorecards to measuring experiences, not product use. If you’d like to dive deeper, we have a whole practical guide on measuring UX — along with the upcoming live online workshop starting next week.

We’ve also just announced our shiny new SmashingConf Antwerp 2026 🇧🇪 — a friendly, practical conference in beautiful Antwerp, with insights and hands-on workshops on design, UX, design systems, design patterns, AI, accessibility and Figma. Get your early-bird ticket!

Upcoming workshops this/next week:

• Theming Design Systems Design
  with Samantha Gordashko. Dec 1–15
• How To Measure UX And Design Impact UX
  with Vitaly Friedman. Dec 1–12
• The New CSS Toolkit Dev
  with Kevin Powell. Dec 3–17
• Figma Workflow Masterclass Design
  with Christine Vallaure. Dec 10–16
• Jump to all workshops →

Wishing you a fantastic rest of the week, everyone — and happy Thanksgiving as well!

— Vitaly

1. Practical Guide To Measuring UX

Terms like UMUX or SEQ can seem quite intimidating when you set foot into the world of UX metrics. No worries, they don’t have to be, and you don’t need to be a statistician to evaluate a design, either. To help you take your first steps towards objective evaluation, Roma Videnov wrote an easy-to-read guide to measuring UX.

2. UX Metrics

If you want to learn more about the different types of UX metrics at your disposal, Alex A. Szczurek compiled a comprehensive list, covering everything from behavioral and attitudinal metrics to engagement and outcome metrics. For each of them, she summarizes what it measures, why it’s important, and, if necessary, how to calculate it.

3. The Value Of The Right UX Metrics

“To measure someone’s happiness, measure whether you’ve improved their life,” argues Jared M. Spool. He shares a story of how a UX team used outcome-driven metrics instead of standard UX metrics to demonstrate the value of their work to executives. A great example of how you can make the impact that UX improvements have on a business much more tangible.

4. UX Metrics Cheat Sheet

You’re already familiar with measuring UX and are looking for a quick overview of UX metrics? Measuring U published a cheat sheet that lists more than 70 UX metrics, organized from task-level to study-level, and highlighting popularity, ease of collection, and reference benchmarks at a glance. A handy little helper you might want to keep close for future reference.

5. How To Select A UX Metric

With so many UX metrics available, it can be challenging to decide which ones to pick to get exactly the insights you need. To help you choose the right measures for your observations, Jeff Sauro and Jim Lewis break the decision down into five simple steps. This approach works particularly well when combined with the Measuring U cheat sheet.

6. Quantifying And Communicating UX

If you’re looking for a real-world example of how to quantify the user experience and communicate the results with a UX scorecard, Matthew Garvin has got you covered. He wrote a helpful guide that dives deep into the maths behind UX metrics and how to turn the analysis into a scorecard that enables teams to clearly identify priorities for their next sprint.

7. Accessibility Metrics Scorecard

Accessibility isn’t just a compliance checkbox; it’s a human right, and when treated as a core principle, it can become a driver of innovation, user satisfaction, and business growth. Based on insights from companies across different industries, the team at Stark created an Accessibility Metrics scorecard template that helps you establish or refine your accessibility processes and connect them to business KPIs.

8. How To Create A UX Scorecard

How has our product changed over time? How does it compare to others in the industry? UX scorecards can help address questions like these. Nikki Anderson and Allison Corr wrote a practical guide to creating a UX scorecard in eight steps. It covers everything from setting goals to conducting your study and visualizing your findings.

9. Meet Accessible UX Research, A Brand-New Smashing Book 📚

In the past few years, we were very lucky to have worked together with some talented, caring people from the web community to publish their wealth of experience as printed books. For our newest book, we have teamed up with Dr. Michele A. Williams: Meet “Accessible UX Research.”

“Accessible UX Research” is your practical guide to making UX research more inclusive of participants with different needs — from planning and recruiting to facilitation, asking better questions, avoiding bias, and building trust. Print edition shipping early 2026. eBook available for download in December 2025. Pre-order the book, and save off the full price.

That’s All, Folks!

Thank you so much for reading and for your support in helping us keep the web dev and design community strong with our newsletter. See you next time!

This newsletter issue was written and edited by Geoff Graham (gg), Cosima Mielke (cm), Vitaly Friedman (vf), and Iris Lješnjanin (il).

Editorial

AI is reshaping how we design and build digital products, but if our tools and UIs are not accessible, we are simply amplifying exclusion at scale. From accessible AI chat to fully accessible chatbots, we need conversational UIs that work reliably with assistive technologies, respect humans, and have clear, predictable interaction patterns.

In this newsletter, we look at accessible, respectful AI that helps teams design and build sustainable, ethical workflows. They are how we make sure AI is not there, but genuinely usable and beneficial for everyone.

On the Smashing side of things, we have a few friendly online workshops to keep you on your toes:

• Why You Will Not Be Replaced by AI (Nov 19, free!)
• Smashing Meets Accessibility (Dec 10, free!)

• Theming Design Systems Design
  with Samantha Gordashko. Dec 1–15
• How To Measure UX And Design Impact UX
  with Vitaly Friedman. Dec 1–12
• The New CSS Toolkit Dev
  with Kevin Powell. Dec 3–17
• Figma Workflow Masterclass Design
  with Christina Vallaure. Dec 10–16
• Jump to all workshops →

We hope you’ll enjoy today’s newsletter! Thank you as always for reading and for your kind and ongoing support — we sincerely appreciate it!

— Iris

1. Accessible AI Chat

From how a user provides input to how responses are displayed and how resulting processes flow, chatting with AI brings along some unique accessibility challenges, particularly for screen reader and keyboard users. Mike Gower dives deep into the accessibility of AI chats and how we can work towards a more inclusive AI experience.

2. The State Of AI Accessibility

Some see AI as the ultimate solution, others as armageddon in motion. But what are the facts when it comes to AI and accessibility? In her talk at FFConf last year, Léonie Watson cut through the noise to examine the good, the bad, and the “bollocks” of AI and accessibility. A recording is available on YouTube.

3. How To Build An Accessible Chatbot

Chatbots are often an accessibility barrier. After testing dozens of chat widgets with screen readers and other assistive technologies, Darren Lee decided to build a more accessible prototype for a chat interface. As he points out, the code is quite messy, but it is intended to open discussions between teams and provide a starting point for better implementation.

4. Accessibility And The Agentic Web

Even the most accessible e-commerce website doesn’t provide enough information to let users who can’t see the product images make a confident choice. Léonie Watson explores how AI-powered personal shopping assistants can enhance accessibility and what a shift towards agentic AI could mean for the future of the web.

5. AI Work Study Guide

AI doesn’t guarantee better, more efficient work, but it can assist in your existing UX workflow. Tanner Kohler compiled a study guide with links to useful articles and videos that the NN/g published on using AI for UX work. Practical tips, not only for leveraging AI in a clever way, but also for staying valuable as a UX professional in the age of AI.

6. AI Chat Patterns

If you’re looking for a quick overview of what to consider to make a chat component accessible, the Visa Product Design System has got you covered. It summarizes accessibility best practices for implementing chat components, including an overview of how screen readers work and how to get sender identification and chat announcements right.

7. Accessibility Annotation Toolkits

Accessibility often gets overlooked and then needs to be fixed for compliance later on. To resolve potential accessibility issues before they even emerge, it is a good idea to document accessibility already in your design files. Vitaly collected Figma toolkits that make accessibility annotations so easy that they become a natural part of your design workflow.

8. Deque Axe AI

Deque released a suite of three AI-powered accessibility tools that combine human expertise with automation and AI to help developers identify and fix accessibility issues. The tools provide accessibility issue detection in the IDE, answer your accessibility questions, and run Intelligent Guided Tests right in your browser.

9. Lightning Design System

With generative AI experiences, we are facing new, dynamic UI needs. The Salesforce team expanded its Lightning Design System to support these needs, reimagining how design systems work, both within the design-development workflow and within dynamically generated user experiences. It includes guidelines for agentic design and a Figma library with patterns for designing agentic experiences.

10. Meet Accessible UX Research, A Brand-New Smashing Book 📚

In the past few years, we were very lucky to have worked together with some talented, caring people from the web community to publish their wealth of experience as printed books. For our newest book, we have teamed up with Dr. Michele A. Williams: Meet “Accessible UX Research.”

“Accessible UX Research” is your practical guide to making UX research more inclusive of participants with different needs — from planning and recruiting to facilitation, asking better questions, avoiding bias, and building trust. Print edition shipping Fall 2025. eBook also available for download in Fall 2025. Pre-order the book, and save off the full price.

That’s All, Folks!

Thank you so much for reading and for your support in helping us keep the web dev and design community strong with our newsletter. See you next time!

This newsletter issue was written and edited by Geoff Graham (gg), Cosima Mielke (cm), Vitaly Friedman (vf), and Iris Lješnjanin (il).

Editorial

In the noisy and polluted world today, trust doesn’t come for free. It doesn’t emerge by default. It must be earned and meticulously preserved — by being reliable, accountable, and treating customers with respect. This holds true for people, but it also holds true for software.

In this newsletter, we look at design patterns for building trust — with useful guidelines and pointers to more trustworthy and reliable AI experiences, and how to orchestrate them. And if you’d like to dive deeper, we have a whole video library on design patterns for AI as well.

As always, we have a good number of friendly online workshops to finish this year off strong:

• Why You Will Not Be Replaced by AI (Nov 19, free!)
• Smashing Meets Accessibility (Dec 10, free!)

• Theming Design Systems (Dec 1–15)
• How To Measure UX and Design Impact (Dec 1–12)
• The New CSS Toolkit (Dec 3–17)
• Figma Workflow Masterclass (Dec 10–16, early-bird tickets available!)

Thanks for being smashing! 🧡 Happy designing, everyone!

— Vitaly

1. Building Trust In AI Products

Am I chatting with AI or a human being? Can I trust this AI-generated answer? What are the sources? AI products are super powerful, but as designers, we need to be extra careful to ensure that users have the confidence not only that the product works reliably but also in alignment with their personal goals and values. So, how can we achieve that? How to design AI products that people can trust?

Anyi Sun and Andrea Nguyen from KoiStudios published a helpful PDF guide on exactly that. It explores the psychology of trust and highlights ten essential UX patterns for building trust in AI products, along with real-world examples for each pattern. Short and sweet tips to help you integrate trust-building elements into the user experience. (cm)

2. Trust-Building UX Patterns

Trust is a fundamental human need. As users, we want to feel safe and secure when we use a product or service. We want to be sure that we are in control and that our data and privacy are protected. It’s that feeling of trust that can set a product apart from the competition.

The team at IF published a useful design patterns catalogue with UX patterns that help teams design trustworthy services. It shines a light on more than 60 patterns across six categories: understanding and influencing decisions, signing in, giving and removing consent, giving access to data, getting access to data, and doing security checks. Each pattern not only comes with a short summary of why it matters, but also a list of advantages, limitations, and examples. (cm)

3. UI For AI

With AI here to stay, user interfaces need to evolve. So, what could this look like? What could a UI look like that is optimized for AI-powered products, while going beyond the chatbot text box? Dan Saffer works with a group of students to explore exactly that. He shares insights into the group’s ongoing work in a series of blog posts.

The goal of “UI for AI,” as the project is called, is to find new ways of making the unique capabilities of AI understandable and more useful. By now, the group has created low-fidelity prototypes for recurring concepts that structure the user experience when interacting with generative models, among them memory handling, context switching, conversation flow, blank canvas, and refinement. Interesting ideas are guaranteed. (cm)

4. AI Interaction Patterns

How are designers responding to the challenges that AI brings along? When Emily Campbell started consulting teams on AI and product strategy, she noticed how inconsistent the existing experiences were. Companies are prioritizing “doing AI” but struggling to gracefully integrate it into their current products, so her observation. To help designers make AI feel familiar and straightforward for users, Emily created The Shape of AI.

The Shape of AI is a growing collection of AI interaction patterns that rely on proven human interaction and cognition frameworks. They cover everything from identifiers for distinguishing AI content to trust indicators for controlling the response and assessing its accuracy. A great reminder that although our interfaces may evolve due to the rise of AI, the foundations of good design are more relevant than ever. (cm)

5. IBM Design For AI Guidelines

With all the excitement surrounding AI, it’s tempting to rush to create something that takes advantage of these powerful new capabilities. To design for AI in a way that really benefits our users, we shouldn’t skip a crucial step, though: We need to reconsider our design considerations to account for this new kind of human/machine relationship. IBM’s Design for AI guide provides a solid foundation you can build upon.

Design for AI explores what designing for a system that can understand, reason, learn, and interact encompasses. It shines a light on design factors for AI, what is required to design authentic AI-based relationships, and the ethical implications involved. A thought-provoking read to get into the AI mindset. (cm)

6. Designing Loops, Not Paths

Historically, software design has followed workflow-based methodologies, breaking down objectives into a sequence of tasks to achieve a desired outcome. Like a script that is followed until the goal is met. However, as we all know, real life rarely follows a script. It is unpredictable and much messier than a linear process suggests. With recent advancements in AI, we now have an expanded range of design possibilities that allow us to better adapt to this complexity.

Matt Fick and Max Peterschmidt, Senior UX Architect and Principal User Researcher for Business & Industry Copilot at Microsoft, introduce a design practice that embraces the messiness of real life: loops. Instead of following a rigid, step-by-step workflow, loops operate as continuous cycles of sensing, deciding, and making adjustments until the goal is reached. A holistic approach that empowers people to better navigate the real world with all its unpredictability. (cm)

7. Meet Accessible UX Research, A Brand-New Smashing Book 📚

In the past few years, we were very lucky to have worked together with some talented, caring people from the web community to publish their wealth of experience as printed books. For our newest book, we have teamed up with Dr. Michele A. Williams: Meet “Accessible UX Research.”

“Accessible UX Research” is your practical guide to making UX research more inclusive of participants with different needs — from planning and recruiting to facilitation, asking better questions, avoiding bias, and building trust. Print edition shipping Fall 2025. eBook also available for download in Fall 2025. Pre-order the book, and save off the full price.

That’s All, Folks!

Thank you so much for reading and for your support in helping us keep the web dev and design community strong with our newsletter. See you next time!

This newsletter issue was written and edited by Geoff Graham (gg), Cosima Mielke (cm), Vitaly Friedman (vf), and Iris Lješnjanin (il).

Editorial

How do we write HTML emails in 2025? Historically, HTML email has always been complicated. Email clients change your code, add links where they might not be intended, remove styles or HTML, rename classes and IDs, and add their own styles and features — not to mention the world of Outlook.

In this newsletter, we look at the shiny new world of HTML emails — with useful tools, examples, guidelines, and techniques for responsive design and dark mode. If you need to design and build HTML emails every now and again, you might find a few helpful tools in there.

As we are nearing the end of the year, we also launched our final online workshops for this year:

• Design Patterns For AI + new video course 🍎 UX
  with Vitaly Friedman. Oct 30 – Nov 13
• UX Strategy In Action UX
  with Susan and Guthrie Weinschenk. Nov 6–20
• The New CSS Toolkit Dev
  with Kevin Powell. Dec 3–17
• Jump to all workshops → 🎢

We also have a few free online events coming up:

• Why You Will Not Be Replaced by AI UX (Nov 19)
• Smashing Meets Accessibility Dev (Dec 10)

And as always, I hope you’ll find a bit of time to slow down before the end of the year and crave a bit of time for yourself. Wishing you healthy, calm, and peaceful days, everyone! 🎉🥳

— Vitaly

1. Can I Email

A Can I Use for email? That’s the idea behind Can I Email. Created by Rémi Parmentier and the team at Tilt Studio, the site provides email client support tables for more than 300 HTML and CSS features.

To find out how well an HTML element or CSS property is supported, you can enter its name in the search bar, and Can I Email checks for support across 41 email clients, among them the usual suspects like Apple Mail, Gmail, and Outlook, as well as email clients that probably won’t come to your mind immediately. One for the bookmarks. (cm)

2. Dark Mode In Emails

Over the years, Dark Mode has been gaining steady adoption, also in email clients. In fact, as Litmus’ Email Client Market Share found, an average of 35% of the opens tracked in 2022 used dark mode. To help you get your emails fit for Dark Mode, Litmus published a comprehensive guide.

The guide is an all-in-one-hub for all things Dark Mode. It covers everything from how email clients apply Dark Mode to your emails and how you can apply your own Dark Mode styles, to Dark Mode image optimization and Dark Mode accessibility. You’ll also find code snippets and hacks developed by the email community, as well as a list of helpful Dark Mode tools, in there.

If you want to dive even deeper into Dark Mode, Alice Li, Principal Email Engineer at Litmus and author of the guide, gave a free one-hour talk in which she explores how to add Dark Mode to your email campaigns in four simple steps. With valuable tips and things to keep in mind when planning, designing, coding, and testing Dark Mode in emails. (cm)

3. Email Code Best Practices

If you’ve ever coded an HTML email from scratch, you know how tricky it can be, wrestling with email client inconsistencies, a lack of modern layout techniques, and limited CSS support. To help you get your emails up and running without the hassle, Mark Robbins created Good Email Code, a library with best practices for writing semantic, functional, and accessible email code.

The guide covers everything from the very basics, like setting up a base template and styling the container, to enhancing the email with absolute positioning workarounds and SVG, and finally, adding ARIA landmarks. If you’re in a hurry, you can simply copy-and-paste the code you need, or read up on the theory behind it to build a solid foundation for tackling all those email challenges that might come your way. (cm)

4. Tools For Optimizing Email Code

You have coded an HTML email and are ready to send it? Before you do so, you might want to run it through email-comb and html-crush. Created by Codsen, the two npm packages shave a few bytes off your code to improve loading and rendering.

email-comb removes unused CSS from your email. It can remove HTML and CSS comments and uglify and minify your code. You can also whitelist classes and IDs and define which HTML comments you don’t want to have removed.

html-crush, on the other hand, is a non-parsing, mixed-HTML email-template minifier. It removes line breaks, unnecessary whitespace, and HTML and CSS comments for you, and you can set a line length limit and define where you want lines to break. A powerful duo to help you optimize your email code before sending it. (cm)

5. Upcoming Workshops and Conferences

That’s right! We run online workshops on frontend and design, be it accessibility, performance, or design patterns. In fact, we have a couple of workshops coming up soon, and we thought that, you know, you might want to join in as well.

As always, here’s a quick overview:

• Design Patterns For AI + new video course 🍎 UX
  with Vitaly Friedman. Oct 30 – Nov 13
• UX Strategy In Action UX
  with Susan and Guthrie Weinschenk. Nov 6–20
• Why You Will Not Be Replaced by AI Free
  with Vitaly Friedman. Nov 19
• Theming Design Systems Design
  with Samantha Gordashko. Dec 1–15
• How To Measure UX And Design Impact UX
  with Vitaly Friedman. Dec 1–12
• The New CSS Toolkit Dev
  with Kevin Powell. Dec 3–17
• Figma Workflow Masterclass Design
  with Christina Vallaure. Dec 10–16
• Jump to all workshops →

6. Email Coding Guidelines

Not every email client supports <style> tags. So, how can we make an email work without them? Rémi Parmentier recommends focusing on two things in particular: layout and branding. Ensure your email can adjust to any width without horizontal scroll — Rémi suggests a minimum width of 280px — and be sure your email reflects your branding, even without <style>.

In his Email Coding Guidelines, Rémi dives deeper into principles you can apply to your email code so that it complies with modern email clients and gracefully degrades for others. The guidelines cover best practices for semantic text markup, styling with style properties, dealing with images, and more. Useful tips you can apply right away. (cm)

7. Email Inspiration

Are you looking for some email inspiration? Really Good Emails has got you covered. The site features over 15,000 emails across different industries — from advertising and e-commerce to nonprofits, news, financial, and many more.

For a look into what’s trending, you can view the most popular emails on the platform, or use the filters to fine-tune your search and get inspiration for your specific use case. The filters cover almost every purpose and objective one can think of, including onboarding, abandoned cart, customer service, and product sales, just to name a few. Each email comes with a preview of the desktop and mobile versions and the code in case you want to dig deeper. (cm)

8. Meet Accessible UX Research, A Brand-New Smashing Book 📚

In the past few years, we were very lucky to have worked together with some talented, caring people from the web community to publish their wealth of experience as printed books. For our newest book, we have teamed up with Dr. Michele A. Williams: Meet “Accessible UX Research.”

“Accessible UX Research” is your practical guide to making UX research more inclusive of participants with different needs — from planning and recruiting to facilitation, asking better questions, avoiding bias, and building trust. Print edition shipping Fall 2025. eBook also available for download in Fall 2025. Pre-order the book, and save off the full price.

That’s All, Folks!

Thank you so much for reading and for your support in helping us keep the web dev and design community strong with our newsletter. See you next time!

This newsletter issue was written and edited by Geoff Graham (gg), Cosima Mielke (cm), Vitaly Friedman (vf), and Iris Lješnjanin (il).

Editorial

CSS doesn't stand still. Over the years, we've fixed so many issues that we've been struggling for years — from cascade layers to field sizing to text-wrap: balance. But CSS keeps evolving, and in this email, we'd love to highlight a few CSS techniques that might be useful for your front-end work.

Quick reminder: we’ve announced SmashingConf Amsterdam 2026 🌷 — our brand new conference for designers, UX and UI engineers — all around CSS, design patterns, accessibility, and design systems. Get your ticket.

As winter is coming up, we have a few friendly online workshops coming up as well:

• Design Patterns For AI + new video course 🍎 UX
  with Vitaly Friedman. Oct 30 – Nov 13
• UX Strategy In Action UX
  with Susan and Guthrie Weinschenk. Nov 6–20
• The New CSS Toolkit Dev
  with Kevin Powell. Dec 3–17
• Jump to all workshops → 🎢

We also have a few free online events coming up:

• Why You Will Not Be Replaced by AI (Nov 19)
• Smashing Meets Accessibility (Dec 10)

And as always, I hope you’ll find a bit of time to slow down before the end of the year and crave a bit of time for yourself. Wishing you healthy, calm, and peaceful days, everyone! 🎉🥳

Happy designing, everyone!

— Vitaly

1. Compressed Fluid Typography

Fluid type calculations almost always start from the assumption that the base font size is 16px. But what if it isn’t? What happens to your type scale if a user adjusts their browser’s default font size to 24px, for example? Matthias Ott shares an approach that helps you prevent your font scale from scaling up uncontrollably in such cases, while still respecting your users’ preferences.

The approach introduces a damping factor into the calculation that compresses the fluid type scale; the larger the base font size gets, i.e., the overall growth rate of the typography slows down as the user’s base font size increases to ensure visual balance. If you decide to use the approach in practice, be careful, though: as Matthias points out, it doesn’t fully comply with WCAG requirements, and you’ll need a fallback for non-supporting browsers.

Speaking of fluid typography: Ash Bryant created a handy little tool to help you create a fluid type scale. With just a few clicks, you can configure, review, and export a type scale to use it in your project right away. (cm)

2. New CSS Features

CSS is evolving so fast that it’s impossible to stay on top of everything that’s new. Now, wouldn’t it be cool if you could take just 30 minutes of your time, lean back, and someone would explain all those shiny new CSS features to you? The talk that Adam Argyle gave at CascadiaJS in September did exactly that, and the recording is now available on YouTube.

Jam-packed with CSS wisdom, Adam’s talk takes you through 25 CSS features from the past five years in just 30 minutes. Covering everything from view transitions, range syntax, and cascade layers to custom scrollbar styling, dialogs, textbox trim, and much more, the talk provides good examples and practical use cases for each feature it tackles. A must-watch for anyone who wants to stay ahead of the CSS game. (cm)

3. CSS Anchor Positioning

Let’s say you have a simple card component that contains an image, title, description, and category tag. You want to position the category tag on top of the image, in the top right corner. Easy, right? But as soon as you change the card layout to horizontal on larger screens, the whole thing is likely to break, as the category tag moves to the right and away from the image. Luckily, anchor positioning is here to fix problems like this one, without relying on fragile hacks.

Based on the above example, Ahmad Shadeed wrote a comprehensive introduction to anchor positioning. Anchor positioning allows you to position an element relative to another anchor, regardless of whether it’s a parent or not. And there’s more to it, as Ahmad shows: With anchor positioning, you can also use the position-try-fallbacks property to make a target element switch its position if it doesn’t fit perfectly within the viewport. A powerful little CSS feature that makes positioning so much more straightforward. (cm)

4. CSS Round-Out Tabs

Have you used CSS shape() already? Chris Coyier came up with a use case that shows the function’s full potential: He created a set of “round-out” tabs, where the literal tab part of the UI connects to the content below with a rounded edge that flares out as it is connected.

Usually, creating an effect like this required hacks with additional elements, but shape() finally gives us a primitive that can draw anything you could draw with a pen tool. Chris wrote a blog post in which he walks you step-by-step through the process of carving the tab shape out of a rectangle, with the help of shape() and clip-path. What makes the approach extra cool is that the tab shape is not completely fixed (parts of it can be fixed coordinates, while other parts are flexible), and you can variablize it to adjust the look on the fly. (cm)

5. Upcoming Workshops and Conferences

That’s right! We run online workshops on frontend and design, be it accessibility, performance, or design patterns. In fact, we have a couple of workshops coming up soon, and we thought that, you know, you might want to join in as well.

As always, here’s a quick overview:

• Design Patterns For AI Interfaces + new video course 🍎 UX
  with Vitaly Friedman. Oct 30 – Nov 13
• UX Strategy In Action UX
  with Susan and Guthrie Weinschenk. Nov 6–20
• Why You Will Not Be Replaced by AI Free
  with Vitaly Friedman. Nov 19
• Theming Design Systems Design
  with Samantha Gordashko. Dec 1–15
• How To Measure UX And Design Impact UX
  with Vitaly Friedman. Dec 1–12
• The New CSS Toolkit Dev
  with Kevin Powell. Dec 3–17
• Figma Workflow Masterclass Design
  with Christina Vallaure. Dec 10–16
• Jump to all workshops →

6. How Much Do You Know About Media Queries?

When you think of media queries, what comes to your mind? Probably the classics like @media (min-width: 400px) or @media (prefers-reduced-motion: reduce), right? But media queries have a lot more to offer, as Daniel Schwarz shows.

In his post “How much do you really know about media queries,” Daniel explores eight of the lesser-known descriptors, among them any-hover and any-pointer, forced-colors, orientation, and resolution. Once you understand how to use them, they are a great way to cater to more user preferences and to get ahead of the curve of any new and amended accessibility laws. (cm)

7. New CSS Reset

Modern browsers have become a lot more consistent in their default styling, yet a CSS reset can still be a good choice if you want a better baseline for your style sheets. If you’re looking for a light but powerful CSS reset that achieves exactly that, UA+ is for you.

Created by Manuel Matuzović, UA+ goes a different route than other reset style sheets. Instead of mostly resetting and normalizing properties, it focuses on improving existing user agent styles and adding new styles only where browsers fall short. It also puts a special focus on accessibility. If you’re curious to see what the UA+ styles look like compared to your browser’s default styles, be sure to check out the demo pages. The tweaks might be barely noticeable, but, as Manuel points out, they help browsers where needed. (cm)

8. CSS To Speech

Providing alternative text to meaningful images is a WCAG requirement, and images and characters inserted in CSS should be treated the same way you treat HTML images. So, how to provide alt text to CSS-generated content to make sure it is announced as expected?

Historically, we had to resort to workarounds using placeholder spans in the markup for this purpose, but now we finally have a better way: We can provide alt text for CSS-generated content directly in CSS, after a slash following the content. Sara Soueidan wrote a comprehensive guide on how it works and what to watch out for. (cm)

9. Split Flap CSS

Do you remember the split-flap boards at train stations? The ones that cycle through different faces, until the desired characters are displayed to spell out destinations, train numbers, and arrival times? If you’re up for some sweet nostalgia, Tim Farnam recreated the split flap effect with CSS, and not only that, he also built a playground where you can create your own split flap animation and copy the code with just a click.

In the accompanying blog post, Tim dives deeper into the CSS that fuels the effect and how each element can be used to adjust it. He also shows examples of styled split flaps that elaborate the idea further to create different effects, among them a glass and a Rubik’s Cube effect. A great example of what can be achieved with CSS if you think outside the box. (cm)

10. Meet Accessible UX Research, A Brand-New Smashing Book 📚

In the past few years, we were very lucky to have worked together with some talented, caring people from the web community to publish their wealth of experience as printed books. For our newest book, we have teamed up with Dr. Michele A. Williams: Meet “Accessible UX Research.”

“Accessible UX Research” is your practical guide to making UX research more inclusive of participants with different needs — from planning and recruiting to facilitation, asking better questions, avoiding bias, and building trust. Print edition shipping Fall 2025. eBook also available for download in Fall 2025. Pre-order the book, and save off the full price.

That’s All, Folks!

Thank you so much for reading and for your support in helping us keep the web dev and design community strong with our newsletter. See you next time!

This newsletter issue was written and edited by Geoff Graham (gg), Cosima Mielke (cm), Vitaly Friedman (vf), and Iris Lješnjanin (il).

Editorial

As AI Mode and AI Overviews take over web search, publishers find themselves in a zero-click world — search impressions increase, but clicks rapidly decrease. Around 30–40% of all Google searches globally now return an AI Overview, and many websites see alligator graphs in Google Search Console.

It has an impact on publishing, but also on the search experience and search behavior of users. And in this newsletter, we dive deep into the state of search in 2025 — from zero-click world to AI search crawlers to good old-fashioned autocomplete UX.

Later this month, we will also start 🔮 Design Patterns For AI Interfaces, a shiny new online workshop (and video course) on how to design AI experiences that people actually use — in terms of AI capabilities, trust, reliability, and how to build confidence and trust in AI features. Get your ticket.

Also, coming up near you soon (all online workshops):

• UX Strategy in Action (Nov 6–20)
• Free: Why You Will Not Be Replaced by AI (Nov 19)
• How To Measure UX and Design Impact (Dec 1–12)
• Theming Design Systems (Dec 1–15)
• SmashingConf Amsterdam 2026 🇳🇱

Happy designing, everyone!

— Vitaly

1. Traffic In A Zero-Click World

Increasing traffic is still the top goal for the majority of marketers and their primary KPI. However, with the Internet sending less traffic than ever before and AI taking your opportunity to get search traffic, we need to shift our focus into another direction, as Rand Fishkin argues.

In his blog post “In a Zero-Click World, Traffic is a Terrible Goal,” Rand dives deeper into why increasing traffic is not only much more challenging than it used to be but also much less likely to produce the kinds of bottom-line results you want.

To get brand attention, he recommends a different approach: try to be a helpful, useful resource in the places where people are going to look for advice — Reddit, Linkedin, and YouTube, for example — and put your focus on what your business really wants to accomplish instead of putting all your efforts into trying to generate traffic. (cm)

2. Better Search Autocomplete UX

As the Baymard Institute found out, 80% of e-commerce sites provide their users with search autocomplete suggestions. However, only 19% get all the implementation details right. So, what’s to consider to design better search autocomplete experiences?

Based on Baymard Institute’s research findings, Edward Scott explores nine UX best practices for autocomplete suggestions, across both desktop and mobile platforms. From keeping the autocomplete list manageable to providing adequate spacing for autocomplete suggestions, the tips help you fine-tune your search autocomplete to remove usability issues and ensure users can use the feature to its full potential.

For more best practices, also be sure to check out Vitaly’s post in which he shares five simple steps to make autocomplete even more efficient and relevant by showing suggestions on focus, using tap-ahead suggestions, and exposing users to relevant details from the search box. (cm)

3. Designing Search UX

Search is a critical part of many products, yet too often it is forgotten or overlooked. Many users rely heavily on it, and investing time and effort into good search is usually a very good investment. So, how do people search and what do they expect from a first-class search experience? And what can designers do to design better experiences for them?

Last year, Vitaly gave a free 3.5-hour-long online workshop in which he explored just that. And, no worries in case you missed it, the recording is available on YouTube, along with the slides. With plenty of real-life examples and do’s and don’ts on how to design better autocomplete, deal with complex filters, improve sorting, design better search results pages, and enhance the experience for power users, this is a deep dive for sure. (cm)

4. How AI Is Changing Search Behaviors

It’s beyond doubt that generative AI is changing search behavior. But what is the current state of things? How do people these days do research? Where do they look for information when planning travel, researching historical events, or before making a bigger purchase?

To find out, Kate Moran, Maria Rosala, and Josh Brown from the Nielsen Norman Group conducted a qualitative study for which they asked people to bring their own research tasks into the virtual lab to explore how their information-seeking behaviors are shifting in response to AI-powered search tools and chatbots.

As the study shows, long-standing habits persist: many users still default to Google or use traditional search and AI in tandem, often for fact-checking each other. (cm)

5. Upcoming Workshops and Conferences

That’s right! We run online workshops on frontend and design, be it accessibility, performance, or design patterns. In fact, we have a couple of workshops coming up soon, and we thought that, you know, you might want to join in as well.

As always, here’s a quick overview:

• Design Patterns For AI Interfaces UX UX
  with Vitaly Friedman. Oct 30 – Nov 13
• UX Strategy In Action UX
  with Susan and Guthrie Weinschenk. Nov 6–20
• Why You Will Not Be Replaced by AI Free
  with Vitaly Friedman. Nov 19
• Theming Design Systems Design
  with Samantha Gordashko. Dec 1–15
• How To Measure UX And Design Impact UX
  with Vitaly Friedman. Dec 1–12
• The New CSS Toolkit Dev
  with Kevin Powell. Dec 3–17
• Figma Workflow Masterclass Design
  with Christina Vallaure. Dec 10–16
• Jump to all workshops →

6. Content Signals Policy

Companies scrape massive amounts of data from the Internet every day, using it as input for generative AI search answers or for training or fine-tuning AI models. This puts website operators in front of an almost impossible choice: Should they lock down access to their content behind logins to keep scrapers away? Or accept the reality of fewer referrals and minimal attribution? Cloudflare’s new Content Signals Policy attempts to address these concerns.

The policy is an addition to the robots.txt file and allows website operators to express their preferences for how their content can be used after it has been accessed. Released under a CC00 License, anyone can implement and use the policy freely. When doing so, keep one thing in mind, though: content signals express preferences; they are no technical countermeasures against scraping. (cm)

7. The State Of AI Search

With AI search gaining widespread adoption, optimizing for Google isn’t enough anymore. Brands today need to think about how AI systems interpret, summarize, and source content to show up in the results.

The team at Otterly AI conducted an AI search study to uncover what exactly marketing and SEO professionals need to consider to get their brand fit for the new challenges. They analyzed 100,000 websites across three major AI search platforms to find out how brands are being mentioned, cited, and surfaced in AI-powered results.

Another great resource that grants insights into the current state of search comes from the folks at Datos. Their State of Search Q2 2025 report draws from clickstream data collected from tens of millions of desktop users across the US, UK, and EU and delivers actionable insights into where people are spending time, how search habits are shifting, and what those changes mean for traffic, visibility, and engagement. Two must-reads to help you broaden your strategy beyond Google rankings. (cm)

8. AI Search Optimization Tools

Otterly AI offers two free tools to get your site fit for AI search. One of them is the AI Search Crawler Simulation. Just enter a website URL, and the tool simulates requests from major AI web crawlers to test if a website blocks them. To find out, it sends actual HTTP requests using specific user-agent strings of each crawler.

The other tool is GEO Content Check, designed to help improve your content for better visibility in AI search results. Same story here: You enter a URL or paste your content, and the tool works through a GEO (Generative Engine Optimization) framework with multiple steps to analyze your content. Two handy tools you might want to keep close. (cm)

9. Meet Accessible UX Research, A Brand-New Smashing Book 📚

In the past few years, we were very lucky to have worked together with some talented, caring people from the web community to publish their wealth of experience as printed books. For our newest book, we have teamed up with Dr. Michele A. Williams: Meet “Accessible UX Research.”

“Accessible UX Research” is your practical guide to making UX research more inclusive of participants with different needs — from planning and recruiting to facilitation, asking better questions, avoiding bias, and building trust. Print edition shipping Fall 2025. eBook also available for download in Fall 2025. Pre-order the book, and save off the full price.

That’s All, Folks!

Thank you so much for reading and for your support in helping us keep the web dev and design community strong with our newsletter. See you next time!

This newsletter issue was written and edited by Geoff Graham (gg), Cosima Mielke (cm), Vitaly Friedman (vf), and Iris Lješnjanin (il).

Editorial

Design systems! In today’s newsletter, we dive into practical techniques that prioritize work on design systems, naming structures for your design tokens, and adding handy additions to your design system toolbox. If you’re working on or with a design system, this newsletter might be useful for you.

This month, we’re launching two new online workshops and in-person workshops in Berlin — a great opportunity to sharpen your skills in a hands-on, collaborative setting:

• 🎛️ Designing For Complex UI in 2026 (Oct 27)
• ⏳ How To Measure UX and Design Impact (Oct 28)

For now, though, let’s dive into obscure but impressive design systems out there! Happy designing, everyone!

— Vitaly

1. Design System Tactics

How do you set up a strategy for a design system? How to introduce new components? And how to document and validate the system? Whether you’re at the very beginning of your design system journey or maintaining a mature system, Ness Grixti’s growing collection of Design System Tactics helps you make progress at every stage of the process.

The tactics are divided into seven categories, ranging from strategy and setup to system validation. Covering the very basics, just like the more nuanced problems you might encounter when working on a design system, they help you reduce friction, improve collaboration, and create a design system that people will love to use. (cm)

2. Design System Inventory Workshop

Which components in your product can be reused effectively? And which should be replaced with standardized options from the design system? A design system inventory helps you determine exactly that, and Farid Sabitov created a useful FigJam template to help you run a design system inventory workshop with your team.

The inventory workshop focuses on analyzing your product by mapping out a product sitemap, taking screenshots of its various pages, and reviewing them together to uncover inconsistencies that can be streamlined into standardized versions. A great foundation to prioritize which components to develop, refine, or unify.

Farid is currently working on yet another useful design system resource: an open-source design system maturity model and process map that captures the key stages, actors, activities, and deliverables involved in building and scaling a design system. If you’re interested in early access or want to help refine it with real-world feedback, you can get in touch with Farid on LinkedIn. (cm)

3. Prioritizing Design System Work

Once a design system has been well-adopted by designers and engineers, there’s a new challenge that design system teams often face: prioritizing requests. Alexander Fandén and the design system team at Agoda were in the same situation and developed a prioritization framework that not only helps them prioritize requests but also improves internal communication with the teams who rely on the design system for their day-to-day work.

In his article “Prioritizing Design Systems,” Alexander walks you step by step through his team’s approach and shares key learnings and tips to help you get started with a similar process if you’re facing similar challenges. If you plan to set up your own framework and processes, also take a look at the templates and references that the Agoda team prepared to get you started. (cm)

4. A Different Approach To Type Systems

Getting typography on the web right can be quite challenging, given all the unpredictabilities that a responsive environment brings along. Systemized solutions like 4px grids or component libraries help designers restore order, but as convenient as a tidy set of tokens and ratios can be, there are certain nuances that can’t be captured by standardizations and measurements: human perception, balance, and subtle adjustments, for example.

When the team at Daybreak Studio set out to design a type system for the prompt engineering tool Adaline, they put a special focus on these often-underestimated nuances to create a system that achieves optimal precision. They published a case study in which they share valuable insights into their approach and how they managed to get text readability, balance, vertical rhythm, baselines, and naming just right to serve meaning and respond thoughtfully to the needs of the product. A must-read for everyone who wants to lift their typography to the next level. (cm)

5. Upcoming Workshops and Conferences

That’s right! We run online workshops on frontend and design, be it accessibility, performance, or design patterns. In fact, we have a couple of workshops coming up soon, and we thought that, you know, you might want to join in as well.

As always, here’s a quick overview:

• Live UX Training + video course UX
  with Vitaly Friedman. Oct 17 – Nov 17
• Designing Better Products Masterclass UX UX
  with Stéphanie Walter. Oct 21 – Nov 4
• Design Patterns For AI Interfaces UX UX
  with Vitaly Friedman. Oct 30 – Nov 13
• Design Patterns For AI Interfaces.
  Video course with Vitaly Friedman (+ live UX training).
• Jump to all workshops →

6. Design Tokens Name Generator

Naming things can be hard, particularly in a design system where you want to create naming conventions that are consistent and scalable. Romina Kavcic created a useful tool to make experimenting with different naming structures for your design tokens easy: the Design Tokens Name Generator.

To create a naming convention, the tool lets you adjust different parameters, then add components, categories, and specific roles, as well as the states you want to include in your token structure. Based on these settings, it instantly generates a list of tokens, with appropriate random values and proper token types. Perfect for anyone who wants to refine their token naming strategy or establish one from scratch. (cm)

7. Design System Component Audit

How to maintain consistency in a design system? Luis Ouriach built a powerful Figma widget that does the heavy lifting for you. It audits and analyzes your design system components to ensure consistency and identify potential issues in your component library.

The Figma Component Audit Widget can run a quick scan to give you a summary of your component library across all pages. You can also view total pages, unique components, variants, and missing metadata, identify components with hardcoded values instead of design tokens, and check for missing descriptions and documentation links. A handy addition to your design system toolbox. (cm)

8. Meet Accessible UX Research, A Brand-New Smashing Book 📚

In the past few years, we were very lucky to have worked together with some talented, caring people from the web community to publish their wealth of experience as printed books. For our newest book, we have teamed up with Dr. Michele A. Williams: Meet “Accessible UX Research.”

“Accessible UX Research” is your practical guide to making UX research more inclusive of participants with different needs — from planning and recruiting to facilitation, asking better questions, avoiding bias, and building trust. Print edition shipping Fall 2025. eBook also available for download in Fall 2025. Pre-order the book, and save off the full price.

That’s All, Folks!

Thank you so much for reading and for your support in helping us keep the web dev and design community strong with our newsletter. See you next time!

This newsletter issue was written and edited by Geoff Graham (gg), Cosima Mielke (cm), Vitaly Friedman (vf), and Iris Lješnjanin (il).

Editorial

There is something magical in bringing people and teams together. This week, we’re at our very last conference of the year: SmashingConf New York! With 12 speakers and almost 400 attendees in the magnificent New World Stages venue, we’re looking forward to two days of single-track talks, two workshop days, and loads of side events!

As we are chasing ways to boost our workflows, sometimes we overlook lovely little websites; the kind that exist just to put a smile on someone’s face, or spark curiosity, or help discover things we’d never stumble upon otherwise. We dedicate this issue to lovely little adventures on the web — small discoveries that often leave a lasting impression, because they are so unique and memorable.

On another note, we’ve just launched new full-day workshops in Berlin 🇩🇪 — we’d love to meet you and your wonderful team there:

• 🎛️ Designing For Complex UI in 2026 (Oct 27)
• ⏳ How To Measure UX and Design Impact (Oct 28)

We hope that you’ll enjoy exploring the fun and useful gems in today’s newsletter; nothing too serious, and nothing too work-related. Happy browsing and exploration, everyone! 🎉🥳

— Iris

1. A Small World Inside Your Browser

Imagine you’re a messenger on a tiny planet. Equipped with your messenger bag, you set out to fulfill your mission: finding and delivering letters and packages to the residents. That’s the storyline of Messenger, a simple but breathtaking browser game created by Abeto.

The game takes you across the small, curved planet, through the alleyways of a small seaside town, and up its mountaintops. On your journey, you’ll not only meet the residents, each of them with their very special story and request, but also pass by fellow messengers with whom you can communicate through emojis. The game was created with WebGL and Three.js and runs just as smoothly in mobile browsers as it does on desktop. A stellar example of what is possible in browsers today. (cm)

2. Generative Design Experiments

Are you up for some generative design experiments? Then Generativ Design is for you. The playground lets you manipulate programmatically-generated graphics to produce unique outputs.

Created by Yasuhiro Yokota as a research prototype that combines generative art with practical applications for visual identity, the site features 26 graphical compositions, shapes, and visual effects for you to tinker with: randomly intersecting lines, organic shapes, text arranged in geometrical patterns, visualizations of tree rings, and much more. Each graphic comes with a set of sliders that make it easy to adjust its parameters and see the output change in real-time. Once you’re happy with the result, you can download it as a PNG. Nice! (cm)

3. Unconventional Web Design Inspiration

Although users mainly use their smartphones to browse the web today, desktop websites are still the main reference for designers looking for web design inspiration. To embrace the mobile-first reality we live in, Loadmo.re takes a different approach: The web design showcase is dedicated to mobile websites only. And, well, the sites that you’ll find in the collection are anything but ordinary.

Whether it’s a bookshop-inspired website where content is framed like windows, a site that uses experimental audio-reactive visuals, or a homepage where you can play around with gravity and draggable elements, the more than 360 featured mobile sites are full of creative ideas. You can filter the collection by tags or just scroll through it for some random inspiration. Enjoy! (cm)

4. Minimalism Life

Whether it’s art, design, or living, minimalism is a principle that can be applied to many different areas. Minimalism Life is here to shine a light on all these different nuances. So whether you want to dive deeper into minimalist art or learn more about adopting a minimalist lifestyle, the collaborative hub is a treasure chest of resources.

Minimalism Life is curated and maintained by Nate Grant and Sarvesh Pansare as an attempt to deal with the chaos that life throws at us. It inspires to live with less, build good habits, and embrace what truly matters to build a simple and low-maintenance life in the future.

A completely minimalist lifestyle might not be for everyone, of course, but removing distractions and discovering what truly adds value to your life can help bring more clarity and focus to your everyday life — and that’s something we all need in this fast-paced time, right? (cm)

5. Upcoming Workshops and Conferences

That’s right! We run online workshops on frontend and design, be it accessibility, performance, or design patterns. In fact, we have a couple of workshops coming up soon, and we thought that, you know, you might want to join in as well.

As always, here’s a quick overview:

• Designing Websites That Convert UX
  with Paul Boag. Sep 30 – Oct 9
• Advanced Design Systems Workflow
  with Brad Frost. Oct 1–10
• Live UX Training + video course UX
  with Vitaly Friedman. Oct 17 – Nov 17
• Designing Better Products Masterclass UX UX
  with Stéphanie Walter. Oct 21 – Nov 4
• Design Patterns For AI Interfaces UX UX
  with Vitaly Friedman. Oct 30 – Nov 13
• Jump to all workshops →

6. Mushroom Color Atlas

Mushrooms are fascinating little things. Their complex underground networks play a critical role in ecosystems, connecting plants and fungi and enabling communication and resource sharing among them. You might have heard about that already, but mushrooms carry yet another fascinating secret — one that might not seem too obvious given their often rather modest looks: there’s a whole universe of color lurking inside them.

Julie Beeler is a master in making this hidden color universe visible. She uses mushrooms to create vivid dyes and pigments, and documents her color experiments in the Mushroom Color Atlas. Ranging from deep burgundy shades, light lilacs, and peach tones to warm browns, yellows, and rich greens, it’s incredible to see the kaleidoscope of colors that the fungi kingdom brings forth. A very special source of color inspiration and a great reminder that beauty can be discovered almost anywhere — we only need to look closely. (cm)

7. Star Wars Galaxy Map

“A long time ago in a galaxy far, far away…” You don’t have to be a Star Wars fan to know the famous quote. However, if you happen to have a sweet spot for the stories settled in the galaxy, then the Star Wars Galaxy map is for you.

The Star Wars Galaxy map gives you an overview of the galaxy that is home to trillions of beings living on millions of worlds governed over millennia of galactic history. From the Deep Core to the Outer Rim and Unknown Regions, the map shows the planets and the five major trade routes that connect the different parts of the galaxy. Happy exploring, and may the force be with you! (cm)

8. Meet Accessible UX Research, A Brand-New Smashing Book 📚

In the past few years, we were very lucky to have worked together with some talented, caring people from the web community to publish their wealth of experience as printed books. For our newest book, we have teamed up with Dr. Michele A. Williams: Meet “Accessible UX Research.”

“Accessible UX Research” is your practical guide to making UX research more inclusive of participants with different needs — from planning and recruiting to facilitation, asking better questions, avoiding bias, and building trust. Print edition shipping Fall 2025. eBook also available for download in Fall 2025. Pre-order the book, and save off the full price.

That’s All, Folks!

Thank you so much for reading and for your support in helping us keep the web dev and design community strong with our newsletter. See you next time!

This newsletter issue was written and edited by Geoff Graham (gg), Cosima Mielke (cm), Vitaly Friedman (vf), and Iris Lješnjanin (il).

Editorial

Technology evolves and changes fast, and people — the way we think, believe, speak, act — change with it. But our habits and our ways of working don’t change that quickly. And especially in times when everything is moving so fast, we need to reduce confusion to make better decisions as we change.

That’s why in this newsletter, we focus on psychology and human behavior — and how to prevent miscommunication, poor messaging, and wrong conclusions down the line.

This week we are traveling for SmashingConf NY 2025 🇺🇸 — our last SmashingConf this year, all around UX, design systems, AI, accessibility — along with practical workshops on dashboards, complex UIs, CSS and AI. Jump to the last tickets!

And if you prefer online learning, we have quite a few online workshops starting today and in the next weeks:

• Designing Websites That Convert with Paul Boag,
• Advanced Design Systems with Brad Frost,
• Live UX Training: Design Patterns with Vitaly Friedman,
• Design Patterns For AI Interfaces with Vitaly Friedman,
• UX Strategy in Action with Susan Weinschenk,
• Free workshop: Why You Will Not Be Replaced by AI with Vitaly Friedman (Nov 19, free!)

Wishing you a wonderful rest of the week, everyone, and we hope to see you in person and online soon!

— Vitaly

1. Cognition Catalog

Confirmation bias, halo effect, false memory — these are just three of the countless biases that affect how we think and make decisions. What makes it particularly hard to avoid them is that they often happen unconsciously, so understanding how cognitive biases work and how they manifest themselves is the first step towards mitigating their effect on your work.

Jeremy Miller’s Cognition Catalog is a fantastic resource for getting familiar with different types of biases so you can face them head-on. Currently featuring more than 60 biases in four categories, the catalog explores each bias’s history, real-world examples, and key takeaways for various roles in the tech industry. A new bias is added to the collection every week. Perfect for UX designers, product managers, engineers, and, of course, everyone else on the team. (cm)

2. UX Psychology Glossary

Whether you want to improve conversion rates, reduce churn, or increase productivity, there’s no way around psychology in UX. It helps you understand how users understand your product, so that you can build meaningful experiences that serve both your customers and your business. If you’re looking to freshen up your psychology knowledge, Peter Ramsey’s UX Psychology Glossary is for you.

The glossary describes psychological terms, design principles, and UX concepts that are useful when designing products — from cognitive load and framing to the curiosity gap and scarcity effect. Each term comes with a concise, one-sentence summary for easy reference and a more comprehensive explanation with examples and tips. (cm)

3. Laws Of UX

Fitt’s Law, Miller’s Law, the Serial Position Effect. Do you know what’s behind these names? If not (or in case you need a little refresher), Laws Of UX sheds more light on their meaning.

Created by Jon Yablonski, this lovely website explains 30 psychological key principles that designers can consider to create more intuitive, human-centered products and experiences. Highlighting key takeaways, origin, examples, and further reading resources for each principle, this is a resource you might want to keep close. (cm)

4. Upcoming Workshops and Conferences

That’s right! We run online workshops on frontend and design, be it accessibility, performance, or design patterns. In fact, we have a couple of workshops coming up soon, and we thought that, you know, you might want to join in as well.

As always, here’s a quick overview:

• Designing Websites That Convert UX
  with Paul Boag. Sep 30 – Oct 9
• Advanced Design Systems Workflow
  with Brad Frost. Oct 1–10
• Live UX Training + video course UX
  with Vitaly Friedman. Oct 17 – Nov 17
• Designing Better Products Masterclass UX UX
  with Stéphanie Walter. Oct 21 – Nov 4
• Design Patterns For AI Interfaces UX UX
  with Vitaly Friedman. Oct 30 – Nov 13
• How To Measure UX and Design Impact UX
  with Vitaly Friedman. Dec 1 – 12
• Jump to all workshops →

5. Cognitive Bias Cheat Sheet

Cognitive biases can be unfair and sometimes counter-productive. However, they are the only tools we have to process the world around us. So, as harmful as they can be, cognitive biases can also be useful to prevent us from drowning in information overload.

To help you make sense of cognitive biases, how they are useful, and the trade-offs they bring along, Buster Benson tackled the mammoth task and boiled down Wikipedia’s massive list of biases into an organized, easy-to-reference cheat sheet that groups biases by the mental problem they are trying to address. One for the bookmarks. (cm)

6. Psychology Insights Cookbook

Behavioral science helps take the guesswork out of your design decisions and backs them up with scientific findings about how people act and react. If you plan to reference behavioral science in your design work, the Coglode Behavioral Design System is for you. It’s a fantastic tool to help you turn hunches into more objective, evidence-based decisions.

At the heart of the Figma library is a suite of over 50 “nugget badges.” Each nugget badge distills a behavioral science concept into just a few words or, if you prefer, into an easy-to-recognize image. To aid memory, the nuggets are color-coded by use, e.g., branding, product development, pricing, or conversion, and link back to the Coglode Cookbook where you can find more data and takeaways on each concept. A handy little helper to make behavioral science a natural part of your team’s design workflow. (cm)

7. Cognitive Bias Sketches

You want to learn more about cognitive biases, but don’t have time to dig into the more comprehensive guides? Then the Cognitive Bias Sketches that Jono Hey created might be for you.

Each of Jono’s 39 sketches sums up the main idea of a particular cognitive bias in a quick drawing or illustration. A great foundation to approach the world of cognitive biases without feeling overwhelmed. (cm)

8. Meet Accessible UX Research, A Brand-New Smashing Book 📚

In the past few years, we were very lucky to have worked together with some talented, caring people from the web community to publish their wealth of experience as printed books. For our newest book, we have teamed up with Dr. Michele A. Williams: Meet “Accessible UX Research.”

“Accessible UX Research” is your practical guide to making UX research more inclusive of participants with different needs — from planning and recruiting to facilitation, asking better questions, avoiding bias, and building trust. Print edition shipping Fall 2025. eBook also available for download in Fall 2025. Pre-order the book, and save off the full price.

That’s All, Folks!

Thank you so much for reading and for your support in helping us keep the web dev and design community strong with our newsletter. See you next time!

This newsletter issue was written and edited by Geoff Graham (gg), Cosima Mielke (cm), Vitaly Friedman (vf), and Iris Lješnjanin (il).

Editorial

Design patterns! In today’s issue, we explore how to design experiences for challenging and confusing interactions — from bulk import and context menus to chat UIs, loading indicators, user engagement, and social proof. With plenty of practical examples and guides to keep close.

In under 2 weeks, we’ll be travelling to SmashingConf New York 2025 🇺🇸, with sessions and workshops on:

• Interactive, Accessible Components, with Steph Eckles,
• Practical Dashboards, with Nick Desbarats,
• Designing For Complex UIs, with Vitaly Friedman,
• Modern CSS Architecture, with Miriam Suzanne,
• Design Patterns For AI, with Vitaly Friedman.

We’ve also just launched a new free online workshop on “Why You Will Not Be Replaced By AI”, a 2h 30mins session, going into all the fine details about AI and the skills we all need to create AI experiences that people understand, use and love. November 19, 2025. Free for everyone!

Finally, don't miss Smashing Meets Music 🎵, our friendly get-together for people who love music, DJing, and coding for music. Wednesday, October 22. Don't miss that one!.

— Vitaly

1. Bulk Import UX

Bulk upload features are challenging to design. We not only need to consider the technical side of things like messy data, edge cases, encoding formats, and error validation, but we also need to provide clear instructions that make it easy for users to fix errors. And that’s where a lot of bulk upload features are lacking. So, how can we do better? How can we improve the bulk uploading experience?

Livinda Christy wrote a case study in which she dives deep into common issues and challenges that bulk upload features bring along and how they can be solved. Drawing on her experience from improving bulk upload in an online recruiting tool, she takes you through the steps she took to create a hassle-free file import, while also defending her design decisions to stakeholders. Lots of practical takeaways for your own work are guaranteed. (cm)

2. Context Menus UX

From macOS to Windows, from Xerox Parc to the web, context menus have existed for decades. However, as long as they have been around and as widespread as they are, they still behave differently across web apps, which means that users have to relearn what is possible in each new app they use. But what could a context menu look like that is so intuitive to use that users don’t even have to think about it?

In his article “Building like it’s 1984: A comprehensive guide to creating intuitive context menus,” Michael Villar takes us through the basics, as well as some more advanced interactions, for building seamless context menus. He explores everything from positioning the context menu and adding keyboard navigation to giving intuitive access to submenus and dealing with content overflow. (cm)

3. Chat Interfaces UX

As many product teams race to not fall behind on AI, AI chat interfaces are becoming an obvious choice every time an AI initiative is launched. However, we need to be careful how we implement them. Adding AI to keep up with the trend doesn’t necessarily mean we’ve added real value for our users — in fact, in the worst case, it can even erode trust in our product.

To prevent that from happening, Vitaly shares practical guidelines for designing more useful, and less annoying, AI chat interfaces. He explores how we can make it clear to users that they are chatting with a bot, not a human, how we can help them articulate their intent, and how we can adapt the chat component to different needs (e.g., multitasking, complex tasks, changing context). Practical tips you can apply to your chat interfaces right away. (cm)

4. Upcoming Workshops and Events

That’s right! We run online workshops on frontend and design, but also friendly community events around accessibility, performance, and UX. In fact, we have a couple of workshops coming up soon, and we thought that, you know, you might want to join in as well.

As always, here’s a quick overview:

• Designing Websites That Convert UX
  with Paul Boag. Sep 30 – Oct 9
• Advanced Design Systems Workflow
  with Brad Frost. Oct 1–10
• Live Interface Design Patterns UX Training UX
  with Vitaly Friedman. Oct 17 – Nov 17
• Smashing Meets Music Dev
  with Samantha Gordashko, Brad Frost, André Michelle. Oct 22
• Designing Better Products Masterclass UX UX
  with Stéphanie Walter. Oct 21 – Nov 4
• Design Patterns For AI Interfaces UX UX
  with Vitaly Friedman. Oct 30 – Nov 13
• How To Measure UX and Design Impact UX
  with Vitaly Friedman. Video + live UX training.
• Jump to all workshops →

5. Loading And Progress Indicators

Whether it’s loading a webpage, processing a transaction, or downloading content — often there’s no way around waiting. Of course, the primary focus should always lie on improving performance and responsiveness, but sometimes that’s not enough. To help you enhance the waiting experience, Taras Bakusevych shares valuable tips and best practices for loading and progress indicators.

In his post, Taras dives deeper into the psychology of waiting and explores how loading and progress indicators can enhance usability, reduce user frustration, and create a positive perception of your page’s or system’s responsiveness. You’ll also learn how to select the right loader based on the anticipated waiting time and what else to keep in mind to make the waiting experience seamless and engaging. (cm)

6. Maximizing User Engagement

UX strategies for maximizing user engagement are based on psychological principles and behavior patterns that are often outside a user’s control. So whenever we employ them, we need to weigh our design decisions responsibly to not cause harm by creating addictive products. Taras Bakusevych wrote a wonderful post in which he shines a light on UX strategies that drive user growth and retention without exploiting users.

Based on popular behavioral design frameworks, Taras developed a unified formula for fostering long-term user engagement: the Sustainable Engagement Loop. Designed as a cyclical process, it builds and maintains habits in six key stages — from prompting users to take action to fostering ongoing engagement. To prevent harmful consequences like doomscrolling, unhealthy competition, and social comparison, Taras also highlights ethical considerations to keep in mind. A must-read for every designer. (cm)

7. Social Proof

As humans, we have the tendency to follow the actions of others when we are uncertain about something. It assures us that we “behave correctly” and shows our desire to fit in. That’s where social proof comes in. Whether it’s through customer reviews, testimonials, or expert approvals, social proof builds trust and credibility by showing that others have found value in a product or service.

If you’re looking for practical examples of social proof strategies, be sure to check out Social Proof Examples. The site features 191 real-world social proof examples that go way beyond good ol’ reviews. Milestone celebrations, walls of love, authority metrics, and project portfolios are just a few of the types of social proof that are waiting to be discovered in the collection. (cm)

8. Meet Accessible UX Research, A Brand-New Smashing Book 📚

In the past few years, we were very lucky to have worked together with some talented, caring people from the web community to publish their wealth of experience as printed books. For our newest book, we have teamed up with Dr. Michele A. Williams: Meet “Accessible UX Research.”

“Accessible UX Research” is your practical guide to making UX research more inclusive of participants with different needs — from planning and recruiting to facilitation, asking better questions, avoiding bias, and building trust. Print edition shipping Fall 2025. eBook also available for download in Fall 2025. Pre-order the book, and save off the full price.

That’s All, Folks!

Thank you so much for reading and for your support in helping us keep the web dev and design community strong with our newsletter. See you next time!

This newsletter issue was written and edited by Geoff Graham (gg), Cosima Mielke (cm), Vitaly Friedman (vf), and Iris Lješnjanin (il).

Editorial

Some companies and organizations are heavily allergic to user research. It’s not that they don’t value research. They want to avoid disruptions, delays, and minimize risk. Reluctance might be a fear of challenging the status quo. Or a fear of uncovering failures and the costs of fixing them. Or a fear of insights that conflict with top-level decisions.

Research typically raises uncomfortable questions that nobody really wants to answer. It also exposes wrong decisions and failures that put decision-makers in a bad light. At best, they “slow down” a signed-off project; at worst, they endanger it.

But research is an extremely valuable and effective tool for preventing risky and expensive projects. It’s also a very powerful tool to increase retention and loyalty — not by asking users what they want or prefer, but by studying where they struggle, their needs, and their context. After all, no business can be successful without successful customers.

In this newsletter, we explore UX research, how to measure its impact, how to gather useful feedback, and how to conduct UX research without direct access to users. We hope you’ll find a few useful gems in here.

After wrapping up SmashingConf Freiburg, our next stop is SmashingConf New York (Oct 6–9), with hands-on workshops on AI, dashboards, complex products, CSS, design patterns, and accessibility. With friendly bundle tickets for truly smashing teams. Jump to the details.

Don’t despair and keep trying — ask for very small commitments, and progress from there. It might not take too long for research initiatives to be noticed, appreciated, supported — and perhaps even initiated by top-level management. Fingers crossed!

— Vitaly

1. Affinity Mapping In UX

Affinity mapping is a powerful tool for distilling the insights you’ve gained during customer experience research or solution brainstorming. However, there’s more to good affinity maps than simply grouping your findings by topics.

To help you take your affinity mapping game to the next level, Slava Shestopalov shares his recipe for strong affinity maps. His approach involves seven steps, from creating quality notes and organizing them on the canvas to identifying groups and adding hierarchy with clusters. By following these tips, you can prevent your affinity maps from becoming just a wall of sticky notes no one acts upon, and instead turn them into a valuable tool for driving decisions. (cm)

2. UX Research Bookmarks

Research is essential to creating a good user experience. It helps us uncover user needs and prevents us from basing our design decisions on assumptions, hunches, and guesses. Gregg Bernstein, UX research leader and author of the book Research Practice, published his personal collection of research-related bookmarks in a Notion database.

The collection features more than 200 useful links, covering everything from recruiting, interviews, and documentation to prioritization, data analysis, and AI. Each bookmark comes with a short description and a tag to make it easier to find resources that are relevant to you. A treasure chest, whether you’re new to UX research or looking to improve your workflow. (cm)

3. Design Research Framework

In many organizations, there’s a lack of clarity around design research or different standards competing with each other. To give you a touchstone and checklist you can use in conversations with anyone involved in design decisions within your organization, Erika Hall created a design research framework.

The framework is a visual representation of the approach that Erika recommends to her clients and follows herself. It involves six phases, and although the discrete steps may seem like a lot at first glance, they can often be very short conversations or a quick chat in Slack, if your team is already working well together. A great foundation for making more informed and intentional decisions. (cm)

4. Upcoming Workshops and Conferences

That’s right! We run online workshops on frontend and design, be it accessibility, performance, or design patterns. In fact, we have a couple of workshops coming up soon, and we thought that, you know, you might want to join in as well.

As always, here’s a quick overview:

• Behavioral Design Workshop UX
  with Susan and Guthrie Weinschenk. Sep 18 – Oct 3
• Dataviz Accessibility Workshop Dev
  with Sarah L. Fossheim. Sep 22 – Oct 6
• Designing Websites That Convert UX
  with Paul Boag. Sep 30 – Oct 9
• Advanced Design Systems Workflow
  with Brad Frost. Oct 1–10
• Live UX Training + video course UX
  with Vitaly Friedman. Oct 17 – Nov 17
• Design Patterns For AI Interfaces UX UX
  with Vitaly Friedman. Oct 30 – Nov 13
• Jump to all workshops →

5. Gathering Useful User Feedback

Nothing beats in-person usability sessions for gathering user feedback. Unfortunately, they don’t work at scale. So what else can we do to get useful feedback from our users? In his post on Linkedin, Vitaly looks into practical alternatives to feedback widgets, survey prompts, and NPS emails.

As Vitaly points out, the best way to gather feedback is to ask for help and be helpful. So instead of using generic widgets, he recommends asking for very specific feedback about a very specific feature that a user has just interacted with. In his post, he explores in detail what this could look like and what to watch out for so as not to draw wrong conclusions. (cm)

6. UX Research Without Users

Whether it’s strict NDAs, privacy regulations, high costs, or the fact that your product is still in an early phase, there are plenty of situations where you don’t have access to users to conduct UX research. So how can we make UX research work with no or only limited access to users?

In his post “How To Run UX Research Without Access To Users,” Vitaly explores exactly that. He looks into workarounds that help you better understand pain points and issues that users might have when using your products and shares tips for making a strong case for UX research. A must-read, whether you’re working on a brand-new product that doesn’t have any users yet or facing reluctance from stakeholders who don’t see the value in UX research. (cm)

7. UX Research Books And Templates

You’re new to user research? Or maybe you want to brush up on a couple of topics? Then the User Experience Research Field Guide is for you.

Created by the team at User Interviews, the field guide takes you from zero to UX research pro in ten modules. It covers everything from planning UX research to conducting sessions to analyzing and reporting your findings.

For more useful insights into UX research, also be sure to check out the resource collection that Vitaly compiled. It features free books and templates to support you during all phases of your UX research journey. Happy reading! (cm)

8. How To Measure UX Research Impact

How can you make sure your UX research makes a real impact and doesn’t collect dust in someone’s drawer? Karin den Bouwmeester proposes a multi-level framework for defining and measuring UX research impact.

Karin’s framework defines three levels for measuring the impact of UX research: outcomes (i.e., the value that research creates), organizational influence (i.e., if research is driving change), and research practice (i.e., how deeply research is embedded in day-to-day operations and the product development cycle). As Karin points out, there’s no need to track everything; just start with the level that aligns best with your current goals. (cm)

9. Meet Accessible UX Research, A Brand-New Smashing Book 📚

In the past few years, we were very lucky to have worked together with some talented, caring people from the web community to publish their wealth of experience as printed books. For our newest book, we have teamed up with Dr. Michele A. Williams: Meet “Accessible UX Research.”

“Accessible UX Research” is your practical guide to making UX research more inclusive of participants with different needs — from planning and recruiting to facilitation, asking better questions, avoiding bias, and building trust. Print edition shipping Fall 2025. eBook also available for download in Fall 2025. Pre-order the book, and save off the full price.

That’s All, Folks!

Thank you so much for reading and for your support in helping us keep the web dev and design community strong with our newsletter. See you next time!

This newsletter issue was written and edited by Geoff Graham (gg), Cosima Mielke (cm), Vitaly Friedman (vf), and Iris Lješnjanin (il).

Editorial

Today, we are running our annual SmashingConf in our lovely hometown, Freiburg, Germany, with plenty of sessions and workshops around accessibility, CSS, JavaScript, design systems, and good ol’ front-end. Also, balloons everywhere! 🎈

We’ll be running more SmashingConf events soon, and we also have a few front-end & UX online workshops which we run in the very same smashing spirit:

• SmashingConf NYC 🇺🇸 (Front-End & UX, Oct 6–9)
• SmashingConf Amsterdam 🇳🇱 (Design & UX, Apr 13–16, 2026)
• Smashing Meets Music (online, Oct 22)
• Open Up with Brad Frost (online, Sep 24)

We head to New York 🇺🇸 for SmashingConf NYC 2025 next month with sessions on design systems, AI, accessibility and UX research. There are some lovely workshops as well. We can’t wait to see you there! Jump to details and workshops.

— Iris Lješnjanin

1. Context-Aware Web Performance

Let’s say a user has a critically low battery, data saver mode enabled, or a weak connection. Wouldn’t it be cool if you could adapt the experience for them? For example, by serving lower-resolution media, forgoing web fonts, or disabling auto-playing videos? Harry Roberts built a handy little tool to help you do exactly that: Obs.js.

Obs.js uses the Navigator and Battery APIs to get contextual information about your user’s connection strength, battery status, and device capability. It exposes those signals as CSS classes on the <html> element and as properties on window.obs, so you can adapt delivery accordingly. Harry created an interactive demo page to show how it works in action.

By the way, you don’t need to use Obs.js to adapt the experience: If your RUM or analytics provider accepts window.obs-style data, you can also use the data that Obs.js gathered to learn more about your audience. (cm)

2. Optimizing Third-Party Scripts

Third-party scripts are invaluable for powering analytics, personalization, ads, chat widgets, and many other features that are hard to build from scratch. However, when they are large or synchronous, you risk that they block the main thread and slow down your site. So, how can you optimize your third-party scripts to prevent them from harming performance? Web workers are here to help, and Jakub Andrzejewski wrote a practical guide on how to use them.

Web workers allow you to move third parties off the main thread and onto a background thread so that they don’t compete with your app. By doing so, the main thread is less busy, which means that rendering and handling user input can happen faster.

In his guide, Jakub not only explains in detail how web workers work, he also shares a practical workflow that layers performance optimization strategies gradually to keep your site fast while still benefiting from third-party services. (cm)

3. Speculation Rules On Complex Sites

The Speculation Rules API is a handy little helper to boost performance by either prefetching or prerendering future page navigations to give quicker or even instant page navigations. If you haven’t gotten around to wrapping your head around it yet, Barry Pollard wrote an introduction to the API in which he explains how to implement it and what complex sites need to consider before doing so to avoid issues down the line.

For a real-world use case of the Speculation Rules API, also be sure to check out Harry Roberts’ layered approach. On his personal site, he uses Speculation Rules to immediately pay the TTFB cost for all internal links on the page and to pay the LCP cost for any other internal links on hover. In his blog post, he not only shares insights into how it works but also how he adapted the approach to match the needs of a more complex site with lots of traffic and a non-trivial back-end infrastructure. (cm)

4. Performance Annotations With Gemini

Perhaps you’ve already discovered the feature while tinkering with Chrome DevTools, if not, be sure to give it a try: You can now ask Gemini to explain performance traces in DevTools.

As Addy Osmani explains, you can double-click an event in the Main track, then click “Generate label” next to the input field, and Gemini suggests a label based on the stack trace and context. A small tip, but one that will certainly become a game-changer in your performance optimization workflow. (cm)

5. Upcoming Workshops and Conferences

That’s right! We run online workshops on frontend and design, be it accessibility, performance, or design patterns. In fact, we have a couple of workshops coming up soon, and we thought that, you know, you might want to join in as well.

As always, here’s a quick overview:

• Dataviz Accessibility Workshop Dev
  with Sarah L. Fossheim. Sep 22 – Oct 6
• Designing Websites That Convert UX
  with Paul Boag. Sep 30 – Oct 9
• Advanced Design Systems Workflow
  with Brad Frost. Oct 1–10
• Live UX Training + video course UX
  with Vitaly Friedman. Oct 17 – Nov 17
• Designing Better Products Masterclass UX UX
  with Stéphanie Walter. Oct 21 – Nov 4
• Design Patterns For AI Interfaces UX UX
  with Vitaly Friedman. Oct 30 – Nov 13
• How To Measure UX and Design Impact UX
  with Vitaly Friedman. Video course + live UX training
• Jump to all workshops →

6. Guide To Long Animation Frames

Ideally, we want the browser to be able to paint at 60 frames per second, i.e., a frame every 16.66ms, to ensure a smooth experience. A long animation frame takes longer than 50ms. The Long Animation Frames (LoAF) API finally gives us a way to understand what’s consuming the browser’s processing time. If you want to dive deeper into how you can make the best use of it, Andy Davies wrote a comprehensive guide.

The guide covers why animation frame rate matters, the key milestones within a Long Animation Frame, script attribution, and how to match script data to Interaction to Next Paint, as well as how to capture LoAF entries. A must-read if you want to better understand how scripts and other tasks affect both hard and soft navigations and interactions. (cm)

7. How To Break Up Long Tasks

“Don’t block the main thread” and “Break up your long tasks” are the two pieces of advice you commonly get for keeping JavaScript apps fast. But what does that mean, and what work is involved?

Jeremy Wagner and Brendan Kenny’s guide to optimizing long tasks looks into task management strategies that help you ensure your site responds quickly to user interactions. It takes you through breaking up work into smaller functions, manually deferring code execution, yielding to the main thread, and breaking up long-running work with scheduler.yield().

Another great read on the topic comes from Rick Viscomi. He wrote a helpful guide to breaking up long tasks in which he shares how he learned to group loops and wield the yield to optimize interaction responsiveness, total processing time, and smoothness. (cm)

8. Meet Accessible UX Research, A Brand-New Smashing Book 📚

In the past few years, we were very lucky to have worked together with some talented, caring people from the web community to publish their wealth of experience as printed books. For our newest book, we have teamed up with Dr. Michele A. Williams: Meet “Accessible UX Research.”

“Accessible UX Research” is your practical guide to making UX research more inclusive of participants with different needs — from planning and recruiting to facilitation, asking better questions, avoiding bias, and building trust. Print edition shipping Fall 2025. eBook also available for download in Fall 2025. Pre-order the book, and save off the full price.

That’s All, Folks!

Thank you so much for reading and for your support in helping us keep the web dev and design community strong with our newsletter. See you next time!

This newsletter issue was written and edited by Geoff Graham (gg), Cosima Mielke (cm), Vitaly Friedman (vf), and Iris Lješnjanin (il).