{{ searchResult.published_at | date:'d MMMM yyyy' }}

Loading ...
Loading ...

Enter a search term such as “mobile analytics” or browse our content using the filters above.

No_results

That’s not only a poor Scrabble score but we also couldn’t find any results matching “”.
Check your spelling or try broadening your search.

Logo_distressed

Sorry about this, there is a problem with our search at the moment.
Please try again later.

It seems that more and more brands are jumping on the responsive email design bandwagon lately.

And rightly so, Litmus announced this month that mobile opens reached a record high of 47%! They are also predicting that mobile opens will reach over 50% by the end of the year.

One trend that I've also recently started to notice and something I can see becoming much more popular in the near future is tablet optimization. This is achieved with media queries that specifically target the screen sizes of tablet devices or larger smartphones.

The Expedia and Playstation emails below are particularly good examples of how this should be done. 

We're also starting to see marketers use media queries to display mobile specific content. One example of this is showing an Apple app store / Google Play icon when you view the email on a smartphone. I expect to see more and more brands use this technique in a wide variety of ways in the near future. 

So here are 10 of the best responsive email designs that I've seen in the last month.

Domino's

Asos

Expedia Cruise Ships

Expedia

Expedia has cleverly inserted this app store banner to the top of its email when viewed on a smartphone.

Although it can't target Apple or Android users specifically with this technique, I still think it's very effective as most subscribers will be using Apple or Android phones anyway. 

Harvey Norman

Joy the store

Map My Run

Mr Porter

Mulberry

Playstation

Maybe this is to do with the release of the Playstation 4 but this email has four different variations of its header!

Andrew King

Published 19 September, 2013 by Andrew King

Andrew is senior strategy consultant at Lyris and a contributor to Econsultancy. You can read his blog here, or follow on Twitter.  

5 more posts from this author

Comments (14)

Comment
No-profile-pic
Save or Cancel
Avatar-blank-50x50

Tom K, Web Designer at FallingBrick

Really nice examples of responsive emails. So modern now. Thanks for sharing.

over 2 years ago

Avatar-blank-50x50

Nate H

The underlying problem, not spoken of here, is the fact that the Gmail app for android does not support media queries. This is a huge problem as more than half of US smart phone sales are Android devices.

Bottom line: Why media queries can make a slick email for anyone who opens it on an iphone, a single column simpler-the-better liquid email is a lot more practical, unless your target audience consists of middle class Americans.

No hate on the article. Can't wait till we can give email experiences like this to a wider audience.

over 2 years ago

Andrew King

Andrew King, Sr. Strategy Consultant at Lyris

@Nate, that's a good point you raise. My advice is to track the subscribers for on your database, find out what devices they are using and then optimize with those devices in mind. If everyone on your list is using the Gmail app for Android then @media queries aren't going to be effective.

The data that I've seen hasn't shown the Gmail app for Android or iPhone to be hugely popular though. Litmus post handy Email Client Market Share results each month here - http://emailclientmarketshare.com/. You can see that last month Android was the 4th most popular client/device - I think that refers to the native email client (which does support @media queries) and not the Gmail app.

In any case, I love what responsive design allows you do and hope that Gmail can get their act together and support it soon!

over 2 years ago

Avatar-blank-50x50

Abigail Acland

Nice to see everything on iOS but how do they render on Android, and mobile stock email platforms. Design is one part but coding is the other.

over 2 years ago

Elliot Ross

Elliot Ross, Email marketing design at actionrocket.co

"The underlying problem, not spoken of here, is the fact that the Gmail app for android does not support media queries. "

it's getting better, and there's ways around this, but it's not quite as slick as iphone et al. Remember that this is just Gmail users - which granted could be a sizeable amount, but there's still a lot of non-Gmail users. The larger screens on the popular Android devices helps mitigate this also.

tend to agree with Andrew's point here - we're not seeing it as massively popular (btw the Litmus stat is a combination of both apps)

Our design approach is to design an email that broadly works for mobile anyway, then use responsive design as an extra layer of enhancement where it's supported. (Not sure if you can add links, but we've put more on emaildesignreview, google "Rethinking Mobile Email Design")

over 2 years ago

Avatar-blank-50x50

Kris Hunt

The good thing about responsive templates is that it forces you to think about structure and readability. By looking at the design in a 'mobile first' way you tend to get cleaner, simpler and more user-friendly result .

Way too many companies still use emails made purely of images or give zero consideration for different devices other than their desktop version of outlook.

Support for media queries in mobile email clients is still far too hit and miss - Gmail's lack of support is likely down to the fact they don't support embedded CSS in their web client either - and there are tons of other factors that get in the way such as server exchanges stripping out code, but I still think it should be the standard.

over 2 years ago

Elliot Ross

Elliot Ross, Email marketing design at actionrocket.co

the thing we have to deal with as an industry is that we need to get away from the "must look the same everywhere" mentality. In email that's most dangerous, as there's so much difference between rendering across platforms already.

over 2 years ago

Tim Watson

Tim Watson, Email Marketing Consultant at Zettasphere

Nice collection Andrew.

Have you any metrics from split test of those designs to show value in sending responsive to mobile vs. non-responsive?

over 2 years ago

Avatar-blank-50x50

Becs Rivett

@Tim Neither of those email designs appear to be responsive. Also, to prevent windows 8 mail messing up, you need to add and (-webkit-min-device-pixel-ratio: 1) to your media query - this isn't something you'll be able to see in Litmus as they don't have Windows 8 mail in their testing repertoire yet.

Also you have a heck of a lot of css in there, would suggest you don't need to make it that complex though as I can't see you mobile version I can't really tell.

And finally, hidden commentary can go against you and be considered spam.

over 2 years ago

Avatar-blank-50x50

Tim

@Becs

Clearly they are responsive, they work excellent, just not fluid in browser. Windows 8 works fine too when tested in real client.

Yes I need to tidy the code up. I suggest you test the email to see how the CSS works.

We send out 10,000s a day and these have proved highly successful so far. Happy Days a lot of the example emails by the big companies are massive in size compared to what I have built, very suprising. Thanks for your compliments

over 2 years ago

Avatar-blank-50x50

Bedros

Nice collection. Thanks a lot for sharing. Most of the Mobile clients support media queries , and there are a lot of users using email clients other than gmail when it comes to mobile. There are many options , from Outlook Mobile App to MailBox to K-9. Responsive Email is a winner!

over 2 years ago

Avatar-blank-50x50

SRM

I just wanted to let you know the site that's hosting the email image examples, elabs5.com, has been flagged for spam content (I'm not able to view them at my work). This is disappointing as I think this post would be very helpful for me.

over 2 years ago

Andrew King

Andrew King, Sr. Strategy Consultant at Lyris

@SRM I haven't heard of anyone else having this issue, sorry about that. You can see all of these responsive designs and more on my Pinterest board - http://www.pinterest.com/akingkiwi84/responsive-email-design/

over 2 years ago

Avatar-blank-50x50

Norman Invasion, commenter at blah

Wow. I /really/ want one of those extra-long iphones -- where do I get one?

over 2 years ago

Comment
No-profile-pic
Save or Cancel
Daily_pulse_signup_wide

Enjoying this article?

Get more just like this, delivered to your inbox.

Keep up to date with the latest analysis, inspiration and learning from the Econsultancy blog with our free Daily Pulse newsletter. Each weekday, you ll receive a hand-picked digest of the latest and greatest articles, as well as snippets of new market data, best practice guides and trends research.