Learning By Example: 9 More Responsive Emails

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 […]

Chat with MarTechBot

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
Campaign Monitor Responsive Thumb

 

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

HHonors Responsive Thumb

 

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.

SFDC Responsive Thumb

 

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

Rewards Network Responsive Thumb

 

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

HTC Responsive Thumb

 

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

ATT Responsive Thumb

 

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

Seagate Responsive Thumb

 

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

SPG Responsive Thumb

 

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

ModCloth Responsive Thumb

 

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 this article are those of the guest author and not necessarily MarTech. Staff authors are listed here.


About the author

Chris Studabaker
Contributor
Chris Studabaker 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.

Get the must-read newsletter for marketers.