Why you should optimise your email campaigns for mobile

Email marketing continues to be an excellent marketing channel when it comes to return on investment (ROI). In actual fact, email marketing generates the highest ROI of any marketing channel.

It’s a big deal, the numbers don’t lie. However, for some companies the reality is different. They find their users aren’t engaged and campaigns aren’t getting the opens and click throughs they had expected. From past experience, and assuming there is nothing wrong with the content being sent to subscribers, I believe this is down to two underlying factors; quality of the design and technical set-up – namely, is the design optimised to work across mobile?

Design means ROI

We already know that good design is good for business. The Design Management Institute looked at Standard & Poor’s 500 – a stock market index of 500 large publicly-traded companies – and found that design-driven companies outperformed their competitors by more than 228%. Good design principles, once applied to email templates, can mean higher click throughs, engagement and brand loyalty.

Mobile leading the way

An email marketing trends study conducted by email software giant Campaign Monitor shows that, in 2011, mobile accounted for 15% of all opens by environment. Fast forward to today and it’s closer to 42%! The startling thing is, when you compare it with other environments, mobile is now the most popular environment to open email in.

Although the open rates for environment show mobile as a top performer – the click through stats tell a different story. Today, average mobile click through rate is 11%, desktop is 14% and webmail is 19%. Mobile is the worst performing environment at getting users to make an interaction decision on their first open.

Why?

What these numbers don’t tell us is how many email campaigns in the study were optimised for mobile and how many weren’t.

It’s my belief (and using our own clients as evidence) that campaigns that aren’t optimised for mobile will have lower click through numbers than those that do (on mobile). It’s now more important than ever to ensure your subscribers’ emails are ready to work flawlessly on mobile. So, how can you make sure you’re optimising your emails for mobile? Well…

Use responsive email design as a foundation

Responsive email design is an approach to email design aimed at providing an optimal viewing experience. It uses a coding technique called ‘media queries’ to adjust the width of the email design dependent on the size of the environment it’s viewed in. That means your email design will adapt to any size, in any orientation.

Note that media queries don’t work in every email client, which means you’ll need to back this up with unique styles to match. This useful table shows you which clients do and don’t support media queries.

Stuart Clark, an SEO specialist here at Vertical Leap and an ex-email marketing campaign manager, believes: “”Responsive email design makes sure your email will display correctly on a range of screen sizes and gadgets, meaning your message won’t be lost.”

There are some things to bear in mind when starting with responsive email design:

  • Font sizes also need to change, as the design does. Email designers need to remember the likely viewing environment and provide font sizing recommendations that suit. Again, media queries can be used to target different display sizes and adapt the font sizes accordingly.
  • Layout doesn’t have to be rigid. Want three columns on a big desktop screen and one column on an old iPhone 4? No problem. Responsive email design allows you to create fluid layouts that adapt to the viewing environment.
  • You’re not stuck with one design. If you need different elements for different devices (animated gifs, larger image buttons, different images, for example), no problem. These elements can be shown or hidden based on the environment the email is viewed in.

“A great responsive email gets to the key messages quickly.”

Becs Rivett is an email consultant who has worked for several large eCommerce retailers and has freelanced for a number of agencies. Becs, like me, is an advocate of responsive email design and offers some tips to improve your campaign results:

“A great responsive email gets to the key messages quickly. Make your logo a little smaller, hide your desktop menu and display a mobile menu at the bottom of the email instead. These will all help to move your key message up a bit. Have clear calls to action that can easily by clicked with a large thumb on a touchscreen device, without accidentally clicking on anything else. Think plenty of padding on buttons, plenty of space around the button.”

Examples of good mobile optimised email design

Pizza Express

Pizza Express is a restaurant chain with a distinctly italian flavour. It does an excellent job of subtle responsive email design.

A responsive email campaign from Pizza Express
A responsive email campaign from Pizza Express

As the width of the device dips below 640px, the design fluidly re-sizes and some of the larger text shrinks to offer a better reading experience at smaller device sizes.

Pizza Express is also pretty good at the ‘little touches’ that makes its campaigns stand out. In this example, the Peroni beer is animated using a gif.

Pizza Express's header image is a gif that animates the bubbles in the beer
Pizza Express’s header image is a gif that animates the bubbles in the beer

Fitbit

Fitbit builds products that contribute to a healthy lifestyle. Its responsive email campaigns re-enforce this by offering regular news updates on fitness, celebrity fitness news, fitness ideas and healthy food options when eating out.

Fitbit's latest celebrity focused email campaign - beautifully blocky!
Fitbit’s latest celebrity focused email campaign – beautifully blocky!

Fitbit campaigns are characterised by strong use of its brand colours and an intentionally blocky layout. Block layouts work particularly well when used with a responsive email framework. The design for this campaign switches flawlessly between a two column and one column layout and looks great on desktop and mobile. The overlapping celebrities in the header is a particularly nice design touch on smaller screens.

Offscreen

Offscreen is an independent magazine about people who use the internet and technology to be creative, solve problems and build successful businesses. The email campaigns prove that being responsive doesn’t mean you need to overthink your designs.

A simplistically splendid all blue email design
A simplistically splendid all blue email design

By doing something as simple as changing the default background colour, this design appears refreshingly different from the usual glut of magazine subscriptions that already exist. This campaign also perfectly compliments the magazine’s cover design, giving a seamless transition from print to digital.

Hoefler&Co.

Ok, so most people outside the design and web industry won’t know who Hoefler&Co. is, but it’s a huge influence on all of my work. The company has been around for over 25 years and provides high quality typefaces for use in print and on the web.

Strong colours and smart illustrations enhance this email campaign
Strong colours and smart illustrations enhance this email campaign

I’ve included this campaign design just to re-enforce the fact that layout doesn’t have to be complicated to be successful. Just like Offscreen’s campaign (above), Hoefler&Co. has used a custom background colour and has text reversed out from it. Nice illustrative images border the text content, top and bottom. The subtle little change comes when devices are below 645px in width. The text content switches from right aligned to left aligned, improving readability on narrower devices.

Pets at Home

Pet supplies giant Pets at Home offers its email subscribers simply-designed regular newsletter updates sitting on top of an adaptive framework.

Not truly 'responsive' - adaptive layouts provide an adequate halfway house
Not truly ‘responsive’ – adaptive layouts provide an adequate halfway house

Most of the larger retailers like a two column to one column layout. Pets at Home is different in that its campaign is adaptive rather than responsive. Rather than offer a design that works across all sizes (responsive), this Pets at Home campaign has two sizes – 600px and 480px.

This approach is usually used by companies that know exactly what the most popular sized devices their subscribers view campaigns on. Whilst not as good as responsive email design, in my opinion, this approach is certainly better than static designs and is a good middle ground if you are dealing with difficult decision makers who need to see *exactly* how the campaign will look.

Resources

Need help?

All of Vertical Leap’s email marketing clients benefit from responsive email design and they have seen marked improvements.

We can offer email design, responsive development, campaign management and reporting services individually or as a complete package.

Let’s talk about your email requirements »

Wez Maynard profile picture
Wez Maynard

Wez headed up the design team at Vertical Leap. A brand and UX specialist, Wez has spent the last decade travelling the world working with iconic brands in event and digital marketing activation projects. Wez now lives on the Isle of Wight and commutes by boat to Vertical Leap HQ.

More articles by Wez
Related articles
Artificial intelligence

Machine learning is much bigger than just Google

By Chris Pitt
Barclays office

SEMINAR: How to use data and UX to improve your website

By Michelle Hill
balloons and confetti

Happy 20th anniversary Vertical Leap!

By Chris Pitt
Google star ratings

Google replaces Trusted Stores with Google Customer Reviews

By James Faulkner
engage-audience

How to get your audience engaged

By Tom Light
manufacturing wheel

Report: Q1 2021 Google trends for the manufacturing industry

By Michelle Hill