A few months back, I wrote a post outlining four responsive emails and the tactics they applied to content. I’ve received significant feedback on that post, so I’m diving back in to show some more responsive emails from my inbox. There’s a range of ideas here, from beginner to advanced tricks.

It’s important that we all be looking at examples of what’s happening in the space. There are few best practices established, and fewer quick fixes. The phrase “mobile optimization” is being tossed around a lot, but the idea is new enough that I don’t think we quite know what it means yet. There’s no light switch for addressing mobile inboxes, but these examples are a great place to keep learning from those who are paving the way.

Let’s jump in.

Note: The only edit I’ve made to these images is to cut off footer text on some messages, as it took up space without providing additional insight.

1. Campaign Monitor Newsletter

Campaign Monitor was one of the first to embrace responsive email, and their newsletter remains one of the most graceful examples of transitioning from a desktop to mobile state. It’s a perfect example of maximizing readability.

Notable tactics used in transition from desktop state to mobile state:

  • Preheader (and a few footer) elements hidden
  • Email shell (usually called the “template”) resized to be narrower
  • Text reflows in skinnier layout

 

2. Hilton HHonors

I mentioned a Hilton HHonors email in my previous post, too – they’re consistently using responsive email and slowly trying new things. What’s interesting here is the hero image. It’s the same across both views, but used in a slightly different way. Note the image appears to wrap around the body column on the desktop view, while it’s simply full width on the mobile view.

Notable tactics used in transition from desktop state to mobile state:

  • Preheader hidden
  • Account module hidden
  • Shell resized
  • Footer logos hidden

 

3. Salesforce.Com Developer News

This Salesforce email is notable because it represents an emerging trend among responsive emails. A number of elements are adjusted in the mobile view, but the main point to note is how the right column of the body floats under the left column. No other significant adjustments are made, so this is purely a readability move.

Notable tactics used in transition from desktop state to mobile state:

  • Right column floats under left column

This approach is one of the ways brands are retro-fitting old designs to be more mobile-friendly without redesigning. It certainly shouldn’t be labeled as “optimizing” for mobile, but it’s a step forward on improving readability.

 

4. Rewards Network | Delta SkyMiles Dining

This email shows a restrained use of the mobile view. Again, the primary goal here is readability on mobile. The main tactic in place is simply hiding images to provide faster access to directly actionable information.

Notable tactics used in transition from desktop state to mobile state:

  • Images hidden for easier reading

 

5. HTC Newsletter

Another simple but effective example can be seen here. A single image is hidden and the width is adjusted to ensure readability on small screens.

Notable tactics used in transition from desktop state to mobile state:

  • Hero image hidden
  • Shell size adjusted

 

6. AT&T: Add A Line Promo

Here’s a slightly more advanced version of the floating we’ve seen in other emails. There’s been ample planning for both a wide-format/desktop view and a narrow-format/mobile view so no content needs to be hidden.

Notable tactics used in transition from desktop state to mobile state:

  • Content floats (hero info under hero image, body info blocks next to body images
  • Phone number call-to-action (CTA) becomes a button
  • Footer links float and become full width

 

7. Seagate: Windows 8 Announcement

We see more of the same in the Seagate email. There’s one instance of floating in the hero content, and images are hidden to keep the content readable. The notable difference here is in the hero image – look closely at each view. See how the external drives shift their position? There are two different images here: one for the desktop view and one for the mobile view.

Notable tactics used in transition from desktop state to mobile state:

  • Hero content floats
  • Hero image replacement
  • Body images hidden

 

8. Starwood Preferred Guest News

SPG provides another example of floating, hiding and replacing, this one slightly more complex. In the mobile view, the header loses an image that wasn’t particularly impactful and reads much faster. The changes made to the footer – simple, distinct and made for touch – make for a great closing to the mobile view. As brands are starting to develop mobile-friendly templates, I think we’ll soon start seeing a lot more headers and footers of this type.

Notable tactics used in transition from desktop state to mobile state:

  • Header and hero elements hidden
  • Right body column floats under left column
  • Footer links reformat to be instantly readable and easy-to-tap

 

9. ModCloth

I like this example not because ModCloth has done anything particularly different from the other examples or employed a tactic not seen elsewhere, but because the transition is so seamless. In many responsive emails the mobile view feels forced or an obvious retrofit, but this mobile view looks every bit as well planned and constructed as its desktop counterpart.

Notable tactics used in transition from desktop state to mobile state:

  • Preheader stays, but the nav is reduced
  • Scaling and floating throughout
  • Some hidden elements in the body and footer

 

Looking Forward

The ModCloth email, especially, is a good indicator of where we’re heading. Strong consideration is paid to both states of the responsive layout, and content is designed for the transition rather than one state or the other.

I’ll be back next month to take a step back from the examples and start thinking about layout patterns and trends. If you have thoughts on these emails or are seeing other emerging ideas on responsive messages, drop a line in the comments.

Opinions expressed in the article are those of the guest author and not necessarily Marketing Land.

Related Topics: Channel: Email Marketing | Email Marketing | Email Marketing Column | Mobile Marketing

Sponsored


About The Author: is Global Practice Manager, Design Solutions at ExactTarget. He heads email design execution and standards at ExactTarget and works with leading brands across a range of industries, from Expedia to Bank of America. Find him on Twitter @cstudabaker and ask what board games he's playing lately.



Sign Up To Get This Newsletter Via Email:  


Share

Other ways to share:

Read before commenting! We welcome constructive comments and allow any that meet our common sense criteria. This means being respectful and polite to others. It means providing helpful information that contributes to a story or discussion. It means leaving links only that substantially add further to a discussion. Comments using foul language, being disrespectful to others or otherwise violating what we believe are common sense standards of discussion will be deleted. You can read more about our comments policy here.
  • Sean Klope

    I can’t agree more. The headers are crucial for many elements I would love to use in my email designs. Gmail and Outlook are the two platforms most used and most difficult to develop for.

  • http://twitter.com/cstudabaker Chris Studabaker

    @kaldrich Not to get around it, but here’s some context: In general, we don’t really care if the media query isn’t supported in email clients outside of mobile. The rendering is determined by the email client used to view the email rather than dictated by the service provider.

    For example, the embedded stylesheet including the media query will be stripped out for desktop Gmail users, but it wasn’t being used to target their experience so the impact is essentially zero. If that same user checks Gmail via the iPhone Mail client, the media query will still be in effect.

    When it comes to @media support for mobile apps and mobile webmail, support is varied. (Check this support list from Style Campaign: http://stylecampaign.com/blog/2012/10/responsive-email-support/) Please note, though, data from Litmus and others show the vast majority of mobile users rely on native email apps, rather than 3rd party apps or mobile webmail, so the native email apps are the places to invest energy in testing.

  • http://twitter.com/cstudabaker Chris Studabaker

    Exactly. And we basically don’t care if the query isn’t supported by email clients we weren’t targeting in the first place.

  • ividence

    Great post! Couldn’t agree more that we all need to be looking at examples in the wild. We shared this in our email marketing news roundup at http://blog.ividence.com/en/archives/email-marketing-new-december-3-2012

  • http://twitter.com/cstudabaker Chris Studabaker

    Thanks!

  • http://twitter.com/cstudabaker Chris Studabaker

    Hopefully the above explanation helps. Drop a line if you still have questions.

  • http://www.facebook.com/MJRfilms Mark Robbins

    Very interesting stuff.

    I’m curious about the Hero image replacement in the Seagate email. Are they doing this with a in-line image or a background image? I’d love to replicate this however I want to make sure an image will always appear, even in Gmail :)

    I’m guessing it could be done with a display:none; type method. Any ideas?

    Cheers,

    Mark

 

Get Our News, Everywhere!

Daily Email:

Follow Marketing Land on Twitter @marketingland Like Marketing Land on Facebook Follow Marketing Land on Google+ Subscribe to Our Feed! Join our LinkedIn Group Check out our Tumblr! See us on Pinterest

 
 

Click to watch SMX conference video

Join us at one of our SMX or MarTech events:

United States

Europe

Australia & China

Learn more about: SMX | MarTech


Free Daily Marketing News!

Marketing Day is a once-per-day newsletter update - sign up below and get the news delivered to you!