Design & UX

A Box of Tricks for Building Responsive Email

Massimo Cassandro
Share
Card tricks

photo: fishbulb1022

In my previous article on newsletter authoring we’ve seen how a handful of tricks can make a huge difference in how your email displays in different clients.

Moreover, we have to take account of mobile devices, whose use in email consumption grows daily. This brings us to the question of building responsive layouts for email.

Since we know email templates are built with HTML tables, and have the inline CSS, our work is a bit more complicated than usual:

  • Inlined CSS rules have high specificity values (they always win an arm wrestle).
  • Tables are not designed for layout composition so we must take care to compose our emails keeping in mind the need that cells – which have a naturally horizontal positioning – should be arranged vertically in mobile devices.
  • Of course, we can’t use JavaScript.

Luckily, most mobile devices have a high compatibility with modern CSS rules, so we are able to tackle all these problems easily using media queries, making a large use of the !important declaration (to over-rule inline styles), and paying careful attention to the way your content is arranged.

A mobile first approach to this kind of projects is very important and allow to avoid layout that can’t be properly arranged in small devices.

Consider that even if, in this article, we will only address responsiveness issues, responsive mobile emails are not automatically good ones. Effective mobile email design involves many elements including font sizing, layout composition and so on: these are very important tasks and we’ll cover them in an another article.

Email layouts patterns

Regarding responsiveness, we can identify two types of email: single column and multicolumn ones.

Single column layout

Single column layouts (often with a single header image) don’t have particular needs. Since they don’t need to rearrange elements, we have only to take care that all widths degrades gracefully to match device sizes. Rather than Responsive design, this is a classic example of Scalable design (see Scalable, Fluid or Responsive: Understanding Mobile Email Approaches).

A single column layout

A single column layout

To ensure your email resizes correctly, you have only to adjust table width:

<table cellspacing="0" cellpadding="0" border="0" width="600">
	<!-- email content -->
</table>
@media screen and (max-width:480px) {
	table {
		width: 100%!important;
	}
}

You will need to resize images too (see the About images paragraph at the end of this article) and to adjust your font-size also, but there aren’t any other particular needs.

Multicolumn layout

Multicolumn layouts require your columns to be rearranged as device width decreases. It makes no difference whether you’re working with two columns, three or more: you will need to display them vertically instead than horizontally.

multi-columns-layout

There are two easy ways to accomplish this:

  1. Using nested tables
  2. Changing table cells display property.

Nested tables layout

Email composition often requires you to use nested tables. This has always been considered the best way to ensure client compatibility, but on the other hand the resulting code is very dirty and practically illegible.

The trick is the use of the table align="left" attribute that causes tables to align horizontally.

Every element must have a specific width and their total must have the same value as their container.

Nested tables

When the device width decreases, we have to resize the container and force all the tables-columns to 100% width.

table[class="body_table"] {
	width: 600px;
}

table[class="column_table"] {
	width: 180px;
}

table[class="spacer_table"] {
	width: 30px;
	height:30px;
}

@media only screen and (max-width: 480px) {
	table[class="body_table"] {
		width: 420px!important;
	}
	table[class="column_table"] {
		width: 100%!important;
	}
}

This technique ensures compatibility with the majority of clients: I’ve tested the demo file in Litmus and I had good results for all clients, allowing the following caveat:

This is a good start point (see below for a partial result of the test), and we must also consider that this test has been built with empty tables: adding content (and more nested tables!!) you should be able to fix all bugs and make this technique working properly with all clients.

Part of the compatibility test made with Litmus

Part of the compatibility test made with Litmus

I’ve made a codepen with the code I used (note that the CSS is not inlined in this pen, so you’ll need run a CSS inliner before using it for production email).

A note about the code editors:

Although I currently use Coda or Brackets for coding, in these cases I really appreciate visual editors, such as Dreamweaver. It makes it very easy to navigate within nested tables and edit HTML and CSS.

In the screenshots below you can see the email layout in Dreamweaver in desktop and phone views.

Email composition in Dreamweaver

Email composition in Dreamweaver

Changing table cells display property

The second way to built multi-columns email, is more elegant and uses native CSS rules.

This technique consists in changing the default table cells display property when device width decreases (you can find many examples at responsiveemailpatterns.com). This causes the cells to re-stack vertically:

Changing display scheme

Changing display scheme

table[class="body_table"] {
	width: 600px;
}
table td[class="column"] {
    height:100px;
    width:200px;
}

@media only screen and (max-width: 480px) {
	table[class="body_table"] {
		width: 440px!important;
	}

	table td[class="column"] {
        width:100%!important;
        display: block!important;
    }
}

The results of this test are excellent: all clients rendered properly test email (sometimes with minor bugs), anyway remember that we have tried an empty mail, and the results may be different adding content.

Here is the codepen for you to pick through.

About images

In responsive emails, images don’t requires anything more than the classic responsive technique (img {max-width: 100%;}) we currently use in the web.

Anyway, as suggested in Campaign Monitor Responsive Email Design Guide, using media queries, you can hide an image and show another one as a background image instead.

@media only screen and (max-device-width: 480px) {
    img.original_img {
        display: none;
    }
    .substitute_image {
        background-image: url(background_image.png);
        width: 440px !important;
        height: 240px !important
    }   
}

Before an after courtesy of Campaign Monitor

Keep in mind that even images hidden via CSS are loaded into the client, so be careful about this.

A good option can be to use the same image both for the img tag and the background-image source. You have to prepare a multipurpose image that can be used for all that scopes, just like the example below:

Roma, Castel Sant’Angelo

Choosing the right image, you can use it for many media queries breakpoints. After have prepared it, you have only to add a handful of CSS rules:

@media only screen and (max-device-width: 480px) {
    img.original_img {
        display: none;
    }
    .substitute_image {
        background-image: url(original_image_source.jpg);
        background-position: center center;
        background-repeat: no-repeat;
      width: 440px !important;
      height: 120px !important
    }   
}

You can also add a background-size property to adjust each breakpoint view (paying attention to clients support for this rule).

Unfortunately, this is unlikely to solve all your needs for high density devices – however it can reduce the number of files loaded for all other cases.

Conclusions

So, is there a single, all-conquering, best-ever technique for responsive email authoring?

As is usually the case, there isn’t. Every project needs a different approach and has a different best solution. The real answer is to have a useful selection of techniques to choose from at your fingertips, and always experiment with new ways.

Resources