back arrow
All Blogs
Show and Hide Content in Emails sample

How to Show/Hide Device-specific Content in Emails

Your emails are being opened on mobile and wearables as well as on desktops. Discover how to optimize your emails for touch-based interfaces....

[This post was originally published on 7th June 2022. It has been updated on 5th Aug 2024.]

Are your emails optimized for touch-only interactions?  

Increasingly, emails are being opened on mobile and wearables. The screen size is shrinking. As a result, you want your subscribers to view the most critical piece of information in your emails as soon as they open them.

Which means you need to hide the less relevant information for when your emails are opened on mobile devices and wearables. 

Otherwise, the gap between your opens and conversions will widen, eventually causing your open rates to plateau too as subscribers lose interest in opening your emails. 

In this post, we’ll show you how to hide irrelevant content in emails viewed on mobile devices. Let’s begin. 

How to Hide Email Content in Outlook?
Using display:none
Implementing Accordions
Real-world Application: By Client Type
By Device Type
Advantages of Hiding Email Content

How to Hide Email Content in Outlook?

The CSS rule display:none works with Outlook 2007/10/13, but if there is a table within the element you want to hide, the table’s contents will still be visible. 
To hide content in Outlook, use the mso-hide:all tag. This will ensure that any content within the div remains hidden when viewed in Outlook

Using display:none

The news of Gmail supporting ‘display:none’ brought joy to email developers everywhere. 

Previously, email developers had to use ‘display!important’ or set height=0 to hide elements without Gmail’s inliner removing the code. 

Now, with Gmail supporting ‘display:none’ and promising future support for media queries, content blocks can be hidden using ‘display:none’ with the appropriate media queries for screen width. Consider the following code snippet for an example.

Implementing Accordions

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

By using the Accordion effect in your email, the content is organized into segments that subscribers can tap to expand and read further. 

This doesn’t actually hide the content but arranges it into sections, allowing subscribers to easily read the parts they’re interested in while skipping the rest.

Responsive design will take on entirely new dimensions because of the rise of wearables and voice-based interfaces.

Chad S. White, Email Marketing Rules

Real-world Application: By Client Type

By implementing Accordion effect in your email, the email content gets neatly arranged into segments which the We tested integrated forms in emails. These forms are compatible with Apple Mail, Gmail Desktop, Yahoo Desktop, AOL, and Outlook on Mac. Subscribers using these email clients saw the following email. 

Real-world Application

And subscribers using non-supporting email clients received the following message instead of the form.

Real-world Application

By Device Type

One of the critical questions to answer is: Which content should you show/hide on mobile emails? Here are a few examples for your help. 

Advantages of Hiding Email Content

  • Imagine a scenario where you need to promote your mobile application to your subscribers. Depending on the device they are using to view the email, the content varies. Desktop users will see content highlighting the app’s features. Mobile users will see a CTA to download the app from the respective app store.
  • Outlook doesn’t render GIFs and only shows the first frame as a fallback. This can convey the wrong message. By using mso-hide:all, you can hide the GIF for Outlook and show a fallback image instead.
  • Interactive elements are not supported by some email clients. To prevent those clients from displaying a broken layout, you can hide the content for such email clients.
  • Reducing/hiding content, visual or textual, also increases loading speed on mobile devices with slower connections, leading to improved customer experience.

Load time is a much bigger deal than image blocking nowadays

Kristina Huffman, Experience Designer at Salesforce

Wrapping Up!

Creating responsive emails is not easy. The complexity of email rendering arises from the need to ensure that your email remains functional and visually consistent as it passes through various ESPs, email clients, operating systems, web browsers, and a multitude of devices and screen sizes.

The increasing popularity of wearables presents a significant challenge to responsive design. For now, adhering to coding best practices remains our most reliable approach.

For more information, head over to our in-depth guide to email client hacks

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.
    A realist at heart and an idealist at head, Susmit is a content writer at Email Uplers. He has been in the digital marketing industry for half a decade. When not writing, he can be seen squinting at his Kindle, awestruck.

    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.