back arrow
All Blogs
Show and Hide Content in Emails sample

Show/Hide Device Specific Content in Emails

Wanna learn how to show/hide content in different devices? Email Uplers shares their coding tips...

[This post was originally published on 17th Oct 2016. It has been updated on 7th June 2022.]

Emails are no longer just restricted to communication between two people sitting behind their desk computers. In words of Bob Dylan ‘The times they are a-changing’. As per a recent survey by Litmus for September, 56% of email opens are recorded in mobile devices and 17% desktop and 27% webmail. This translates into the prominence of emails being responsive. But making your emails responsive is no longer enough; if the email is too long, it shall discourage your readers from going further.

Uplers shall enlighten you with tips & tricks on how to hide your content when viewed in mobile devices.

1. Using ‘display:none’

The news of Gmail finally supporting ‘display:none’ sent waves of happiness to hire email developers across the globe. Earlier they had to resort to ‘display:none !important’ so that gmail inliner wont strip away the code or provide height=0 on the div to be hidden.
With Google now supporting display:none and promising to support media queries in near future, any content block specified between display:none can be hidden with appropriate media queries defining the screen width.

@media only screen and (max-width: 480px)
{
   .hide {display:none;}
}
<table cellpadding="0" cellspacing="0" border="0" class="hide">
<tr>
    <td height="1" class="hide" style="min-width:700px; font-size:0px;
line-height:0px;">
        <img height="1" src="spacer.gif" style="min-width: 700px; 
text-decoration: none; border: none;” />
    </td>
</tr>
</table>

2. Hide content in Outlook using ‘mso-hide: all’

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. So to hide any content in Outlook we need to make use of ‘mso-hide:all’ tag. Any content specified within the div shall remain hidden in when viewed in Outlook.

<div style=“mso-hide:all”>
<tr>
    <td height="1" style="min-width:700px; font-size:0px;
line-height:0px;">
        <img height="1" src="spacer.gif" style="min-width: 700px; 
text-decoration: none; border: none;” />
    </td>
</tr>
</div>

3. Accordion Effect

By implementing Accordion effect in your email, the email content gets neatly arranged into segments which the subscribers can tap upon to read further. Even though the content is not actually hidden in this case but by arranging the content into sections, your subscriber can easily read those sections they are actually interested in while skipping rest.

Advantages

  • Imagine a scenario wherein you need to promote your mobile application amongst your subscribers. Depending on which devices your subscriber is viewing the email, they receive varied content.
    Desktop users shall have content highlighting the features of your app whereas the mobile users shall have a CTA to download the app from respective app store.
  • Outlook doesn’t render GIF and only shows the first frame as a fallback. This may convey the wrong message and hence by using mso-hide:all you can hide the GIF for Outlook and show a fallback image.
  • Interactive elements are not supported by some email clients. In order to prevent them from receiving a broken layout, the content can be hidden in such email clients.

    Check our ultimate guide to email client hacks for more information on this.

Need help with Email Design & Coding?

Avail of our cost-effective custom email template production services.

Download Rate card

Thanks

Real World Application

Few months back, Uplers had tested the integrated forms in email. The compatibility of integrated forms is restricted to Apple Mail, Gmail Desktop, Yahoo Desktop, AOL and Outlook on Mac. So those with supporting email clients saw the following email:

Show & Hide in Email Example

And those with non-supporting email clients received the following message in place of the form.

Show & Hide in Email Example

Share your experience in the comments below.

Did you like this post? Do share it!

    Get In Touch

    We shall get back to you within a few hours.

    The following two tabs change content below.

    Kevin George

    Kevin is the Head of Marketing at Email Uplers, one of the fastest-growing full-service email marketing companies. He is an email enthusiast at heart and loves to pen down email marketing content. You can reach him at kevin.g@uplers.com or connect with him on LinkedIn.

    YOU MAY ALSO LIKE

    WE CAN ALSO HELP YOU WITH

    Email Template
    Productions

    Transform your requirement into visually-appealing & high-converting email templates.

    EMAIL OPERATION
    SUPPORT

    Focus on your business strategy; let us handle the day-to-day operation of your email campaigns.

    DEDICATED
    RESOURCE TEAM

    Eliminate the woes of hiring and training for resources with our dedicated team of scalable email experts.

    Digital
    ASSETS

    Get more from your paid marketing campaigns through conversion-driven landing pages and banners.