Register for Magenta Friday

Magenta Friday is a workshop tailor-made for marketers ready to crush their goals and create industry-leading marketing experiences. Seven marketing visionaries will be taking the (virtual) stage on March 29 in North America | April 5 in UK and EMEA.

Save your seat!

Skip navigation
Movable Ink

7 Experts Share Responsive Email Design Strategies

Share This Post

Responsive email strategies

Marketers who are creating email campaigns know that they have to think about responsive email design strategies first and foremost. It’s not easy to build a compelling email that will look great on any device, especially if you’re sending thousands or millions of emails a month.

With any responsive email, you want to make sure that the user experience is seamless. That means making emails well-designed, interactive, and, of course, readable on tiny screens.

But how can you create responsive email design strategies that can work over and over? And what do you need to know when it comes down to the basics, like font, calls-to-action, and more?

We asked seven experts for their opinions and here’s what they said:

1. Pixels, Heroes, and File Size

Jack Cunningham, Head of Digital, Twenty@TwentyNZ

“There’s a lot of noise around what makes for great email design and how to get the best results. Things are continually changing and evolving, so keeping pace can be challenging.

Size matters. Remember that text set up for fixed width email is illegible by default on your mobile. Emails should be sized to respond to screens from 550 pixels down to 320 pixels for mobile.

Separate headlines from hero graphics. Headlines in responsive mastheads and hero graphics can end up smaller than the body text. Make sure you separate the headline out from the masthead image to avoid this scenario.

Optimise images for retina displays. Output jpeg images for inclusion in responsive emails at double normal dimensions ­ around 1,100 pixels – saving them at 5% quality. This reduces file size by 20% with no downsides.”

2. A Text-First Approach

Liz Mazzei, Marketing Consultant, LizMazzei.com , @LizMazzei

“My number one pet peeve is when mobile emails are packed with images. They don’t load automatically on my phone! So when I open the email all I see is a huge blank box.

When designing emails consider this: What if the images don’t load? Does your message still get delivered? Lead with your main messages in text and then support them with images instead of vice versa.”

3. Links & Pre-Headers

Jessica Paviluk, VP of Marketing & Design, V12 Group@V12Group

“Links: Always include a mobile friendly URL link at the very top of an email (in the pre-header area). Don’t crowd links within the body of the email.

Avoid crowding URL links too closely together, which makes it difficult for fingers to press on the correct link. Use pixel padding to allow for area around or between clickable areas.

Use Subject Lines With Pre-Headers: Ensure that the subject line and pre-header text are working to support each other, and keep the subject line somewhere between 30 to 45 characters for mobile devices.”

4. Creating Content that Goes “Above the Fold”

Kenzi Lindamood, Marketing Manager, Stirista@Stirista

“First of all, it’s important to understand that mobile users are on the go. They want information very quickly… It’s important that email marketers use responsive design that will adjust the email’s size depending on what size screen it’s being shown on, whether on a tablet or smartphone.

The overall layout of the message needs to be different for mobile users, as well. Any important information needs to be ‘above the fold,’ meaning it should be the first thing users see without having to scroll.

If you want these users to convert (and you should), the best strategy would be to make your calls to action above the fold with easily accessible actions. These can take the form of large, square-shaped buttons that take users to your product.

Users are more likely to take action if they’re able to actually click on your button and follow through with what you want them to do.”

5. Different Devices, Different Spend

Keith Browning, Marketing Manager, Irish Hotels Federation

“I run Irelandhotels.com – a multi-million euro e-commerce website which enables the public to book hotels.

The insight I can share is that iOS users that convert from email marketing have a 33% higher average spend then Android users.”

6. Designing for Breakpoints

Renee Triemstra, VP of Strategy & Customer Experience, ChannelNet@Rtriemstra

“With the growing number of mobile only users, if your content or feature doesn’t exist on mobile, it doesn’t exist at all.

Begin the design phase with a content strategy. With the smaller mobile screen devices you have less real-estate and the primary screen space should be dedicated to the most important message or feature that you want to deliver. You’ll need to understand your content strategy to know what this primary message or feature will be.

Plan your breakpoints. For our websites, we typically develop wireframes and mockups for two breakpoints- mobile and desktop – and the responsive behavior in between those two breakpoints comes together through collaboration between design and development during the build phase.

However, if your user base includes a lot of tablet users, you may want to wireframe and design for the tablet breakpoint.”

7. More Columns, More Problems.

Andrea Mocherman, Gravi8 Marketing

“Multi-column email layouts may look great when viewed on a big screen, but they will appear very cramped when opened on a mobile device considering the limited amount of real estate on the screen.

Therefore, email best practice recommends one-column layouts to ensure readability. If you still wish to use multi-column layouts to display extra information, consider using CSS3 media queries to make them more mobile-friendly.

Often times with multi-column layouts people will have to zoom or scroll on their smartphone to see everything. This can make it difficult for them to navigate the email content and act on the call to action. Using a single column template will make your content much more flexible for all screen sizes.”

Responding to Customers, Not Devices

Often, customers who are checking mobile devices are only looking through their inbox for a few minutes or a few seconds. To stand out, emails have to be straight and to the point, with high usability and value.

From the highest level, responsive email design strategies are based on creating emails that respond to what the customer needs in the moment, not what the device needs. That means creating emails that are contextually relevant, whenever or however they’re opened.

Responsive Email StrategyWant to learn more about responsive email design strategies and why context is critical? Watch our webcast and download our slides, “9 Ways You Can Build Effective Mobile Email Marketing Campaigns” to learn nine different ways brands are using responsive email strategies today.

Download!

Marketing News that Matters

Sign up for Movable Ink's newsletter to receive the latest news, research, and omnichannel personalization resources.

Sign Up Now