Posted 9th September 2013 | By ExtraMile

With mobile traffic outpacing desktop traffic (and set to overtake it next year) there is an increasing priority to ensuring your message works on mobile platforms.

We have lots of posts and content about our responsive design websites showing you how and why we do this but we’ve written nothing on responsive email… until now.

Isn't it just business emails that are read on mobile?

68% of smartphone owners read email on their device regularly! With nearly half of all mobile phone owners having a smartphone that's a significant proportion of the population who could be viewing your marketing mail on their smartphone - reading a mail on your mobile phone is no longer the preserve of Blackberry owners. Without a mobile optimised email design you are missing out on opens, hits and sales from your email marketing as people get fed up of pinching, zooming and scrolling to read what you're saying.

How much can email design change anyway?

In the past fixed width email was the norm, it meant that your email would stay the same size no matter which desktop or webmail client it was opened on – this saved designers and coders an awful lot of time as each of these clients render code slightly differently – then you had preview screens on some clients too that were half-width and had to be catered for, fixing the width was the easiest way to manage this.

You’d recognise one of these fixed width emails when you opened them on a mobile client. They would be zoomed out to the point of illegibility on some devices (that try their best to render the code as a desktop viewer would see it) on others it would be so zoomed in you would be scrolling for days to read the content. The links are likely to be difficult to tap with a finger (an awful lot bigger than a standard mouse cursor) and they are difficult and clunky to use.

Thankfully a lot of email designers caught on quickly to this problem and the developers of mobile mail applications also improved their scaling and resizing to make mails of this type easier to read and calls to action easier to hit.

What are the options for mobile email design?

An email for use on mobile devices can be designed in one of two ways:

1. Scaleable design

In this instance you rely on the mobile email client to make sure your email design is still legible on a mobile – this means the layout and design are exactly the same on desktop as mobile, but you’ve catered for the mail to be scaled down on mobile devices.

The fundamentals of scaleable email design for mobile are:

  • Still readable and clickable (without pinching or zooming) on a smaller device
  • Made with big buttons and big type
  • Rows stacked into columns
  • A grid structure, using tables
  • Longer, tall layout to promote scrolling and eradicate zooming and pinching
  • Supported by all mobile devices 

2. Responsive design


With responsive design there are two layouts (or more) and the content of the mail is rearranged depending on the device it is viewed upon. This allows you to add extended content to a desktop version, or increase the CTA size on a mobile, you can even remove elements altogether on a mobile device.

The fundamentals of responsive email design for mobile are:

  • Not supported by all mobile devices
  • Alternate / larger logo
  • A secondary code within one email that adapts the layout to suit
  • Larger type and buttons
  • Multiple columns on desktop converted to a single column on mobile
  • Lesser important items can be hidden or wrapped beneath the main body
  • Image switch for HD purposes
  • Alternative grid structures
  • Different alignments to make text more legible

Is there a better solution?

Because of the lack of support on some devices for responsive design, at ExtraMile we create hybrid mails – ones that are both scaleable and responsive. If a mobile mail client cannot handle the advanced technology of a responsive design the mail will still display the ‘desktop’ version that has been designed to be readable and usable on a mobile device. If the mail client can show a responsive design then the user sees the responsive design that is scaled to fit perfectly on their device.

Contact us now to make the most of your email marketing.

Written by Ean Faragher and Matt Preston - ExtraMile Communications Ltd.

Image courtesy of and copyright 2013 Phil Long under the Creative Commons Attribution 2.0 Generic license.


About ExtraMile

A digital marketing agency with international capabilities