We’re fighting the good fight, which is the never-ending battle of the constant stream of email. No matter where we go, or what device we have with us, emails can find us anywhere. Chances are you’ll have ten more emails after reading this article. And as designers, we’re on both sides of the inbox: we constantly receive emails, but we’re also responsible for designing and creating the actual email designs.

No matter who you’re targeting with your email, the goal is to provide the best user experience when sending out emails to subscribers, customers, and prospects. And because the majority of emails are opened on mobile devices, we need to design emails to accommodate any device that they may be opened on.

We’ve become so used to responsive web design and top notch mobile applications, we often take for granted that we can just pick up any device and design a tailor made experience. With email, things are not as cut and dry. In terms of technology, it is light years behind modern web design. We need to design with HTML attributes, table-based layouts, and inline styles, which aren’t guaranteed to behave the same in each email client.

Designing email for all devices, what are my options?

Before you go and dust off your CD-ROM collection, remember there is hope for designing a successful “responsive” email, even with the limitations. Creating a truly responsive email is certainly an option, but it’s important to consider all three of these approaches when creating successful mobile first design:

• Scalable design
• Fluid design
• Responsive design

To choose the approach that best suits your needs, it’s important to understand the differences and limitations between these three forms of design. Making a decision requires knowledge about your audience and what devices and email clients they use. Because not all email clients offer the same CSS support, this will help determine which approach will best serve your users.

Scalable design

Scalable email layouts are versatile because they are readable and clickable on all screen sizes. This is a great option if your audience tends to open their emails on a variety of devices: mobile, tablet, and desktop.

<table border=&quot;0&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; width=&quot;100%&quot;>
<p>Email content goes here.</p>
</table>

This option is typically the easiest to implement since it doesn’t use media queries and there are no table widths that need to be adjusted. One advantage is that there isn’t a huge learning curve when designing this type of email. In most cases, mobile is the most common device for reading email, and this makes it easy to ensure that mobile considerations are made first. Larger buttons, easy to read text, and clear calls to action give mobile first priority to accommodate the needs for a smaller screen size.

Scalable email design can be limiting in the fact that it has to be single column to work well across all devices. The reason is, if the design had multiple columns, these would get very small on mobile devices, affecting readability. However, if you scroll through your inbox, you’ll see a lot of single column layouts because they are very common.

Content is key to any email, so text size should be at a size that works well for mobile and also on larger screens. With most email clients, the entire email will fill the screen so the user will not have to vertically scroll. However, it is still recommended that key information and the call to action should be placed in the upper left of the email, just in case the email does not fill the screen as intended.

Fluid design

You may be familiar with “liquid” layouts from web design. Design components have percentage widths, and adjust to the user’s screen resolution, keeping those same widths. Fluid email design utilizes this same idea.

This email option bridges the gap between scalable and a truly responsible option. More upfront design has to be done than with the scalable option. The reason for this is that percentage-based sizing makes the width of the tables and images adapt to whatever screen size the email is viewed on. Tables don’t alter the layout at different sizes, but the content flows and fills in the space. This is a great option for emails that are text heavy, since there’s less control over how copy and images relate to each other. It’s still a good idea to keep the layout simple, preferably a single table layout to keep legibility of the email as the first priority.

Remember how we said this bridges the gap between fixed and responsive? The reason is that the size needs to be constrained for larger screens. If the email gets too wide, text lines become much too long visually and we want to make sure our readers can easily read our email. Wrapping the content of your email in a fixed width container table will help for the appearance on larger screen sizes. Then a helpful media query will target smaller screen sizes.

<table border=&quot;0&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; width=&quot;525&quot; class=&quot;wrap&quot;>
<tr>
<td>
<table border=&quot;0&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; width=&quot;100%&quot;>
<p>Wrapping table will help on larger screens.</p>
</table>
</td>
</tr>
</table>

Example of a media query for mobile devices:

@media screen and (max-width: 525px) {
table[class="wrap"]{
width:100% !important;
}
}

Responsive email

Let’s take what we know from scalable and fluid emails and add some more rules. Responsive lets you have more control over what is presented at different breakpoints with CSS media queries. With this option, layouts can be changed, and other elements can also be customized with conditional styles for specific breakpoints.

Here is an example of a media query for a responsive layout:

@media only screen and (max-width: 450px) {
td[class="column"] {
display: block;
width: 100%;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
}

Like the other options, you are not limited to one column or simple designs. Emails can be more complex, with less restriction on layout and amount of images. For example, email designs can be multi columns on larger devices but a single column on mobile. Text size, images, and most everything else can be optimized for the best experience.

Before we create complex designs with multiple media queries, it is important to talk about some of the tradeoffs. Media queries do not work in all email clients. In fact, support is pretty limited. According to the Litmus media query support list, Android Outlook.com app, Android 4.x native client, and iOS (iPhone/iPad) currently support them. These can be utilized to the fullest potential if the majority of your viewers are mobile and tablet users.

Other design considerations

Before you start creating the design of your email, it is important to look at the analytics to determine which email clients and devices of your users. It is recommended to check this frequently and let your design approach evolve as things change. Even with limitations, email is evolving so it’s important to keep up on what is currently supported.

Here are a few great resources for further reading:

• Mobile Specific CSS
• Future of Email
• iPhone and Android Emails

The good news is that a mobile first approach is possible with the current limitations of emails. Even if the design isn’t the truest form of “responsive”, with just a few specified percentages and some media queries, you will create an email design that is sure to impress, no matter what device. In most cases, the majority of users are checking email on mobile devices, so taking a mobile first approach becomes a strong foundation for your email design.