Editorial

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

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

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

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

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

— Iris

1. A Small World Inside Your Browser

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

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

2. Generative Design Experiments

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

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

3. Unconventional Web Design Inspiration

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

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

4. Minimalism Life

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

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

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

5. Upcoming Workshops and Conferences

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

As always, here’s a quick overview:

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

6. Mushroom Color Atlas

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

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

7. Star Wars Galaxy Map

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

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

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

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

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

That’s All, Folks!

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

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

Editorial

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

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

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

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

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

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

— Vitaly

1. Cognition Catalog

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

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

2. UX Psychology Glossary

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

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

3. Laws Of UX

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

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

4. Upcoming Workshops and Conferences

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

As always, here’s a quick overview:

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

5. Cognitive Bias Cheat Sheet

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

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

6. Psychology Insights Cookbook

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

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

7. Cognitive Bias Sketches

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

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

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

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

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

That’s All, Folks!

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

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

Editorial

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

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

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

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

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

— Vitaly

1. Bulk Import UX

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

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

2. Context Menus UX

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

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

3. Chat Interfaces UX

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

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

4. Upcoming Workshops and Events

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

As always, here’s a quick overview:

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

5. Loading And Progress Indicators

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

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

6. Maximizing User Engagement

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

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

7. Social Proof

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

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

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

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

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

That’s All, Folks!

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

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

Editorial

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

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

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

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

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

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

— Vitaly

1. Affinity Mapping In UX

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

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

2. UX Research Bookmarks

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

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

3. Design Research Framework

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

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

4. Upcoming Workshops and Conferences

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

As always, here’s a quick overview:

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

5. Gathering Useful User Feedback

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

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

6. UX Research Without Users

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

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

7. UX Research Books And Templates

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

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

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

8. How To Measure UX Research Impact

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

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

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

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

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

That’s All, Folks!

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

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

Editorial

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

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

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

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

— Iris Lješnjanin

1. Context-Aware Web Performance

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

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

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

2. Optimizing Third-Party Scripts

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

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

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

3. Speculation Rules On Complex Sites

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

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

4. Performance Annotations With Gemini

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

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

5. Upcoming Workshops and Conferences

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

As always, here’s a quick overview:

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

6. Guide To Long Animation Frames

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

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

7. How To Break Up Long Tasks

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

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

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

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

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

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

That’s All, Folks!

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

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

Editorial

Almost every time we design pixels on the screen, we have a goal in mind. In fact, across verticals and horizontals, we all work towards a shared goal, shaped by the business, and hopefully refined by our contributions.

Yet too often it’s incredibly difficult to translate business goals and OKRs and vision and objectives into actionable design initiatives or technical projects that we can run. Mostly just because we don’t speak the language that business speaks, don’t know how they work, how they make decisions, and how to visualize the value of our work to them (we have a whole video course on Measuring UX, too).

In this newsletter, we dive into all of that. Looking at useful techniques, guides and tools to help you get a slightly better understanding of the business side of things — and feel more comfortable and more confident in it.

On another note, we’re preparing final things for our upcoming events this and next month. We’d love to meet you and your wonderful team there!

• UX Workshops in Antwerp, Belgium 🇧🇪 — on UX metrics and advanced design systems with Brad Frost and yours truly,
• SmashingConf New York 2025 🇺🇸 — on design systems, AI, UX, front-end and dashboard UX.
• SmashingConf Amsterdam 2026 🇳🇱 — on UX, design systems, accessibility, CSS, and design patterns.

We’d be absolutely delighted to see you in New York — and please do bring your friends and colleagues as well! We have friendly team bundles as well! And have a wonderful, inspiring, and kind rest of the week, everyone!

— Vitaly

1. The Dangerous Animals Of Product Management

Maybe you’ve been there before: You have a clear vision, strategy, and roadmap for your product, and suddenly, stakeholders come to the table with unvalidated requests. To help you deal with challenging stakeholders and situations, the folks at Productboard released a handy toolkit: The Dangerous Animals of Product Management.

The eBook and accompanying video series introduce you to the ten dangerous animals you might encounter in the product management process. You’ll meet the HiPPO, for example, (“highest-paid person’s opinion”), the ZEbRA (“zero evidence but really arrogant”), or Seagull Managers, noisy managers who occasionally swoop in, cause an uproar, and leave your team to clean up after the mess. The series teaches you a mix of soft skills and frameworks to limit their power and help you stay true to your carefully-planned product strategy. (cm)

2. Free Design Leadership Books

How can design leaders effectively connect design to business? Ryan Rumsey wrote two guidebooks that are jam-packed with practical tips for enhancing design leadership skills: Play Up Your Impact and Business Thinking for Designers. Both are available for free download and bound to become invaluable companions on your design leadership journey.

Play Up Your Impact is aimed at designers, researchers, content strategists, writers, and anyone else who wants to learn how to use data to understand their impact at work. Drawing on Ryan’s experience from leading design at Apple, EA, Nestlé, and USAA, the guide offers a practical approach to utilizing data, statistics, and storytelling to analyze and advocate how your work contributes to the bottom line.

Business Thinking for Designers is all about gaining trust and building better relationships with business partners. It includes actionable plays on how designers can enhance communication with colleagues, communicate design values, and maximize impact through a business-minded approach. (cm)

3. Think And Talk Like An Executive

Getting buy-in from executives is a necessity for UX design leaders, but it’s often easier said than done. To help you get executive support for your UX initiatives, Jared M. Spool introduces you to the essential skill of thinking and talking like an executive.

In his article “The Need to Think and Talk like an Executive,” Jared explores how you can take on your executives’ perspective to assess how your design ideas will pay off, in terms of value that executives understand: money, profit, and growth. The starting point is a list of five questions that help you clarify how UX design might benefit the organization, enabling you to communicate that value more effectively. (cm)

4. ROI Calculators

Your boss is hesitant that the work you’ll put into a design system will eventually pay off? The Design System ROI Calculator might be just what you need to convince them that the time and money invested in a design system is a good investment.

The ROI calculator helps you understand and project cost savings when implementing a design system. It calculates total employee savings from implementing a design system, as well as time savings and efficiency gains by component.

Human Factors International also offers a series of handy ROI calculators you can use to show the impact of your UX work. They help you calculate the ROI for design efforts that increase productivity, reduce reliance on help desks, increase conversion rate, reduce costs on formal training, decrease drop-off rate, and reduce the initial learning curve of your product. (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:

• Behavioral Design Workshop UX
  with Susan and Guthrie Weinschenk. Sep 18 – Oct 3
• Dataviz Accessibility Workshop Dev
  with Sarah L. Fossheim. Sep 22 – Oct 6
• Designing Websites That Convert UX
  with Paul Boag. Sep 30 – Oct 9
• Advanced Design Systems Workflow
  with Brad Frost. Oct 1–10
• Live UX Training: Smart Interface Design Patterns (Video + training) UX
  with Vitaly Friedman. Oct 17 – Nov 17
• Designing Better Products Masterclass UX
  with Stéphanie Walter. Oct 21 – Nov 4
• Design Patterns For AI Interfaces UX
  with Vitaly Friedman. Oct 30 – Nov 13
• Jump to all workshops →

6. Guide To Product Prioritization

Without a product prioritization process, PMs risk that they rely too much on instinct when making product decisions, and that can result in urgent user problems remaining unresolved. To support a more systematic approach to prioritization, the folks at Roadmunk published a practical guide.

The Ultimate Guide to Prioritization explores how product goals, customer demand, and the competition fit within the prioritization process and how to manage the expectations of customers, stakeholders, and customer-facing teams. It also takes a closer look at ten quantitative prioritization frameworks, highlighting the pros and cons of each so that you can easily find the one that best fits your needs. (cm)

7. New Ways Of Working Playbook

How can we work better? How can we make our meetings more purposeful? How can we improve how we share feedback, make decisions, and solve conflicts? In short, how can we create a workplace where everyone in the team thrives?

The New Ways Of Working Playbook is a wonderful resource for teams to explore and experiment with collaboration patterns. Covering all aspects of working together, the playbook features carefully curated resources for both theory and practice that help you implement New Ways Of Working patterns in your work. As Mark Eddleston, the creator of the Playbook, points out, there’s no “right” place to start when using the playbook, so begin with a pattern that feels most needed by your team. (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

Many people often misread the value and purpose of accessibility. It’s assumed to be a strictly technical or legal concern. It’s perceived as an expensive, limiting, disruptive obligation. But accessibility efforts are a way to reach new markets and reduce barriers to entry.

Yet most people don’t think that accessibility applies to them at all. So instead of debating legal implications of poor accessibility, I always try to visualize it. I showcase mundane challenges people face in their daily lives. E.g., people relying on their eyeglasses, people using subtitles, noise-cancelling, and vibrating alarm clocks.

Everybody can relate to being vulnerable; failing despite your best efforts, or feeling helpless in the moment when you need to get through — because we’ve all lived through the moments of stress, frustration, anxiety, and uncertainty. We relate even if we might be reluctant to admit it at first.

Nothing is more impactful than seeing real customers struggling with a real product in real life. And in this newsletter, we highlight some real-life experiences that I usually explain in those meetings. And perhaps, just perhaps, it will help you make a stronger case for accessibility as well.

On another note, we’re preparing final things for our upcoming events this and next month. We’d love to meet you and your wonderful team there!

• Smashing Meets AI, a free online get-together on Aug 27,
• UX Workshops in Antwerp, Belgium 🇧🇪, on UX metrics and advanced design systems with Brad Frost
• SmashingConf New York 2025 🇺🇸, on design systems, AI, UX, front-end and dashboards,

Until then, wishing you a truly wonderful rest of the week — with a bit less stress, and a bit more time for yourself and your loved ones. And thank you so much for staying around and reading these very words!

— Vitaly

1. Designing For Deaf People

What’s to consider when designing for deaf people? Marie van Driessche, a Dutch designer, who herself is deaf since birth, gave an insightful talk at Awwwards Conference in Amsterdam a few years ago in which she shines a light on deafness, sign language, the deaf community, and what’s important when designing for deaf people.

As Marie points out in her talk, inclusion is not a one-size-fits-all solution but one-size-fits-one, and then eventually others will benefit from it, too. Following this credo, the inclusive design tips and ideas she shares not only improve the experience for deaf people but also for everybody else.

Enhancing readability, providing subtitles, offering multimedia solutions for written content, and providing multiple contact options are some of the aspects that she explores in her talk. (cm)

2. Living With ADHD

Imagine your brain is switching between 38 channels and someone else has the remote. That’s how Jessica McCabe describes how ADHD feels. At 32, ADHD brought her to the darkest point of her life; at 34, she was thriving personally and professionally. To share insights into what it’s really like to live with ADHD, Jessica gave a TEDx talk in which she describes her journey and experience.

As Jessica points out, people with ADHD don’t have a deficit in attention but trouble regulating attention. ADHD also affects planning, prioritizing, sustaining effort toward a goal, and regulating emotions and behavior. On the other hand, people who have ADHD are great at tackling urgent tasks, working with new ideas, and wrestling with challenging problems, as Jessica explains. Her talk offers lots of interesting insights into the challenges and, of course, the potential that comes with ADHD. (cm)

3. Living With Dyscalculia

“Yeah, I’m bad with numbers.” We all have heard, or even said, this sentence before. But needing an extra second when doing mental arithmetic, for example, has nothing to do with the experience that people with dyscalculia have when they are confronted with numbers. Sharing her personal experience of living with dyscalculia, Laura Parker offers a comprehensive view on the topic.

Dyscalculia is a specific and persistent difficulty in understanding numbers — and that affects many aspects of everyday life. As Laura explains, it makes it difficult to handle money, arrange appointments, get quantities right when cooking, remember PINs, interpret data, recognize shapes, gauge how far away you are from an object, and much more.

To help designers, writers, and everyone else who publishes content better support people with dyscalculia, Laura also created a practical guide to presenting numbers and data clearly. A must-read. (cm)

4. Accessibility For Vestibular Disorders

Vestibular disorders are one of the rather “invisible” conditions that are often forgotten when talking about accessibility. They can result in vertigo, nausea, problems with balance, and headaches, and are comparable to the feeling of seasickness or getting off a rollercoaster — with the difference that the symptoms are persistent over a longer period, if not chronic. In the case of Facundo Corradini, his bad case of vertigo lasted over a month and changed his accessibility mindset for good.

As soon as his symptoms got better, Facundo set out on a mission to self-experiment on accessibility for vestibular disorders. The result is a series of recommendations for improving the experience. From creating larger target sizes on all devices to giving users control over animations, as so often when it comes to accessibility, the tips not only help people with vestibular disorders but benefit everyone. (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:

• Accessible Typography for Web & UI Design Masterclass Design
  with Oliver Schöndorfer. Sep 11–19
• Behavioral Design Workshop UX
  with Susan and Guthrie Weinschenk. Sep 18 – Oct 3
• Dataviz Accessibility Workshop Dev
  with Sarah L. Fossheim. Sep 22 – Oct 6
• Smart Interface Design Patterns UX
  with Vitaly Friedman. Video + live UX training.
• How To Measure UX and Design Impact UX
  with Vitaly Friedman. Video + live UX training.
• Jump to all workshops →

6. How A Screen Reader User Surfs The Web

How does a screen reader user surf the web? And what’s to consider to make the experience as smooth as possible? Léonie Watson, a blind screen reader user, takes us on a journey through the web, using her screen reader of choice, JAWS.

As you follow along with Léonie as she browses news, e-commerce, governmental, and personal sites, you gain valuable insights into the relationship between screen reader, browser, and the code of a website. You’ll dive deeper into how and why semantic HTML helps screen reader users and learn about some unexpected properties of HTML elements that not only have a huge impact on accessibility but also turn out to be good for performance. (cm)

7. What It’s Like To Be Colorblind

For designers with normal vision, colorblindness is often an afterthought or an unchecked box on an accessibility checklist. To give them somebody to think about when they set that checkmark behind color contrast, Lisa Charlotte Muth asked ten people about their experiences as a colorblind person. Most of them are green-blind, which is the most common type of colorblindness.

The responses provide valuable insights into daily life with colorblindness and its impact on interpreting data visualizations. To give a more complete picture, Lisa highlights both the user’s and the designer’s perspectives: In her post, you’ll also find interviews with two colorblind cartographers as well as the CEO of the data visualization company Datawrapper that explore how colorblindness shapes the way they design. (cm)

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

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

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

That’s All, Folks!

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

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

Editorial

Design patterns are often perceived as generic, one-size-fits-all solutions. Solutions that we, as designers and UI engineers, often take off the shelf and apply as is to solve a problem at hand, without reinventing the wheel every single time.

However, design patterns can do much more than that. They can be very useful — predictable, familiar, well-understood. We just shouldn’t rely on them at all times — and know when to use them as a starting point, rather than a final solution.

In this newsletter, we look at some websites that highlight and curate design patterns, design examples, and UI components. And in fact, we even launched a whole video library with them, and as it happens, we will be running a live UX training with UX certification in October this year as well.

On our end, we’ll be travelling to the magical city of Antwerp, Belgium 🇧🇪 for a series of in-person workshops — on How to Measure UX and Advanced Design Systems with Brad Frost. In fact, we also have friendly bundles for friendly teams.

Also, happening this and next week:

• Building Interactive, Accessible UI Components 🧱 (online, with Stephanie Eckles)
• UX Strategy Masterclass 🧭 (online, with Vitaly Friedman)
• Smashing Meets AI 🔮 (free, Aug 27, online)

In the meantime, though, let’s dive into design patterns — we hope you’ll find them useful. Have a fantastic rest of the week!

— Vitaly

1. Push Notifications Library

When we send our users a push notification, we want to encourage them to take action. But how can we achieve that? How do we design push notifications that don’t get lost in a flood of alerts and actually make users want to act?

For some inspiration on what successful push notifications can look like, be sure to check out Pushkeen. The curated collection features push notification patterns from mobile apps like LinkedIn, Apple Health, Duolingo, Snapchat, and many more, reflecting the best in growth and user re-activation. Lots of ideas for your own push notifications are guaranteed. (cm)

2. Footer Design Examples

Whether it’s contact information, links to terms of service, social media profile links, or copyright notices, a website footer not only signals to users that they’ve reached the bottom of the page, it also provides quick access to useful information. Utility doesn’t mean that footers need to look boring, though, as Footer beautifully shows.

Footer collects inspiring footer designs from across the web. You’ll find e-commerce footers just like footers from personal portfolios, news and finance sites, and much more. A nice detail: The footers are categorized by style, so if you’re looking for examples for one particular footer style (e.g., small type, illustrative, grid, etc.), with more than 30 different styles, the collection sure has got you covered. Happy browsing! (cm)

3. Alternative Design, Code, And Content

Dedicated to uncovering extraordinary web designs, Hoverstat.es never ceases to inspire. The site describes itself as “the home of alternative design, code and content on the world wide web” and features an extensive collection of websites that experiment with interactivity and content in new and interesting ways.

In the collection, you’ll find browser split experiences where the user explores the site between two separate but connected interfaces, nostalgic cinematic screen wipes, off-kilter typography, rotating navigation, video timelines with draggable clips, and much more. As unique as the featured websites are, they all have one thing in common: they aren’t afraid of leaving the beaten tracks. A breath of fresh air in times when a lot of websites look rather similar! (cm)

4. Pricing Pages Design Vault

A great pricing page combines good design, clear messaging, and strategic UX choices. And let’s be honest, getting all of this right can be quite challenging. If you’re looking for some real-world examples of pricing pages that have mastered the challenge, Pricing Pages Design Vault is for you.

You can browse the pricing pages in the collection by components (e.g., tier cards, feature checkmarks, usage-based calculators, etc.) or design patterns (e.g., enterprise pricing, subscription option, content-light, content-heavy, and more). A useful resource to inspire better design decisions that’ll, hopefully, turn into better performance. (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:

• UX Strategy Masterclass UX
  with Vitaly Friedman. Aug 20–29
• Accessible Typography for Web & UI Design Masterclass Design
  with Oliver Schöndorfer. Sep 11–19
• Behavioral Design Workshop UX
  with Susan and Guthrie Weinschenk. Sep 18 – Oct 3
• Dataviz Accessibility Workshop Dev
  with Sarah L. Fossheim. Sep 22 – Oct 6
• UX Bundle: Design Patterns + Measure UX UX
  with Vitaly Friedman. Video + UX training
• Jump to all workshops →

6. Delightful Designs

A carefully crafted pull-to-refresh animation, floating action buttons, smooth sliding sidebars — small design details like these add that extra sprinkle of delight to a design. If you’re looking for real-world examples of well-thought-out design details, Design Spells is a treasure chest.

Design Spells collects micro-interactions, easter eggs, and other seemingly extra design details from across the web so you don’t have to hunt them down yourself. Each of the featured examples is unique and bound to bring life, personality, and fun back into the web. Inspiring! (cm)

7. OpenGraph Image Gallery

Does your website have an Open Graph (OG) image? If not, it might be a good idea to create one. An OG image is displayed when someone shares your site on social media. So instead of reverting to a default placeholder image or a random image from your site, social media platforms will use the visual preview you created.

For some inspiration of what great OG images can look like, be sure to check out OGimage.gallery. The site collects well-designed OG images and comes with a previewer that lets you view the OG image of any website just by entering its URL. By the way, an OG image not only builds brand identity, it can also help boost user engagement and SEO. So the effort of creating one is more than worth it. (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

Have you heard of if() landing in CSS? What about the new corner-shape property? Or scroll state queries? Well, as CSS continues to evolve, we see new techniques and features emerging. In this newsletter, we take a closer look at some of them — and a pinch of SVG as well.

If you’d like to deep dive into modern CSS, Stephanie has a wonderful front-end workshop on building interactive, accessible components with modern CSS & JS coming up later this month — with tons of practical techniques and strategies for more reliable UI components. Jump to details.

(Psssst, we also have a UX Strategy Masterclass coming up in late August, with pragmatic and practical tactics and strategies to thrive and survive in complex environments!)

Also, our Autumn adventures are about to begin! We are so happy to come back to magical Antwerp for in-person workshops on Measuring UX and Advanced Design Systems with Mr. Brad Frost and yours truly, Vitaly. Very practical and very actionable sessions, with a friendly bundle available as well.

We absolutely can’t wait to see you — in Antwerp, in Freiburg, or in New York later this year! Wishing you a fantastic rest of the week, everyone!

— Vitaly

1. Scroll-Spy Effect

The new scroll-target-group landing in Chrome 140 is a powerful little helper. By combining it with the :target-current pseudo-class, we can create scroll-spy effects with just two lines of CSS. Una Kravets explains in detail how it works.

Una’s technique uses anchor links with a few additional styling affordances to display a trackable table of contents with smooth scrolling and fade-in-fade-out effects as users switch sections. A nice progressive enhancement, and for non-supporting browsers, you can simply hide the table of contents. (cm)

2. What You Need To Know About SVG

SVGs offer so many possibilities that it can be overwhelming — particularly if you’re still at the very beginning of your SVG journey. So, where to begin to not get lost in the rabbit hole? Josh W. Comeau wrote a friendly introduction to SVG that provides a solid foundation for your SVG adventures.

Josh’s guide covers everything you need to know to get started with SVG and, of course, some cool tricks you can use right away. You’ll learn the basic SVG shapes, get familiar with scalable SVGs and the viewbox attribute, and dive deeper into presentational attributes and animated strokes. A must-read for anyone who wants to get to grips with SVG. (cm)

3. CSS scroll-state()

Let’s say you want your navigation bar to have a box-shadow when stuck, so that it appears to float over the content it overlays. Or you have an image gallery that is scrollable horizontally, and you want to display a caption for the snapped item. Things like these can now be achieved with CSS only, no JavaScript required.

Building upon container queries, Chrome 133 introduced scroll-state container queries. This means that the browser-managed state for sticky positioning, scroll snap points, and scrollable elements can now be queried and adapted from CSS. If you want to dive deeper into how CSS scroll-state() works, Adam Argyle wrote a useful guide in which he explains the foundations and practical use cases. (cm)

4. Fitting Text To A Container

As the Baymard Institute found out, the optimal line length for body text is 50–75 characters. Luckily, character units like clamp() and min() have made setting the optimal line length much easier than it was a few years ago. If you’re looking for a comprehensive guide on how to do it, Daniel Schwarz has got you covered.

In his guide, Daniel not only explains how to set the optimal line length, but he also looks into two approaches to fitting text to the width of a container. The first approach uses SVG and a few lines of JavaScript; the second approach, which is a bit more complicated, relies on pure CSS. (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:

• Building Interactive, Accessible Components with Modern CSS & JS Dev
  with Stephanie Eckles. Aug 18–27
• UX Strategy Masterclass UX
  with Vitaly Friedman. Aug 20–29
• Accessible Typography for Web & UI Design Masterclass Design
  with Oliver Schöndorfer. Sep 11–19
• Behavioral Design Workshop UX
  with Susan and Guthrie Weinschenk. Sep 18 – Oct 3
• Dataviz Accessibility Workshop Dev
  with Sarah L. Fossheim. Sep 22 – Oct 6
• Jump to all workshops →

6. CSS Conditionals With if()

Available in Chrome versions 137 and newer, the if() function enables a cleaner developer interface for dynamic styles like style queries and media queries. Una Kravets shares some practical examples of how we can make use of it.

As Una shows, you could use if() to include inline media queries in your styles, for example, to check for a user’s theming preference or do inline media queries for the viewport width. Another way to use the new function is to create inline support queries — to check for wide-gamut color support, for example. State-based styling is also possible with if(). Exciting new opportunities for CSS developers! (cm)

7. CSS corner-shape

Have you heard of the CSS corner-shape property already? If not, be sure to check out Amit Sheen’s guide. As of now, corner-shape is only supported by Chrome 139 and above, but the creative possibilities that this seemingly small addition offers are super exciting.

As Amit explains, you can think of corner-shape as a companion to border-radius: border-radius determines the size of the curve and corner-shape defines how that curve looks. And this unlocks a whole new world of possibilities that previously required complex SVG implementations or image-based solutions — from simple geometric shapes like rhombuses, octagons, and hexagons to the mighty superellipse function. (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 shipping in August, eBook available for download later this summer. 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

We’ve been reminded of it a thousand times. Slowly but surely, AI will take over our role and our work — and if it’s not AI, then other people who have adopted, embraced, and used AI will do that. But personally, I respectfully disagree. I don’t think that any AI can out-care, out-love, and out-perform the human qualities that we, people, bring to the table.

For any technology to be useful, it must be used, and that means that it must deliver value to people and align with business needs. That role — the orchestration of AI experiences — is something that we now have to learn, to create products that people need and love and care about. And I just find it very difficult to see it being done by AI alone any time soon.

This newsletter is about that: the design patterns, the guidelines, accessibility considerations, and an AI search optimization guide on how to orchestrate AI experiences and make them more useful and helpful. Hopefully, you’ll find some useful gems in there. And: we have Smashing Meets AI (Aug 27) on just that. Get your free ticket!

On the Smashing side of things, we are taking it a bit slower this couple of weeks — with a few small and big events that we are preparing for in autumn:

• Build Interactive, Accessible Components, with Stephanie Eckles
• UX Strategy Masterclass, with Vitaly Friedman
• SmashingConf Freiburg 2025 🇩🇪 (only 7 tickets left!)
• In-person UX workshops in Antwerp 🇧🇪 and Madrid 🇪🇸
• SmashingConf New York 2025 🇺🇸
• SmashingConf Amsterdam 2026 🇳🇱

Wishing you a wonderful week ahead, everyone, and we can’t wait to see you online or in-person!

— Vitaly Friedman

1. Common AI Product Issues

Adding a chat panel to an app is probably the most common kind of AI implementation we see in products these days. But these open-ended interfaces bring along quite some issues, and, as it turns out, they are often the same across products.

In his article “Common AI Product Issues,” Luke Wroblewski reflects on the issues he keeps seeing over and over and shares ways to manage them. In particular, he looks into three key problems: capability awareness (people don’t know what an AI product can do), context awareness (people aren’t sure if or how much they should trust a reply), and walls of text that make it hard to extract and recall information. A must-read for anyone who plans to add AI features to their product. (cm)

2. AI UX Patterns

AI is shifting the paradigm from command-based inputs to intent-based inputs. And while some of our existing UX patterns are still applicable now that this shift is happening, we also need new patterns to design effective AI experiences. Luke Bennis created a fantastic resource that attempts to close this gap: AI UX Patterns.

AI UX Patterns is a collection of UX patterns tailored to the new reality of AI. Covering everything from basic raw text input to full result regeneration, each pattern comes with an abstracted example that makes it easy to review its core elements and interactions and effectively adapt it to your product’s context. A handy toolkit you might want to keep close.

Bonus: AI Verse Design Patterns, a fantastic growing collection of interaction design patterns and examples by Kshitij Agrawal — just in case you are looking for even more patterns! (cm)

3. AI Accessibility

From how a user provides input to how responses are displayed and how resulting processes flow, chatting with AI is quite a different experience from chatting with people. As such, it also brings along some unique accessibility challenges, particularly for screen reader and keyboard users.

Mike Gower wrote two helpful guides (“Usable AI Chat” and “Catching Up On Accessibility With AI Chat”) in which he dives deep into the accessibility of AI chats and how we can work towards a more inclusive AI experience. A great reminder that even though we call it a “chat,” we shouldn’t assume we already understand the interaction. (cm)

4. Upcoming Workshops and Conferences

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

As always, here’s a quick overview:

• Building Interactive, Accessible Components with Modern CSS & JS Dev
  with Stephanie Eckles. Aug 18–27
• UX Strategy Masterclass UX
  with Vitaly Friedman. Aug 20–29
• Accessible Typography for Web & UI Design Masterclass Design
  with Oliver Schöndorfer. Sep 11–19
• Behavioral Design Workshop UX
  with Susan and Guthrie Weinschenk. Sep 18 – Oct 3
• Dataviz Accessibility Workshop Dev
  with Sarah L. Fossheim. Sep 22 – Oct 6
• 🎁 Design Patterns UX Bundle UX
  with Vitaly Friedman. Video + UX training.
• Jump to all workshops →

5. Designing For AI Engineers

How to design for AI developers? Eve Weinberg and her team at Modular AI have tackled the challenge and built and launched a lot of AI workflows this year. If you, too, are working on integrating AI into your product, Eve shares some helpful best practices and references she has established in the process.

In her post “Designing for AI Engineers: UI Patterns You Need To Know,” Eve summarized guiding principles, patterns, and personas to help designers become more AI literate. You’ll gain insights into six key interfaces that Eve and her colleague Will Rust designed, and with them lots of takeaways for your own AI workflows. (cm)

6. Responsible AI Guidelines

With great power comes great responsibility, so when we decide to incorporate AI into our work, we also need to make sure that we do so responsibly. But what exactly does that mean?

The AI platform ServiceNow defines responsible AI as human-centered AI, i.e., AI that prioritizes human needs, values, and wellbeing. In their Responsible AI Guidelines Handbook, they elaborate further on the principles of responsible AI and share worksheets with key questions you can ask to guide meaningful discussions and decision-making in your team. A wonderful resource to help ensure an AI system respects and enhances the human experience. (cm)

7. AI Search Optimization

With 60% of Google searches now ending without a click, we are facing a new reality: traffic is no longer a decisive factor for success. How do we adapt to that? How do we best optimize our content for AI search? How can we drive AI mentions? These are exactly the questions that Vitaly answers in his practical guide to AI search optimization.

Instead of focusing on traffic any longer, Vitaly suggests focusing on the quality of leads that drive traffic and, most importantly, putting your efforts into building a strong brand. As he points out, the best strategy to drive exposure in AI search is to focus on visibility and delivering value with good, specific content. If actual people find your content helpful and share it, chances are good that AI search engines will find it trustworthy, too. (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 shipping in August, eBook available for download later this summer. 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

It’s Figma time! Indeed, many design teams these days use Figma, yet sometimes, it’s difficult to figure out just the right way to use it for your needs. How well do you organize a design system? And how do you document your design decisions and specs (if at all)?

That’s what this newsletter is all about — workflow in Figma, with useful techniques, strategies, and pointers for you to boost the work in Figma, for you and for your team.

On another note, we’ve been busy and made sure to have your backs covered with a good number of friendly events coming up soon — with best practices in Figma and practical insights all around UX, accessibility, design systems and front-end. Perhaps you’d like to join in as well? We’d love to see you there!

• SmashingConf Freiburg 🇩🇪 (Sep 8–11), on design systems, complex UIs, refactoring and performance,
• SmashingConf New York 🇺🇸 (Oct 6–9), on UX, design, dashboards, accessibility, CSS, design systems and management,
• SmashingConf Amsterdam 2026 🇧🇪 (Apr 13–16), UX, design, Figma, CSS, accessibility, and product design.
• In-person Workshops in Antwerp and Madrid 🇧🇪 🇪🇸 (Sep–Nov 2025), on Figma and Complex UIs.

That’s all for now. I hope you have a truly smashing rest of the week, and let’s get better at Figma!

— Iris Lješnjanin

1. How To Keep Figma Files Clean

Keeping your Figma files clean and organized doesn’t take much effort, but it makes working with them a lot more convenient — not only for yourself but everyone who views or navigates the files. Anna Gordiyevska shares a checklist with 16 simple tips for keeping Figma files clean.

The checklist includes tips for naming layers, frames, and sections, for organizing pages and creating chapters and cover pages, as well as documentation. Useful plugins and tutorials are also included. Small tips that go a long way. (cm)

2. Figma Handoff And Spec Helper

If you and your team want to capture and communicate thoughts and design changes directly in Figma, the File Management UI Library might be just what you’ve been looking for. Created by the Experience team at Deliveroo, it includes file management goodies that help you bring more context to your designs — with banners, detail blocks, sticky notes, and more.

Compared to making a similar annotation from scratch, the library not only saves you precious time but, as the folks at Deliveroo found out in their team, it also encourages people to be more diligent about annotating their work, which, in effect, impacts how they collaborate with engineers, PMs, and one another. (cm)

3. Design File And Cover Page Organization

We often assume that fellow team members know how to navigate Figma the way we do. However, other designers may have different methods, and engineers and PMs may not know where to start at all. To organize your Figma files so they are easy to use for everyone involved in a project, Lee Munroe shares the template he and the design team at One Signal Design use for organization.

The template has pages for everything from the cover to designs anyone can reference, local components, wireframes, user testing, and user research material already included. A fantastic boilerplate that can be adapted and modified depending on the size and complexity of the project. (cm)

4. Upcoming Workshops and Conferences

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

As always, here’s a quick overview:

• Building Interactive, Accessible Components with Modern CSS & JS Dev
  with Stephanie Eckles. Aug 18–27
• UX Strategy Masterclass UX
  with Vitaly Friedman. Aug 20–29
• Accessible Typography for Web & UI Design Masterclass Design
  with Oliver Schöndorfer. Sep 11–19
• Behavioral Design Workshop UX
  with Susan and Guthrie Weinschenk. Sep 18 – Oct 3
• Dataviz Accessibility Workshop Dev
  with Sarah L. Fossheim. Sep 22 – Oct 6
• Jump to all workshops →

5. Figma Workspace Template

Microsoft designers Raquel Piqueras and Christina Yang adapted the way they work in Figma to improve collaboration and productivity. To help you do the same, they released the Figma Workspace Template, a toolkit to stay organized and bring more focus and clarity to your workflow.

If you want to give it a try on your next project, duplicate the Figma file and use it as your workspace. It includes a cover and intake form that keeps everyone aware of links, stakeholders, and deadlines. You can also track your progress and past work, map requirements to your visuals, use stickies to clarify aspects of your design, and map screens out to user stories. A handy little helper! (cm)

6. How To Clean Up Messy Figma Files

Maybe you’ve been there before: You have to work on a Figma file that another designer created and, as it turns out, they haven’t worked in a clean environment. So how can you make sense of the mess? Edward Chechique wrote a step-by-step guide to help you clean up and organize Figma files that you inherited from other designers.

The three-step process that Edward shares in his guide is not copy-and-paste. It instead helps you understand the mindset, so that you can adapt the process to your needs and find and componentize patterns to create a clear UI kit with typography styles, color styles, and components. Valuable tips to help you overcome the initial pain of dealing with an unorganized file and make your work more efficient. (cm)

7. Useful Design Timesavers In Figma

We all love a good tool to speed up efficiency and avoid mundane design tasks, and, luckily, the Figma community is constantly coming up with new little helpers that have our backs. If you’re looking for a quick overview of design timesavers worth trying out, Vitaly collected some useful plugins and starter kits.

Whether you want to quickly set up a design system with Figma variables, track versions of your design iterations, or automatically replace text in mock-ups, Vitaly’s collection is a goldmine of handy little helpers to save you time in your day-to-day design work. A huge thank you to the wonderful Figma community sharing their creations so everyone can benefit from them! (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 shipping in August, eBook available for download later this summer. 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 design complex products? What design patterns do we use? The domain might be very complex, stakeholders want to see more data, legacy is impossible to manage, and there are layers and layers of content, navigation, poor metadata, and very little attention to usability and accessibility.

In this newsletter, we shed some light on some of the design challenges product teams are facing today — on designing better conversational experiences, dashboards, AI interfaces, complex navigation, and spatial experiences.

On Wednesday, we’re launching Christine’s wonderful workshop on Figma Workflow Masterclass and later this year, we also have more workshops and conferences coming up. We’d love to meet you and your wonderful team there!

In the meantime, wishing you a truly wonderful rest of the week — with a bit less stress, and a bit more time for yourself and your loved ones. And thank you so much for staying around and reading these very words!

— Vitaly

1. Conversational Design

How do we design better conversations between users and products or services? So that every interaction feels natural, helpful, and respectful? Conversational Design is a wonderful free practical guide on just that, beautifully written and kindly shared by Erika Hall.

One of the points that Erika brings up is to spend more time listening to users’ language — how they speak, how they call product’s features, how they talk about their typical day and their typical tasks. And then pull out all the nouns and verbs to understand what customers actually do, and the words they use to describe what they do. We can then use these notes as a reference for labels and phrases for actions.

And then we write the interface — as storyframes. By starting to design in a text editor. By using the right words and imagining how we would explain a product to a friend, in a conversation, or in an email. In its essence, that’s the start of a conversational design. Erika’s book is a fantastic reference on designing better conversations, but also better digital experiences. (vf)

2. Design Patterns For AI Interfaces

So you need to design a new AI feature for your product. Does it have to be an AI chat, and if so, how would you choose the right layout and composition for input, output, and refinement journeys? In our recent article on Design Patterns For AI Interfaces, Vitaly has highlighted a few useful guidelines to keep in mind when designing better AI experiences.

And if you are looking for specific suggestions on layout and composition, Sharang Sharma has published a wonderful overview with a map of emerging AI UI patterns and real-life examples of each — from AI chatbots and side panels to semantic grids and infinite canvases. A helpful reference to keep nearby! (vf)

3. Dashboard Design Patterns

When designing a dashboard, you want it to present complex data sets at a glance. But what does effective dashboard design look like? How do you find the balance between displaying everything important and ensuring the dashboard is easy to use without overwhelming the user?

The interdisciplinary research lab VisHub at the University of Edinburgh published a set of dashboard design patterns to support the design and creative exploration of dashboard design. It dives deeper into every aspect of dashboards — from components and meta information to visual representation, interaction, page layout, and color. A cheatsheet summarizes all the patterns on one page. (cm)

4. Your vs. My

Pronouns and punctuation might appear like a small thing, but they shape user’s relationship with your products. “My drafts” suggests a higher degree of ownership, and “Your drafts” suggests that an assistant is speaking to a user. And of course, we could also use simple, neutral “Drafts” as a label, too. So which do we choose?

To decide on the right pronoun, Diana MacDonald suggests to ask “Who else is in the room?” If there’s no one except the user (settings), we skip the pronoun. If the product is talking to the user (onboarding), we use “Your presets”. If the user is talking to the product (buttons), we use “my”, e.g., “Save my draft”.

In general, “My” works for user-created content, actions, and preferences. For example, for personal inbox, dashboard, delivery orders, and purchases. And “Your” works best for system-initiated content for a user, such as onboarding, instructions, buttons, error messages, and labels. Just don’t misrepresent the system’s decisions as the user’s decisions. A helpful reminder for never-ending design discussions! (vf)

5. Upcoming Workshops and Conferences

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:

• Figma Workflow Masterclass Design
  with Christine Vallaure. July 23–29
• Building Interactive, Accessible Components with Modern CSS & JS Dev
  with Stephanie Eckles. Aug 18–27
• UX Strategy Masterclass UX
  with Vitaly Friedman. Aug 20–29
• Accessible Typography for Web & UI Design Masterclass Design
  with Oliver Schöndorfer. Sep 11–19
• Dataviz Accessibility Workshop Dev
  with Sarah L. Fossheim. Sep 22 – Oct 6
• Behavioral Design Workshop UX
  with Susan and Guthrie Weinschenk. Sep 18 – Oct 3
• Smart Interface Design Patterns 🍣 UX
  with Vitaly Friedman. Video course + UX training.
• How To Measure UX 🍎 UX
  with Vitaly Friedman. Video course + UX training.
• Jump to all workshops →

6. Top. vs Side

So you need to organize a 3-level navigation menu for a complex product. Do you break it apart into top navigation and side navigation? How do you make that decision? Fortunately, in his article on Top vs. Side Navigation, Taras Bakusevych provides some guidance and some ideas.

People often use relatively wide displays, and with it comes limited vertical space and an abundance of horizontal space. Side navigation shows more relevant options at once, and vertical scanning is easier and faster. But expanded side nav takes a lot of space, so it must be collapsible.

Top navigation, on the other hand, eventually runs out of space (“More”) and doesn’t scale well. Side navigation works better for many top-level items and tree/folder structures, but top navigation works when users perform only a small number of tasks and rarely navigate between sections. A helpful overview that will save a headache every now and again! (vf)

7. Design Patterns For Mental Health

Asking for help is difficult. It makes us feel scared, vulnerable, and uncomfortable. But it is also a sign of strength and bravery. The world is challenging and difficult and unfair and not fully knowable. And getting through it alone can be painful and overwhelming. And our digital products must support people at times when they need our help the most.

Design Patterns For Mental Health is a growing library of design patterns for people involved in developing and delivering digital mental health support. It features examples and principles of how to help people feel safe in engaging and expressing themselves, and why we need to suspend assumptions on what users want or need.

We’ve also put together a few useful resources around designing for mental health which hopefully will give you some good starting points as well. (vf)

8. Spider Metro Map

Finding the closest subway near a particular location can be an exercise in patience. Walking distance and the straight-line distance (Euclidean distance) are vastly different, and sometimes you might have a construction going on, but you are late for a meeting.

Spider Metro Map Carlos Enrique Vázquez Juárez is a helpful design pattern to help users estimate how far they are from the five nearest stations and get a rough idea of travel distance. Lior Steinberg has built a live demo and a GitHub repo that you can apply to your project right away.

Just a helpful little pattern to choose a place to stay, and would be lovely to see labels and filters indicating time to reach the station by foot or by bike. (vf)

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 shipping in August, eBook available for download later this summer. 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 we are chasing ways to boost our workflows, sometimes we overlook lovely little websites that have nothing to do with that. They exist just to put a smile on someones face, or spark our curiosity, or help us discover things we wouldn’t stumble upon otherwise.

We dedicate this issue to lovely little adventures on the web — small discoveries that have very little to do with product design or development, but often leave a lasting impression, because they are so unique and memorable.

On another note, we all know by now how strongly AI can influence our work, so we’ve decided to take a few hours and dig into the topic. We’ve invited three speakers who’ll speak on how AI can help you as a designer and/or developer, and where the developments of AI are leading. Jump to the details.

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

— Vitaly

1. Reminiscing With Retro TVs

Remember the charm of analog television back in the day? Well, imagine traveling back in time in the comfort of your seat and computer in front of you. That’s exactly what Netflix engineer Joey Cato wanted to bring to life — by enabling users to leisurely flip through vintage content in a classic TV experience.

MyRetroTVs is a lovingly hand‑crafted digital time capsule—a playful, interactive journey through TV history. It simulates the experience of “channel-surfing” on vintage TVs, complete with authentic-looking controls and interfaces spanning decades from the 1950s to the 2000s — ideal for anyone seeking nostalgia, a history of TV culture, or a relaxing escape from modern media overload. (il)

2. Exploring Places With Hoodmaps

Planning to explore or move to a new city? What if you could not only navigate the streets but also see where hipsters, tourists, students, and professionals tend to hang out, while also surfacing quirky tags or local red flags? Well, Pieter Levels, a Dutch designer/developer, wanted to create just that — a platform that covers thousands of cities worldwide, with strong usage in places like NYC, London, Berlin, San Francisco, and more.

Meet Hoodmaps, a crowdsourced, interactive map that captures the “vibe” of neighborhoods through users’ eyes—a blend of social insights and cartography. Users can “paint” areas of a city in six colored categories to help indicate who typically populates that zone. They can also add short descriptive tags that others can upvote or downvote. Nifty! (il)

3. Musical Mix Crafted By Humans

It may still be difficult to travel back in time, but fortunately, we can do so online. What if you wanted to listen to the pop charts extravaganza from the US back in 1955 or Uzbekistan in 1932? Well, Radiooooo has got your back (well, you might need to sign up for a free basic plan first).

The website is a collection of songs collected over decades and now searchable, with filters by genre, speed, country, and time period. In fact, you can search by slow for chilling, fast for dancing, and weird music for bugging out — indeed, there is something for everyone! And if you want to go fancy, there is a shuffle mode, with songs picked by the curators. (vf)

4. Dimensions Of Everyday Objects

Putting things in perspective can be quite difficult. You might want to design a specific illustration, but you need to get the dimensions right and consider standard measurements and sizes for objects to look realistic.

Dimensions is the place to go: it’s an ongoing reference database to help designers better communicate standard measurements and sizes of everyday objects. It contains plenty of references for everything from animals and transport to pop culture, furniture, and plants. Neat little helper! (vf)

5. Upcoming Workshops and Conferences

As always, 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.

• Figma Workflow Masterclass Design
  with Christina Vallaure. July 23–29
• Building Interactive, Accessible Components with Modern CSS & JS Dev
  with Stephanie Eckles. Aug 18–27
• UX Strategy Masterclass UX
  with Vitaly Friedman. Aug 20–29
• Jump to all workshops →

We are also getting ready for our new SmashingConf 2025 adventures this year and the next — with practical insights all around accessibility, UX, design systems, CSS, and front-end:

• Freiburg 2025 🇩🇪 (Sep 8–11), on design systems, complex UIs, refactoring and performance,
• New York 2025 🇺🇸 (Oct 6–9), on UX, design, dashboards, accessibility, CSS, design systems,
• Amsterdam 2026 🇧🇪 (Apr 13–16), UX, design, Figma, CSS, accessibility, and product design.
• In-person Workshops in Antwerp and Madrid 🇧🇪 🇪🇸 (Sep–Nov 2025), on Figma and Complex UIs.

6. Washing Away Background Images

What interface do you imagine for a tool that simply removes backgrounds from an image? Probably a drag-and-drop UI, with a few simple buttons to upload the image and download the new image. Well, BgRemove is different.

The tool invites you to throw your image into a washing machine, and then clean it, with a few lovely sound effects and an audio track, kindly provided by a Japanese laundry service. Quite unnecessary, of course, but lovely to visit — with a bit of character and personality as well. (vf)

7. Mythical Stories

If you are looking for mystical stories and mythological tales, MythCloud could be just a goldmine to explore. It’s a growing online repository with around 200 digital sources and artifacts — broken down by categories, from visual arts and oral history to folklore, crafts, games, and costumes.

A fantastic resource with resources to be inspired by and stumble upon — unexpected little discoveries from around the world, and always complemented with useful resources, readings, podcasts, and videos. An open education resource developed as part of the Erasmus+ project Digital Mythologies. And: you can also ask for specific insights via MythCloud’s AI as well. (vf)

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 shipping in August, eBook available for download later this summer. 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

Designing animation might sometimes feel like a hit or miss. What’s the right easing function to use? What about the duration? Should destructive actions be animated differently from confirmations? And if motion feels a bit inconsistent at times, how do we run a motion audit?

This newsletter tries to find answers to these questions. The issue is all about designing better animation — from animation in design systems to principles of animation to running a motion audit and accessibility considerations.

We are also getting ready for our new SmashingConf adventures this year — with practical insights all around accessibility, UX, design systems, CSS, and front-end:

• Freiburg 2025 🇩🇪 (Sep 8–11), on design systems, complex UIs, refactoring and performance,
• New York 2025 🇺🇸 (Oct 6–9), on UX, design, dashboards, accessibility, CSS, design systems,
• Amsterdam 2026 🇧🇪 (Apr 13–16), UX, design, Figma, CSS, accessibility, and product design.
• In-person Workshops in Antwerp and Madrid 🇧🇪 🇪🇸 (Sep–Nov 2025), on Figma and Complex UIs.

We hope to see you there, and in the meantime, happy animation time, everyone! 🎉🥳

— Vitaly

1. Motion Design Inspiration

How about some motion design inspiration? We came across two wonderful resources that provide you with plenty of real-world examples of exceptional motion design.

Spotted in Prod collects screen record posts from a wide variety of apps, from large companies to craft-focused startups and indie developers. You can browse them by flows, patterns, gestures, visuals, design languages, and more.

Another curated collection of interface animations, transitions, and gestures is Motion Log. All animations are presented in an interactive viewer that lets you scrub through the motion frame by frame — perfect for observing all the fine little details. Happy browsing! (cm)

2. Respecting Motion Preferences

Not everyone experiences motion in the same way. What might feel smooth and delightful to some can be distracting to others and, in the worst case, cause nausea or seizures. That’s why it’s critical that we adapt motion to users’ preferences.

In her article “Respecting Users’ Motion Preferences,” Michelle Barker explains how the prefers-reduced-motion media query helps us write reduced motion styles. And she looks into another approach, too: an explicit motion toggle.

Compared to prefers-reduced-motion, which only caters to users who are aware of the feature in their system settings, the toggle makes toggling motion on and off accessible to an even wider range of users. (cm)

3. Animation Design System

How do we document motion in a design system? We’ll need to think about principles, guidelines, and examples, and surely, some animations will be more prominent than others. We could also build a timing duration calculator depending on the movements in our UI. Well, that’s exactly what Brainly’s Pencil Design System includes.

The documentation covers effective duration scale, choreography guidelines, and micro and macro animations — with slowed-down previews and a duration guide. Considerations for reduced motion and motion accessibility are also included. A treasure chest for anyone looking for ideas on how to incorporate motion in their design system. (cm)

4. Animation For Designers

What do we need to consider to ensure our UI animations feel natural and don’t distract users from the task they want to perform? In his practical guide to animation in UX, Taras Skytskyi explains all the rules and principles you need to be aware of to create delightful animation effects that feel just right.

The guide covers everything from animation duration and speed to easing and choreography. You’ll learn to adapt your animations to different screen sizes and platforms, how to read animation curves, and how to guide your users’ attention when transitioning from one state to another. The guide isn’t about specific use cases but rather universal principles that you can apply to all kinds of interface animations. A must-read. (cm)

5. Upcoming Workshops on UX and Front-End

That’s right! We run online workshops on front-end 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:

• Figma Workflow Masterclass Design
  with Christina Vallaure. July 23–29
• Building Interactive, Accessible Components with Modern CSS & JS Dev
  with Stephanie Eckles. Aug 18–27
• UX Strategy Masterclass UX
  with Vitaly Friedman. Aug 20–29
• Dataviz Accessibility Workshop Dev
  with Sarah L. Fossheim. Sep 22–Oct 6
• Workshops in Antwerp & Madrid 🇧🇪 🇪🇸
  on Figma and Complex UIs. Sep–Nov 2025
• How To Measure UX and Design Impact UX
  with Vitaly Friedman. UX bundle (video + UX training)
• Jump to all workshops →

6. How To Include Motion In Design Systems

At first glance, motion might seem too complex to integrate into a design system, so it is often left out of the discussion. However, with the right strategy, the workflow isn’t much different than the one you use to define color palettes or typographic scales. To help you overcome motion paralysis, Caleb Barclay shares a step-by-step guide to including motion in a design system.

Caleb’s approach involves five steps, from deciding what to add to the design system and establishing motion principles to defining a library of motion building blocks and preparing translation specs with everything developers need to build a prototype. A comprehensive roadmap you might want to keep close. (cm)

7. How To Run A Motion Audit

Lacking resources on how to set up a motion system, Dushyant Dubey researched different design systems to create a detailed plan on how to tackle the challenge. In his case study “Building a motion design system for a product company,” he grants insights into the strategy and how he and his team applied it when building the Blade motion design system.

The case study covers the entire process, from planning and running a motion audit to defining motion parameters and implementing motion tokens that encapsulate specific motion behavior for component interactions. It also features plenty of examples of micro and macro interactions. An invaluable resource for systemizing motion. (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 shipping in August, eBook available for download later this summer. 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

It’s CSS time! In this newsletter, we dive into new CSS features and techniques, along with a few tools that will help you write maintainable CSS and avoid headaches in debugging — with easing functions, anchoring, if(), drop shadows and CSS bursts. With an upcoming workshop by Stephanie, too!

As a quick reminder: we’ve just announced SmashingConf Amsterdam 2026 🌷 — our brand new conference for designers, UX and UI engineers — all around UX, design patterns, accessibility and design systems. Get your early-bird ticket.

As summer looms, we still have a few friendly online workshops coming up as well:

• SmashingConf Freiburg 2025 🇩🇪 (Sep 8–11)
• Live workshops in Antwerp and Madrid 🇧🇪 🇪🇸 (Sep–Nov)
• UX Strategy with Vitaly Friedman,
• Accessible Typography with Oliver Schöndorfer,
• Free: Smashing Meets AI on AI, design patterns and developer’s workflow.

And I hope you’ll find a bit of time to slow down over the next couple of weeks and crave a bit of time for yourself, and for meeting good and old friends. Wishing you healthy, calm, and peaceful days, everyone! 🎉🥳

— Vitaly

1. if() and reading-flow

Exciting new CSS features have just landed in Chrome 137: if() and reading-flow. Una Kravets recorded a video to give us a quick overview of what they are capable of, with a practical example of what we can use them for.

The new if() function lets us use custom property values and style queries to write logical styles based on property values. The reading-flow property improves keyboard and screen reader accessibility by declaring an intended focus order instead of letting the browser follow the source order of the DOM tree. Finally, a fix for those occasions when visual order and source order mismatch. (cm)

2. CSS Bursts With Conic Gradients

A burst background created just with CSS? It’s possible, as Chris Coyier shows. With gradients now supporting two color stop lengths instead of just one, hard-stops work for conic-gradient() as well — the perfect foundation to create a burst effect.

Chris shares a tutorial on how he created a CSS burst with conic gradients. And he built in some clever effects, too: placing a radial gradient on top of the burst makes room for text in the middle, and laying on more radial gradients, or a repeating radial gradient with transparent color stops, breaks up the gradient’s lines. It’s always impressive to see what can be achieved with just CSS when you think outside the box. (cm)

3. Easing Wizard

Are you struggling with CSS easing functions? No worries; you are not alone. Matthias Martin created a neat little tool to help you make sense of them: Easing Wizard.

Easing Wizard makes it easy to visualize and test how CSS easing functions behave as certain parameters change. It supports Bézier, spring, bounce, wiggle, and overshoot and offers plenty of presets, customization options, and preview modes to see an easing function in action. A fantastic playground for tinkering with easing functions, and once you’re happy with the result, you can copy the CSS or Tailwind CSS to your clipboard with just one click. (cm)

4. Matching Drop Shadows

If you’ve ever tried to implement consistent drop shadows across multiple platforms and design tools, you’ve probably noticed that they don’t look the same. But, good news, it is possible to get them all to match. Marc Edwards did the heavy lifting for you and created a cheat sheet with scale factors to convert to and from the various platforms and design tools.

As Marc points out, position offsets and color all behave the same across CSS, Android, iOS, Figma, and Sketch. The only difference is how the blur radius is handled. Getting it to match perfectly is impossible due to the differences in rendering methods and code, but with the help of Marc’s cheat sheet, you can achieve a very close match. (cm)

5. Upcoming Workshops and Conferences

That’s right! We run online and in-person workshops, be it accessibility, performance, or design patterns. And as always, 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 Christina Vallaure. July 23–29
• Building Interactive, Accessible Components with Modern CSS & JS Dev
  with Stephanie Eckles. Aug 18–27
• UX Strategy Masterclass UX
  with Vitaly Friedman. Aug 20–29
• Advanced Design Systems Workflow
  with Brad Frost. Oct 1–10
• Smart Interface Design Patterns ux with Vitaly Friedman. Video course + UX certification.
• Jump to all workshops →

6. Anchor Position Tool

The CSS Anchor Positioning API lets us position elements relative to anchors, i.e., other elements, giving us new creative possibilities to solve complex layout challenges. Una Kravets built a tool to make anchor positioning more straightforward: the Anchor Position Tool.

You want to position a tooltip at the top right of your element? Or a label centered at the bottom? The Anchor Position Tool visualizes various anchor positions. Just click on the one you want to implement, and the tool provides you with the CSS (with or without logical properties), ready to be copied and pasted into your project. One for the bookmarks. (cm)

7. Styling Date/Time Input Icons

When you use HTML <input> tags with types for dates and times, supported browsers supply a little clock or calendar icon next to the input. A nice detail, but if your input is in dark mode, the icon sometimes disappears. So, how can we fix that?

The browser-supplied icon can’t be styled with background or color attributes, but Cassidy Williams found a workaround: When you select an <input> and add on ::-webkit-calendar-picker-indicator, you can style the icon as if it’s an image. Whether it’s adding filters, changing opacity, or hiding the icon entirely and using a custom image, the solution offers various options you can tinker with. (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 shipping in August, eBook available for download later this summer. 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).