1

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

2

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.

3

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.

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.

Download a PDF copy of: Best Practice for Designers – Email Building Guide

Plus download the PDF containing the complete A-Z of everything we know! How to… Building Templates

4

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.

5

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.

6

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 <body>’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 <head> tag that specifically targets versions of Outlook later than 2016 (this includes Windows Mail 10) e.g.

<!--[if gt mso 15]>

<style type="text/css">

body {

background-color:#FFFFFF !important;

}

</style>

<![endif]--> >

7

Next, limit how far across the email the lines expand using this code snippet in the <head> tag of your email:

Finally, add this class to any table cell <td> in the email where the width of the lines needs restricting e.g.

<style type="text/css">

[owa] .msoverflow{overflow:hidden}

</style>

<table width="670" border="0" cellspacing="0" cellpadding="0">

<tr>

<td align="center" valign="top" class="msoverflow">Email Content..</td>

</tr>

</table>

8

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 <style> tag in the <head> of the email is minimised to keep things on as few lines and with as few spaces as possible. Also, think about the content and consider how to shorten it, possibly by linking off to articles rather than incorporating them into the email.

9

Email layout not responding and some styling missing Email readers affected

Outlook 2007/10/13/16 Outlook.com, Outlook in Office 365

Windows 10 Mail

Google Gmail

Google Inbox

What’s the problem? The email reader does not apply embedded CSS styles, making the email look un-styled and un-responsive on mobile devices. There are several reasons this may happen:

• Some email readers ignore embedded CSS styles (CSS set in <style> tags in the <head> of your email) thus making them look unformatted.

• Email readers such as Gmail and Google Inbox place a

size limit on the amount of CSS code it will allow in the <head> of an email - currently around 16,384kB. If you exceed this, the whole <style> block is stripped, causing the email to look un-styled and preventing it responding correctly on narrower view screens.

• Gmail and Google Inbox also penalise badly-formed

CSS code, and will also not allow the nesting of additional @ characters inside another, say inside an @media{} query. Any issues mean that the whole <style> block will be removed.

• If you sync to a Gmail account from a POP or IMAP account, any embedded CSS in the <head> of

your email is stripped out in the process. What to do In the first instance, make sure you format your content using inline CSS styles, which work well in all modern email readers (even Outlook).

10

If you need to use embedded CSS for responsive code, it is good practice to break it down into several <style> blocks, so that if there’s a problem with one block it doesn’t mean you lose all your CSS styles. As previously mentioned, ensure the CSS code is clean, well-formatted and minimised. As far as emails synced from POP and IMAP accounts to Gmail go, unfortunately there isn’t anything that stops the loss of embedded CSS, so the only saving grace is the use of inline CSS as mentioned.

11

Coloured borders not appearing on images No coloured HTML borders on images Email readers affected

Outlook 2007/10/13/16 Outlook.com, Outlook in Office 365

Windows 10 mail

IBM Notes

What’s the problem? The email reader does not display coloured borders set on images.

What to do: Most modern HTML emails are coded using HTML5, which does not support setting an HTML border attribute on an image. In addition, some email readers do not support the inline CSS method of setting borders in a style, notably Outlook 2007/10/13/16. If you want to ensure that a border appears consistently in all email readers, it’s best to have it as part of your image. This will also ensure that any text aligned with your images stays in place and doesn’t get re-positioned because of the lack of borders. Alternatively, you can use HTML and CSS to create coloured borders around your image as described in our Email Building Guide.

12

Increased letter spacing on 11px text Incorrect letter-spacing Email readers affected

Outlook 2007/10/13/16 Outlook.com, Outlook in Office 365

Windows 10 mail

iOS Mail for iPad

What’s the problem? The email reader sets more letter-spacing for 11px text than is usual in HTML. Also note that some email readers also convert any text with a font-size of 10px or smaller to 11px. This can be an issue if there is limited space for the text to grow, causing it to wrap onto more lines than expected.

What to do For starters, do ensure you use a minimum font-size of 11px, and pay close attention to any areas where the copy doesn’t have much room to expand (i.e. is it a tight fit in the space available?). Allow as much space as possible widthways to allow for any expansion, and send tests to a variety of email clients, especially the ones most affected, to make sure you are happy with how your email looks.

13

Broken layout in longer emails Gaps appearing in emails with a lot of content Email readers affected

Outlook 2007/10 is most known for this issue

What’s the problem? The email reader inserts odd gaps into longer emails. What’s going on? Some email programs use a non-HTML rendering engine to interpret emails. Microsoft Outlook, for example, uses Microsoft Word to interpret HTML emails and applies formatting using its own printing-based protocols. This does mean that a piece of ‘page-break’ code is added when your email content exceeds a certain set length, resulting in a seemingly random gap appearing in the layout. What to do If this problem occurs in your email you can either:

• re-arrange the content so the gap appears in a less conspicuous place

• divide the email into 2 shorter campaigns

• use a shorter email that links off to several landing pages. To help evaluate how big an issue this is for you, check past campaign statistics to see how many of your subscribers use the most affected email programs.

14

Unwanted gaps appearing under images Email readers affected

All of them except Outlook 2007/10/13/16 on Windows, and Windows 10 Mail, which actually inserts a thin line if the fix below is used

What’s the problem? The email reader shows gaps under each image in your email. So, if you want to place an image hard up against another element in your email - for example a banner image that needs to sit up against a menu strip, or an image sliced horizontally into sections and stacked one above the other so that they look like one whole seamless image – these gaps will break your layout. Note that this issue only affects the bottom of an image, not the top or sides. What to do Each HTML image tag in your email will need an inline CSS style added like so:

Many email marketing systems (such as NewZapp) automatically set this CSS code on each image added to your email, or you may be able to add it in a Source Code editor. This prevents the gaps from appearing in most modern email readers. Additional but related issue Outlook.com and Outlook for Office 365 now wrap each image with an HTML element which effectively reverses the display:block code. You need to place this CSS code into the <head> of your HTML email:

<img src=”some-image.jpg” style=”display:block”/>

[office365] button, [office365] div {display: block !important;}

15

The incorrect font-family is shown Inconsistent text display Email readers affected

Android – all mail apps

Windows phone – all mail apps

iOS – all mail apps

What’s the problem? Email readers on mobile device platforms may not use the font you have set for your email, instead substituting a more generic-looking one. How the display of text works in practice Windows OS and Apple Mac OS each include a set of pre-installed ‘web safe’ font-families. You can use CSS to specify a ‘font stack’ where alternative fonts are set for use if a font isn’t installed on your machine e.g.

Mobile device operating systems don’t come with the same set of ‘web safe’ fonts installed. Their fonts have to be optimised for the mobile experience taking into account such constraints as screen size, resolution, processing power, and limited storage. As a result, each platform has their own bespoke font family designed to give optimum readability on smaller screens and are used in place of any other font you may set.

font-family: Arial, Helvetica, sans-serif;

Outlook 2016 on Windows 7 Apple iOS 11 Android 6

16

What to do Apart from using graphics containing text in the font you desire, most mobile devices do support the use of Webfonts, where a font stored on a Content Distribution Network (CDN) such as Google Fonts, or stored on a private or public server, can be brought into your email using CSS. This technique does require that the device is connected to the internet for the font to be served to it. Where the device is not connected to the internet, al text in your email will default to using the mobile OS’s own font.

17

Incorrectly formatted text links Text links not displaying in specified colour Email readers affected

Google Gmail

What’s the problem? The email reader overrides the link colour and styling set in your email code, instead using CSS to show text links in their own default font-size and shade of blue. These links become hard to read if they appear on a dark background colour. What to do Text formatting set in the HTML hyperlink <a> tag immediately surrounding a text link will override all other formatting. So, as well as ensuring your preferred text link formatting is set in the email’s HTML <body> tag and in the embedded CSS in the <head>, you can use email editors such as the one in NewZapp to select any editable link text directly and set a colour, font-size, font-weight etc on the link element itself.

For links in non-editable areas, you will need to ensure inline CSS is added to each hyperlink <a> tag to set the text formatting. This is all done for you in templates such as those created by the NewZapp team.

18

Phone numbers, addresses and dates have ugly link formatting Affected email readers

Windows 10 mail

iOS Mail

What’s the problem? The email reader tries to be helpful and sets links on certain data in your email such as telephone numbers, dates or addresses. Unfortunately, the email reader uses its own default text link styling, often in blue, often a slightly larger font size, and often underlined. What to do To retain the useful functionality that this gives us whilst maintaining control over how these data text links look, we can create an embedded CSS style in the <head> of your email that specifically targets any hyperlinks <a> that get inserted by the email reader e.g.

You can create more than one style for differently formatted elements.

.link-format-fix a{color:#B8B8B8 !important; text-decoration:none

!important}

19

Internal anchor links not working Email readers affected

Opera Mail

Virgin Media Mail

What’s the problem? The email reader does not recognise internal anchor links within an email. Instead of jumping to internal content, clicking on an anchor link may trigger a new browser window to open and show an error message. What to do There is no real workaround to this email-reader behaviour. To help evaluate how big an issue this is likely to be for you, check past campaign statistics to see how many of your subscribers use the email program in question.

20

Incorrect text colour Text colour is altered unexpectedly Email readers affected

Windows 10 Mail

Opera Mail

What’s the problem? The email reader may check your text colour contrast against its background, and if it thinks there is insufficient contrast it will change the text colour, usually to black or white. For example: a light text colour on a light background colour will convert to black in your email, and similarly a dark text colour on a dark background colour will convert to white. What to do It is always good practice to ensure sufficient text contrast for good readability, and to ensure compliance with the latest Web Content Accessibility Guidelines (WCAG). There are tools available with which you can check the contrast between text and background colours, one such being that offered by WebAIM.

21

Extra reading If you would like to know more about designing and coding entire email campaigns from scratch, or about editable templates for use within a NewZapp account, contact us and ask for copies of our other related publications:

For more information on getting the most from your NewZapp account, visit our Knowledge Base or contact us on support@newzapp.co.uk.

Download a PDF copy of: Best Practice for Designers – Email Building Guide

Plus download the PDF containing the complete A-Z of everything we know! How to… Building Templates