Browse by...
Home Resources Blog

For the most up-to-date techniques, please view our Guide to Responsive Email Design.

I know you folks are probably well over me talking about Jakob Nielsen (I agree, his site causes most designers to go into meltdown), however his latest Alertbox article gave us a bit of inspiration for yet another mobile optimization for email. This time it involves the use of a mobile stylesheet to display content only when the email recipient prompts for it. This allows the email to be quickly navigated without scrolling the length of the message… Plus it’s pretty darn novel to use, too.

Short emails rule on mobile devices

If you regularly use a mobile device to read email, you’ll know that short messages are far easier to digest than multi-page essays. Mr Nielsen has also recognized the inherit difficulty in navigating long messages, stating:

“We’ve known for 14 years that it’s best to be concise when writing for the Web. Mobile simply reinforces this point and stretches it to the limit. Short is too long for mobile. Ultra-short rules the day.

On the web, many responsive sites convert luxurious long-form into ultra-short for mobile devices by using a technique that Jakob Nielsen refers to as ‘progressive disclosure‘. This involves hiding content behind an interactive element like a button or link, then displaying it on-click (or tap). Wikipedia uses it, as do a lot of mobile applications. So… Why not use it in mobile email?

Using CSS to show and hide email content

Lets say we have an email newsletter with multiple articles. In desktop email clients, we want a heading and text to display in each article:

Email in Apple Mail

However on mobile clients, we we only want the heading to display, alongside a show/hide button (which toggles the text). This turns the email into an interactive table of contents, dramatically shortening the message length:

Email on the iPhone

To do this, we’ll firstly need to turn to our HTML code and create an article with a heading, text and a show/hide button. We’ll also add a couple of classes to display the show/hide buttons exclusively on mobile devices. Here’s a simplified version of the code used for each of the articles:


First heading

HideShow

Read more...

 

Take note the classes mobilehide, mobileshow and article – these will be handling most of the action.

That’s it for the HTML, so on to the CSS stylesheet found in the head section of our code. First up, we’ll hide the show/hide button when the email displays in desktop and web email clients, by using display: none !important; in our stylesheet:


a.mobileshow, .mobilehide { display: none !important; color: #fff; }

As hackish as it is, we’ve also had to ‘white out’ the button for the benefit of Gmail and Android Gmail, which don’t support display: none; or negative margins. Thankfully, the button links are non-responsive in these clients.

On to the mobile stylesheet, which ensures that the show/hide buttons are only displayed on mobile devices. Included is some nice, webkit-friendly button styling for good measure:

@media only screen and (max-device-width: 480px) {
...
a[class="mobileshow"], a[class="mobilehide"] {
display: block !important;
color: #fff !important;
background-color: #aaa;
border-radius: 20px;
padding: 0 8px;
text-decoration: none;
font-weight: bold;
font-family: "Helvetica Neue", Helvetica, sans-serif;
font-size: 11px;
position: absolute;
top: 25px;
right: 10px;
text-align: center;
width: 40px;
}
div[class="article"] {
display: none;
}
a.mobileshow:hover {
visibility: hidden;
}
.mobileshow:hover + .article {
display: inline !important;
}
...
}

iPhone - show/hide button
And if things go well, the result is an email with show/hide buttons that toggle content on the iPhone (pictured).

However, we didn’t get away with it so easily. As newer Blackberry handsets (the ones that support HTML email by default) don’t support the :hover selector, we added an additional mobile stylesheet following the one above, that forces the text sans show/hide button to display in our otherwise mobile-optimized layout. This is done by targeting the exact resolutions of Blackberry displays. We figured adding three device-specific resolutions was enough of a concession, but you can add more to taste:

@media screen and (device-width: 480px) and (device-height: 360px), screen and (device-width: 360px) and (device-height: 480px), screen and (device-width: 320px) and (device-height: 240px) {
.article {
display: inline !important;
}
a.mobileshow, a.mobilehide {
display: none !important;
}
}

So there you have it. We found that this technique works a charm in iPhone Mail and the Android default email client. In mobile clients that don’t play so nice with CSS and mobile stylesheets (Blackberry, Android Gmail and Windows Mobile 7), the text displays, however the show/hide button conveniently does not. If you would like to provide specific styles for Windows Mobile 7, then Jeremy Keith’s technique is certainly worth a shot.

Download the code example

If you would like to try applying this technique to your own email campaigns, feel free to grab the code from GitHub and adapt it for your own campaigns:

View this project on GitHub

A huge thanks to Jakob Nielsen for the advice and Jesse, for bringing this example to life. If you can suggest any improvements to this technique, we’d be delighted to hear them – who knows, progressive disclosure may just be the next big thing in mobile email design!

This blog provides general information and discussion about email marketing and related subjects. The content provided in this blog ("Content”), should not be construed as and is not intended to constitute financial, legal or tax advice. You should seek the advice of professionals prior to acting upon any information contained in the Content. All Content is provided strictly “as is” and we make no warranty or representation of any kind regarding the Content.
Straight to your inbox

Get the best email and digital marketing content delivered.

Join 250,000 in-the-know marketers and get the latest marketing tips, tactics, and news right in your inbox.

Subscribe

Get started with Campaign Monitor today.

With our powerful yet easy-to-use tools, it's never been easier to make an impact with email marketing.

Try it for free