Checking email is the most popular activity on smartphones. The widespread use of mobile devices has created new challenges for email designers and programmers. Now, instead of designing and programming for a standard monitor size, you’ve got to think about how your content will display on everything from a 54″ monitor to a 2″ smartphone screen. As with most things email, there isn’t a single or simple answer for how to deal with mobile devices. But, with 61% of consumers now reading at least some of their emails on a mobile device (Yesmail “Email Compass: The Mobile Effect”, 2013), it’s increasingly important to account for mobile in your email strategy.
You’ve basically got three choices when it comes to designing and programming your emails for mobile.
- Mobile aware
- Mobile friendly (Fluid design)
- Mobile friendlier (Responsive design)
Mobile Aware
- Mobile aware is the simplest solution because it doesn’t require special coding. It’s just designing your email with an awareness of the constraints of the small screen.
- Keep the width of your email smaller than 600 pixels (400 pixels is a good number to start with).
- Keep your call to action in the upper left so people viewing on mobile devices don’t have to scroll right, or up and down, to see it.
- Use a single column design.
- Use large font sizes and finger friendly buttons and links.
Mobile Friendly – Fluid Design
Fluid design is a programming technique that enables an email message to shrink and grow based on the screen size on which it is viewed. This is done by setting table and cell widths and heights as percentages rather than set pixels.
A drawback of this method is that on large monitors the email will expand to the full width of the screen and can often appear stretched and difficult to read.
Fluid design works best with a very simple, single column design with images that are not intended to take up the full width of the email.
Mobile Friendlier – Responsive Design
The mobile friendliest technique is responsive design and programming. Responsive design uses media queries to specify what fonts, colors, images and even layout to use based on screen widths. Responsive design can be as simple as increasing the font sizes a few pixels for mobile devices or as complex as switching a two column layout to a single column and displaying different images.
Because media queries are written as part of style sheets, responsive design does not work in all email browsers. Older versions of Android devices in particular do not support media queries.