Emailaudience
  • Learn about:
    • Testing & Optimization
    • Email Design
    • Marketing Automation
    • List growth
    • Strategy
    • Latest Articles
  • Resources
  • About
Emailaudience
  • Learn about:
    • Testing & Optimization
    • Email Design
    • Marketing Automation
    • List growth
    • Strategy
    • Latest Articles
  • Resources
  • About
Emailaudience
FacebookTwitter
Articles

The Responsive Email Checklist

Roland Pokornyik
6 January 2016
6 min read

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.

evolution-of-email-clients-timeline-names-Whitesmall

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.

mobile email responsive email
Image: Viktor Hanacek

Roland Pokornyik

Roland Pokornyik is the CEO and Co-founder of EDMdesigner.com, the responsive email editor API optimized for white-label integration with any system.

Beyond The Mailbox: Are you ready for Email Marketing in 2016?
The email marketing strategy of 15 smart marketers [infographic]

You may also like

Articles

How To Generate Leads in 2023: 10 Lead Generation Best Practices

Companies need to generate leads to grow their business. Leads are people who express interest in the product you’re selling. Generating leads is expensive. Costs include paying for ads, writing, and promoting...

Sam Hops
Articles

The 4 Best Screen Recording Software in 2023 (Free & Paid)

Screen recording software is vital for any business. You can create instructional videos, meeting recordings, and webinars. Or just capture your screen activity for later reference.  We’ll discuss what makes screen...

Gaurav Sharma
Articles

How to Organize Gmail Effectively: 8 Tips to Get Inbox Zero

A McKinsey report shows that people spend 28% of their time writing or answering emails. Google has developed many features to help keep Gmail accounts clean. With the following Gmail organization tips, you’ll spend...

Anna Lysiuk

Popular posts

Email Marketing Tests to Grow Your Business and Blog
How to Write Email with Military Precision
Why you should invest in email marketing
120 rules for doing email marketing by the book
what is mailchimp
What is Mailchimp and why do you need it?
best drag & drop email template builders
9 Best drag and drop email template builders in 2023

Recent Posts

  • What is Mailchimp and why do you need it?
  • How To Generate Leads in 2023: 10 Lead Generation Best Practices
  • What is HubSpot and why do you need it?
  • 11 Best Free SMTP Servers in 2023: Send Emails on a Budget
  • The 4 Best Screen Recording Software in 2023 (Free & Paid)

RSS Industry news

  • The 11 Best Text Marketing Platforms for Businesses in 2023
  • HubSpot Pricing 2023: Full Guide to Selecting the Right Plan
  • MailUp Review 2023: Tried & Tested Features, Cost, Pros & cons
  • 15+ Best Online Course Platforms in 2023
  • 99+ Best Free Mailchimp Templates for 2023
  • How to Create HTML Email With and Without Coding (Full Guide)
  • The 10 Best eCommerce Platforms for Small Businesses (2023)
  • GetResponse Pricing 2023: How much does it really cost?
  • Learn about:
    • Testing & Optimization
    • Email Design
    • Marketing Automation
    • List growth
    • Strategy
    • Latest Articles
  • Resources
  • About