Editorial

Designing for complex interfaces is challenging. There are plenty of dependencies, entry points, volumes of data, nested filters, bulk operations — and often with a sprinkle of legacy and opinionated stakeholders.

In this newsletter, we look at some of the UX challenges and design patterns to deal with complex navigation, icon labels, modals, toasts — and make them a bit easier to use, and a bit harder to make mistakes with. And if you‘d like to dive deeper, we have a video course and online workshops on just that.

We’re also getting ready for a new round of workshops and SmashingConfs 2026:

• Design Patterns For AI Interfaces UX
  with Vitaly Friedman. Feb 16 – Mar 2
• Designing For Complex UIs Masterclass Design
  with Vitaly Friedman. Mar 3–17
• Building Interactive, Accessible Components with Modern CSS & JS Dev
  with Stephanie Eckles. Mar 5–13
• Figma Workflow Masterclass UX
  with Christine Vallaure. Mar 18–24
• Jump to all workshops →

Sending a lot of positive energy and optimism your way, everyone — and let’s explore interface design patterns in the meantime!

— Vitaly

1. Bulk Upload

Many bulk upload features are lacking, so how can we do better? Drawing on her experience from improving bulk upload in an online recruiting tool, Livinda Christy shares solutions to common issues and challenges. She walks you step by step through the process of creating a hassle-free file import and also offers tips for defending your design decisions in front of stakeholders.

2. Effective Maps UX

What’s to consider when designing a user experience around maps? Michael Gaigg wrote a comprehensive guide to effective maps UX. From selecting the right layout and interacting with the map to dealing with complex data and designing for mobile devices, it highlights practical design patterns, as well as common mistakes and how to avoid them.

3. Icon Labels

When you use icons in an interface, do you usually add text labels? If not, you might want to reconsider your approach. As Christopher Butler points out in his post “In Defense of Text Labels,” even the simplest icons can create ambiguity, slowing down users’ orientation within an interface. By combining text labels and icons, you create clearer affordances than either element could on its own.

4. Top Vs. Side Navigation

Top navigation or side navigation — which is the best choice for your context? Taras Bakusevych compares both to find out where each of them performs best. As he concludes, top navigation uses little space and works well when there aren’t too many navigation items, whereas side navigation is a good fit for products with a large number of navigation links, as it is easily scalable and configurable.

5. Redesigning Complex Navigation

Maybe you’ve been there before: your product grew, and the information architecture struggled to keep pace. Pranava Tandra shares valuable insights and lessons learned from how the Intercom team tackled this challenge and restructured their IA, with clarity becoming the guiding principle behind every design decision.

6. Toast Messages UX

Toast messages gently remind users about a successful event or change of state, without interrupting them from their main task. However, there are also some things we need to watch out for when designing toasts and snackbars. Vitaly summarized what you need to know to avoid common usability issues and make your toast messages effective.

7. Onboarding

How can we create a pleasant, seamless onboarding experience? In her Product Onboarding Playbook, Eleana Gkogka shares tips and best practices to help you offer just the right amount of guidance and support to keep users engaged.

A handy little tool to help you choose the best onboarding methods and components for your feature or service comes from the NewsKit Design System team. It asks you four questions to determine your onboarding strategy.

8. Modal Vs. Page

Let’s say you’re designing a registration flow, and one of the steps requires some more information. Do you add an additional page or use a modal overlay? Ryan Neufeld synthesized guidelines, heuristics, and recommendations into a flowchart that helps you assess which component best suits your project’s needs.

9. 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 + video course UX
  with Vitaly Friedman. Feb 16 – Mar 2
• Designing For Complex UI Masterclass Design
  with Vitaly Friedman. Mar 3–17
• Building Interactive, Accessible Components with Modern CSS & JS Dev
  with Stephanie Eckles. Mar 5–13
• Figma Workflow Masterclass UX
  with Christine Vallaure. Mar 18–24
• How To Measure UX and Design Impact UX
  with Vitaly Friedman. Video course + UX training
• Jump to all workshops →

10. 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

Getting a buy-in for UX research can be remarkably difficult. You might find yourself constrained by wrong assumptions and wrong expectations about what UX research actually entails. And sometimes access to users is very restricted.

But research doesn’t have to be extremely time-consuming or expensive. And it doesn’t have to be disruptive. It’s the best way to reduce risk and improve clarity. In this newsletter issue, let's explore useful techniques, methodologies, and tools for UX research — even if it’s on budget.

As usual, you can connect with us in the online world: here’s a quick overview of our upcoming online workshops:

• Design Patterns For AI Interfaces UX
  with Vitaly Friedman. Feb 16 – Mar 2
• Designing For Complex UI Masterclass Design
  with Vitaly Friedman. Mar 3–17
• Building Interactive, Accessible Components with Modern CSS & JS Dev
  with Stephanie Eckles. Mar 5–13
• Figma Workflow Masterclass UX
  with Christine Vallaure. Mar 18–24

Also, meet our friendly, practical and fun SmashingConfs 2026:

• SmashingConf Amsterdam 🇳🇱 (Apr 13–16, 2026)
• SmashingConf Freiburg 🇩🇪 (Sep 7–10, 2026)
• SmashingConf Antwerp 🇧🇪 (Oct 12–15, 2026)
• Jump to all Smashing events →

In the meantime though, have a truly smashing week, and let’s get better with the tools and strategies that we’ve got to make our lives at least a tiny liiittle bit easier!

— Vitaly

1. Choosing The Right Qual Methods

Qualitative research helps us understand human behavior. But how to choose the right research method for a project? Allison Grayce Marshall takes you through the process step by step — from aligning on the time and scale of research to synthesizing your data into insights.

If you need a short and sweet guide you can refer to during the research phase, Allison also summarized all the considerations in a handy cheat sheet (PDF).

2. Design Research Framework

In many organizations, there’s a lack of clarity around design research. To give you a touchstone and checklist you can use in conversations with anyone who participates in design decisions within your organization, Erika Hall created a design research framework. It involves six phases that’ll help you make more informed and intentional decisions about practice and process.

3. Making UX Research Hard To Ignore

Research, data, and facts aren’t everything. They don’t win arguments, and often, the stronger and louder the data is, the more likely it is to be questioned. To inspire trust and confidence, your data needs a story wrapped around it. Vitaly shares practical tips that’ll help you turn your research into narratives that make it hard to ignore.

4. Building A UX Research Database

How do you store and manage all the data and insights from your UX research projects? Odette Jansen utilizes Notion to host her research database. If you would like to give it a try, too, she summarized everything you need to know to set up your own UX research repository in Notion.

To get you up and running quickly, Odette also shares a free UXR Repo template which you can duplicate and adapt to your needs.

5. Measuring 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.

For practical tips on how to make a strong case for UX research, even when stakeholders are reluctant, also be sure to check out Vitaly’s post.

6. Leveling Up As A UX Researcher

As a user researcher, your journey begins with executing basic research, and as you gain experience, you’ll slowly but surely start to leverage learnings beyond specific project work. To make it easier to assess your own progress, Dave Hora charts the growth of researchers from junior to mid-level and senior researcher on three axes: process mastery, technical competence, and organizational influence. A great overview of how researchers level up their skills over time.

7. Organizing UX Research

Even the best UX research can only make an impact when it is open and accessible to the entire team. Daniel Pidcock’s Atomic UX Research framework guides and informs evidence-based design decisions by breaking knowledge down into its constituent parts. Each of them is a building block on the road to larger discoveries, making it easier to discover patterns and synthesize insights in a reliable way.

8. Useful Calculators For UX Research

Testing with just a few people is often more valuable for finding key blockers than trying to get statistically reliable survey results. But what is the right number of participants for surveys, card sorting, and usability testing? Vitaly shares practical tips, tools, and guides to help you better assess your sample size and get the most out of your research.

9. 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:

• Deep Dive On Accessibility Testing Dev
  with Manuel Matuzović. Jan 19 – Feb 2
• Building With AI For Everyone. An Introduction To Lovable Free
  with Christine Vallaure. Jan 20
• Design Patterns For AI Interfaces UX
  with Vitaly Friedman. Feb 16 – Mar 2
• Designing For Complex UI Masterclass Design
  with Vitaly Friedman. Mar 3–17
• Building Interactive, Accessible Components with Modern CSS & JS Dev
  with Stephanie Eckles. Mar 5–13
• Figma Workflow Masterclass UX
  with Christine Vallaure. Mar 18–24
• How To Measure UX and Design Impact UX
  with Vitaly Friedman. Video course + UX training
• Design Patterns For AI Interfaces UX
  with Vitaly Friedman. Video course + UX training
• Jump to all workshops →

10. 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

Well, welcome to 2026! As we are kicking off new adventures this year, we thought we’d feature a few inspiring little websites to brighten up the mood and put a smile on your face. We hope you’ll find them useful.

And as we’re diving into the new year, we’d like to send you a lot of positive energy and optimism in hopes that 2026 will bring us all peace, stability, calmness, and plenty of wonderful and unforgettable memories. Don’t forget to keep an eye on our Smashing workshops and conferences (online and offline!) planned in the next months — we hope to see you there!

Here’s a quick overview of our upcoming online workshops:

• 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. Feb 16 – Mar 2
• Designing For Complex UI Masterclass UX
  with Vitaly Friedman. Mar 3–17
• Jump to all workshops →

Of course, if you are building something that you think other people would appreciate and find useful, please let us know! We’ll spread the word for sure.

Thanks for being smashing, everyone!
— Vitaly

1. World Map Of Human Ideas

From Control of Fire to General Relativity, from the automobile to GPS — where were the ideas that shaped civilization born? The World Map of Human Ideas lets you explore the birthplaces of discoveries and inventions in areas like science, technology, art, culture, society, philosophy, and more. A fascinating journey across the world and through the history of humanity.

2. PostHog

While many websites look pretty similar these days, the team behind the SaaS platform PostHog has taken a different approach. Navigating the site doesn’t feel like browsing a conventional website but rather interacting with a friendly desktop OS. Hedgehog illustrations sprinkled throughout the design add to the playful touch. A great example of a site that thinks outside the box to awaken curiosity and spark interest.

3. Portfolio Windows XP

Do you still remember the days of Windows XP? If you’re up for a trip down memory lane, be sure to check out Mitch Ivin’s professional portfolio. It is designed just like the good ol’ Windows XP, along with the characteristic welcome screen, startup sound, menu bar, and even the famous “Bliss” wallpaper. And of course, each page opens up in the style of a typical XP window.

4. The Scope Creep

Assume you’re a project manager tasked with delivering a website brief for a client. But nothing goes as expected. As you navigate the project phases, one unforeseen issue follows another, and you need to make the right choices to deliver the work. The Scope Creep is an interactive narrative experience that takes you through this exact scenario — but be warned, the descent into the abyss requires strong nerves.

5. AI-Assisted Creation Showcase

Whether you call it “AI-assisted development,” “agentic coding,” or “vibe designing,” when used carefully, AI offers exciting possibilities for engineers and designers. To showcase AI-assisted builds, inspiration, and how-tos, Cameron Moll and Adam Spooner created Varchive.

You’ve been tinkering with AI-assisted creation, too? Then feel free to submit your project to get featured in the collection.

6. 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
• Building With AI For Everyone free
  with Christine Vallaure. Jan 20
• Design Patterns For AI Interfaces + video course UX
  with Vitaly Friedman. Feb 16 – Mar 2
• Designing For Complex UI Masterclass UX
  with Vitaly Friedman. Mar 3–17
• How To Measure UX & Design Impact UX
  with Vitaly Friedman. Video course
• Jump to all workshops →

7. AI Map Maker

Whether you’re planning a trip or need a custom map for your business, PamPam makes creating custom maps a matter of just a few minutes. The AI map maker lets you add places, choose color themes, and customize the design without touching any code. Once your map is ready, you can share it with a link or embed it on your website, blog, or Notion page.

8. 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.

9. Mobile Design Inspiration

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 showcases mobile websites only. There are currently more than 370 mobile sites waiting to be explored, with lots of creative ideas like experimental audio-reactive visuals or sites that play with gravity and draggable elements.

10. Audio AI Playbook

With audio AI finally good enough to feel human, the question is no longer whether you can make the system talk, but whether people will trust what it says and how it says it. To help you design trustworthy and safe voice and podcast features, Harsheen Vohra shares a seven-step framework that you can use to stress-test your ideas.

11. 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

A new year is always an invitation to rethink, review, and reimagine. In this final Smashing newsletter of 2025, we’re taking a moment to look ahead at the opportunities and challenges that await us — from emerging CSS and JavaScript features to UX, AI and email design.

To kick off the new year, here’s a quick overview of our upcoming online workshops:

• 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. Feb 16 – Mar 2
• Measure UX + Design Patterns (Bundle Package) UX
  with Vitaly Friedman.
• Jump to all workshops →

As the last hours of the year approach, we sincerely wish you a wonderful, peaceful, and incredibly positive 2026 — full of magical surprises and remarkable adventures. Stay healthy, happy, and wonderfully smashing as you are — sent from the very bottom of our hearts.

We hope to see you here 🌷, there 🧭 and also over here 🍫 in wonderful and truly magical 2026! 🎉🥳

Stay smashing,
— Vitaly

1. State, Logic, And Native Power: CSS Wrapped 2025

2025 was an exciting year for CSS, with many new CSS features that enable us, developers, to do things that once were very hard to achieve. To celebrate these milestones and acknowledge the hard work of browser developers and the web community who made it all possible, Brecht De Ruyte unpacks all the highlights in a fantastic overview to get you up-to-date on the latest advancements in CSS — dig in!

2. State Of UX In 2025

We live in a time of late-stage UX, characterized by its market saturation, heavy focus on financial growth, commoditization, automation, and increased financialization. How can designers navigate this landscape in 2026?

The State of UX in 2025 by the UX Collective takes a critical look at how UX is changing and highlights opportunities for how we, as designers, can evolve to find and keep our place in the field.

3. The State Of Web Dev AI 2025

How are we actually using and building with AI these days? Sacha Greif wanted to find out, so he launched a State of Web Dev AI survey to learn more about how we think about AI and how we put AI to work.

4. Smashing Conferences In 2026

You plan to boost your design or development skills next year? With three SmashingConfs on the schedule for 2026, we’ve got your back! They are the perfect opportunity to get even better at your craft — and meet friendly, like-minded people.

Meet the first SmashingConf Amsterdam 2026 🇳🇱 on April 13–16, 2026 — a conference for designers and UI engineers, with UX, design systems, accessibility, CSS and design patterns — while enjoying the gezelligheid that Amsterdam has to offer!

Our 13th SmashingConf Freiburg 🇩🇪 for front-end developers and designers. September 7–10, 2026, on design systems, AI, accessibility, CSS, performance, and cutting-edge front-end.

We also can’t wait to be back in Antwerp for a new edition of SmashingConf Antwerp 🇧🇪 on October 12–15, 2026. A lovely, friendly, inclusive conference for designers who love UIs, UX, waffles, chocolate, and fries.

5. State Of AI In 2025

Once a year, Benedict Evans puts together a big presentation exploring strategic trends in the tech industry and exploring how AI is evolving, and what changes are coming our way. In November, Benedict released an updated version of his presentation (PDF, along with video recordings of him presenting it.

6. State Of CSS And JavaScript

What can we expect from CSS in the next few years? And what features and tools to learn next? That’s exactly what the State of CSS wants to find out. For their 2025 report, they surveyed developers worldwide to identify upcoming trends and help developers make technological choices. Browser vendors also use the survey data to prioritize features. The State of JavaScript follows the same goal for JavaScript. Worth reading!

7. Email Design For 2026

So many years later, still nothing performs better in reaching the audience than good old-fashioned email. But with email design, things are changing as well — from personalization to gamification. In their Email Design Trends for 2026, Nataly Birch and Andrian Valeanu take a closer look at upcoming email design trends to help you stay ahead of the curve.

8. 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

Oh my, you’ve opened this email on Christmas Eve — thank you so much for that. More than that, thank you so much for reading this very newsletter in 2025, and perhaps even in previous years.

To many of us, it was a year full of challenges and hardships, but also hard and passionate work. As we enter 2026, I sincerely wish you a truly wonderful, positive time with your friends and loved ones — and a year full of positive surprises, good vibes, and great positive energy! 🧡

In this issue, we highlight a few useful resources for product designers — all around Figma, product design, stakeholder engagement, storytelling, and design strategy. As with every newsletter, we hope you’ll find this one useful, too.

And if you’d like to dive deeper, we have friendly online workshops and conferences scheduled next year. We sincerely hope to see you online and in-person next year. Happy holidays, everyone!

— Yours truly, Vitaly

1. The Elements Of Product Design

Different types of design decisions, whether they are aesthetic, structural, conceptual, or strategic, require different approaches and skills. To help you ensure your team has the necessary skills to give your project a solid foundation, Jamie Mill created The Elements of Product Design, a diagram that explains product design as a stack of decisions built on top of a stack of knowledge, rather than as a process.

2. The Form Factor Trap

Design is often reduced to the final output, particularly by stakeholders. However, as Pavel Samsonov argues, the value of design isn’t in producing visual artifacts, but in the process that leverages them. In his article “Design Without Process, or The Form Factor Trap,” he explores why the design process is crucial for building a good product and what’s at risk when you take shortcuts.

3. How To Stop The Stakeholder Swirl

It’s frustrating when design reviews turn into endless cycles of feedback without clear decisions. Parvaneh Toghiani, Principal Designer at Uber, shares the framework she has developed over the years to make reviews more systematic, productive, and enjoyable. Precious tips for embracing reviews as opportunities for alignment and growth instead of seeing them merely as a path to approval.

Upcoming Workshops and Conferences

As you probably know, we run 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:

• 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
• The UX Bundle Package (3× Video Courses) UX
  with Vitaly Friedman.
• Jump to all workshops →

4. Accessibility Guidelines Card Deck

A fantastic resource for running accessibility workshops, audits, and training comes from Johannes Lehner. Together with a group of passionate contributors, he created the WCAG 2.2 Card Deck. Available as a Figma file and GitHub repo, it summarizes WCAG 2.2 guidelines, with a print-ready PDF version with print margins, Braille version, and translations in several languages.

5. Building Smarter Figma Components

Everybody loves to work with a lean and refined Figma library, but when it has been in use for some years, there’s often quite some bulk that has added up and made it slow and, well, annoying. Jérôme Benoit shares insights into how the Doctolib team tackled the task of cleaning up their design system, along with practical tips for building smarter Figma components.

6. Principles Of Better Stories

How can we tell stories that matter, delight, offer value, and maybe even change the world? To help us communicate more effectively, Jeremy Connell-Waite, Communications Designer at IBM, condensed everything he learned about storytelling over the last twenty years into a set of nine principles, with video tutorials, scientific research, cheat sheets, inspirational keynotes, and reading lists.

7. The Little Book Of Strategy

No matter how experienced you are, it is normal to get stuck on your strategy and leadership journey every now and then. For those occasions, Peter Bihr wrote The Little Book Of Strategy. Drawing on his experience from seeing the pitfalls and mistakes that leaders encounter in their day-to-day, he shares actionable advice to help you get past those moments.

8. Design Prompt-Building Interfaces

A lot of AI products don’t have UI controls such as sliders, filters, sorting, or radio buttons that help people express more precisely what they want. To provide some more guidance, Sen Lin put together an overview of design patterns and examples for helping users articulate their intents strategically.

For more examples of designing effective prompt-building interfaces, also be sure to check out Vitaly’s LinkedIn post.

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

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).