Smashing Newsletter: Issue #532

Editorial

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

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

The CSS Toolkit workshop — Meet the New CSS Toolkit Workshop, with one-and-only Kevin Powell.

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

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

We also have a few free online events coming up:

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

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

— Vitaly

1. Can I Email

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

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

2. Dark Mode In Emails

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

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

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

3. Email Code Best Practices

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

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

4. Tools For Optimizing Email Code

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

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

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

5. Upcoming Workshops and Conferences

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

Smashing Online Events — With online workshops, we aim to give you the same experience and access to experts as in an in-person workshop from wherever you are.

As always, here’s a quick overview:

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

6. Email Coding Guidelines

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

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

7. Email Inspiration

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

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

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

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

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

That’s All, Folks!

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

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

November 4, 2025 Smashing Newsletter: Issue #532

Previous Issues