What’s Hot in Email Marketing: Responsive Email Design

By Joanna Roberts
Account Manager
Return Path


As an account manager at Return Path, I get to talk to clients about what’s hot in the email world.  I have lots of conversations with clients about the newest trends, and what’s not so popular anymore.  So what’s the next new thing in email marketing?  Responsive email design! 

Have you ever noticed that your carefully crafted email doesn’t always look great on the small screens used for tablets and mobile devices?  Historically, email marketers have designed for the typical 1024 x 768 screen and, because of the typical email preview pane size, have been advised to keep email width around 650 pixels.  However, with the growth of smart phones and tablets, this one-size-fits-all approach isn’t necessarily best practice anymore. 

Here’s where responsive email design comes in.  Using CSS3 coding technique called “media queries,” you can design your email to automatically re-format and re-size itself to optimize for whatever screen size your recipient is using to read your email.  It can also be used to hide non-essential elements of the email from the mobile reader, thus making sure the main call-to-action of the email is easily found, and can change various other elements of the email, including text size and color, background images and background color. 

So how can you think about this in terms of your own emails?  The most basic use of responsive email design is your email layout.  Let’s say your typical email format is a 3-column layout.  Using responsive email design, you can now design two other versions: a two-column layout for tablets and a one-column layout for mobile devices.  This will ensure that your reader is always seeing the most important parts of your email, no matter what size screen they are using. 

Of course, as with any new email trend, it’s important to understand the impact and test the effectiveness of responsive email design.  First, use a tool like Return Path’s Campaign Insight to ensure you have a large enough mobile audience to justify the additional design work.  If you do decide to move forward with responsive email design, use a rendering tool like our Campaign Preview to ensure your responsive email formats correctly in desktop, webmail and mobile views.  One thing to note is that responsive email design works only in the native mail apps in the iPhone and Android.  Recipients reading emails on their mobile devices using either the mobile browser or proprietary email apps (for example, the Gmail app) will see the desktop version of the email.  And finally, don’t forget to track open and click-through rates so you can quantify the impact this new technique has on your email metrics. 

Have you already tried responsive email design?  We’d love to hear more about it!  Please leave a comment below with your feedback, learnings and successes. 

This post originally appeared on Return Path’s In the Know Blog.

Joanna Roberts is an account manager at Return Path. Joanna has over six years of experience in online marketing, and regularly advises companies on email marketing strategy, deliverability, and compliance standards. She enjoys blogging and leading webinars, specializing in the topics of email marketing best practices and strategy, and is often encouraging marketers to push the envelope on their email efforts with new ideas and initiatives.




5 thoughts on “What’s Hot in Email Marketing: Responsive Email Design

  1. It’s hard to find knowledgeable people on this topic, but you sound like you know what you’re talking about! Thanks for sharing this with others.

  2. I tried the code provided by blue hornet and when you forward the email both the desktop and the mobile version appear and it looks like crap. Does anyone know how to get around this?

  3. The recent emergence of separate smart phone email apps (Gmail App, Yahoo App etc.), which do not support responsive design via fluid layout or media queries has made the build of cross compatible responsive emails almost impossible. The Gmail App doesn’t support media queries, same as its desktop application. The Yahoo App for both Android and Apple does not accept images with % measurements.

    This is going to be an interesting challenge as these independent, desktop rendering apps are gaining in popularity, due to their ESPs wide spread.

    I expect these smart phone applications to develop further and eventually support view port recognition, but so far this is not the case and responsive emails relying on media queries are bound to break and worsen the user experience, rather than make it better.

Comments are closed.