This is a definitive guide into hiding content on desktop and web clients that you only want displayed on mobile email clients.

These days, responsive design is getting popular on email. Having the layout and sizes of elements change when viewed on a desktop vs mobile environment make for a much more pleasing email experience for the recipient.

The question is, what is the best way to hide content that you only want seen on a mobile device – such as a call to action to try out your mobile app or a clever layout trick – so that it is not displayed when the user opens on an email on a desktop or web client?

The proper way to hide content is to style a content with “display:none”, however due to the quirks on email clients such as Yahoo! Mail and Outlook 2007, 2010 and 2013 (Outlook 2007/10/13), its not as straightforward.

The markup below will do the trick:

<!--[if !mso]><!-->
<div class="mobilecontent" style="display:none;max-height:0px;overflow:hidden;">
  MOBILE CONTENT
</div>
<!--<![endif]-->

An alternate way to hide content within Outlook is using the mso-hide:all technique. However this technique requires that you apply this style to any nested tables as well:

<div class="mobilecontent" style="mso-hide:all;display:none;max-height:0px;overflow:hidden;">
  MOBILE CONTENT
</div>

Warning: Make sure to put this on a div and not on a table. You can nest the table within the div if needed. This is because Yahoo! Mail will strip display:none and max-height cannot be applied to tables.

To show the content within mobile clients you add a media query:

<style>
 @media screen and (max-device-width: 480px) {
  div[class=mobilecontent]{
    display: block !important;
    max-height: none !important;
  }
}
</style>

The Breakdown

The following example actually uses three forms of content hiding, yes THREE.

1) display:none

This is the “proper” way to hide elements in HTML. However Yahoo! Mail (Gmail also previously (before 2016)) strips out styles marked display:none effectively displaying the content and Outlook 2007/10/13 is a bit temperamental when it comes to that rule (explained below). So although for the majority of the clients display:none will work we still need to do more. Modern mobile email clients however seem to abide by that rule so hiding content within mobile is more straightforward.

2) Gmail and max-height

Yahoo! Mail (Gmail also previously) strips out display:none so the next best option is to set an element’s height to 0 pixels. However strangely enough, Yahoo! Mail converts CSS height rules to min-height – which defeats our intended purpose. However there’s another CSS rule that we CAN use, and that is max-height. So together with setting the overflow to hidden, “max-height: 0px; overflow: hidden;” will hide content within Gmail.

Unlike display:none however, setting the max-height of an element to 0 will not hide any borders set on the element itself. So if you want to hide an element with borders, you need to wrap that element with a div and set that div’s max-height and overflow instead.

3) Outlook 2007/10/13 and conditional comments (See update)

The CSS rule display:none works with Outlook 2007/10/13 unless there is a table within the element you want to hide. In that case the table’s contents will be visible even though everything else is hidden.

As every seasoned email designer knows, Microsoft Outlook took a turn for the weird with the introduction of Outlook 2007. Its workings have been a mystery since. Microsoft knows about it and for some strange reason decided not to do anything about it – the first person who is able to get an adequate explanation from Microsoft gets a shout out on this blog!

Nevertheless, Outlook has provided us with a simple solution: conditional comments. Conditional comments is a Microsoft proprietary markup that instructs their clients on how to render content within the comment blocks.

The markup below will allow you to hide any content within Microsoft Outlook 2007/10/13. Other clients will simply ignore the comments.

<!--[if !mso 9]><!-->
  CONTENT HIDDEN FROM OUTLOOK 2007/10/13
<!--<![endif]-->

In this case, the comment is saying if the version of MS Office is not 9, show the content, otherwise, hide it. A good resource is Campaign Monitor’s post Using Conditional Comments to Target Outlook 2007.

Displaying the Hidden Content on Mobile Clients

The vast majority of users on mobile (iPhone/Android) use the platform’s native email client and those clients support the media query example above and displays the content since the device width is below 480pixels (Should mobile clients start getting wider, that number may need to change).

Content may remain hidden on some mobile clients.

However, a small percentage of users use either the apps or mobile website version of Gmail, Outlook.com (Hotmail), and Yahoo! Mail. Unfortunately when viewing on these email clients, the content will remain hidden. This is because these clients either don’t support media queries or they strip embedded styles – both are a requirement to selectively display or hide content within an email based on the email client. See Email Client Media Query and Embedded Styles Support for the list of mobile email clients that support media queries.

Takeaway

• Hiding content on web and desktop clients are harder than on mobile clients.
• To hide an element with borders, wrap it with a div and apply the technique to the wrapping div to ensure the element including its borders are hidden in Gmail.
• Hidden content may remain hidden on certain mobile clients which don’t support media queries

(Photo by c.mcbrien)