The Responsive Email Checklist

Responsive email is the most hyped topic in email marketing in the past two years, that’s for sure. Over 53% of people read email on mobile devices nowadays, so responsive email design is definitely a must!

So what should you know? The information almost seems overwhelming. Here is a quick reference checklist for Responsive email both for the passionate HTML coders and those who want to learn the ins and outs of responsive email design.

Since email technology is almost as old as commercial internet it went through many changes in the past 20 years. But unfortunately still not enough! There are many technologies which are simply not supported by email clients.

Have you ever dreamt with HTML or CSS?

It’s likely that you will soon after you start responsive email coding. You simply need to know all HTML and CSS properties that ever existed, moreover browser/parser/renderer solutions as well.

Your goal will be to find that narrow HTML/CSS fit that will make your emails look good in various email clients. This is a tough job and requires patience and extreme curiosity.

Email clients are built on many different browsers and even worse – Microsoft Word – HTML parser and renderer solutions. The whole email client industry is super segmented. There’s no email standard.

How does your subject line look in the mobile inbox?

Obviously due to the smaller screen size, many mobile email clients tend to cut off subject lines and preheaders at a particular length.

Is the preheader optimized?

The same length issue applies also for the preheader, so you always have to be careful how do you craft your preheaders. Make it catchy, short and always provide relevant information to your readers. These are the most important things to bear in mind and of course always test your preheaders as well!

Do you know how to target different email clients?

You will need to. Since most email clients use different browser, parser and renderer solutions you will have to be able to differentiate them to do some “debugging”. What does this mean?

For example, the old style Outlooks on desktop, behave differently based on the locally installed Internet Explorer version, like Lotus Notes too, while Windows Phones using IE 10+ for browsing, the default email client, only uses IE6 standards, and not the modern ones. Some fresh mail clients, like Mailbox, remove links that are valid in HTML4 and all the other clients utilize well.

Do you know all the possibilities of responsive email?

There are many options you should check out before diving deep into coding. The most obvious one is simply to google for “free responsive email templates”. There are many out there! We have 10 free responsive email templates available in our tool as well.

If you are really convinced that you need to code your template, you can start using an email design framework. It will help you with the basics of responsive email coding.

If you are ready to go with “out of the box” solutions, and you don’t need a unique design, Themeforest or Stamplia can work for you. There are thousands of responsive email templates available for one time purchase through these email template marketplaces. Code quality and ESP support varies, so be careful which one you choose!

If you are just taking a head start in email marketing, the standard built-in templates of Mailchimp or MailerLite may do the work for you. Later you can start customizing using a drag and drop email template builder, when you are starting to gain attention. Don’t worry too much, you can do email marketing the “lean way”.

Do you know the limitations of responsive email design?

This is the toughest question from all, since there are way too many limitations in responsive email design! Only toughest and most desperate HTML/CSS experts will become successful email coders. You’ll spend most of your time googling and testing to figure out these limitations. The problem is that, there’s no email standard out there! If you want to dig deeper into this topic, you should definitely start with the Litmus Community.

Do you have enough inspiration to optimize for mobile?

Since there are many limitations in (responsive) email design – for example background images are not supported in Outlooks – not all designs will work properly in email. We usually say at EDMdesigner that “almost everything” is possible, but maybe we will need to use the traditional image slicing method, which is not the best solution.

With the next release of EDMdesigner our users will be able to do some tricks by hiding elements on mobile or on desktop. This way for example any image or text content can be different on mobile and desktop!

If you are looking for inspiration you can check out Andrew King’s collection on Pinterest.

Is your CTA optimized for mobile?

Regular text links or image based buttons are not the best solution for responsive emails. The perfect CTA is a bug enough button which scales to full width on mobile or at least has a large enough size for tap.

The general advice here is to use at least 44x44px buttons or icons which are convenient to use on mobile as well. Small social icons, which are close to each other, won’t work well for example.

Is your navigation optimized for mobile?

Similarly to CTA navigation bar has to be optimized for tapping as well. You could automatically reorder navigation buttons to and stretch them to full width. This way it’s easier to tap them with your thumb or pointer finger.

The other practices include hiding some navigation elements to reduce the size of the navigation or also completely hiding the top nav and using a bottom one instead.
You have to deliver the most important message of your email on the first screen users can see (the fold) so occupying it with navigation is not the best idea in most cases. Real responsive email designs usually don’t really have any navigation bar, they have a clear structure, with large enough white space, mobile-ready buttons and a design which guides you through the whole email.

Do you know what’s the difference between desktop and mobile interactions?

Above the fold on desktop does not equal to the first screen on mobile. Actually only very little content can fit onto a mobile screen compared to what users can see on desktop.
It’s not enough to optimize the design only for taps, but you also have to be prepared for different user behaviors. For example people are less likely to make huge purchase decisions through mobile, so you should prepare the content of your email this way as well..

Are you prepared to test your emails like a maniac?

Testing is the most time consuming part of the whole responsive email coding. When you tweak something in your code, you have to run a test again. Minor modifications can cause huge discrepancies among different email clients.

The goal of this article is not to discourage people from responsive email coding, but to open up the eyes of those who think that it’s an easy peasy job to do.