Useful tips and tricks for building a responsive email
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.
Email layout 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.
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; }}
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.
There are two easy ways to accomplish this:
- Using nested tables
- Changing table cells
displayproperty.
Nested tables layout
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.
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:
- Outlook 2007, 2010 and 2013 (these versions of Outlook use Microsoft Word as rendering engine)
- Oldest versions of Lotus Notes
- Gmail Android App
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).
Read the complete guide on how to build responsive emails here.