Responsive email

Before adding our main content container, we need to set up a Ghost Table: a rigid table with a fixed width that only renders in Outlook because it’s hidden inside some special Outlook-only conditional comments. We need to do this because our main container is going to use the CSS max-width property, and not all versions of Outlook for Windows support it. Without max-width support, the main container would explode to full-width when viewed in Outlook for Windows, so we need to contain it.

Litmus Community Templates

Responsive email design is a direct descendant of responsive web design, first popularized by Boston designer Ethan Marcotte in his fittingly titled book, Responsive Web Design. While the implementation differs between the web and email, the principles are the same.

Responsive emails use fluid tables and images to make content flow across different screen sizes. How? By using CSS media queries to change fixed-width tables and images on desktops into fluid ones for smaller screens.

A starting point

You can see that, while we use a 100% wide container table for full-width background colors, the content is wrapped in a table that is 600 pixels wide. Likewise, the image is 600 pixels wide. On desktop, that section of the email looks like this:

Example of Responsive Email Design on desktop

example of hybrid responsive mobile

The fixed-width table and image are preventing that content from shrinking down to fit on the smaller screen. How can we fix that? How do we make those elements fluid? With a media query in the head of our HTML.

Making it responsive

Media queries allow us to specify how things should be styled under certain circumstances. We feed media queries some conditions and some styles and those styles are applied to our email when those conditions are met. In the case of email and mobile, those conditions are the sizes of the screen.

The max-width: 600px rule is our screen size. In this case, any screens larger than 600px wide will see the fixed-width version of our email. Screens that are smaller than 600 pixels will force the styles in the media query to be rendered, allowing us to override inline styles in our email and optimize the design for smaller screens.

example showing how an email would respond on a smaller screen

This same technique of targeting classes and overriding styles can be used to change the layout of your email, too. In a two- or three-column layout, you can target the columns and make them 100% wide on mobile to create an easy-to-read, single-column layout. Media queries are also useful for adjusting the size of text, links, and buttons on mobile—increasing or decreasing the size of each to aid in readability and usability.

Pros and cons

The main advantage of a responsive email is that the designer has a ton of control over the display of content across devices. Media queries are very powerful and, when used well, allow designers to target and adjust the layout and style of content at a very granular level.

The major drawback is that traditional responsive design isn’t supported everywhere. Most notably, Gmail does not fully support styles in the head of an email, rendering (pun intended) responsive techniques useless in Gmail’s various clients. All of that control is thrown out the window in something like Inbox by Gmail, and the results can be disastrous.

Why “Fluid Hybrid” is a Great Method for Creating Responsive Emails

The term “fluid hybrid” has evolved organically over time within the email development community. It’s a method whereby the responsiveness of the email is baked into the layout itself, without any need for media queries.

It’s known as fluid because we use a lot of percentage widths (or max-widths) for flexibility, and hybrid because we combine those with fixed pixel widths (or max-widths) in order to control the size of our elements depending on the available space. We combine all this with the use of Ghost Tables, which is table markup hidden inside conditional comments that only Outlook on Windows will render, another aspect turning the whole approach into a bit of a hybrid between old and new. Often, successfully blending old and new to achieve results is what email development is all about.

Our responsive HTML email layout

Getting Started

What we are creating here is our basic page with its header , doctype and body . There are a few meta tags that help ensure our email displays properly on mobile, and some CSS and PNG sizing resets for Microsoft Outlook on Windows hidden inside conditional comments (the