With the widespread use of smart phones and tablets, proper mobile email design and rendering is crucial to the success of your email marketing campaigns. Finding a way to deliver an email that renders correctly on all screen sizes is a challenge.
Mobile Email Rendering
WebKit is the rendering engine used by most modern mobile devices to render HTML layouts, both in their browser and email reader apps . As a result, the support for modern HTML and CSS standards is actually pretty solid on Android, iOS, even Blackberry. Any discrepancies in email rendering tend to creep in when the HTML is initially passed through the email client's built-in preprocessor.
Every different email app, even on the same device, has it's own preprocessor, each with its own unique behaviours. They act to remove anything that they think could be dangerous; maybe potential breaches of privacy, causes of erratic app behaviour, or anything that exposes the device to virus attack. Only after the preprocessor has done its work is the resulting code passed over to the email reader. At this point, some of the HTML and CSS may no longer work as intended...
For example, the Gmail email client app comes tailored to each of the various versions of Android. So you may find some versions of the app will remove all traces of any CSS from the email (including media queries) whilst other versions are more relaxed and allow some CSS through. Often, manufacturers' own built-in email apps have better support for CSS (with the notable exception of Samsung devices).
The native Mail app on iPhones and other iOS devices is arguably kindest of all in recognising and implementing responsive media query code. The Windows phone's native email app also recognises most responsive code without issues, whilst users with a BlackBerry Z10 will need to scroll and pinch to view their emails.
Bearing the above in mind, it is still possible to use things like media queries and CSS to give your email a different layout on different devices. A media query is a snippet of code that sits in the head of your email and turns on a set of CSS rules when certain criteria are met, targeting different screen resolutions to change the email design depending on the device it’s being viewed on.
For example, you can set a media query so that when an email is viewed on a device with a horizontal screen width above 645 pixels the email is governed by one set of CSS rules, but the same email viewed on a mobile device with a horizontal screen width of less than 645 pixels is governed by a different set of CSS rules.
Many elements can be changed, 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 as mentioned, not all mobile email clients currently support media queries. Some even go as far as to strip out the doctype declaration, which further hampers things.