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.

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:

<style data-ignore-inlining>@media print{ #_t { background-image: url('https://tel8cld8.emltrk.com/tel8cld8?p&d=Your_Email_Campaign_Name');}} div.OutlookMessageHeader {background-image:url('https://tel8cld8.emltrk.com/tel8cld8?f&d=Your_Email_Campaign_Name')} table.moz-email-headers-table {background-image:url('https://tel8cld8.emltrk.com/tel8cld8?f&d=Your_Email_Campaign_Name')} blockquote #_t {background-image:url('https://tel8cld8.emltrk.com/tel8cld8?f&d=Your_Email_Campaign_Name')} #MailContainerBody #_t {background-image:url('https://tel8cld8.emltrk.com/tel8cld8?f&d=Your_Email_Campaign_Name')}</style><div id="_t"></div>
<img src="https://tel8cld8.emltrk.com/tel8cld8?d=Your_Email_Campaign_Name" width="1" height="1" border="0" alt="" />

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.

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.

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

Development Characteristics and Supported Features

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

Strategy #2

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.

<!--[if true]>
<table role="presentation" cellpadding="0" cellspacing="0" border="0">
    <tr>
<td>
<![endif]-->
<div style="width:auto; max-width:540px; font-size:16px; line-height:24px; color:#3f3f3f; padding:0 20px; margin:0 auto;">
        
        
        </div>
<!--[if true]>
</td>
</tr>
</table>
<![endif]-->

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.