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:
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:
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
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;
}
...
}
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:
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!
