Mobile email design and rendering

With the widespread acceptance of smart phones and tablets, proper email rendering in mobile devices has become crucial to the success of your email marketing campaigns but finding a way to deliver an email that renders correctly in all screen sizes is a challenge.

Currently, most marketers create a separate email for mobile users and deliver it based on subscriber preferences or provide a link in their email to open a mobile-friendly version in the device’s web browser. But by taking advantage of some new coding techniques it’s now possible to deliver both desktop and mobile-friendly versions automatically depending on which device the email is viewed on.

Mobile Email Rendering
Similar to webmail rendering, each mobile email client uses a proprietary pre-processor which removes anything that could be dangerous, introduce privacy concerns or cause the email client to behave unexpectedly. The pre-processor doesn't alter the HTML until it arrives to the phone and, once the pre-processing is finished, the HTML is passed to the phone’s browser to render. Each email application on the phone “borrows” WebKit to render the email, even if the email’s not being read in the browser itself.

So, while it’s very likely that emails read on a mobile device will be rendered using WebKit, differences in pre-processors and behaviours between email apps, even on the same device, can result in rendering differences in each one. For example, the Gmail app on Android removes all CSS, including media queries used in responsive designs, while the email app on Android has better support for responsive elements. And while the iPhone scales designs to fit the screen, users with a BlackBerry Z10 will need to scroll and pinch to view their emails.

To make matters more confusing, there are subtle differences between each devices’ implementation of WebKit, so Android, Blackberry and iOS all use a slightly different variation of WebKit to render. For example, each manufacturer may opt for a different style of button, or slightly different font smoothing. Windows Phone also uses a pre-processor before passing HTML to the phone’s browser, but uses Internet Explorer rather than WebKit for rendering.

Media Queries
A media query is a small snippet of code that sits in the head of your email code and turns on a set of layout instructions (cascading style sheets or CSS) when a certain criteria is met. Traditionally, this has been used to target devices such as printers to change the layout of web pages for better printing, but with the increased usage of mobile email, designers are using the media query to target different screen resolutions and change the design depending on the device. This has been termed ‘responsive design’ because the design can respond and adapt depending on the screen it is viewed on.

For example, if a media query is set to look for a screen resolution of 480 pixels or less (your typical smartphone size), the new CSS will be loaded and change layout elements when the screen matches that resolution.

Many elements can be affected, including widths, heights, image paths and sizes, buttons, fonts, colours, etc. It is also possible to hide sections of content with this method, effectively allowing you to deliver a unique message to a user’s inbox depending on the device it is viewed on - automatically.

However, it is worth noting that not all mobile email clients currently support media queries (see below).

Media Query Support in Mobile Devices



*Table care of Anna Yeaman at Style Campaign. This article has been compiled using information and advice from Litmus and BlueHornet.