6 minute read time
How to Display Email Content in Mobile Clients Only
Article first published in March 2013, updated April 2019
Displaying text and images exclusively in mobile email clients has long stumped email designers. Just when you’re making progress in Outlook, Gmail might end up displaying all your mobile content. However, those days are over with this simple CSS display fix.
The central issue when hiding content is Gmail’s lack of support for the display CSS property. Gmail strips out display: none; from HTML email code, thus resulting in today’s trouble. So, while it’s been possible to trick this email client by using display: none !important; this makes it impossible to use the display to toggle an element’s visibility in a media query for mobile devices. As Chris here at Campaign Monitor puts it, !important is like the sledgehammer of CSS. Use it with care, as nothing can stop it when it’s swinging.
Why hide content in desktop and webmail clients?
There are a couple of inventive reasons why you would want to do this, including:
- To display links for mobile-specific content (e.g., a “Download from the App Store” button)
- When using responsive email techniques, like progressive disclosure
Both use cases have provoked lengthy speculation in our forums, so it was no surprise that the solution was to be found there also.
An elegant workaround
We combined a couple of approaches to hiding content in mobile and desktop clients and finally came up with a lightweight solution:
<style>
/* Media query for displaying content in mobile email clients */
@media only screen and (max-device-width: 480px) {
.hide { max-height: none !important; font-size: 12px !important; display: block !important; }
}
...
/* CSS for hiding content in desktop/webmail clients */
.hide { max-height: 0px; font-size: 0; display: none; }
</style>
<!-- Content to hide in desktop/webmail clients, display in mobile -->
<p class="hide">Download from the App Store</p>
Hiding images makes for a more interesting scenario. Applying the .hide class to the <img> tag isn’t enough. You also have to surround the image with a <div> or <span> to ensure this technique plays along with both Gmail and Outlook. For example:
<!-- Image to hide in desktop/webmail clients, display in mobile -->
<div class="hide"><img src="..." class="hide" /></div>
There are two caveats: The first is that this technique does not work in Lotus Notes 6 & 7. However, if you’ve been around the traps for long enough, you’ve likely realized that nothing CSS-related does. The second is that media query support is required in mobile email clients to make elements visible. So, while this technique works in iOS Mail and Android Mail (which make up the vast majority of mobile opens), you likely won’t have much luck in Gmail for iOS.
A big thanks to Lando Calrissian for getting the conversation started, Jeremy Peter for providing a great code example, and everyone else who contributed to this fix.
Do media queries work in Gmail?
Gmail doesn’t support the <style> tag and, thus, media queries are not supported by Gmail, as they can only arrive in this form. For sending an HTML email, you’ll want to stick with Mailchimp or another ESP.
How do I make my email mobile friendly?
If you’re looking for a way to make your email content a little more mobile friendly, there are a few steps you can take. The first one involves ensuring your title and headers aren’t too long. The shorter they are, the better they’ll look on the reader’s phone. Long titles and verbiage tend to make things jumbled and compressed, which is likely to frustrate the reader or lead to other problems.
The same rule applies to your general content. If you’re looking to prepare marketing or email content for mobile-friendly purposes, try to limit the amount you produce. Bigger and longer paragraphs are going to lead to many of the same problems as long headers and titles, and the last thing you’ll want to do is make your readers turn away. Keep them interested by producing a short and concise message. Ensure that their attention doesn’t wander and that it won’t lead to mobile compression. This step should keep your mobile display visible.
Another thing to consider is the placement of your call-to-action (CTA) button. Usually, these are placed conveniently at the end of an email. Someone opens their inbox, reads through the material, and then sees a friendly reminder of what they should do next at the end, whether it’s subscribing to your newsletter or making a purchase.
If your customers are using their phones to read your content, you’ll need to take a different approach. Scrolling through content on a mobile device is harder than on a laptop or PC, and the screen is smaller, so it’s likely to take up more of a reader’s time. The situation calls for getting to the point as quickly as possible, which means placing your call to action at the beginning rather than at the end. Make sure it’s the first thing they see, so, if there are any issues or delays when studying the content on their phones, they get the message loud and clear that you’re available and open for business.
How to stop automatic inline styles
You can remove automatic inline styles when examining the hidden HTML version of your email content. Everything that’s preceded by “style=” means that an inline style has automatically been placed within the email. Simply removing “style=” whenever it comes up should alleviate this problem quickly.
Wrap up
Writing an email doesn’t just mean producing content within a message box and then clicking the word “send.” Sometimes extra steps must be taken to make it appear exactly as you’re visualizing. While this can usually amount to more time spent on an otherwise simple project, the results could lead to more readers and followers, and ultimately more customers.
To make your emails more mobile-friendly remember to:
- Keep your title and headers short
- Keep your content clear and concise with small paragraphs
- Carefully place a CTA button
If you’re looking to make your emails more mobile friendly and want to retain your customers’ attention, you can continue learning about email marketing in the mobile era here.
