Extravision Blogsblog

Recent Posts



Email design for mobile devices

July 5, 2012

In April 2012, according to stats produced by Litmus, the number of mobile opens in a month exceeded the number of desktop opens for the first time ever, emphasising how important it is to consider mobile devices when creating your campaigns. If possible, start by designing for both desktop and mobile devices rather than designing for desktop and then trying to adapt it for mobile.  If you know mobile devices are used by a high percentage of people that read your email then it might be better to design for mobile first, rather than trying to squeeze your desktop creative onto the small screen. This is effectively what Yahoo! did with the latest version of Yahoo! Mail. They realised a high percentage of their users were using a tablet to read their email so they designed the new mail application for the tablet and then ported it over to the desktop afterwards.

Below is the Extravision Visionary newsletter as displayed on an iPhone. As you can see there is nothing wrong with the design on a mobile but it is not "optimised" for mobile devices.


Use responsive design with CSS 3 media queries

Media Queries is a CSS3 module allowing you to change the rendering of your email based on conditions such as screen resolution. You can use the different styles to reduce the width of the email, use smaller images and set the font size all specifically for mobile. Here is what we added to our newsletter.

@media only screen and (max-device-width: 480px)
   #hide {display: none !important;}
   #table {width: 100% !important; padding:5px;}
   #tablesmall {width: 100px !important;}
   #3px {width: 3px !important; padding:0px;}


In the above css we hide unnecessary sections from the mobile version. For example you might want to remove the pre-header and social media links at the top of the email so the recipient can see more of the relevant content.


Control your font sizes

On the iPhone and iPad there is a minium font size by default of 13 pixels. Anything below this will get resized to make it easier for people to read on their mobile device.  However, this auto resizing might not fit well in your design so it is better to disable the auto resizing and control your font sizes for mobile manually.

<style type="text/css">
   div, td { -webkit-text-size-adjust:none; }

Or you can add it to your media query to be certain it is only used for mobile devices and doesn't affect email clients such as Apple Mail

@media only screen and (max-device-width: 480px)
   #hide {display: none !important;}
   #table {width: 100% !important; padding:5px;}
   #tablesmall {width: 100px !important;}
   #3px {width: 3px !important; padding:0px;}

   div, td { -webkit-text-size-adjust:none; }

Now you will need to increase the standard font size in your email to make it easier to read on the mobile device.  We increased our general font size to 18pts.


Design for touch not for a keyboard

With a touch screen device the finger has now become the mouse and it is estimated that the average adult finger is 45 pixels. With this in mind you want to make all your buttons larger on the mobile and allow for more space between links to people avoid tapping on the wrong link. There is nothing more annoying than having 2 links close together in an email and constantly selecting the wrong one with your finger.

Contrast,  subjects and landing pages

On a mobile device everything is reduced in size so subtle changes in contrast and colour are less noticable. Try to use strong contrasts instead to make your design easier to read.

Think about your subjects lines. The visible subject line on a mobile device is shorter than a desktop email client so for your mobile audience you might want to use a shorter snappier subject.

Also don't forget about your landing pages. You may have optimised your email for the mobile and made all you calls to action clear and easy to click, but if the landing pages are slow to load and hard to read on the mobile then all your time and effort is wasted.

Posted by Simon Hill
Email Design, Technology

No comments

Comments are closed.

From the Blog

How to craft the perfect re-engagement email: Topshop example

In an ideal world, everyone on your list would be eagerly awaiting your email. They…

Jenni Malley
June 1, 2017

How To Get Your Perfect Email Template

If you send email campaigns then you probably use a template. Not every email campaign…

Jenni Malley
May 12, 2017

Latest Tweets

Get in touch

MediaCity UK
M50 2AB
Find us on Google maps

Main: +44 (0) 161 817 2929
Support: +44 (0) 161 817 2930
Email: [email protected]


Facebook IconTwitter IconVisit Our BlogVisit Our BlogVisit Our Blog