Design Systems for Email

Bringing modular design practices to email.

By Ovi Demetrian, Jr.August 5, 2020 at 4:31 PM

Email design, like web design is produced using HTML and CSS. However, with email design, there are different aspects to take into consideration from layout to code to output. But if you’re a web designer, getting into email design doesn’t have to be a cumbersome process. Here are some pointers to get you started down the path of email design and using a design system for it.

Text vs. design 🔗

One of the first things you’ll run into in the email world is the debate on sending emails as text vs. designing a template. It shouldn’t be an either or thing. It really depends on what the email is for. Email as text is a design decision in itself and can range from deciding on basic text and link formatting to using a signature. For marketing purposes, you should probably always use an HTML template for emails for control over all nuances.

Email rendering 🔗

The next thing you’ll learn is that coding an email is like coding a website 20 years ago, using tables for layout and inline styling. There’s even an Internet Explorer equivalent: Outlook. While you can do some more modern things like make responsive adjustments for mobile devices, there are limitations. This stems from the fact that different email client software have their own way of interpreting security restrictions.

Tools for building emails 🔗

Despite the rendering headaches, there are development tools to help with the process:

Design canvas 🔗

Because of how email software displays emails and how users typically have their windows open, the width of an email should still be kept at around 600–640 pixels. Certain spam filters check for the ratio of images to text so make sure not to overdo the use of images. And images load slower in email clients compared to browsers, so compression is even more important, especially if you want to use animated GIFs. You can do some advanced things like use webfonts and videos, but webfonts are also slow to load, and there’s very limited support for video across the board.

Design approach 🔗

Like with web design and design systems, a good practice for designing a template is by thinking modularly. Break apart design patterns like stackable containers and reusable components like buttons and headlines. For more on how to do this with email design, here’s a guide I worked on that will help you dive in to both design and code.

Responsive options 🔗

To get responsive for mobile to work, the base design has to be setup for desktop email clients first and use media queries to overwrite any needed styling for mobile sizes. If you run into limitations, you can build a separate mobile version and use media queries to show/hide it as needed. You’ll most likely end up using a combination of both techniques, using show/hide for certain parts of the design.

Maintenance and collaboration 🔗

This is where using a design system comes in. Using modular design to produce your template, you’ll find that you can use it for a range of email types. Setting up guidelines and documentation around it will help you and your team produce individual campaigns more efficiently, and effectively.

Evolving your template 🔗

A design system will allow others to better understand the design decisions made. By educating on constraints: workflows, habits, and best practices. And with guidelines that answer the why, when, and where. It will also encourage a conversation: “Can we?”, “should we?”, and “what if…” This pushes the discussion forward in the goals of your organization’s emails.

To get an idea of what to include in a design system for your email template and how to share it with your team, here’s another guide to get you going.

Read this next

Useful Sections for a Design System Reference Site

More people will use your design system if it’s easy to browse.