A Box of Tricks for Building Responsive Email

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 continues to grow 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.

[caption id="attachment_95033" align="aligncenter" width="565"] A single column layout[/caption]

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.

Continue reading %A Box of Tricks for Building Responsive Email%

by Massimo Cassandro via SitePoint