How to Formulate an Email Design and Development Strategy

In this tutorial I’ll explain how to focus your efforts on the email clients and webmail clients being used by your target audience.

Note: this tutorial is part of a whole week’s worth of email content on Tuts+ Web Design–check out the Mastering HTML Email learning guide for more!

1. Understand the Importance of a Strategy

Your target audience has access to a wide range of email clients, webmail clients and devices, and, as there’s no email equivalent to W3C Standards, how they experience your email campaigns will vary depending on what they’re using to view them and what they’re using to interact with them.

For example, they could be using:

  • Microsoft Outlook, which doesn’t play animated GIFs beyond the first frame.
  • Gmail, which doesn’t render web fonts.
  • iOS Mail, which does play animated GIFs, and does renders web fonts, but also, unhelpfully, renders some content as blue links or grey links!

Therefore, to deliver a great subscriber experience to your target audience, you need to formulate an email design and development strategy that takes the email clients and webmail clients they’re using into account. One that enables you to harness their best, and overcome (with an email hack or two) their worst, and most challenging features.

The question is: how can you do this, when your target audience could be using any number of email clients and webmail clients, on any number of devices? The answer, is by using an email analytics tool to find out which ones they’re using.

2. Find Out Which Clients Your Audience Uses

Email analytics tools, such as the ones found within Litmus and Email on Acid, track individual email campaigns, and create a report for them, providing valuable email client and webmail client data, in addition to device, operating system and engagement data. To generate and access this data, you have to create a unique tracking link within the tool, for each of your email campaigns, and build it into each respective emails HTML. It might look a little like this:

Once you’ve sent your email campaign, with the tracking link built into it, you’ll begin to see data appear within its email analytics report. You’ll need to allow enough time for enough of your target audience to open your email campaign, to get an accurate picture of how they’ve viewed and interacted with it.

Analytics report
Litmus Analytics report summary, showing email and webmail client data.

As you send more and more email campaigns to your target audience, you’ll see trends begin to emerge across your email analytics reports, enabling you to identify which are the most popular email clients and webmail clients amongst your target audience, and which are the least. It’s worth stating here, that it’s unwise to formulate your email design and development strategy on one report, as it may be an anomaly, so start with a minimum of three.

You’re now ready to analyse your email analytics reports, and establish which email clients and webmail clients to formulate your strategy around.

3. Narrow Down Which Clients to Strategize For

Start by analysing the reports in your email analytics tool, looking primarily at the email clients and webmail clients that have been used by your target audience to open your email campaigns. Identify your target audience’s most popular email and webmail clients, indicated by the popularity percentage recorded against each one.

Analytics report showing popularity
Most popular email and webmail clients.

The most popular email clients and webmail clients should be considered your target audience’s “primary clients”, and the ones you should formulate your email design and development strategy around. As a guide, their collective popularity percentage should add up to a minimum of 60-70%, and be comprised of two or three email and / or webmail clients.

The remaining 30-40% should be considered your target audience’s “secondary clients”.

Your email design and development strategy then, should be formulated to deliver the following on your target audiences “primary clients”:

  1. Ensure your email campaigns render flawlessly.
  2. Ensure your email campaigns are easy to interact with, for example by using buttons that are selectable across their entire area.
  3. Harness, where possible, features within the email and webmail clients that add value to the subscriber experience.

And deliver the following on your target audience’s “secondary clients”:

  1. Ensure your email campaign’s messages and calls to action are clear, and while they may not render flawlessly, or in exactly the same way as the “primary clients”, don’t lose too much sleep over it.
  2. Ensure your email campaigns are easy to interact with.

Having established what your target audience’s “primary clients” and “secondary clients” are, you’re almost ready to begin formulating your email design and development strategy. However, before you do, you must understand their unique characteristics to ensure you deliver a great subscriber experience to them.

4. Identify “Primary” and “Secondary Clients”

Properly understanding your primary clients and secondary clients puts you in a position to make good design and development decisions, as you formulate your email design and development strategy.

Though not exhaustive, here are some of the characteristics and supported features of some of the popular email and webmail clients. It’s worth stating here, that some of the default characteristics can be enhanced or overcome using email hacks.

Design Characteristics and Supported Features

Email Client /
Webmail Client
Design
Characteristics and Supported Features
Microsoft Outlook
iOS
  • Responsive layout
  • Web fonts
  • Animated GIFs
  • Background images
  • Displays some content (numbers, dates and related terms such as until), as blue links or grey links (without implementing the blue link hack)
Gmail
  • Responsive layout
  • No web fonts
  • Animated GIFs
  • Background images (except on the Gmail App for subscribers with a non-Gmail account)

Development Characteristics and Supported Features

Email Client /
Webmail Client
Development
Characteristics and Supported Features
Microsoft Outlook
  • Requires <table>s for creating email structure
iOS
  • Supports <table>s and / or <div>s for creating email structure
Gmail
  • Supports <table>s and / or <div>s for creating email structure
  • Requires inline CSS for styling essential elements on some versions, including Gmail on Android 5.1, Gmail on Android 6.1 and Gmail App IMAP

Having established what your target audience’s primary and secondary clients are, and having understood their characteristics, you’re ready to formulate an email design and development strategy.

5. Formulate Your Design and Development Strategy

Using the insights you’ve gained from your email analytics reports, and your understanding of your target audience’s various clients, you can now formulate your strategy. Remember, your objective is to deliver a great subscriber experience to your target audience. If you have multiple target audiences, you’ll need to create a strategy for each one of them.

What an Email Design and Development Strategy Comprises

A design and development strategy comprises of four key elements; each one informed and influenced by the target audiences primary client. The key elements are:

  1. An approach to the design.
  2. An approach to the development.
  3. An approach to any progressive enhancements.
  4. A rationale, outlining the thinking behind the strategy.

Example Strategies

Here are a few example strategies, based on real target audiences, with the email and webmail clients that influence each approach shown in brackets.

Strategy #1

Primary Clients Microsoft Outlook (50%)
iOS Mail (20%)
Gmail (10%)
Design
  • Fixed layout (Microsoft Outlook) and responsive layout (iOS Mail / Gmail on mobile)
  • Web safe fonts (Microsoft Outlook) (These will be overridden by native fonts on Gmail on Android)
Development
  • <table> structure or <div> structure wrapped within ghost <table> structure (Microsoft Outlook / iOS Mail)
  • Headline and headings font-size sized to fit within mobile viewport, with @media query used to enlarge font-size for desktop (Gmail)
Progressive enhancement
  • Web fonts, similar in style to web safe font to maintain integrity of design (iOS Mail)
Rationale As most of the target audience uses Microsoft Outlook, a fixed email client, emails should be designed primarily for viewing on, and interacting with, desktop. Its lack of web font support, also means that web safe fonts should be used. Progressive enhancement techniques can be implemented to harness some of the design and development features that the other email clients and webmail clients used by this target audience offer, such as web fonts on iOS Mail and animated GIFs on Gmail, though appropriate email hacks will need to be implemented to ensure Microsoft Outlook doesn’t render fallback fonts as Times.

Strategy #2

Primary Clients iOS Mail (40%)
Gmail (30%)
Design
  • Mobile 
  • Responsive layout (iOS Mail / Gmail on mobile)
  • Web fonts or web safe fonts (These will be overridden by native fonts on Gmail on Android)
Development
  • <div> structure or <div> structure wrapped within ghost <table> structure (if one of the ‘secondary clients’ is Microsoft Outlook)
  • Headline and headings font-size sized to fit within mobile viewport, with @media query used to enlarge font-size for desktop (Gmail)
Progressive enhancement
  • Web fonts, similar in style to web safe font to maintain integrity of design (iOS Mail)
Rationale As most of the target audience uses iOS Mail, you can be more creative, as you have more design and development features to harness, such as the ability to use web fonts for your headline and headings. Use of Gmail is more significant amongst this target audience, but due to Google’s image caching, it’s impossible to identify which version they’re using, and whether or not it supports internal CSS. So, as with strategy #01, the email needs to be developed to work on mobile without relying on internal CSS and @media queries.

What are Ghost Tables?

Ghost tables are <table> elements created to be rendered in Microsoft Outlook only. As such, their opening <table>, <tr> and <td> tags, and their closing </td>, </tr> and </table> tags, are wrapped within Microsoft conditional comments – <!--[if true]> and <![endif]--> for example.

They’re used to enable you to construct emails for Microsoft Outlook, while also enabling you to construct emails for other email and webmail clients with <div>s. Constructing emails with <div>s, ensures your emails are accessible and allows you to benefit from the flexibility working with <div>s offers, such as being able to use the float  property.

Conclusion

As you’ve discovered in this tutorial, it’s important to have an email design and development strategy, if you’re going to deliver a great subscriber experience to your target audience. It’s also important to regularly re-run and analyse the reports in your email analytics tool, as your target audience may well change their email client or webmail client of choice from time to time.