{"id":5309,"date":"2024-08-05T19:17:00","date_gmt":"2024-08-05T13:47:00","guid":{"rendered":"https:\/\/email.uplers.com\/blogs\/?p=5309"},"modified":"2024-08-07T14:24:37","modified_gmt":"2024-08-07T08:54:37","slug":"show-hide-device-specific-content","status":"publish","type":"post","link":"https:\/\/email.uplers.com\/blog\/show-hide-device-specific-content\/","title":{"rendered":"How to Show\/Hide Device-specific Content in Emails"},"content":{"rendered":"\n

[This post was originally published on 7th June 2022. It has been updated on 5th Aug 2024.<\/strong>]<\/p>\n\n\n\n

Are your emails optimized for touch-only interactions?  <\/p>\n\n\n\n

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<\/em>.<\/p>\n\n\n\n

Which means you need to hide the less relevant information for when your emails are opened on mobile devices and wearables. <\/p>\n\n\n\n

Otherwise, the gap between your opens and conversions will widen, eventually causing your open rates<\/a> to plateau too as subscribers lose interest in opening your emails. <\/p>\n\n\n\n

In this post, we\u2019ll show you how to hide irrelevant content in emails viewed on mobile devices. Let\u2019s begin. <\/p>\n\n\n\n

How to Hide Email Content in Outlook?<\/strong>
<\/a>Using display:none<\/strong>
<\/a>Implementing Accordions<\/strong>
<\/a>Real-world Application: By Client Type<\/strong>
<\/a>By Device Type<\/strong>
<\/a>Advantages of Hiding Email Content<\/strong><\/a><\/p>\n\n\n\n

How to Hide Email Content in Outlook?<\/strong><\/h2>\n\n\n\n

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\u2019s 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<\/a>. <\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

Using display:none<\/strong><\/h2>\n\n\n\n

The news of Gmail supporting ‘display:none’ brought joy to email developers everywhere. <\/p>\n\n\n\n

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

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.<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n
\"responsive<\/a><\/div><\/div>\n\n\n\n

Implementing Accordions<\/strong><\/h2>\n\n\n\n

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\u2019s contents will be visible even though everything else is hidden. So to hide any content in <\/p>\n\n\n\n

By using the Accordion effect in your email<\/a>, the content is organized into segments that subscribers can tap to expand and read further. <\/p>\n\n\n\n

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.<\/p>\n\n\n\n

<\/p>\n\n\n\n

\u201c<\/span>Responsive design will take on entirely new dimensions because of the rise of wearables and voice-based interfaces.\u201d<\/span><\/em><\/p> Chad S. White, Email Marketing Rules<\/em> <\/cite><\/blockquote><\/figure>\n\n\n\n

Real-world Application: By Client Type<\/strong><\/h2>\n\n\n\n

By implementing Accordion effect in your email<\/a>, the email content gets neatly arranged into segments which the We tested integrated forms in emails<\/a>. 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. <\/p>\n\n\n\r\n

\r\n
\r\n \t\t
\r\n\t \t\t\t
\r\n\t\t
\r\n\t\t \t\t\t <\/div>\r\n\t\t \t\t\t
\r\n\t\t\t \t\t\t\t\t
\r\n\t\t\t\t \t
<\/div>\r\n\t\t\t\t <\/div>\r\n\t\t\t \t\t\t
\r\n\t\t\t
\r\n\t\t\t
<\/span><\/span><\/span><\/div>\r\n\t\t\t \t\t\t
\r\n\t\t\t \"Real-world\r\n\t\t\t <\/div>\r\n\t\t\t \t\t\t <\/div>\r\n\t\t\t <\/div>\r\n\t\t\t
\r\n\t\t\t \t\t\t\t <\/div>\r\n\t\t\t <\/div>\r\n\t\t\t \t\t <\/div>\r\n\t\t \t <\/div>\r\n\t <\/div>\r\n<\/section>\r\n\r\n\n\n\n

And subscribers using non-supporting email clients received the following message instead of the form.<\/p>\n\n\n\r\n

\r\n
\r\n \t\t
\r\n\t \t\t\t
\r\n\t\t
\r\n\t\t \t\t\t <\/div>\r\n\t\t \t\t\t
\r\n\t\t\t \t\t\t\t\t
\r\n\t\t\t\t \t
<\/div>\r\n\t\t\t\t <\/div>\r\n\t\t\t \t\t\t
\r\n\t\t\t
\r\n\t\t\t
<\/span><\/span><\/span><\/div>\r\n\t\t\t \t\t\t
\r\n\t\t\t \"Real-world\r\n\t\t\t <\/div>\r\n\t\t\t \t\t\t <\/div>\r\n\t\t\t <\/div>\r\n\t\t\t
\r\n\t\t\t \t\t\t\t <\/div>\r\n\t\t\t <\/div>\r\n\t\t\t \t\t <\/div>\r\n\t\t \t <\/div>\r\n\t <\/div>\r\n<\/section>\r\n\r\n\n\n\n

By Device Type<\/strong><\/h2>\n\n\n\n

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. <\/p>\n\n\n\n

For Desktop-only<\/strong> <\/td>For Mobile-only<\/strong><\/td><\/tr>
Ebook downloads
Long-form videos
Tutorials
White papers 
Multiple columns
Complex design<\/td>		App downloads
Prominent CTAs
Video embeds with static first frame
QR code\/barcode
Time-sensitive deals
Location-based offers<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n
\"\"<\/a><\/div><\/div>\n\n\n\n

Advantages of Hiding Email Content<\/strong><\/h2>\n\n\n\n