Responsive email design

Posted on Jun 5, 2013

There is a growing trend for mobile optimized email templates and rightly so as 36% of all email opens in the UK are on mobile devices (including tablets). As a result mobile optimization is one of the top marketing priority for digital marketers in 2013.

Options for designing and developing emails for mobile

  1. Do nothing.
  2. Be mobile aware.
  3. Design narrow/skinny template.
  4. Responsive design.

Do nothing

With the rise of users browsing on mobile devices, it isn’t be advisable to do nothing, unless your analytics show that your users are not opening your emails on mobile devices.  This might be the case if the newsletter is primarily targeted at B2B users, who have a far smaller open rate on mobile newsletters. Nevertheless, f this is the case now, it might not be the case in 3, 9, or 18 months time. Particularly with  the rapid adoption of iPhones, and Androids as company phones.

Be mobile aware

Design your HTML emails for desktop devices,  but design with mobile users in mind.

Considerations for mobile users would include:

  • Putting your headline in the top left corner, so that the user did not have to scroll right to the see key messages.
  • Include simple images which would still tell the “story” at small scale.
  • Not including text in an image wherever possible.
  • Designing the CTA to be big enough to be “tapped” easily on a mobile device.
  • Not using too many columns in the design.
  • Not overusing images, but balancing the number of graphic elements with the amount of text in the email.
  • Including relevant alt tags, and styling your alt tags appropriately so that the message would still be decipherable if images were turned off.
  • Not over-cluttering the email.
  • Simplification message. Making it short, sharp, and to the point.
  • Large fonts

IMG_5036

Narrow/skinny designs

Instead of the traditional 600px width, design the email to be 320px wide, so that the text and imagery are large enough to be easily read on a mobile device. If however, someone is viewing on a desktop device, then they would see a very long email.

IMG_5037

Responsive

This is the favoured option, however design & build for responsive emails can take twice as much investment in time and budget. Emails should be designed to be 640px wide, so that you can easily stack content blocks one on top of the other when viewed on a mobile device.

IMG_5038

Testing your HTML email

Content is and will always be king, however, it is important to give the user a good mobile experience, or they won’t bother to read on.

In order to design and code for mobile devices, its important to understand your users including which device they are using, and what they are doing with it.

The mobile market is ever expanding and currently 42% of smart phone users in the UK are using iPhones, but Android is quickly catching up (32%), and is likely to surpass iPhones in the coming year(s).

Emails should be tested on both iPhone and android devices, as well as with 3G and wireless connections.



Tags: