Update on mobile email design
In this era of mobile technology we don’t even have to physically sit in front of a computer any longer to surf the World Wide Web or check our emails. In fact, a Return Path study brought to light that the number of emails read via mobile devices rose by a staggering 82.4% between March 2011 and March 2012. Us Belgians mainly read our emails via our mobile phones during weekends. With an 85% share in this particular market segment, there is no doubt that Apple has taken the ‘mobile’ market by storm.
Trying to read emails on a mobile device, i.e. on a small screen, can be a bit of a challenge at times. For one, the print may be too small to read or the email may be too wide for your screen, with the result that you can’t see all of the information at once…. But, with the arrival of Fluid Design technology or responsive design, help is at hand.
But, with the arrival of Fluid Design technology or responsive design, help is at hand.
Fluid (or Liquid) Design technology allows you to display all your single-column emails in a mobile-friendly fashion.
The maximum width of 480px ensures that emails on your mobile device are properly structured and legible. Structurally, they will look exactly the same as on your computer. The only thing that may change is their width.
‘Responsive Design’ technology allows us to tailor emails to mobile devices even further.
With responsive design, we even take matters one step further. Aside from adjusting emails to the width of your mobile device’s screen, we can now also alter their structure (i.e. the Ello Mobile email below). What’s more, images featuring in an email which would automatically be displayed on your computer screen, now no longer need to come up on the screen of your mobile device. Sounds like all your prayers have just been answered, but does it work on every operating system (Android vs. iOS vs. Blackberry)?
The Android vs. the iOS vs. the Blackberry operating systems
The familiar problem of email clients that stick to their guns (e.g. Outlook, which doesn’t read CSS) also extends to the various operating systems on your mobile phone. iOS readily reads all the CSS you include and allows you to operate in almost the exact same way as you would when creating a responsive website. Yet, the Android operating system has different ideas in that respect and does not recognize all CSS. Prime example is the reduction and hiding of images: the iOS system accepts the coding used to reduce and hide images while checking emails on mobile devices, Android does not.
And Blackberry comes with yet another operating system, which, unfortunately, displays emails on a Blackberry mobile phone very poorly. Its operating system does neither properly read nor react well to the code of either normally constructed emails (tables only) or to emails constructed by means of responsive CSS. As things stand, emails simply won’t look great on a Blackberry.
Below, we show you how a responsive email is displayed in the various browsers:
(Email clients on PC – iPhone – Android Phone)
In the above illustration, we used responsive CSS to hide the image so as to make the email easier to read on mobile devices. In the case of iOS systems, this works a treat. On Android devices, the image remains visible, but the text is justified to the width of the screen which does enhance the email’s legibility. In other words, Android also stands to gain from responsive design.
So far, we have been discussing 1-column designs. But what about 2-column or multiple-column designs? As the 1-column design doesn’t always work, designers often opt for a 2-column version. Based on experience, we would not recommend that you go down the 2-column-design road as the text displayed on mobile phones will only become narrower, which does nothing for the legibility of texts. Yet, you could always keep that option in mind for buttons or texts with minimal content.
Two examples to illustrate:
The first example is an Emailgarage newsletter, where the buttons are positioned side by side. The second one is a Solo week menu where we used 2 columns to display the recipes. On mobile devices, the images become smaller and the text fields narrower. Now, as there is little textual content, the narrower text fields are not an issue as the text remains perfectly legible.
What about image-only emails though? As we stated earlier and depending on the operating system of course, it is possible to reduce the size of images. Having said that, there are limits because text matter is also considered to be an image and will also reduce in size, which, neeless to say, will only adversely affect email legibility.
Via Responsive CSS, we are currently testing the 2-column design in terms of displaying the right-hand column underneath the left-hand column on mobile devices. So far, this only works on iOS. At that, even Outlook causes problems at times. But it is certainly something that merits following up closely.
Conclusion – Keep it simple:
Based on our experience, we can conclude that a combination of Fluid Design and Responsive Design technology presently produces the best result on all common email browsers, both in the case of mobile and of desktop versions. From a functional point of view however, we would recommend that you stick with the keep-it-simple principle, i.e.: one-column designs.
Providing you accept that emails can behave differently from browser to browser or device to device, responsive design will markedly enhance the legibility of your emails.
Please, do not hesitate to contact us for further information or a second opinion on an existing campaign.