Four top tips for creating a responsive email design

BlogImages 01

We all know that viewing emails on mobiles and tablets is growing at a rapid rate and that emails now need to be responsive. Ben Hammond, international CRM manager, at JustGiving offers his top tips for helping you create a responsive email design for your charity’s email communications.

Over the last few years, we’ve continued to see a rise in the use of smart phone and tablet devices and how we rely on these in our daily lives. How many of us can now admit to checking emails on our phones before getting out of bed each morning? I can hold my hand up to that one!

The Stats

We’re living in a fast paced and continuously evolving technological environment, where affective email communication is not just important but a necessity. This is leading to a shift in the way companies use email to promote products and services, with a greater emphasis on designing communications that are not just suitable for desktops, but can be just as affective across multiple devices.

Email statistics

What is responsive design?

Responsive design is a design approach aimed at crafting HTML to provide an optimal viewing experience on email, which enables easy reading and navigation with a minimum of resizing, panning, and scrolling.

Here at JustGiving, over 65% of our emails are currently opened on a mobile device, with the prediction that this figure will rise to around 80% by summer 2015. With that in mind, we’re starting to plan for the future and change the way our emails are designed to fit with this shift in our users’ needs.

JustGiving email statistics

Four tips to help create a responsive email design

There are a number of ways to design an email so that it encompasses the requirements of a responsive approach. Below are some of the key things you can look to include when designing an email template to be uploaded to your ESP (Email Service Provider). Remember the same principles apply regardless of your chosen ESP.

Email responsive design

1. Content block hierarchy

By splitting an email design into content blocks, you can change the hierarchy and structure of content within an email. It also allows for the potential to hide and remove content depending upon the device and also the level of personalisation of your campaigns.

2. Content enlargement

Headlines and key pieces of content might appear small when viewed on desktop, but by designing with mobile in mind you can enlarge for mobile or tablet devices to ensure an optimum viewing and user experience.

3.  Change navigation

You can also have some fun with navigation (where things go) in an email design. What fits well on desktop might not look right on either mobile or tablet, so try changing the navigation to suit the device.

4.  Image reliance

Although images in email are invaluable to aiding in delivering key messages and bits of content, you need to be careful not to overuse them. If your image to text ratio is too high, you will start hitting spam traps. Ensure that when designing for multiple devices, your email is thoroughly tested and that the ratio is just right. You don’t want to be classed as spam!

The Future

So when you’re next designing a new email for a campaign, remember that a responsive email design is no longer an optional extra but a necessity. The number of people checking their emails in bed in the morning will only continue to increase.

Interested in all things mobile? We recommend the following reads:

Rising to the mobile challenge

Nine reasons why social and mobile are the future of fundraising

A look at ‘one touch’ donate one year on

Share this Post

Group 132

Get inspiration in your inbox!

Don’t miss out on digital fundraising tips, tools and trends.

Related Posts

Ben joined JustGiving in April 2014 after 4 years working for RAPP Data where he was responsible for the delivery of CRM activity across clients such as Mothercare, ESPN and The Open University. He is a self-confessed data marketing geek, with a real passion for e-crm and analytics.