Does a mobile responsive email design look the same on every phone?

            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.


            Media Queries

            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.

            So it's worth having a peek at Litmus’ Email Client Market Share page for an up to date look at what people might be opening their emails on before you decide how to code your emails.


            References



            Reader
            Media Query support
            Doctype support
            iOS native clients
            iPhone Mail


            iPad Mail


            iPad Mini Mail


            iPod Touch Mail


            Android OS bundled clients
            Android 2.3 (Gingerbread)


            Android 4.0 (Ice Cream Sandwich)


            Android 4.1, 4.2 & 4.3 (Jellybean)


            Android 4.4 (KitKat)


            Android 5.0, 5.1 (Lollipop) *


            Android 6.0 (Marshmallow) *


            Gmail variants
            Gmail app (Android and iOS)


            Inbox app (Android and iOS)


            Outlook variants
            Android Outlook.com app


            Microsoft Surface Tablet Outlook.com app


            Windows Phone
            Windows Phone 7


            Windows Phone 8


            Blackberry
            Blackberry OS 5


            Blackberry OS 7


            Blackberry OS 10





            Updated: 01 Apr 2019 12:16 AM
            Helpful?  
            Help us to make this article better
            0 0