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:

• MJML is a framework where you code using its layout markup that is compiled into compatible email code

• Maizzle works with standard HTML and offers post-processing tools for more flexibility

• For testing, there’s Email on Acid which will render your template across a number of different email clients

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.