Table of Contents Why is email display an issue in email marketing? ................................................................................ 2

Expert Email Design ............................................................................................................................. 3

Quick look-up overview........................................................................................................................ 4

Desktop PC and Apple Mac email applications ................................................................................... 5

Outlook 2007-2016 ........................................................................................................................... 6

Content pasted from other applications causes layout problems ................................................... 6

Animated GIFs not animating ........................................................................................................ 7

No coloured HTML borders on images........................................................................................... 8

Absolute Middle image alignment not working .............................................................................. 9

Incorrect letter-spacing ............................................................................................................... 10

HTML image resizing not working ................................................................................................ 11

Gaps appearing in emails with a lot of content ............................................................................. 12

Lotus Notes 8.5 .............................................................................................................................. 13

Internal anchor links not working ................................................................................................ 13

HTML image resizing not working ................................................................................................ 14

Opera Mail ..................................................................................................................................... 15

Internal anchor links not working ................................................................................................ 15

Text colour is altered unexpectedly ............................................................................................. 16

Web and mobile device email readers .............................................................................................. 17

Gmail & Virgin Media Webmail * ..................................................................................................... 18

Short gaps appearing under images ............................................................................................ 18

Text links not displaying in specified colour ................................................................................. 19

Outlook.com and Yahoo! Mail ......................................................................................................... 20

No coloured HTML borders on images......................................................................................... 20

Short gaps appearing under images ............................................................................................ 21

Text links not displaying in specified colour ................................................................................. 22

Mobile device email applications .................................................................................................... 23

Inconsistent text display .............................................................................................................. 23

Comparison of commonly used fonts on iOS, Android and Windows Phone mobile devices .......... 24

Extra reading ..................................................................................................................................... 25

Find out more about NewZapp ...................................................................................................... 25

1

Why is email display an issue in email marketing? Businesses and consumers use a wide variety of devices and email programs and apps (also called email clients or readers) including:

• Microsoft Outlook for Windows desktop • Lotus Notes • Google Gmail • Virgin Media Webmail (uses older Gmail engine) • Outlook.com (formerly Windows Live Hotmail) • AOL Mail • Orange Webmail (now part of EE) • Yahoo! Mail • Opera Mail • Apple Mail for Mac OS X • Mozilla Thunderbird • Apple Mail for iOS • Mail for Android • Microsoft Outlook for Windows Phone ... and more

Email marketing is delivered as HTML code, and each email program or app interprets this code slightly differently. The challenge is to create email campaigns that are displayed as consistently as possible across all email readers.

2

Expert Email Design There are quite a few pitfalls to be aware of when creating and sending HTML email campaigns. The NewZapp Design Team’s many years of experience helps 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 an email campaign in an email marketing system like 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.

Contact us for a copy of: Email building best practice - a guide for designers

Plus the complete A-Z of everything we know! The Designer’s Guide to Building Templates

3

Quick look-up overview Click on the red circles to take you to each email reader’s issue.

Support for Feature? Mic

roso

ft O

utlo

ok 2

007-

2016

Mic

roso

ft O

utlo

ok.c

om

Gm

ail /

Vir

gin

Med

ia W

ebm

ail

Ora

nge

Web

mai

l

AoL

Mai

l

Yaho

o! M

ail

Moz

illa

Thun

derb

ird

Ope

ra M

ail

Appl

e M

ail f

or O

S X

Lotu

s N

otes

8.5

Appl

e M

ail f

or iO

S

Mai

l for

And

roid

Out

look

for

Win

dow

s Ph

one

Animated GIFs

Borders on Images

Absolute Middle Image Alignment

Internal Anchor Links

Link Colouring

Text Colouring

Font display

Re-sized images

4

Desktop PC and Apple Mac email applications Most PCs and Apple Macs come with a default email program pre-installed, ready to be used to collect and display emails from any email address including online webmail accounts.

There are also third-party desktop applications available including:

On the following pages we will illustrate some of the more common email display issues for desktop email programs and suggest ways of working around them.

Microsoft Outlook 2007, 2010, 2013 & 2016

Comes as a standard installation with Microsoft Windows as part of the Microsoft Office suite of tools. These latest versions of Outlook are considered to be some of the more challenging readers to create HTML emails for.

Apple Mail for Mac

Comes as a standard installation with the Apple Mac OS X and Apple iOS. The latest version on Apple OS X is Apple Mail 8, and has proven to be one of the least troublesome email programs.

Lotus Notes 8.5

Widely used by medium-to-large sized businesses, Lotus Notes is just one part of IBM’s database-oriented Domino suite. It uses its own limited HTML display engine for emails, but version 8.5 is less problematic than earlier incarnations.

Mozilla Thunderbird This free email reader counterpart to the Mozilla Firefox browser is available across a range of operating systems. No significant email display issues are reported at this time.

Opera Mail

The latest version of the Opera web browser has the separate Opera Mail desktop application as its counterpart – previously it was an integral part of the Opera browser. Email display is generally fine with a few small foibles.

5

Outlook 2007-2016 Content pasted from other applications causes layout problems What’s the problem? Adding content to an email by copying and pasting from a web page, another email or a Word document brings with it ‘invisible’ application-specific formatting code. For example, unlike other email programs, Microsoft Outlook 2007-2016 uses Microsoft Word to display HTML, which can cause a number of 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 editing system but it won’t be until you send an email to an Outlook 2007-2016 account that any extra code lurking in the background will wreak havoc on the style and layout of your email. What to do: Using content that you know to be clean and unformatted in the first place is the best way to avoid problems. Email marketing editors such as NewZapp usually provide tools to strip out extra formatting code automatically as you paste. If you prefer, you can manually clean content before adding it to an email by simply pasting it into a plain text editor like Notepad or SimpleText, which should strip out any extra formatting. Re-copy this cleaned content and paste it into your email marketing editor. Your HTML code should then be cleaner and give you more reliable and consistent results in all email readers. Is this an issue in any other email readers? Although this is an issue most often encountered with the combination of Outlook 2007-2016 and Microsoft Word, any email reader may display oddly if your email code is not clean and correctly formatted.

Looks fine in the editor …

<!--[if gte mso 10]> <style> /* Style Definitions */ table.MsoNormalTable {mso-style-name:"Table Normal"; mso-padding-alt:0cm 5.4pt 0cm 5.4pt; </style> <![endif]--> <div style="text-align: left;" class="MsoNormal"><b style="mso-bidi-font-weight:normal"><span style="font-size:12.0pt;line-height:115%;font-family:"Arial","sans-serif";color:#E46C0A;

… but extra code like this little lot …

… can give unexpected results in Outlook 2007+

6

Outlook 2007-2016 Animated GIFs not animating What’s the problem? Instead of displaying an animated GIF as a multiple-frame animation like most email readers, Outlook 2007-2016 displays only a static image of the first frame. 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. Is this an issue in any other email readers? No.

Example of an animated GIF in Outlook 2007-2016 displaying an incomplete first frame as a static image

Example of an animated GIF in Outlook 2007-2016 displaying a more effective first frame as a static image

7

Outlook 2007-2016 No coloured HTML borders on images What’s the problem? Outlook 2007-2016 will not display coloured borders on images. What to do: Unfortunately, as yet there is no HTML or CSS code that you can insert into your email to ensure borders appear in Outlook 2007-2016, so if you want to ensure that a border is seen in all email readers it would be best to incorporate 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 (see example below). Is this an issue in any other email readers? Yes, Outlook.com and Yahoo! Mail.

Example of email reader that allows the display of HTML borders on images

Example of email displayed in Outlook 2007-2016 with no HTML borders

on images and inconsistent text positioning

8

Outlook 2007-2016 Absolute Middle image alignment not working What’s the problem? Outlook 2007-2016 does not recognise the HTML Absolute Middle image alignment attribute and also ignores any padding that has automatically been applied to the image and text. What’s Absolute Middle? In some email editing programs Absolute Middle image alignment can be used to align text vertically centre besides an image. This is useful for titles, bulleted lists/links etc as shown below. What to do: Check past campaign statistics to see what proportion of your database uses Outlook 2007-2016 – this will help you evaluate how big an issue it is for you. If you do have a large percentage of Outlook 2007-2016 users, we advise against using Absolute Middle image alignment at all. Instead, consider using Left image alignment, which displays with no problems in other email readers and looks just as good so long as your image is a similar height to your accompanying line(s) of text. Is this an issue in any other email readers? No.

Example showing Absolute Middle image alignments correctly

Example showing Absolute Middle image alignment being ignored by Outlook 2007-2016

9

Outlook 2007-2016 Incorrect letter-spacing What’s the problem? Outlook 2007-2016 sets more letter-spacing for 11px text than is usual in HTML. What to do: If using this text size in your email content, pay close attention to any areas where the copy doesn’t have much room for expansion (i.e. is it a tight fit in the space available?) and do send a test to one or more Outlook 2007, 2010, 2013 and 2016 accounts to make sure you are still happy with how your email looks. Is this an issue in any other email readers? No.

Example email correctly displaying standard 11px letter-spacing (address fits on two lines within box)

Example email shown in Outlook 2007-2016 with increased letter-spacing on 11px text (address now breaks out of box)

10

Outlook 2007-2016 HTML image resizing not working What’s the problem? Outlook 2007-2016 ignores any HTML image code resizing – images are always shown at their original size. What to do: It is important ensure your images are the actual size you need them to be in your email before you upload them to where they will be hosted (e.g. to your NewZapp or other ESP account, or on your own server). This way there will be no need to resize them to their desired dimensions in the email editor or by use of code in the HTML. To resize or crop an image you can use either:

• the image editing tools available in email marketing editors such as NewZapp;

• your own graphics application (e.g. Photoshop, Paint Shop Pro) ;

• free image editing application such as MS Paint or Apple Photo (that come pre-installed with your OS),

• or basic online picture editing tools such as Picasa or Pixlr.

In email marketing systems like NewZapp, if an image is larger than the area it is being placed into the image will be automatically resized to fit and saved at this size as a separate copy to preserve the original and to ensure that the image remains at its new size in Outlook 2007-2016. Is this an issue in any other email readers? Yes, Lotus Notes.

Example where the email reader recognises the desired smaller image size

Example of email displaying in Outlook 2007-2016, where the resized image dimensions are not recognised and the large image breaks the email layout

11

Outlook 2007-2016 Gaps appearing in emails with a lot of content What’s the problem? Odd gaps appear in very long emails. More detail: Unlike other email readers, Microsoft Outlook 2007-2010 uses Microsoft Word to interpret HTML and apply its own print-based formatting. This means in practice that it inserts a ‘page-break’ when your email content exceeds a set length. In the example shown here the break in the layout doesn’t cause much of an issue, but if the break happened to appear in a section of text then the flow and layout of the email might appear broken. Note that Outlook 2013-2016 is unaffected by this issue. What to do: If this situation occurs when you are testing your email campaign your options are:

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

• consider dividing the email into two campaigns

• use a shorter email linking to several landing pages instead

Check past campaign statistics to see what proportion of your database uses Outlook 2007/2010 to help you evaluate how big an issue it is for you. Is this an issue in any other email readers? No.

Example of a long email displaying correctly

Example of a long email displaying incorrectly with

a gap appearing in Outlook 2007/2010

12

Lotus Notes 8.5 Internal anchor links not working What’s the problem? Lotus Notes 8.5 will not recognise internal anchor links within an email. More Info: Instead of linking down to anchor points within an email once an internal anchor link is clicked, Lotus Notes forces open a new browser window with a “cannot display” error on screen. What to do: Unfortunately, there isn’t as yet a piece of code that can be used in an HTML email to ensure that internal anchor links will work in Lotus Notes. If you feel your readership is likely to have a high proportion of Lotus Notes 8.5 users, it would be best to avoid the use of internal anchor links in your email campaigns. Is this an issue in any other email readers? Yes, in Opera Mail and a minor issue in Orange Webmail:

Orange Webmail Once an anchor link is clicked the email opens again in a new window. The new window does then jump down to the correct anchor point in the email but every subsequent internal anchor link clicked will open the email again in another new window.

13

Lotus Notes 8.5 HTML image resizing not working What’s the problem? Lotus Notes 8.5 ignores any HTML image code resizing – images are always shown at their original size. More detail: Images dragged and re-sized within an email whilst it’s being composed or re-sized by means of code in the HTML will revert to their original size when viewed in Lotus Notes. What to do: The most reliable method is ensure your images are the exact size you need them to be in your email before you upload them to where they will be hosted (e.g. to your NewZapp or other ESP account, or on your own server). To resize or crop an image you can use either:

• the image editing tools available in email marketing editors such as NewZapp;

• your own graphics application (e.g. Photoshop, Paint Shop Pro) ; • free image editing application such as MS Paint or Apple Photo (that come pre-installed with

your OS), • or basic online picture editing tools such as Picasa or Pixlr.

In email marketing systems like NewZapp, if an image is larger than the area it is being placed into the image will be automatically resized to fit and saved at this size as a separate copy to preserve the original and to ensure that the image remains at its new size in Lotus Notes 8.5. Is this an issue in any other email readers? Yes, Outlook 2007-2016.

Example where the email reader recognises the desired smaller image size

Example of email displaying in Outlook 2007-2016, where the resized image dimensions are not recognised and the large image breaks the email layout

14

Opera Mail Internal anchor links not working What’s the problem? Opera Mail will not recognise internal anchor links within an email. What to do: Unfortunately, the latest version of the Opera Mail program seems to have dropped all support for internal anchor links. Is this an issue in any other email readers? Yes. Lotus Notes 8.5 and a minor issue in Orange Webmail:

Orange Webmail Once an anchor link is clicked the email opens again in a new window. The new window does then jump down to the correct anchor point in the email but every subsequent internal anchor link clicked will open the email again in another new window.

15

Opera Mail Text colour is altered unexpectedly What’s the problem? If Opera Mail calculates that your text colour does not sufficiently contrast with the background colour it is sitting on, it will change it to add better contrast. For example: a light text colour on a light background colour will convert to Black when the email is viewed in Opera Mail. And similarly, a dark text colour on a dark background colour will convert to White. What to do: There are tools available with which you can check the contrast between text and background colours to ensure they comply with accessibility standards e.g. WebAIM. This is good practice anyway and something that the NewZapp design team take into consideration when creating email templates. Is this an issue in any other email readers? No.

Example of email reader that allows any combination of text and background colour

Example of the same email in Opera Mail with text colours altered for better contrast

16

Web and mobile device email readers A webmail or online email reader is one that you access via a browser web page online, rather than via an application installed on your computer. A mobile device email application is the default mail program used by each device and is specific to each Operating System. The most popular free web readers include:

• Google Gmail • Virgin Media Webmail (uses an older Gmail engine) • Outlook.com (formerly Windows Live Hotmail) • AOL Mail • Yahoo Mail • Orange Webmail (now part of EE)

Examples of mobile email applications:

• Apple Mail for iOS • Mail for Android • Outlook for Windows Phone

On the following pages we will illustrate some of the more common email display issues for web and mobile email readers and suggest ways of working around them >>

17

Gmail & Virgin Media Webmail * Short gaps appearing under images What’s the problem? A gap appears under each image. How would this affect an email? This is a problem which comes to light if an image in your email has been sliced (cut) horizontally into sections, e.g. if one image sits directly on top of another but you want them to appear as one whole and seamless image. This way you could add different hyperlinks and ALT tags to each part of the whole image. What to do: Many email marketing editors like NewZapp automatically set the CSS code “display:block” on each image you add to your email, or have an option to manually add it. This prevents the gap from appearing in Gmail or Virgin Media Webmail without affecting the layout in any other email reader. More info: The gap does not appear above or along the sides of an image, only along the bottom edge. If you keep this in mind when slicing your image you may be able to arrange your email so that the gap will not be noticeable if you omit the “display:block” code. Is this an issue in any other email readers? Yes – Outlook.com and Yahoo! Mail.

Example email reader that displays horizontally sliced images correctly

Example email displaying horizontally sliced images in Gmail or Virgin Media Webmail without “display:block” code

*Google & Virgin Media Mail use versions of the same email reader.

18

Gmail and Virgin Media Webmail* Text links not displaying in specified colour What’s the problem? Google Gmail and Virgin Media Webmail prefers to display text links in their own default shade of blue instead of using the link colour set in the HTML email. This becomes a particular problem if making links on a dark background colour. What to do: If you are using a system such as NewZapp as your email editor you should be able to minimise this effect on editable text by having the desired link colour applied directly to the link text itself, either automatically when creating it or by selecting the link and re-applying the colour. If you decide to apply a different colour to a text link, do be aware that the underline part of the link may not change to this new colour. Note that all templates created by NewZapp will have the above code already in place on all your email’s fixed text links. Is this an issue in any other email readers? Yes - Outlook.com, Yahoo! Mail, AOL Mail and Orange Webmail (links in purple).

Example of an email that contains white text links on a dark background colour displayed correctly

Example of an email in Gmail or Virgin Media Webmail where the text links do not have the correct colours applied to them

*Google & Virgin Media Mail use versions of the same email reader.

19

Outlook.com and Yahoo! Mail No coloured HTML borders on images What’s the problem? Outlook.com and Yahoo! Mail will not display coloured borders on images. What to do: Unfortunately, as yet there is no HTML or CSS code that you can insert into your email to ensure borders appear in Outlook.com or Yahoo! Mail, so if you want to ensure that the border is seen in all readers it would be best to incorporate it as part of your image before you upload it into your email. This will also ensure that any text aligned with images stays in place, and doesn’t get re-positioned because of the lack of borders (see example below). Is this an issue in any other email readers? Yes, Outlook 2007-2016.

Example of email reader that allows the display of HTML borders on images

Example of email displaying in Outlook.com or Yahoo! Mail with no HTML borders

on images and inconsistent text positioning

20

Outlook.com and Yahoo! Mail Short gaps appearing under images What’s the problem? A gap appears under each image. How would this affect an email? This is a problem which comes to light if an image in your email has been sliced (cut) horizontally into sections, e.g. if one image sits directly on top of another but you want them to appear as one whole and seamless image. This way you could add different hyperlinks and ALT tags to each part of the whole image. What to do: Many email marketing editors like NewZapp automatically set the CSS code “display:block” on each image you add to your email, or have an option to manually add it. This prevents the gap from appearing in Gmail or Virgin Media Webmail without affecting the layout in any other email reader. More info: The gap does not appear above or along the sides of an image, only along the bottom edge. If you keep this in mind when slicing your image you may be able to arrange your email so that the gap will not be noticeable if you omit the “display:block” code. Is this an issue in any other email readers? Yes – Gmail and Virgin Media Webmail.

Example email reader that displays horizontally sliced images correctly

Example email displaying horizontally sliced images in Outlook.com or Yahoo! Mail without “display:block” code

21

Outlook.com and Yahoo! Mail Text links not displaying in specified colour What’s the problem? Google Gmail and Virgin Media Webmail prefers to display text links in their own default shade of blue instead of using the link colour set in the HTML email. This becomes a particular problem if making links on a dark background colour. What to do: If you are using a system such as NewZapp as your email editor you should be able to minimise this effect on editable text by having the desired link colour applied directly to the link text itself, either automatically when creating it or by selecting the link and re-applying the colour. If you decide to apply a different colour to a text link, do be aware that the underline part of the link may not change to this new colour. Note that all templates created by NewZapp will have the above code already in place on all your email’s fixed text links. Is this an issue in any other email readers? Yes - Gmail, Virgin Media Webmail, AOL Mail and Orange Webmail (links in purple).

Example of an email that contains white text links on a dark background colour displaying correctly

Example of an email in Outlook.com or Yahoo! Mail where the text links do not have the correct colours applied to them

22

Mobile device email applications Inconsistent text display What’s the problem? Apple iOS, Android and Windows Phone mobile platforms aren’t installed with the same set of ‘web safe’ fonts as those on PC and Apple Mac desktop machines. How the display of text works in practice: Ideally, for the text in a web page or email to display consistently regardless of where or how it’s opened, every device needs to have the chosen font installed or easily accessible. In fact, PC and Apple Mac desktop operating systems evolved to include a standard set of ‘web safe’ font-families common to both platforms for this very purpose. Should a font be used that isn’t installed or accessible, there are also pre-installed generic fall-back ‘serif’ and ‘sans-serif’ font families that can be used instead. However, the same cannot be said of the world of mobile devices. Because of the constraints of screen size, resolution, storage capacity and processing power, each mobile device operating system has developed its own specially-designed set of system fonts to make best use of limited resources. And the next slide illustrates just how limited the range of fonts are on iOS and Windows Phone - and how positively sparse on Android! Strictly speaking, the latest Android devices use just a single specially-designed system font called Droid. What to do: As long as you are happy with Android’s singular font and are careful when mixing graphics containing text with real text, there is still a useable sub-set of fonts common to both iOS and Windows Phone. Should all else fail, all mobile devices have a clear and legible serif and sans-serif serif alternatives. Is this an issue in any other email readers? No. See more details on the next page >>

23

Mobile device email applications Comparison of commonly used fonts on iOS, Android and Windows Phone mobile devices

24

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:

Contact us for a copy of: Email building best practice - a guide for designers

Plus the complete A-Z of everything we know! The Designer’s Guide to Building Templates

Find out more about NewZapp

To find out more about NewZapp Email Marketing you can:

Visit www.newzapp.com

Call us on 0845 612 5544

Email sales@newzapp.com

Contact us online

25