As the number of users who read our newsletters on mobile devices has grown, we've started creating mobile friendly, responsive newsletter templates [1], which make it possible to display our content optimally on mobile devices, as well as making sure that it still can be read in long-standing desktop/webmail clients. Responsive email identifies the size of the device's screen using a @media query and serves the styles determined for that screen size. Since the desktop and webmail clients don't have this feature yet, we have to use a "desktop first" approach and modify it for mobile clients with support for @media queries.
It's pretty easy to find information about how the layout and the breakpoints of a responsive email should be built, generally by hiding content in the mobile layouts using something like this:
<style>@mediaonlyscreenand(max-width:480px){*[class~=hide_on_mobile]{display:none!important;}}</style><table><tr><tdclass="hide_on_mobile">Hide this content on mobile devices</td><td>Show this content on all devices and clients</td></tr></table>
The solution for hiding something on the desktop version and showing it only for mobile is not trivial. There are two email clients that often cause issues: Outlook and Gmail.
Outlook used to use the HTML rendering engine from Internet Explorer, but it changed to the MS Word engine in version 2007. Since then it has very limited support for CSS and HTML. For example, the CSS property display: none; can not be used in all types of elements effectively. Table cells can be hidden only if they don't contain any other block or table elements. Simple layouts won't have problems, but sometimes nested tables are the best way to display data and adding display: none; in Outlook just won't work.
And frustratingly enough, Gmail ignores display:none; completely going so far as to remove this property from the source code. This we can overcome by adding !important to the declaration, but since CSS for email needs to be inline it cannot be later overridden.
Hiding content in Outlook
Elliot Ross, at Email Design Review, suggested adding a special class only for Outlook users and applying that for the elements to hide. Obviously in Outlook this isn't going to work. But it does work if we add the conditional comments around the actual elements like so:
<style>@mediaonlyscreenand(max-width:480px){*[class~=hideonmobile]{display:none!important;}}</style><table><tr><tdclass="hideonmobile">Hide this content on mobile devices</td><!--[if !mso]><!--><td>Show this content on all devices and clients, except Outlook</td><!--<![endif]--></tr></table>
The solution was tested from Outlook 2003 to 2013, including 2011 on Mac, and all content between the tags shown above did not appear.
Hiding content in Gmail
Gmail's treatment of display:none; means that we needed to find another solution to only show the right content. Here is the magic CSS we found that works the best:
width:0;max-height:0;overflow:hidden;float:left;
added inline:
<table><tr><tdclass="hideonmobile">Hide this content on mobile devices</td><!--[if !mso]><!--><tdstyle="width: 0; max-height: 0; overflow: hidden; float: left;"> This content won't show up on Outlook and Gmail (and some other more clients)</td><!--<![endif]--></tr></table>
Setting the width and max-height to 0 is important here. Without these properties the content disappears, but the empty area which has the same size as the hidden item will be still visible. This solution works in most clients and with adding display: none to it we can make sure that all clients hide our content.
Showing hidden content in mobile devices
Since @media queries and embedded styles work on native mobile email clients we can undo all of our previous CSS by overriding all of the applied properties:
*[class~=show_on_mobile]{display:block!important;width:auto!important;max-height:inherit!important;overflow:visible!important;float:none!important;}
Displaying on mobile and desktop with the exact same document is almost complete, just needs to be put together.
Hiding content in desktop version of a responsive email
First, set up the @media query for the mobile clients to show the needed elements.
<style>@mediaonlyscreenand(max-width:480px){*[class~=hide_on_mobile]{display:none!important;}*[class~=show_on_mobile]{display:block!important;width:auto!important;max-height:inherit!important;overflow:visible!important;float:none!important;}</style>
And lastly, add the necessary code to our elements to be hidden in desktop version.
<table><tr><tdclass="hide_on_mobile">Hide this content on mobile devices</td><!--[if !mso]><!--><tdclass="show_on_mobile"style="width: 0; max-height: 0; overflow: hidden; float: left; display: none;"> Show this content only on mobile devices</td><!--<![endif]--><td>Show this element in all emails</td></tr></table>
The final result means having greater flexibility to create better, more appropriate emails for our users without creating individual campaigns for each platform. We can save a lot of time and effort by focusing on creating more relevant content for all of our users instead of worrying about the logistics of individual campaigns.
[1] When talking about mobile devices, we refer to the native email clients listed on Campaign Monitor's Mobile Email Guide