Table of Contents
Why is email display an issue in email marketing? ...... 2 Expert Email Design ...... 3 Unwanted content formatting ...... 4 Animated GIFs not working correctly ...... 5 Strange lines appearing in my email ...... 6 Only part of my email is showing and it looks broken ...... 8 Email layout not responding and some styling missing ...... 9 Coloured borders not appearing on images ...... 11 Increased letter spacing on 11px text ...... 12 Broken layout in longer emails ...... 13 Unwanted gaps appearing under images ...... 14 The incorrect font-family is shown ...... 15 Phone numbers, addresses and dates have ugly link formatting ...... 18 Internal anchor links not working ...... 19 Extra reading ...... 21
1
Why is email display an issue in email marketing?
Businesses and consumers use a wide variety email readers or clients, accessed on any of a number of devices. Typically, these include:
• Microsoft Outlook desktop program (Windows & Mac OS) • Microsoft Outlook.com webmail • Microsoft Office 365 Mail webmail • Windows Phone Mail app • Apple Mail desktop program (Mac OS) • Apple Mail app (iOS) • IBM Notes desktop program (Windows & Mac OS) • Google Gmail, G Suite and Inbox webmail • Google Gmail, G Suite and Inbox apps (Android & iOS) • Android device manufacturers’ own email apps • Yahoo! Mail webmail • Virgin Media Mail webmail (uses Yahoo! Mail’s rendering engine) • AOL Mail webmail • Opera Mail desktop program • Mozilla Thunderbird desktop program
... and many more!
Marketing emails use HTML and CSS code, with each email program or app interpreting this code slightly differently. So, it makes sense to know what readers your target audience is likely to open your emails on so, their experience can be optimised. For example, emails that are likely to be opened on devices with narrower view screens should have responsive layouts, which includes elements that ‘stack’ over one another, get bigger to be finger- clickable, or even hide.
The challenge is to create email campaigns that are displayed as consistently as possible across all your target email readers, so be sure to test them thoroughly in as many email readers as possible before sending your campaign.
Online testing services, such as Litmus or Email on Acid, are a great way to check your email layouts and content quickly. However, don’t just check the screenshots, use all the tools to check things like links and Spam scores, plus test in a few ‘live’ readers to be doubly sure.
2
Expert Email Design
There are quite a few pitfalls to be aware of when creating and sending HTML email campaigns, and the NewZapp Design Team’s many years of experience helps us to ensure the best results across all major email readers when designing and building editable (re-usable) email templates for your NewZapp account.
In this guide we take a look at some of the most common display issues encountered when creating and sending an email campaign using an email marketing system such as NewZapp and (where possible) how you can work around them.
We also offer supporting presentations for Designers and Coders looking to create or edit their own HTML emails.
Download a PDF Plus download the PDF copy of: containing the complete A-Z Best Practice for of everything we know! Designers – Email How to… Building Building Guide Templates
On the following pages we will illustrate some of the more common email display issues for email programs, apps and webmail, along with suggesting ways of working around them.
3
Unwanted content formatting
Email readers affected
Outlook 2007/10/13/16 most affected, can affect other email readers
What’s the problem?
Adding content to an email by copying and pasting from a web page, another email, or a Microsoft Word document can bring with it ‘invisible’ code that can affect how it looks in email readers, especially Outlook.
For example, unlike other email programs, Microsoft Outlook 2007/10/13/16 uses Microsoft Word to display HTML emails. This causes issues if your email content is not as clean as you think it is! Everything may look fine as you are working in your email editor, but when you send an email to those Outlook clients, all that extra code lurking in the background will wreak havoc on the styling.
What to do:
Email marketing editors such as NewZapp often provide tools to automatically strip out any extra formatting code that applications such as Word tend to add. Or If you prefer, you can manually clean content before adding it to an email by simply first pasting it into a plain text editor such as Notepad or SimpleText, which should strip out any extra nastiness. Then, simply copy this cleaned content and paste it into your email editor. This clean HTML code should give you more reliable and consistent results in all email readers.
4
Animated GIFs not working correctly
Email readers affected
Outlook 2007/10/13/16
What’s the problem?
The email reader displays only a static image of the first frame of an animated GIF instead of playing the whole animation.
More info:
A GIF (Graphical Interface Format) is a commonly used image file type that displays reliably online and in all major email readers. An animated GIF groups together multiple individual images and plays them back as an animation.
What to do:
When including animated GIFs in your email campaigns you should ensure that:
• the first frame works as a stand-alone image
• any call to action or other crucial information is also included in the first frame.
If your designer creates an animated GIF for your emails, or an advertiser supplies you with one for inclusion in an email, make sure they are aware of this issue.
5
Strange lines appearing in my email
Email readers affected
Outlook 2016 Windows 10 Mail
What’s the problem?
The email reader displays unsightly seemingly random horizontal lines in your email’s layout, in some cases reaching all the way across the preview pane. The colour matches the email
’s background fill.What to do?
The issue only affects the named Microsoft email readers and currently has no cure. If you have a certain amount of HTML and CSS coding knowledge, however, there are workarounds you can add to reduce the impact of these lines.
First, set a colour for the email’s background fill using this ‘conditional code’ in the email’s
tag that specifically targets versions of Outlook later than 2016 (this includes Windows Mail 10) e.g.>
6
Next, limit how far across the email the lines expand using this code snippet in the
tag of your email:
Finally, add this class to any table cell
| Email Content.. |
7
Only part of my email is showing and it looks broken
Email readers affected
Google Gmail Google Inbox
What’s the problem?
The email reader cuts the email content off at the bottom, so you do not see the full email in the first instance. Sometimes, the layout also breaks, so some elements end up in places they shouldn’t be.
Some email readers have strict limits on the amount of code it will render before clipping it, around 102kB in Gmail’s case. You are then given a text link to ‘View Full Email’ or ‘View entire message’, but often the email layout can be broken depending on where in the HTML the code is cut short.
What to do
To avoid this, you must ensure your email’s code is as clean and minimal as possible - ensure there are no unnecessary extra tags or attributes, and the CSS in the