Wondering how to design the perfect responsive email template to make all your email subscribers happy?

Designing a responsive email template comes with a specific set of rules. Following them will improve readability while guiding your audience towards the key call-to-action.


“Designing a responsive email template is challenging, but not doing it at all can be disastrous.” –
EmailOut
 

Where are your email subscribers reading emails? Judging by research, Apple iPhone (39%) and Gmail (27%) dominate the email client market share. Furthermore, when it comes to the environment recipients use to open emails, mobile (43%) is proving to be the most popular. Thus, it’s increasingly clear you need to have a responsive email template “at the ready” to deliver the high-end experience your target audience expects – and needs.

This article covers the following topics on designing responsive email template:

  1. Why are responsive email templates important?
  2. Types of responsive email templates
  3. The importance of optimising emails for mobile
  4. Responsive email design best practice

Ready to dive in?

After mobile, the second most popular environment to open emails is webmail (36%) followed by desktop (19%). The leader in mobile email opens is Apple iPhone (90%) with Gmail (75%) being the top webmail email client for email opens.

Email client usage differs from industry to industry and brand to brand. Yet, considering the stats, it’s highly likely that a big portion of your email subscribers is opening your email campaigns on their mobile devices. Hence, you need to ensure your message will display as optimally on mobile devices as it does on desktop and webmail. 

The Importance Of Responsive Email Template

A responsive email template is an email template fully optimised for any device (i.e. desktop, mobile and tablet). It adapts to multiple screen resolutions which, considering the rising demand for mobile-friendly content, is extremely useful and efficient. Overall, responsive email templates are more accessible and better optimised to allow subscribers/customers to read emails on their preferred device and/or on the go.

Non-responsive emails not only communicate a brand’s lack of consideration regarding the quality of the interactions with their audience but also can result in a significant increase in unsubscribe and complaint rates. On the other hand, responsive emails – 

  • enhance the subscribers’ experience
  • boost the campaigns’ ROI
  • improve email marketing KPIs 
  • significantly increase conversion rates.

Since numbers don’t lie, take a look at a few statistics you cannot afford to ignore –

  • over 43% of recipients will delete an email if it is not optimised for mobile
  • 70% of cases where emails don’t display correctly result in deletion within 3 sec.
  • over 51% of B2C brands’ email are not mobile-friendly
  • 30% of subscribers will unsubscribe if the emails they receive are not responsive

Benefits Of A Responsive Email Template

  • high-quality subscriber/customer experience
  • increase in engagement and conversion rates
  • decrease in unsubscribe and complaint rates
  • boost in campaign ROI

Types Of Email Template Design

Inline (not attached) images? Check.

Gorgeous, big call-to-action rather than minuscule hyperlinks? Check.

Interesting, beautifully styled, engaging content with minimal effort? Double-check.

By designing a responsive email template you are taking your email marketing to the next level. Now, let’s examine the three different types of email template design.

Scalable Email Design

Scalable email design, which is what many email marketers are currently using, is defined as any email design that works well across mobile devices without using code to adjust different elements (i.e. tables, image size, etc.). 

This type of design consists of the following components – 

  • a simple layout (often one column) scalable for all sizes
  • large, readable on all screens text
  • big, clickable call-to-action buttons

Responsive Email Template Design: Types & Best Practice | EmailOut.com

Pro tip: In some Android email apps, emails are not scaled, and subscribers need to scroll horizontally AND vertically to read the message.

Fluid Email Design

Fluid email design is the in-between scalable and responsive email design. It utilises the %-based sizing to automatically adapt the width of tables/images to the device’s screen size on which emails are viewed. 

Fluid emails, like scalable ones, don’t change the content or layout of an email. They maintain the same layout among different devices. The difference between scalable and fluid emails is that the latter will fill up space in an email – like fluid – making the content “flow”. Due to this, fluid email design usually works best with a text-heavy layout since how the email copy and images relate to each other is less controlled.

Responsive Email Template Design: Types & Best Practice | EmailOut.com

Pro tip (for coders): Implementing fluid email design is simple. Rather than using pixels to size tables, you use percentages. For example, <table border=”0″ cellpadding=”0″ cellspacing=”0″ width=“100%”> Content </table>.

Important: Fluid email design is becoming less and less common nowadays. Fluid tables and images are almost always combined with responsive email template design techniques for better control over the email design.

Responsive Email Design

You’ve heard the phrase the best of both worlds, right? 

Responsive email design is exactly that. Responsive emails take everything from scalable and fluid email design and build on it by using CSS media queries to add more control over the design.

While fluid layouts are contained with the help of media queries, it’s only a simple implementation – no advanced coding going on. With responsive email design, on the other hand, media queries are used to – 

  • change the design layout
  • adjust the size of text, buttons and images
  • hide (or swap) content between mobile and desktop

Responsive Email Template Design: Types & Best Practice | EmailOut.com

With responsive design the possibilities are endless. But, some of the most common responsive design methods are – 

  • changing navigation
  • enlarging fonts
  • changing layout
  • changing colours
  • image scaling
  • changing, swapping or hiding content

The biggest advantage of responsive email design is the granularity of control email designers have over the display of the content across different devices. 

The main disadvantage is that traditional responsive design is not supported everywhere. For example, Gmail doesn’t fully support style in the email header, rendering (pun intended) responsive methods pretty much useless in Gmail’s different clients.

With the tech industry constantly introducing new devices and screen sizes, designing responsive email templates will ensure that your emails will always render correctly regardless of the device.

Even if you are not an avid coder you can still design a beautiful responsive email template. All you need is the right email marketing software with a top-notch Editor that’ll do it all for you. You just need to drag & drop the design elements and voila! 

Why Should You Optimise Email For Mobile?

Is your email campaign optimised for mobile? With EmailOut, it always will be.

Email marketing is an extremely effective and cost-efficient way to increase your revenue. However, it only works when you have taken the necessary steps to ensure your email will reach the right people at the right time with the right message.

An email that’s not reaching the right audience or yields little to no engagement and conversions is not going to result in profits. Therefore, it’s vital to optimise emails for mobile. Especially, considering it dominates the email opens environment.   

Which mobile devices can you design for?

Not all email clients are made equal. Thus, the responsive email design types you have just read about are not universally supported by all email clients. Here is a list of mobile email clients that support responsive emails – 

Responsive Email Template Design: Types & Best Practice | EmailOut.com

Measuring The Success Of Responsive Emails

You are already measuring your email campaigns using various metrics such as open and click-through rates, engagement & conversion rates, and unsubscribe rates. Thus, use the same metrics to measure the effectiveness – and success – of your responsive emails. 

Compare your “old” email campaign metrics with the responsive email ones and you should notice a significant increase in open, click-through, engagement and conversion rates coupled with a decrease in unsubscribe rates.

Responsive Email Design Best Practices

Don’t think “code responsive”. Think mobile first!

With the majority of email opens happening on smartphones and tablets, designing email templates with a “mobile-first” mentality is crucial

Let’s take a look at seven responsive email design best practice

1) Stick to one column

A one-column layout will make your email compatible across all devices and easier to read even when viewed with different email clients. The optimal width for mobile design is 320px (640px for retina)

2) Font size

At a minimum, keep your body font between 13-14pt and no smaller than 20pt for titles and headlines. This is the absolute minimum that iPhones, for example, can cope with. So if you go smaller, they’ll autoscale up your font which can interfere with your layout.

3) CTAs “above the fold”

Your most important call-to-action and most valuable offers must be placed above the fold and keep a minimum CTA button size of 44x44px with plenty of white space around. 

4) Avoid hyperlinks stacking

You must not stack hyperlinks, as in squishing lots of links next to each other, as people will find it tricky to click them on touchscreen devices. Instead, replace links with CTA buttons – if possible.

5) Create a hierarchy

Any information secondary to your email’s main purpose should always come after the email’s main content and CTAs. A great way to have a hierarchical structure is to use an Inverted Pyramid layout. 

6) Use small images

To keep load time to a minimum, make sure you use small size imagery.  If you’re worried about what this will do to the quality of the images, you may be able to use responsive coding so that images automatically load smaller on mobile devices while the full-size ones show up on desktops.

7) Test, test, test

This may be the last step before unleashing a responsive email to your target audience but it is the most important one. To avoid losing subscribers/customers, you need to make sure your email renders perfectly on all email clients. With EmailOut, you can test your campaign against 70+ different email clients and mobile devices in seconds.

Final Thoughts

Scalable email design is perfect for testing the water around mobile, reliable email rendering and a team with limited coding experience. 

Fluid email design is great for simple email design layouts, text-heavy emails and a team with limited coding knowledge. 

Responsive email design is excellent for a large mobile audience, having the most control over the design layout and a team with amazing coders (or an Email Marketing platform that does it for you).

If you are a coding expert, you can create a responsive email template with ease in no time. If, however, coding seems like Swahili to you, take the easy route and use email marketing software with built-in responsive templates.

In today’s dynamic digital marketing world, responsive emails are turning from optional to necessary. With the rise of people reading emails on mobile, the demand for responsive email has grown exponentially. If your email campaigns are not optimised for different screens, they’ll render poorly and “force” your audience to unsubscribe.

Are you ready to stun your audience with gorgeous responsive emails?

Highly recommended further reading – 

1) Writing Marketing Emails 101
2) Email Design Best Practice
3) Why Is My Email Going To The Spam Folder?
4) Email Marketing Campaign Checklist (PDF version here)

[EmailAddress]
[EmailAddress]
[YouTube Music Video]
[YouTube Music Video]