6 ways to create inbox-friendly HTML emails and make them more clickable

inbox-friendly HTML emails

Richard Cowdery

Lead Digital Developer

Posted on May 19, 2015

With over 50% of emails now opened on mobile devices and that figure galloping ahead every year, it’s becoming more and more obvious that email broadcasts need to be designed to perform well when viewed on any device.

However, this change in user habits is proving surprisingly slow to trigger a response in most organisations’ marketing and design processes, with relatively few email broadcasts demonstrating that they’ve been designed with mobile in mind. What’s resulting is a huge discrepancy with how we envision our broadcasts, and how they perform. If 50% of users are opening an email that doesn’t suit their mobile inbox, then that sought-after high click-through rate is going to take a serious kicking.

To make sure you’re not one of those organisations let down by their email design, here’s what you need to consider next time.

1. Think about a mobile design first

As we usually design on desktop, it can be instinctive to create an email template that looks good on the screen in front of us and then forget to think about how it will look on mobile. Creating an additional, fully-responsive template using CSS @media coding is one solution, but another is simply to create a template that looks good on mobile first. A single column layout with a decent font size and large buttons will still look clean, simple and attractive when upsized onto desktop, but have mobile usability built-in.

As Google’s new algorithm impacts mobile-friendly websites, its becoming an obvious choice to design and code a responsive website – it’s only a matter of time before this principal is also applied to inbox-friendly HTML emails.

2. Hire an expert to make use of responsive coding

To make truly responsive emails, however, that maximise design potential on any device, you need to be making use of @media queries to make two versions of the same email – one for mobile viewing and one for desktop. By coding the email more carefully, a designer can limit pixel size and scaling to keep the look sharp when viewed on different screen sizes, and allow you to vary features like images, button sizes and layout.

If our goal is making our emails more clickable, and we acknowledge that 50% of our users will be opening them on a varying array of handheld devices, then this more strategic design is worth it every time. Additional time and cost, yes, but a good designer can create a multi-use template that will allow you to vary content and send multiple broadcasts with one set of code, so it’s a worthwhile initial investment.

3. Remember not all email clients can display HTML

With technology seemingly ever-advancing, it can be easy to forget that even when devices are high-spec, their email clients may not all be high-performers, with many unable to cope with HTML at all. Surprisingly, even new players like the Apple Watch make HTML viewing problematic. So remember to think about how your emails can be backwards compatible and include plain text versions too.

4. Include a clear call-to-action

Email broadcasts generally act as signposts, with the ultimate goal often to get a user to click through to a website, read an article, make a purchase, or download a file. When thinking about your email’s content and its design, make sure you keep this goal action a key part of your message. Emphasise it and mention it quickly – if a user has to scroll through too much text to find out what you want them to do, they may miss it all together, or lose interest before they get there.

5. Keep imagery and animation to a minimum

Many email clients have images disabled to save on data usage, or require a user to choose to make them visible. You can never rely on images to communicate a message on mobile so make the important information text only. Likewise, animated GIFs, when supported, can add eye-catching movement, but don’t assume they’ll get seen. Keep it simple and make sure all the most relevant information is contained within the first/last frame as they may only be seen as static images.

6. Test, monitor and refine your designs

Talisman uses Litmus to test emails across multiple email clients and devices to check that our broadcasts are always going to look flawless whenever they’re opened. Once your emails are sent, build in time for analysis of click-throughs, open rates and responses to see what worked and what didn’t, refine your approach and design and get it even better next time.

Take a look at responsive HTML email in action

We’ve designed Talisman’s newsletter to act as a stellar example of how HTML email design can meet the challenge of mobile viewing:

responsive email
Talisman can create responsive emails for your email broadcast system, such as dotmailer, Pardot, Exact Target, Mail Chimp and Campaign Monitor. By creating responsive templates that you can adapt yourselves, we can make sure you’re maximising your chance to make every potential user respond, no matter what device they open your email on.