GSA Instagram Facebook Twitter LinkedIn

INtelligent Direct: Email Design Evolution

Email design best practices have evolved a lot over the last 10 years. All changes over the years are prompted by changes in how email clients (Outlook, Gmail, etc.) render or display email on device screens and also how spam filter software changes impact deliverability and inbox placement.

This forces marketers to change how emails are designed and coded to A.) Reach an inbox and B.) Look good when reaching the inbox. This means that any email templates that look good today and have a low spam score might have something go wrong a year from now if the code hasn’t also been tweaked to factor in code patches for email client and spam filter changes. Templates are NOT backwards compatible and ideally should be recoded yearly.

Tricky Request
Recently I was asked what the best way would be to send a long-format email with embedded images (that aren’t an attachment) where this email would eventually be forwarded to several people inside an organization that we’re trying to reach.

From a marketing perspective, I totally get the request. It’s basically a way for one of our connections – who knows people at a company we want to talk to – to make a virtual introduction via email by forwarding our nicely formatted message to them with a note.

For anyone in the email marketing space with knowledge of email design best practices, the request is a tricky one. Why? Let’s dive down the rabbit hole, shall we?

Tricky Problem #1:
When HTML emails are forwarded, the layout often breaks when they are rendered by the original recipient, forwarded and rerendered by another rendering engine the forwardee is using.

Email service providers (ESP) have Forward to a Friend and Refer a Friend functionality, but these features are rarely used by a recipient who wants to forward because it’s way easier to forward a message using their email client forward functionality than to fill out a web form and submit.

Recommended Solution for Tricky Problem #1: Since the end goal of this email is to be forwardable, consider rolling with a plain text email message. If images are imperative, then consider putting your content onto a landing page and emailing a primarily text email with or without a header graphic only and a link to the landing page in the message body.

Tricky Problem #2:
The only way to 100% control how an email is rendered when forwarded is to create an image-based email (where the entire email is made of either one image or a few images spliced together). That means you are sending an HTML email made entirely of hosted image(s).

The downside to this if you’re sending an email campaign to more than one person is that the email will be caught in the spam folder because image-based emails do not follow the 80/20 rule where the email is 80% text and 20% images.

Spam Assassin, the third-party spam scoring tool in almost all ESPs, will score an email with only images very high as it’s highly likely to be routed to a spam folder or get bounced.

If a recipient does download the images then forwards the email, there is no guarantee that the recipient of the forward can see the graphic(s) with the messaging. That said, this mainly pertains to business-to-business (B2B) emails where Outlook use is the highest. If this were business to consumer (B2C) and more recipients use web-based email clients like Gmail, we wouldn’t be worried.

The defaults for the email client Outlook are to suppress images unless the recipient chooses to take action and download them. If the entire message is embedded in that image, recipients will not see the message even if it did happen to make it to the inbox.

Here is an example of what an image-based HTML email looks like without downloading the images in Outlook:

It’s basically blank with an unsubscribe link at the very bottom.

Here is an example of how an HTML email that uses images and text looks like without downloading the images in Outlook:

The message is still readable even without downloading the graphics.

Recommended Solution for Tricky Problem #2: Once the email is ready, make sure you’re sending from an ESP that has all of the proper authentication to optimize inbox delivery and send the email to a single contact who is expecting it.

When sending to a single contact, it removes any deliverability issues possible when sending to a larger list where list hygiene and recipient engagement plays a role in deliverability.

If the goal is ever to send an image-based email like this to a larger list, consider going with “Recommended Solution for Tricky Problem” #1 above.

For this particular situation, sending to one person we know well from the platform is doable, but I would never recommend sending something like this to a larger list.

So why the madness? Why is this somewhat simple request so very complex to answer?

    1. Because the email isn’t plain text and is HTML
    2. The HTML email has images
    3. Email marketers can test how the HTML email renders in the 68 different email client providers when sent from a platform to the first intended recipient, BUT
    4. We/You/ESPs cannot control how it’s rendered once it’s been forwarded

It is difficult enough to test rendering when going to the intended recipient as there are 68 email clients to test rendering in. Marketers without HTML knowledge say emails should look good in all email client providers. It is technically possible to add code fixes for rendering anomalies for specific email client providers for your specific email design. Unless you have the additional time, budget and you know what reading environments your audience is using to consume your emails, I wouldn’t recommend the spend.

Below is the list of 68 email client providers I’m referring to. I left off seven entire email clients that you’ve probably never heard of, so there are actually more than this list. I know, scary right? But you get the gist. There are a lot of email client providers to worry about, so use Litmus Analytics to find out what your audience is using to consume your emails in order to pick your email rendering battles.

Desktop Email Client Providers

Apple Mail:
Apple Mail 9 OS C 10.11
Apple Mail 10 macOS 10.12
Apple Mail 11 macOS 10.13

Lotus Notes:
Lotus Notes 7 Win 7
Lotus Notes 8 Win 7
Lotus Notes 8.5 Win 7
IBM Notes 9 Win 7

Outlook:
Outlook 2000 Win 7
Outlook 2002 Win 7
Outlook 2003 Win 7
Outlook 2007 Win 7
Outlook 2010 Win 7
Outlook 2011 OS X 10.11.6
Outlook 2013 Win 7
Outlook 2013 120 DPI Win 7
Outlook 2016 macOS 10.12.6
Outlook 2016 Win 7
Windows 10 Mail Win 10

Thunderbird:
Thunderbird 52 Win 7

Mobile/Tablet Email Clients

Android:
Android 4.4
Android 5.1
Android 6.0
Google Inbox Android 6.0
Gmail App Android 6.0
Gmail App IMAP Android 4.4
Samsung Mail Android 6.0
Outlook App Android 6.0

iOS:
Gmail App iOS 10.3.2
Inbox by Gmail iOS 10.3.2
Outlook iOS iOS 11.0
iPhone 6 iOS 9.3
iPhone 6 Plus iOS 9.3
iPhone 6s iOS 10.3
iPhone 6s Plus iOS 10.3
iPhone 7 iOS 11.0
iPhone 7 Plus iOS 11.0
iPhone 8 iOS 11.0
iPhone 8 Plus iOS 11.0
iPhone X iOS 11.0
iPhone SE iOS 11.0
iPhone Beta iOS 11.3 Beta 3
iPad (Retina) iOS 11.0
iPad Mini iOS 11.0
iPad Pro (12.9 inch) iOS 11.0
iPad Pro (10.5 inch) iOS 11.0

Web-Based Email Clients

AOL:
AOL Mail Explorer
AOL Mail Firefox
AOL Mail Chrome

Comcast:
Comcast Explorer
Comcast Firefox
Comcast Chrome

G Suite:
G Suite Explorer
G Suite Firefox
G Suite Chrome

Gmail:
Gmail Explorer
Gmail Firefox
Gmail Chrome
Inbox by Gmail Firefox
Inbox by Gmail Chrome

Office 365:
Office 365 Explorer
Office 365 Firefox
Office 365 Chrome

Outlook.com (Hotmail, Live, MSN):
Outlook.com Explorer
Outlook.com Firefox
Outlook.com Chrome

Yahoo! Mail:
Yahoo! Mail Explorer
Yahoo! Mail Firefox
Yahoo! Mail Chrome

At Infinity Direct, we know email, we know rendering, and we know deliverability. Do you have a complex email problem we can help you solve? Let’s talk!

Jenny Lassi • May 18, 2018


Previous Post

Next Post