Responsive email templates
In the last few months of 2011 there were more iphones sold than babies born. Over 35% of emails are opened through a mobile device so why are companies only sending out one email?
The table below shows the percentage of emails that are opened on a mobile device1 :
| Japan | U.S. | Canada | Europe |
| 57.3% | 40.8% | 35.9% | 30.0% |
Figure 2 / Percentages of people worldwide who read email on their mobile devices.
A study by Mailchimp found that 72% of people read their emails in bed in the morning. As the alarm clock has been phased out by the mobile, these peoples’ routine was to turn off their alarm then click the email button and read what has come in overnight, often still with the light off (if you are sending late night emails, one comment they made was to avoid using bright colours as these people are still adjusting to waking up). 1
When asked what the top location was to check your emails 35% of people said on public transport.
As with responsive websites, responsive email templates are a great way of tailoring content to the device on which it is viewed. Mobile email clients are now more supportive of web standards which means they can detect the mobile device and server alternative CSS to make the email optimised for a mobile device.
Limitations of responsive emails
- There are limitations to responsive email templates the main one being multi-column layout. As cells within a table can’t be manipulated as easily as divs can, responsive email templates generally need to stick to a single column layout.
- Iphones support a minimum font size of 13 pixels. This needs to be kept in mind when designing as upscaled font could change the layout
- Links and buttons should have a minimum target area of 44 x 44 pixels so they are easily clicked
- Keep the features minimal - when hiding certain elements that are not necessary on a mobile device use display:none
Responsive email templates mean developing two versions of CSS but the click-through rate will increase significantly on a mobile device if you get the layout right.
Some of the best responsive email templates out there at the moment:
Mailchimp
Mailchimps layout only slightly changes from desktop to mobile, they remove social links and increase the font size. Their emails are simplistic and easily read on a mobile device
Mr Porter
Whilst not a typical responsive email template their emails seem to work well on a mobile device.
Moo
Moo’s articles change from double layout to single when viewed on a mobile device.
1 http://mailchimp.com/resources/guides/html/email-on-mobile-devices/#fn2
