We gave you the basics of making HTML emails work in our last post, and now we’re going to get into how to make your emails responsive.

For maximum impact, HTML emails need to look good on all devices – from the large screen to the small screen. According to Litmus, 53% of emails are opened on mobile devices, meaning that you need a responsive design that works on mobiles as well as on desktops.

Non-responsive emails tend to be only glanced at and deleted, so having a responsive design means higher opening and click-through rates, maximising your marketing impact.

Here’s how you can make sure your email works across different devices and platforms.

Work out your design

When starting with your design, create mock-ups at two or three widths (such as desktop, tablet, and mobile). Design first for the mobile, then build up on it. Create a wireframe mock-up then a full colour mock-up to see how your design would work.

Responsive designs are informed by understanding the code constraints – making significant changes in the layout between desktop to mobile may not be possible, especially in all email clients.

Single-column emails work especially well, since there is less repositioning of the elements. You may still need to move images around, but at least you’re not having to worry about a second column.

Your content should be:

• Logo
• Main image
• Main heading
• Body copy
• Call-to-action (CTA) buttons
• Contact information
• Social media icons
• Small legal print
• Unsubscribe link
• View in a browser link

Don’t bother including navigation menus – this isn’t a website.

Place important information at the top of the email, as your audience will judge whether or not the content is worth giving more time.

Your call-to-actions should be clear, recognisable, and have a large size to grab attention and make it easy to tap on a touchscreen device. Consider repeating the CTA if it is a long email, and also think about putting it at the top of the email.

And make sure your links stand out as links, especially the “Unsubscribe” and “View in a Browser” links.

Keep it all simple

One of the easiest ways to keep your emails responsive is to build a simple template on which to build all your emails. This gives you a convenient base to build on, without needing to repeat your extensive testing.

And keep the message concise – a simpler email is easier to code, test, maintain, navigate, and debug. Along with being easier to code, the smaller file size means a quicker loading time.

Make sure you don’t have too many images and not enough text, as this can trigger spam filters, but also make sure that the email has an immediate eye-catching impact. If it’s too text heavy, you might not engage your audience.

Avoid unconventional or complex code, and stick to industry-accepted ways for coding, including thoroughly tested hacks. If you aren’t using the particular piece of code, remove it, and don’t use JavaScript or attachments.

When you do code the email, make it easy for you or someone else to understand. Make sure it’s in a clear format, with consistent indentation, grouping, and naming conventions. Use comments to aid navigation through the code, but don’t go overboard – each comment does count to your file size.

Test, test, and test again

You need to test to check that your layout adjusts and responds effectively to the device and screen size it’s on.

Test it frequently in production, and run it through multiple final tests before sending it out. When testing it, run it through the various devices you own, and test it on multiple desktop email applications, webmail services, and email applications on your tablet or mobile device.

You can also use paid-for services to also test it, such as Litmus Putmail, Email on Acid, and Campaign Monitor. These will not just check it against their research matrices, but also against applications and devices you don’t have.

If you can’t afford a paid-for service, create a separate private list for testing, including yourself, work colleagues, and friends with a variety of devices. Preview the emails directly on all the devices, but don’t annoy everyone by frequently testing!

If you have to make several changes, try several of them at once during each test. This isn’t A/B testing – you want to make sure everything works, so try multiple things and see what works.

 

And now that you have a responsive email, you’ll need to know how to fix it when it goes wrong. We’ll go over some of the better hacks next time.

Icons from the Dashel Icon Set by Print Express.