Email marketing best practice. We take a look at some of the most common email display issues that occur in various email readers and suggest workarounds for them.

2. 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

3. 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

4. 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

5. Quick look-up overview
Click on the red circles to take you to each email reader’s issue.
Support for Feature?
MicrosoftOutlook2007-2016
MicrosoftOutlook.com
Gmail/VirginMediaWebmail
OrangeWebmail
AoLMail
Yahoo!Mail
MozillaThunderbird
OperaMail
AppleMailforOSX
LotusNotes8.5
AppleMailforiOS
MailforAndroid
OutlookforWindowsPhone
Animated GIFs             
Borders on Images             
Absolute Middle
Image Alignment
            
Internal Anchor Links             
Link Colouring             
Text Colouring             
Font display             
Re-sized images             
4

6. 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

7. 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

8. 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

9. 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

10. 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

11. 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

12. 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

13. 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

14. 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

15. 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

16. 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

17. 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

18. 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

19. 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

20. 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

21. 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

22. 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

23. 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

24. 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

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

26. 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