Responsive email design

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 was one of the top marketing priorities for digital marketers in 2013.

Options for designing and developing emails for mobile

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

Do nothing

With the rise of users browsing on mobile devices, it isn’t 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 primarily targets B2B users with a far lower open rate on mobile newsletters. Nevertheless, f this is the case now, it might not be the case in 3, 9, or 18 months. 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 does not have to scroll right to see key messages.
  • Include simple images which would still tell the “story” at a 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 someone is viewing on a desktop device, they would see a very long email.

IMG_5037

Responsive

This is the favoured option. However, designing & building responsive emails can take twice as much investment in time and budget. In addition, 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, giving the user an excellent mobile experience is essential, or they won’t bother to read on.

To design and code for mobile devices, you must 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 smartphone 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 iPhone and Android devices and with 3G and wireless connections.