SlideShare une entreprise Scribd logo
1  sur  25
Télécharger pour lire hors ligne
1
Table of Contents
Why is email display an issue in email marketing? ................................................................................ 2
Expert Email Design............................................................................................................................. 3
Desktop PC and Apple Mac email applications...................................................................................... 4
Web and mobile device email readers.................................................................................................. 5
Creating your HTML email structure..................................................................................................... 6
What to include in your email <head> tag ......................................................................................... 7
Key <meta> tags ............................................................................................................................ 7
Essential CSS <style> declarations .................................................................................................. 8
CSS Media queries for responsive emails....................................................................................... 9
Using HTML tables to lay out your email ......................................................................................... 10
Stretching container table ........................................................................................................... 10
Using tables with multiple cells in your layout.............................................................................. 11
Setting horizontal and vertical spacing between elements............................................................ 12
Using background colour fills in your email layout ....................................................................... 13
Creating borders around table cells............................................................................................. 14
Adding graphic content to your email ............................................................................................. 15
Inserting images into your email layout ....................................................................................... 15
Using background images in your email layout ............................................................................ 16
Styling and other features.................................................................................................................. 17
Formatting your email’s content ..................................................................................................... 18
Setting styles for HTML ‘real text’ content .................................................................................... 18
Setting font-family for HTML text content ..................................................................................... 19
Setting font-size for HTML text content......................................................................................... 20
Setting color for HTML text content.............................................................................................. 21
Setting line-height for HTML text content...................................................................................... 22
Setting text link styling ................................................................................................................ 23
Extra reading..................................................................................................................................... 24
Find out more about NewZapp...................................................................................................... 24
2
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 and CSS code, and
each email program or app interprets this code slightly
differently. As a designer, the challenge is to create email
campaigns that are displayed as consistently as possible
across the majority of email readers.
It is crucial that your emails are tested by sending to a wide range of different email readers. The
easiest way to check layout issues is to use an online testing service such as Litmus or Email on Acid,
which present screenshots within a variety of email readers.
You should also send test campaigns to at least one or two live desktop or webmail email readers (e.g.
Outlook 2016, Gmail, Apple Mail) to be able to test things like web and sharing links, and to use browser
code inspectors to help troubleshoot issues.
For responsive emails it is also recommended that you send test campaigns to mobile devices running
Apple iOS 7+, Android 4.2+ and Windows Phone 7+ to give you a true picture of how your email will
actually behave in smaller viewports.
3
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 the best practices for avoiding or working around some of the most
common display issues encountered when creating an HTML email for sending via an Email Marketing
System (ESP). NewZapp, like most ESPs, gives you the ability to upload and test send your email to all
your proofing email addresses.
A good level of HTML and CSS knowledge is assumed, including things like Media Queries, inline CSS
styles and using HTML tables for page layout.
We also offer supporting guides for Email Marketers editing their email campaigns, and Designers
and Coders looking to create or edit their own HTML emails, particularly for use in the NewZapp
email marketing system.
Download a PDF copy of:
Common email display issues -
a guide for email marketers
Plus download the PDF
containing the complete
A-Z of everything we
know!
The Designer’s Guide to
Building Templates
4
Desktop PC and Apple Mac email applications
Most PCs and Apple Macs come with a default email program pre-installed, which can then be
configured to collect and display emails for any email address from any mail server.
There are also third-party desktop applications available including:
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 is 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-driven 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, albeit with a few small foibles.
5
Web and mobile device email readers
There are a number of free or subscription webmail and online email
readers available to use directly in your browser, each with its own
way of interpreting HTML emails to consider.
With mobile devices as with desktop computers, most come with
their own email applications pre-installed and specific to each
Operating System. Again, there is also the option of installing third-
party mail applications, usually via app stores.
Very often an HTML email will need to be designed to behave
‘responsively’ on mobile devices, at the very least by stacking
elements for easier reading on narrower screens.
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 outline some of the more important best practice techniques for
building HTML emails that will give the best results in all major email readers >>
6
Creating your HTML email structure
When building HTML emails it is good practice to start with building
and testing the complete template structure before going on to style
and add links etc to the actual email content.
This means:
 setting the correct content in the <head> of the email;
 using a 100% width HTML container table in the <body> to set
the background fill and email alignment in the reader
window;
 using nested tables and multiple table cells to define image and text content layout and spacing;
 inserting unformatted text and image content;
 if creating a responsive email, adding CSS Media Queries for the desired viewport widths
(breakpoints) then adding and testing the required classes on layout elements.
On the following pages we will cover best practice when using these key structural elements to start
creating your HTML email >>
7
What to include in your email <head> tag
Key <meta> tags
What to do …
 The following <meta> tag should be included as a matter of course:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 If you are designing a responsive email, you should also include these:
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
Why?
 If the Character Encoding (or Character Set)
for your email is not defined there is the risk
that some email readers may not display
special text characters properly.
 The viewport attribute allows you to take
control of mobile device viewports:
o initial-scale=1.0 sets the initial zoom level
to 100% when the email is first loaded.
o width=device-width sets the width of the email to follow the screen-width of the device. It
should be noted that for Windows Phone devices a separate CSS declaration is used to do
the same thing.
 Setting http-equiv=”X-UA-Compatible” content=”IE=edge” targets Windows Phone devices
specifically to prevent them rendering in ‘Quirks Mode’ and interpreting your email width
incorrectly.
Some email
readers default
character
encoding may
not render
special
characters
correctly
8
What to include in your email <head> tag
Essential CSS <style> declarations
What to do …
 The following CSS styles should be included between the <head> and </head> tags of your email
as a matter of course:
<style type="text/css">
.ReadMsgBody {width: 100%}
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass
div {line-height: 100%}
.ExternalClass {width: 100%}
td a, td a:link, td a:visited, td a:hover, td a:active, div a, div a:link, div a:visited, div a:hover, div a:active
{color:#000001;text-decoration:underline}
img, a img {border:none !important}
table, th, td, tr {color:inherit;font-family:inherit;font-size:inherit}
</style>
Why?
 For those email readers that do support CSS
declarations in the <head> of your email, these
styles ensure that they do not impose their own
CSS on your layout.
 .ReadMsgBody and the .ExternalClass selectors
are specifically for Outlook.com webmail to
stop the background fill container collapsing.
 The td a and div a selectors stop email readers imposing their own link colours on your content -
use the link colour value used in the email <body> tag here.
 The img, a img selectors ensure that images display consistently with no borders (e.g. if they have
links set on them).
 The table, th, td, tr selectors ensure that nested tables pick up the text styles set on the next
parent element that has an inline style declaration rather than using the browser defaults.
If no default link
colour is set,
some email
readers will
impose their own
default value
9
What to include in your email <head> tag
CSS Media queries for responsive emails
What to do …
 CSS and Media Queries should be used in the <style> tag to
alter the email layout for narrower mobile viewport widths.
 You must also include the @-ms-viewport class as shown.
<style type="text/css">
/* desktop reader CSS here */
@media screen and (max-device-width: 645px), screen and (max-
width: 645px) {
@-ms-viewport {width:device-width !important}
/* mobile CSS here */
}
</style>
 Use the CSS ‘attribute selector’ method along with ‘~=’ and the ‘!important’ declaration e.g.
Why?
 Support for CSS and Media Queries is almost universal for mobile devices.
 The @-ms-viewport CSS selector targets Windows Phone 8 devices to ensure emails fit the width
of their screens correctly.
 The CSS ‘attribute selector’ method stops email readers that recognise CSS but ignore Media
Query rules (e.g. Yahoo! webmail) implementing any responsive styles
 Using ‘~=’ in the attribute selector ensures that you can use multiple classes in HTML elements.
 The !important declaration prevents email readers from imposing their own styles
 Minimise formatting in the CSS to keep the <style> declaration as short as possible - email display
on Windows Phone 7 seems to have an issue otherwise.
table[class~='responsive-table'] {width:100% !important}
10
Using HTML tables to lay out your email
Stretching container table
What to do …
 Use a single-cell 100% width table as the first element within your email’s <body> tag.
 Set the colour you want as a background fill (including white) and the alignment on the <td> .
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="table-layout:fixed;">
<tr>
<td width="100%" align="center" valign="top" bgcolor="#FFFFFF"><!—// email content here //--></td>
</tr>
</table>
Why?
 Some email readers set their own default viewport background fill colour, so a 100% width
container table ensures the correct background colour as well as stretching to fill all readers’
preview panes including on mobile devices.
 Setting align and valign on the <td> tag is more reliable than adding them to the <table> tag or
using <center> tags.
 The style=”table-layout:fixed;” declaration is used to fix a bug in Yahoo! Mail which forced emails
to sit to the left of the preview pane.
Use a 100% width
container table to
set background
colour fill and
alignment for
inner content
11
Using HTML tables to lay out your email
Using tables with multiple cells in your layout
What to do …
 Use tables with single or multiple cells to define your email’s
layout.
 You can nest tables within other tables, but avoid nesting
more than 9 tables deep.
 Never merge cells (i.e. rowspan on <tr> or colspan on <td>).
 cellpadding, cellspacing and border= on all tables should be set to “0”.
 Always set the alignment for any <td> that has content (e.g. <td align=”left” valign=”top” >).
Why?
 Table layouts give the most stable results across all readers.
 Too many nested tables can give unpredictable results in some email readers.
 HTML attributes like rowspan, colspan, cellpadding, cellspacing and border give mixed results and
should be avoided.
 Each email reader’s default setting for cell
alignment may not be what you expect (e.g. for
Outlook.com the default horizontal alignment is
align=”center”) so it’s best to set them in the <td>
to avoid any surprises.
 For responsive emails all these attributes are
easily altered using CSS and Media Queries to
give a better layout on narrower viewports.
Default
alignment varies
from reader to
reader
12
Using HTML tables to lay out your email
Setting horizontal and vertical spacing between elements
What to do …
 For horizontal spacing, use narrower tables nested inside
wider ones or table columns with set widths.
 For narrower columns you should insert an invisible spacer
image of the correct width to prop it open.
 For vertical spacing, use a fixed-height <td> containing a
&nbsp; character entity and CSS style declaration like so:
<table width="100" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height=”8” style=" -webkit-text-size-adjust:none; -ms-text-size-adjust:none; font-size:8px; line-
height:8px;">&nbsp;</td>
</tr>
</table>
Why?
 You should avoid the use of CSS padding and margins as they give inconsistent results.
 An invisible spacer image is useful to prevent the space being forced to collapse.
 Fixed-height table cells with an accompanying CSS style declaration was developed as a reliable
method for vertical spacing in Outlook 2013+ and works with all major email readers.
 Note that It is important to use either a &nbsp; entity or an image to prop the cell open vertically.
 The –webkit-text-size-adjust and –ms-text-size-adjust CSS properties are crucial for stopping email
readers resizing cell content and therefore your spacer row height.
 For responsive emails, if you need to create a CSS declaration within a Media Query to alter the
height of a row be sure that you update all of the CSS properties i.e. font-size and line-height too.
13
Using HTML tables to lay out your email
Using background colour fills in your email layout
What to do …
 Set background colour fills only in <td>s.
 Use the HTML bgcolor attribute in the first instance, not CSS.
 When nesting tables with multiple cells inside <td>s you need to place the background colour fill
on the parent container <td> rather than on the nested table’s own individual cells.
<table width="300" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="300" align=”center” valign=”top” bgcolor=”#CCCCCC”>&nbsp;</td>
</tr>
</table>
Why?
 Background colour fills in <td>s have better support than setting them in the <table>, <tr> or
even <body> tags.
 The HTML attribute bgcolor also has wider support than the CSS background-color property.
 Some email readers (e.g. Mail for Android) have their own default background colour fill for their
viewport. It is therefore recommended that for
consistent results in all email readers you
should set a colour fill on the <td> of the 100%
width container table.
 Some email readers (like that used in Apple iOS)
will allow the background fill of a cell to show
through as borders on any tables nested inside
- especially noticeable on multiple-cell tables.
Be aware that
background
colour fills can
bleed through
foreground
colour fills in iOS
14
Using HTML tables to lay out your email
Creating borders around table cells
What to do …
 Create consistent borders around table cells by
using table nesting and empty row spacing:
o set the border colour as a fill in a <td>;
o place a 1 column 3 row table inside that
allowing space each side the thickness of
the required border;
o the top and bottom cell row heights of that table should be the same as the required
border thickness - use the vertical spacer method;
o finally, set the middle <td> fill colour.
 Alternatively, it is possible to use an inline CSS style declaration on the <td>:
<table width="300" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="296" align=”center” valign=”top” style="border:5px solid #FF4000;">&nbsp;</td></tr>
</table>
Why?
 Support for the HTML border attribute is patchy at best amongst most common emails readers.
 Testing has found the nested table method described above to give the most consistent results.
 Inline CSS borders work best on single-cell tables, with the same colour, thickness and style all
round.
 Note that this method is known to cause alignment issues in Outlook desktop applications.
 Other email readers may show different border colours or even revert it black.
Borders can be
created purely
using nested
tables
15
Adding graphic content to your email
Inserting images into your email layout
What to do …
 Best formats for email images are .jpg, .gif and .png.
 Images should be inserted into their own table cells with style=”display:block” in the <img> tag.
 All images should be used at their original size with correct HTML width and height attributes.
 For images 19px tall or less, the parent <td> needs to be treated as a vertical spacer:
<td height=”15” align=”center” valign=”middle” style=” –webkit-text-size-adjust:none; -ms-text-size-
adjust:none; font-size:15px; line-height:15px; display:block”>
<img src=”some-image.png” width=”200” height=”15” hspace=”0” vspace=”0” border=”0”
style=”display:block” />
</td>
Why?
 Using style=”display:block” in <img> tags stop email readers inserting a white gap under images.
 However, images in the same <td> will move to their own line; place each image in its own <td>.
Using CSS
display:block
prevents sliced
images from
breaking apart
 Many email readers will show images at their original dimensions regardless of the width and
height set - ensure they are the right size for your email to start with.
 With images turned off, setting width and height stops the placeholders breaking the email.
 A gap can appear above or below shorter images unless the <td> uses the vertical spacer fix.
16
Adding graphic content to your email
Using background images in your email layout
What to do …
 Set background images in the <td> using HTML background attribute – note that they will tile in
some web and desktop email readers.
 A background colour fill should be set as an alternative.
 In responsive emails, a fixed image can be hidden and an alternative background image shown –
use both the HTML background attribute and CSS background-image property as shown:
<td height=”15” align=”center” valign=”middle” bgcolor=”#669900” background="mobile-bg.png"
style="background-image:url('mobile-bg.png');">&nbsp;</td>
Why?
 You cannot reliably set how the image will tile or be positioned within a cell using CSS.
 Email readers such as Outlook desktop application or Lotus Notes will generally ignore
background images in a <td> so it is essential that a backup colour fill is set.
Ensure you have a
fill colour set in
the <td> as a
fallback if
background
images are not
supported
 For these applications, a single background image can be set in the email’s <body> tag.
 If you use background images in both the 100% container table <td> and the <body> tag be
aware that some email readers that will show both images.
 For responsive emails, placing the background image in both background and background-image
ensures it appears in all major email readers.
17
Styling and other features
Once the email’s layout structure has been created, fixed content
added, the next stage is to go back through and set the following:
 text and image links where required;
 text styling – font, colour, size, weight etc;
 alt and title text where required;
 for editable emails, this is the point where you need to define
editable areas using custom tags and other elements as
specified by your email service provider.
On the following pages we will cover best practice when adding these crucial properties to elements
in your HTML email layout >>
18
Formatting your email’s content
Setting styles for HTML ‘real text’ content
What to do …
 Set the default text styling for your email in the <body> tag using an inline CSS declaration.
 CSS formatting should be included in the <td> and any other HTML element enclosing content,
such as <span>, <p>, <a>, <div> and <font> tags.
<body … style="font-family:Arial, Helvetica, sans-serif; font-size:13px;"> …
<td align=”left” valign=”top” style=" -webkit-text-size-adjust:none; -ms-text-size-adjust:none; font-
family:Arial, Helvetica, sans-serif; font-size:14px; color:#993300; font-weight:normal; text-decoration:none;
line-height:18px;">Lorem ipsum <span style=”color:#FFCC00; font-weight:bold; text-
decoration:underline;”>sit amet dolore</span> quora.</td>
Why?
 Default text styling set in the <body> tag
ensures that any content that does not have
any formatting of its own does not revert to
browser defaults.
 Setting text formatting using CSS in the <head>
of your email doesn’t work in all email readers -
inline CSS style declarations on individual HTML
elements is more reliable.
 Avoid using standard HTML attributes in <font> tags as this is not always recognised.
 Inline CSS set in elements immediately around content takes precedence over any other styling.
 Avoid using ‘shorthand’ CSS notation for text styling – the full ‘longhand’ style declaration with
each attribute defined separately and in full is more reliable.
 In responsive emails, you can alter text formatting attributes by adding alternative styles to a
Media Query then setting classes on the relevant <td>.
Email reader
defaults will take
over if inline
styles are not
included on the
<td> and other
elements
surrounding
HTML text
19
Formatting your email’s content
Setting font-family for HTML text content
What to do …
 Limit your selection of primary and fall-back fonts in the font-family property to web-safe
examples for consistent results across most email readers e.g.
Why?
 Web-safe fonts are supported by the majority of desktop reader applications and online webmail
programs.
 However, it should be noted that most mobile devices have a very limited range of fonts
installed, so your styling may fall-back to each device’s own serif or sans-serif font.
Example of font-families
in Outlook 2016
How they display in
Apple Mail iOS 8
How they display in
Android 4.2 Mail
How they display in
Windows Phone 8
style="font-family:Arial, Helvetica, sans-serif; …”
style=”font-family:’Times New Roman’, Georgia, sans-serif; …”
20
Formatting your email’s content
Setting font-size for HTML text content
What to do …
 Use only pixel (px) units rather than pt, em or % values.
 Avoid using sizes below 10px, and limit the use of larger font sizes e.g. 32px or more - consider
using a graphic for these instead.
<td align=”left” valign=”top” style=" -webkit-text-size-adjust:none; -ms-text-size-adjust:none; font-family:Arial,
Helvetica, sans-serif; font-size:14px; color:#993300; line-height:30px;">Lorem ipsum sit amet dolore
quora.</td>
Why?
 Font-sizes smaller than 10px are not only
difficult to read but may be flagged up by spam
filters for this reason.
 Conversely, over-large font-sizes may be
flagged by spam filters for ‘shouting’.
 Email readers such as the Outlook desktop
application will increase the letter-spacing on
11px text, potentially breaking your email layout by overflowing onto more lines.
 font-size is easily adjusted for responsive emails using CSS and Media Queries.
Email readers
such as Outlook
can add extra
white-space in
11px text with
unexpected
results
21
Formatting your email’s content
Setting color for HTML text content
What to do …
 Use either Hex (e.g. #FFCC00) or RGB (e.g. rgb(192,45,67)) values in the color CSS property.
 Use longhand CSS notation for Hex values, never the shortened version.
 Avoid using bright red colours (e.g. #FF0000, rgb(255,0,0)).
 Ensure that your text colour has sufficient contrast against the background colour for
accessibility – aim for at least the WCAG ‘AA’ standard.
<td align=”left” valign=”top” style=" -webkit-text-size-adjust:none; -ms-text-size-adjust:none; font-family:Arial,
Helvetica, sans-serif; font-size:14px; color:#993300; line-height:30px;">Lorem ipsum sit amet dolore
quora.</td>
Why?
 Digital rather than print colour definitions
should be used for digital communications.
 Shorthand Hex values are not supported in the
majority of email readers.
 The use of a bright red colour on text can be
flagged up on spam filters.
 Similarly, text colours that are the same as or
very close to the background fill will also flag up on spam filters.
 It is recommended that an online contrast checker like WebAIM is used.
 color is easily adjusted for responsive emails using CSS and Media Queries.
Ensure your text
color provides
sufficient
contrast against
the background
22
Formatting your email’s content
Setting line-height for HTML text content
What to do …
 Use the line-height property in the inline CSS of elements
containing text or image content.
 Use only pixel (px) units rather than pt, em or % values.
<td align=”left” valign=”top” style=" -webkit-text-size-adjust:none; -ms-
text-size-adjust:none; font-family:Arial, Helvetica, sans-serif; font-
size:14px; color:#993300; line-height:30px;">Lorem ipsum sit amet
dolore quora.</td>
 For a <td> containing an image under 19px tall, use line-height along with height and font-size to
ensure the cell remains the correct height – similar to the vertical spacer fix.
Why?
 Using the line-height property with pixel (px) values gives the most consistent results across all
the major email readers.
 line-height is easily adjusted for responsive emails using CSS and Media Queries – especially
useful for adjusting vertical spacing when altered along with height and font-size.
23
Formatting your email’s content
Setting text link styling
What to do …
 Set the default text link colour for your email in both the HTML <body> tag and in a style
declaration in the <head> – see Essential CSS <style> declarations.
 For fixed text links you will need to copy the inline style declaration from the <td> or other
surrounding element into the <a> tag.
 Add the text-decoration property to control whether the link is underlined or not and ensure any
underline is the correct colour.
 Do not use black (#000000 or rgb(0,0,0)) for your email link colour.
Why?
 Setting your email’s default text link colour in
both the <body> and a style declaration in the
<head> as well as repeating inline styles in all
<a> tags stops email readers applying their own
default link styling.
 You can also use different formatting for
different links, e.g. you can choose certain links
to be underlined and others not, use different
colours and font-weights etc.
 Some email readers (e.g. Gmail) will turn a pure black email link into their own default link
colour. However, a small difference in the colour value (e.g. #000001 or rgb(0,0,1)) is enough fool
the reader into ignoring it.
<td align=”left” valign=”top” style=" -webkit-text-size-adjust:none; -ms-text-size-adjust:none; font-family:Arial,
Helvetica, sans-serif; font-size:14px; color:#993300;">Lorem ipsum sit <a style=" -webkit-text-size-
adjust:none; -ms-text-size-adjust:none; font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#993300;
text-decoration:underline;">amet dolore quora</a>.</td>
Funny things can
happen to your
text links if you
don’t set an
inline CSS style
on the <a> tag
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:
Download a PDF copy of:
Common email display issues -
a guide for email marketers
Plus download the PDF
containing 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

Contenu connexe

Tendances

20 Tips to Improve Productivity with Microsoft Teams Accel365
20 Tips to Improve Productivity with Microsoft Teams Accel36520 Tips to Improve Productivity with Microsoft Teams Accel365
20 Tips to Improve Productivity with Microsoft Teams Accel365Russ Basiura
 
Outlook 2007 tutorial
Outlook 2007 tutorialOutlook 2007 tutorial
Outlook 2007 tutorialFadel Abbas
 
Office 365 Productivity Tips -- Mayhem in Minneapolis, The Rematch
Office 365 Productivity Tips -- Mayhem in Minneapolis, The RematchOffice 365 Productivity Tips -- Mayhem in Minneapolis, The Rematch
Office 365 Productivity Tips -- Mayhem in Minneapolis, The RematchChristian Buckley
 
Top10 outlook2007mailtips
Top10 outlook2007mailtipsTop10 outlook2007mailtips
Top10 outlook2007mailtipsoutlookbill
 
Outlook Module 1 Sept 28, 2007
Outlook Module 1  Sept 28, 2007Outlook Module 1  Sept 28, 2007
Outlook Module 1 Sept 28, 2007Bitsy Griffin
 
Microsoft Office 2016
Microsoft Office 2016Microsoft Office 2016
Microsoft Office 2016Deana Strain
 
1 class 7 ms office application
1 class 7 ms office application1 class 7 ms office application
1 class 7 ms office applicationAbu Abdur Rahman
 
Comparison for Office Versions
Comparison for Office VersionsComparison for Office Versions
Comparison for Office Versionsjessiethe3rd
 
Justmeans power point
Justmeans power pointJustmeans power point
Justmeans power pointjustmeanscsr
 
Creating email templates and adhoc reports ins zoom power user conference ja...
Creating email templates  and adhoc reports ins zoom power user conference ja...Creating email templates  and adhoc reports ins zoom power user conference ja...
Creating email templates and adhoc reports ins zoom power user conference ja...INSZoom
 
A presentation on ms office
A presentation on ms officeA presentation on ms office
A presentation on ms officeVijayraj Daksh
 
Handy MS Office 2013 Workbook
Handy MS Office 2013 WorkbookHandy MS Office 2013 Workbook
Handy MS Office 2013 WorkbookS Khawaja
 

Tendances (20)

Notacd04
Notacd04Notacd04
Notacd04
 
Form 1 Term 2 Week 6.2
Form 1   Term 2   Week 6.2Form 1   Term 2   Week 6.2
Form 1 Term 2 Week 6.2
 
Microsoft Outlook 2007
Microsoft Outlook 2007Microsoft Outlook 2007
Microsoft Outlook 2007
 
20 Tips to Improve Productivity with Microsoft Teams Accel365
20 Tips to Improve Productivity with Microsoft Teams Accel36520 Tips to Improve Productivity with Microsoft Teams Accel365
20 Tips to Improve Productivity with Microsoft Teams Accel365
 
Outlook 2007 tutorial
Outlook 2007 tutorialOutlook 2007 tutorial
Outlook 2007 tutorial
 
What's New in Office 2016
What's New in Office 2016What's New in Office 2016
What's New in Office 2016
 
Office 365 Productivity Tips -- Mayhem in Minneapolis, The Rematch
Office 365 Productivity Tips -- Mayhem in Minneapolis, The RematchOffice 365 Productivity Tips -- Mayhem in Minneapolis, The Rematch
Office 365 Productivity Tips -- Mayhem in Minneapolis, The Rematch
 
Top10 outlook2007mailtips
Top10 outlook2007mailtipsTop10 outlook2007mailtips
Top10 outlook2007mailtips
 
Outlook 2007 Get Out Of Your Inbox
Outlook 2007  Get Out Of Your  InboxOutlook 2007  Get Out Of Your  Inbox
Outlook 2007 Get Out Of Your Inbox
 
Outlook Module 1 Sept 28, 2007
Outlook Module 1  Sept 28, 2007Outlook Module 1  Sept 28, 2007
Outlook Module 1 Sept 28, 2007
 
Email design
Email designEmail design
Email design
 
Microsoft Office 2016
Microsoft Office 2016Microsoft Office 2016
Microsoft Office 2016
 
1 class 7 ms office application
1 class 7 ms office application1 class 7 ms office application
1 class 7 ms office application
 
Office 2010 Info
Office 2010 InfoOffice 2010 Info
Office 2010 Info
 
Comparison for Office Versions
Comparison for Office VersionsComparison for Office Versions
Comparison for Office Versions
 
Justmeans power point
Justmeans power pointJustmeans power point
Justmeans power point
 
Creating email templates and adhoc reports ins zoom power user conference ja...
Creating email templates  and adhoc reports ins zoom power user conference ja...Creating email templates  and adhoc reports ins zoom power user conference ja...
Creating email templates and adhoc reports ins zoom power user conference ja...
 
Computer and ms word
Computer and ms wordComputer and ms word
Computer and ms word
 
A presentation on ms office
A presentation on ms officeA presentation on ms office
A presentation on ms office
 
Handy MS Office 2013 Workbook
Handy MS Office 2013 WorkbookHandy MS Office 2013 Workbook
Handy MS Office 2013 Workbook
 

Similaire à Email building best practice - a guide for designers

Tips & tricks to render your email correctly on all devices
Tips & tricks to render your email correctly on all devicesTips & tricks to render your email correctly on all devices
Tips & tricks to render your email correctly on all devicesCopernica BV
 
Email/Ad/Marketing 20100130
Email/Ad/Marketing 20100130Email/Ad/Marketing 20100130
Email/Ad/Marketing 20100130dsoprea
 
HTML email best practices
HTML email best practicesHTML email best practices
HTML email best practicesJeffrey Barke
 
HTML email best practices
HTML email best practicesHTML email best practices
HTML email best practicesJeffrey Barke
 
Back to the future: creating and testing responsive email templates
Back to the future: creating and testing responsive email templatesBack to the future: creating and testing responsive email templates
Back to the future: creating and testing responsive email templatesLyn Muldrow
 
Ecircle email-best-practice-design-perfect-email-newsletter
Ecircle email-best-practice-design-perfect-email-newsletterEcircle email-best-practice-design-perfect-email-newsletter
Ecircle email-best-practice-design-perfect-email-newsletterRodrigo Aguirre
 
12 steps for better emailing results v3
12 steps for better emailing results v312 steps for better emailing results v3
12 steps for better emailing results v3François-Yves Prigent
 
Internet Tutorial 02
Internet  Tutorial 02Internet  Tutorial 02
Internet Tutorial 02dpd
 
EmailCoE_10715_DesignSystem
EmailCoE_10715_DesignSystemEmailCoE_10715_DesignSystem
EmailCoE_10715_DesignSystemEric Appelbaum
 
Email Design Workshop - Don't Let Bad Email Code Ruin Your Day or Your Results
Email Design Workshop - Don't Let Bad Email Code Ruin Your Day or Your ResultsEmail Design Workshop - Don't Let Bad Email Code Ruin Your Day or Your Results
Email Design Workshop - Don't Let Bad Email Code Ruin Your Day or Your ResultsShana Masterson
 
Mobile Email User Experience Strategies
Mobile Email User Experience StrategiesMobile Email User Experience Strategies
Mobile Email User Experience StrategiesAnushri Thanedar
 
Getting Started in Custom Programming for Talent Sourcing
Getting Started in Custom Programming for Talent SourcingGetting Started in Custom Programming for Talent Sourcing
Getting Started in Custom Programming for Talent SourcingGlenn Gutmacher
 
ETB - Template Build Process
ETB - Template Build ProcessETB - Template Build Process
ETB - Template Build ProcessFab Capodicasa
 
EMarketing Techniques Conference_Emailmarketingessentials May2008
EMarketing Techniques Conference_Emailmarketingessentials May2008EMarketing Techniques Conference_Emailmarketingessentials May2008
EMarketing Techniques Conference_Emailmarketingessentials May2008Corporate College
 
Pure360 Creative Guidelines for Email Marketing
Pure360 Creative Guidelines for Email MarketingPure360 Creative Guidelines for Email Marketing
Pure360 Creative Guidelines for Email MarketingPure360
 

Similaire à Email building best practice - a guide for designers (20)

Tips & tricks to render your email correctly on all devices
Tips & tricks to render your email correctly on all devicesTips & tricks to render your email correctly on all devices
Tips & tricks to render your email correctly on all devices
 
Email/Ad/Marketing 20100130
Email/Ad/Marketing 20100130Email/Ad/Marketing 20100130
Email/Ad/Marketing 20100130
 
HTML email best practices
HTML email best practicesHTML email best practices
HTML email best practices
 
HTML email best practices
HTML email best practicesHTML email best practices
HTML email best practices
 
Creative Guidelines
Creative GuidelinesCreative Guidelines
Creative Guidelines
 
Back to the future: creating and testing responsive email templates
Back to the future: creating and testing responsive email templatesBack to the future: creating and testing responsive email templates
Back to the future: creating and testing responsive email templates
 
Ecircle email-best-practice-design-perfect-email-newsletter
Ecircle email-best-practice-design-perfect-email-newsletterEcircle email-best-practice-design-perfect-email-newsletter
Ecircle email-best-practice-design-perfect-email-newsletter
 
12 steps for better emailing results v3
12 steps for better emailing results v312 steps for better emailing results v3
12 steps for better emailing results v3
 
Nt1330 Unit 7
Nt1330 Unit 7Nt1330 Unit 7
Nt1330 Unit 7
 
Internet Tutorial 02
Internet  Tutorial 02Internet  Tutorial 02
Internet Tutorial 02
 
EmailCoE_10715_DesignSystem
EmailCoE_10715_DesignSystemEmailCoE_10715_DesignSystem
EmailCoE_10715_DesignSystem
 
Email Design Workshop - Don't Let Bad Email Code Ruin Your Day or Your Results
Email Design Workshop - Don't Let Bad Email Code Ruin Your Day or Your ResultsEmail Design Workshop - Don't Let Bad Email Code Ruin Your Day or Your Results
Email Design Workshop - Don't Let Bad Email Code Ruin Your Day or Your Results
 
Email design guide
Email design guideEmail design guide
Email design guide
 
Mobile Email User Experience Strategies
Mobile Email User Experience StrategiesMobile Email User Experience Strategies
Mobile Email User Experience Strategies
 
Getting Started in Custom Programming for Talent Sourcing
Getting Started in Custom Programming for Talent SourcingGetting Started in Custom Programming for Talent Sourcing
Getting Started in Custom Programming for Talent Sourcing
 
Html newsletter layout 24 tips for a better html
Html newsletter layout   24 tips for a better htmlHtml newsletter layout   24 tips for a better html
Html newsletter layout 24 tips for a better html
 
ETB - Template Build Process
ETB - Template Build ProcessETB - Template Build Process
ETB - Template Build Process
 
Trigger Emails BigD17
Trigger Emails BigD17Trigger Emails BigD17
Trigger Emails BigD17
 
EMarketing Techniques Conference_Emailmarketingessentials May2008
EMarketing Techniques Conference_Emailmarketingessentials May2008EMarketing Techniques Conference_Emailmarketingessentials May2008
EMarketing Techniques Conference_Emailmarketingessentials May2008
 
Pure360 Creative Guidelines for Email Marketing
Pure360 Creative Guidelines for Email MarketingPure360 Creative Guidelines for Email Marketing
Pure360 Creative Guidelines for Email Marketing
 

Plus de VRAMP Employee Engagement

Plus de VRAMP Employee Engagement (6)

VRAMP Employee Engagement
VRAMP Employee EngagementVRAMP Employee Engagement
VRAMP Employee Engagement
 
Why Responsive Email Content is like Water
Why Responsive Email Content is like WaterWhy Responsive Email Content is like Water
Why Responsive Email Content is like Water
 
NewZapp-Factsheet-NewZapp-vs-MailChimp
NewZapp-Factsheet-NewZapp-vs-MailChimpNewZapp-Factsheet-NewZapp-vs-MailChimp
NewZapp-Factsheet-NewZapp-vs-MailChimp
 
NewZapp-Factsheet-What-is-NewZapp
NewZapp-Factsheet-What-is-NewZappNewZapp-Factsheet-What-is-NewZapp
NewZapp-Factsheet-What-is-NewZapp
 
3 Killer Secrets of Email Marketing
3 Killer Secrets of Email Marketing3 Killer Secrets of Email Marketing
3 Killer Secrets of Email Marketing
 
Making the most of Email Marketing
Making the most of Email MarketingMaking the most of Email Marketing
Making the most of Email Marketing
 

Dernier

Dubai Call Girls Pro Domain O525547819 Call Girls Dubai Doux
Dubai Call Girls Pro Domain O525547819 Call Girls Dubai DouxDubai Call Girls Pro Domain O525547819 Call Girls Dubai Doux
Dubai Call Girls Pro Domain O525547819 Call Girls Dubai Douxkojalkojal131
 
WAEC Carpentry and Joinery Past Questions
WAEC Carpentry and Joinery Past QuestionsWAEC Carpentry and Joinery Past Questions
WAEC Carpentry and Joinery Past QuestionsCharles Obaleagbon
 
Cheap Rate ➥8448380779 ▻Call Girls In Huda City Centre Gurgaon
Cheap Rate ➥8448380779 ▻Call Girls In Huda City Centre GurgaonCheap Rate ➥8448380779 ▻Call Girls In Huda City Centre Gurgaon
Cheap Rate ➥8448380779 ▻Call Girls In Huda City Centre GurgaonDelhi Call girls
 
Top Rated Pune Call Girls Koregaon Park ⟟ 6297143586 ⟟ Call Me For Genuine S...
Top Rated  Pune Call Girls Koregaon Park ⟟ 6297143586 ⟟ Call Me For Genuine S...Top Rated  Pune Call Girls Koregaon Park ⟟ 6297143586 ⟟ Call Me For Genuine S...
Top Rated Pune Call Girls Koregaon Park ⟟ 6297143586 ⟟ Call Me For Genuine S...Call Girls in Nagpur High Profile
 
Fashion trends before and after covid.pptx
Fashion trends before and after covid.pptxFashion trends before and after covid.pptx
Fashion trends before and after covid.pptxVanshNarang19
 
Call Girls in Kalkaji Delhi 8264348440 call girls ❤️
Call Girls in Kalkaji Delhi 8264348440 call girls ❤️Call Girls in Kalkaji Delhi 8264348440 call girls ❤️
Call Girls in Kalkaji Delhi 8264348440 call girls ❤️soniya singh
 
VIP Call Girl Amravati Aashi 8250192130 Independent Escort Service Amravati
VIP Call Girl Amravati Aashi 8250192130 Independent Escort Service AmravatiVIP Call Girl Amravati Aashi 8250192130 Independent Escort Service Amravati
VIP Call Girl Amravati Aashi 8250192130 Independent Escort Service AmravatiSuhani Kapoor
 
Recommendable # 971589162217 # philippine Young Call Girls in Dubai By Marina...
Recommendable # 971589162217 # philippine Young Call Girls in Dubai By Marina...Recommendable # 971589162217 # philippine Young Call Girls in Dubai By Marina...
Recommendable # 971589162217 # philippine Young Call Girls in Dubai By Marina...home
 
CALL ON ➥8923113531 🔝Call Girls Kalyanpur Lucknow best Female service 🧵
CALL ON ➥8923113531 🔝Call Girls Kalyanpur Lucknow best Female service  🧵CALL ON ➥8923113531 🔝Call Girls Kalyanpur Lucknow best Female service  🧵
CALL ON ➥8923113531 🔝Call Girls Kalyanpur Lucknow best Female service 🧵anilsa9823
 
VIP Russian Call Girls in Gorakhpur Deepika 8250192130 Independent Escort Ser...
VIP Russian Call Girls in Gorakhpur Deepika 8250192130 Independent Escort Ser...VIP Russian Call Girls in Gorakhpur Deepika 8250192130 Independent Escort Ser...
VIP Russian Call Girls in Gorakhpur Deepika 8250192130 Independent Escort Ser...Suhani Kapoor
 
VIP Kolkata Call Girl Gariahat 👉 8250192130 Available With Room
VIP Kolkata Call Girl Gariahat 👉 8250192130  Available With RoomVIP Kolkata Call Girl Gariahat 👉 8250192130  Available With Room
VIP Kolkata Call Girl Gariahat 👉 8250192130 Available With Roomdivyansh0kumar0
 
SCRIP Lua HTTP PROGRACMACION PLC WECON CA
SCRIP Lua HTTP PROGRACMACION PLC  WECON CASCRIP Lua HTTP PROGRACMACION PLC  WECON CA
SCRIP Lua HTTP PROGRACMACION PLC WECON CANestorGamez6
 
Cheap Rate ➥8448380779 ▻Call Girls In Iffco Chowk Gurgaon
Cheap Rate ➥8448380779 ▻Call Girls In Iffco Chowk GurgaonCheap Rate ➥8448380779 ▻Call Girls In Iffco Chowk Gurgaon
Cheap Rate ➥8448380779 ▻Call Girls In Iffco Chowk GurgaonDelhi Call girls
 
Verified Trusted Call Girls Adugodi💘 9352852248 Good Looking standard Profil...
Verified Trusted Call Girls Adugodi💘 9352852248  Good Looking standard Profil...Verified Trusted Call Girls Adugodi💘 9352852248  Good Looking standard Profil...
Verified Trusted Call Girls Adugodi💘 9352852248 Good Looking standard Profil...kumaririma588
 
(AISHA) Ambegaon Khurd Call Girls Just Call 7001035870 [ Cash on Delivery ] P...
(AISHA) Ambegaon Khurd Call Girls Just Call 7001035870 [ Cash on Delivery ] P...(AISHA) Ambegaon Khurd Call Girls Just Call 7001035870 [ Cash on Delivery ] P...
(AISHA) Ambegaon Khurd Call Girls Just Call 7001035870 [ Cash on Delivery ] P...ranjana rawat
 
NO1 Trending kala jadu Love Marriage Black Magic Punjab Powerful Black Magic ...
NO1 Trending kala jadu Love Marriage Black Magic Punjab Powerful Black Magic ...NO1 Trending kala jadu Love Marriage Black Magic Punjab Powerful Black Magic ...
NO1 Trending kala jadu Love Marriage Black Magic Punjab Powerful Black Magic ...Amil baba
 
VIP Russian Call Girls in Saharanpur Deepika 8250192130 Independent Escort Se...
VIP Russian Call Girls in Saharanpur Deepika 8250192130 Independent Escort Se...VIP Russian Call Girls in Saharanpur Deepika 8250192130 Independent Escort Se...
VIP Russian Call Girls in Saharanpur Deepika 8250192130 Independent Escort Se...Suhani Kapoor
 
Chapter 19_DDA_TOD Policy_First Draft 2012.pdf
Chapter 19_DDA_TOD Policy_First Draft 2012.pdfChapter 19_DDA_TOD Policy_First Draft 2012.pdf
Chapter 19_DDA_TOD Policy_First Draft 2012.pdfParomita Roy
 

Dernier (20)

Dubai Call Girls Pro Domain O525547819 Call Girls Dubai Doux
Dubai Call Girls Pro Domain O525547819 Call Girls Dubai DouxDubai Call Girls Pro Domain O525547819 Call Girls Dubai Doux
Dubai Call Girls Pro Domain O525547819 Call Girls Dubai Doux
 
Call Girls Service Mukherjee Nagar @9999965857 Delhi 🫦 No Advance VVIP 🍎 SER...
Call Girls Service Mukherjee Nagar @9999965857 Delhi 🫦 No Advance  VVIP 🍎 SER...Call Girls Service Mukherjee Nagar @9999965857 Delhi 🫦 No Advance  VVIP 🍎 SER...
Call Girls Service Mukherjee Nagar @9999965857 Delhi 🫦 No Advance VVIP 🍎 SER...
 
WAEC Carpentry and Joinery Past Questions
WAEC Carpentry and Joinery Past QuestionsWAEC Carpentry and Joinery Past Questions
WAEC Carpentry and Joinery Past Questions
 
Cheap Rate ➥8448380779 ▻Call Girls In Huda City Centre Gurgaon
Cheap Rate ➥8448380779 ▻Call Girls In Huda City Centre GurgaonCheap Rate ➥8448380779 ▻Call Girls In Huda City Centre Gurgaon
Cheap Rate ➥8448380779 ▻Call Girls In Huda City Centre Gurgaon
 
Top Rated Pune Call Girls Koregaon Park ⟟ 6297143586 ⟟ Call Me For Genuine S...
Top Rated  Pune Call Girls Koregaon Park ⟟ 6297143586 ⟟ Call Me For Genuine S...Top Rated  Pune Call Girls Koregaon Park ⟟ 6297143586 ⟟ Call Me For Genuine S...
Top Rated Pune Call Girls Koregaon Park ⟟ 6297143586 ⟟ Call Me For Genuine S...
 
Fashion trends before and after covid.pptx
Fashion trends before and after covid.pptxFashion trends before and after covid.pptx
Fashion trends before and after covid.pptx
 
Call Girls in Kalkaji Delhi 8264348440 call girls ❤️
Call Girls in Kalkaji Delhi 8264348440 call girls ❤️Call Girls in Kalkaji Delhi 8264348440 call girls ❤️
Call Girls in Kalkaji Delhi 8264348440 call girls ❤️
 
VIP Call Girl Amravati Aashi 8250192130 Independent Escort Service Amravati
VIP Call Girl Amravati Aashi 8250192130 Independent Escort Service AmravatiVIP Call Girl Amravati Aashi 8250192130 Independent Escort Service Amravati
VIP Call Girl Amravati Aashi 8250192130 Independent Escort Service Amravati
 
Recommendable # 971589162217 # philippine Young Call Girls in Dubai By Marina...
Recommendable # 971589162217 # philippine Young Call Girls in Dubai By Marina...Recommendable # 971589162217 # philippine Young Call Girls in Dubai By Marina...
Recommendable # 971589162217 # philippine Young Call Girls in Dubai By Marina...
 
CALL ON ➥8923113531 🔝Call Girls Kalyanpur Lucknow best Female service 🧵
CALL ON ➥8923113531 🔝Call Girls Kalyanpur Lucknow best Female service  🧵CALL ON ➥8923113531 🔝Call Girls Kalyanpur Lucknow best Female service  🧵
CALL ON ➥8923113531 🔝Call Girls Kalyanpur Lucknow best Female service 🧵
 
VIP Russian Call Girls in Gorakhpur Deepika 8250192130 Independent Escort Ser...
VIP Russian Call Girls in Gorakhpur Deepika 8250192130 Independent Escort Ser...VIP Russian Call Girls in Gorakhpur Deepika 8250192130 Independent Escort Ser...
VIP Russian Call Girls in Gorakhpur Deepika 8250192130 Independent Escort Ser...
 
VIP Kolkata Call Girl Gariahat 👉 8250192130 Available With Room
VIP Kolkata Call Girl Gariahat 👉 8250192130  Available With RoomVIP Kolkata Call Girl Gariahat 👉 8250192130  Available With Room
VIP Kolkata Call Girl Gariahat 👉 8250192130 Available With Room
 
SCRIP Lua HTTP PROGRACMACION PLC WECON CA
SCRIP Lua HTTP PROGRACMACION PLC  WECON CASCRIP Lua HTTP PROGRACMACION PLC  WECON CA
SCRIP Lua HTTP PROGRACMACION PLC WECON CA
 
escort service sasti (*~Call Girls in Prasad Nagar Metro❤️9953056974
escort service sasti (*~Call Girls in Prasad Nagar Metro❤️9953056974escort service sasti (*~Call Girls in Prasad Nagar Metro❤️9953056974
escort service sasti (*~Call Girls in Prasad Nagar Metro❤️9953056974
 
Cheap Rate ➥8448380779 ▻Call Girls In Iffco Chowk Gurgaon
Cheap Rate ➥8448380779 ▻Call Girls In Iffco Chowk GurgaonCheap Rate ➥8448380779 ▻Call Girls In Iffco Chowk Gurgaon
Cheap Rate ➥8448380779 ▻Call Girls In Iffco Chowk Gurgaon
 
Verified Trusted Call Girls Adugodi💘 9352852248 Good Looking standard Profil...
Verified Trusted Call Girls Adugodi💘 9352852248  Good Looking standard Profil...Verified Trusted Call Girls Adugodi💘 9352852248  Good Looking standard Profil...
Verified Trusted Call Girls Adugodi💘 9352852248 Good Looking standard Profil...
 
(AISHA) Ambegaon Khurd Call Girls Just Call 7001035870 [ Cash on Delivery ] P...
(AISHA) Ambegaon Khurd Call Girls Just Call 7001035870 [ Cash on Delivery ] P...(AISHA) Ambegaon Khurd Call Girls Just Call 7001035870 [ Cash on Delivery ] P...
(AISHA) Ambegaon Khurd Call Girls Just Call 7001035870 [ Cash on Delivery ] P...
 
NO1 Trending kala jadu Love Marriage Black Magic Punjab Powerful Black Magic ...
NO1 Trending kala jadu Love Marriage Black Magic Punjab Powerful Black Magic ...NO1 Trending kala jadu Love Marriage Black Magic Punjab Powerful Black Magic ...
NO1 Trending kala jadu Love Marriage Black Magic Punjab Powerful Black Magic ...
 
VIP Russian Call Girls in Saharanpur Deepika 8250192130 Independent Escort Se...
VIP Russian Call Girls in Saharanpur Deepika 8250192130 Independent Escort Se...VIP Russian Call Girls in Saharanpur Deepika 8250192130 Independent Escort Se...
VIP Russian Call Girls in Saharanpur Deepika 8250192130 Independent Escort Se...
 
Chapter 19_DDA_TOD Policy_First Draft 2012.pdf
Chapter 19_DDA_TOD Policy_First Draft 2012.pdfChapter 19_DDA_TOD Policy_First Draft 2012.pdf
Chapter 19_DDA_TOD Policy_First Draft 2012.pdf
 

Email building best practice - a guide for designers

  • 1.
  • 2. 1 Table of Contents Why is email display an issue in email marketing? ................................................................................ 2 Expert Email Design............................................................................................................................. 3 Desktop PC and Apple Mac email applications...................................................................................... 4 Web and mobile device email readers.................................................................................................. 5 Creating your HTML email structure..................................................................................................... 6 What to include in your email <head> tag ......................................................................................... 7 Key <meta> tags ............................................................................................................................ 7 Essential CSS <style> declarations .................................................................................................. 8 CSS Media queries for responsive emails....................................................................................... 9 Using HTML tables to lay out your email ......................................................................................... 10 Stretching container table ........................................................................................................... 10 Using tables with multiple cells in your layout.............................................................................. 11 Setting horizontal and vertical spacing between elements............................................................ 12 Using background colour fills in your email layout ....................................................................... 13 Creating borders around table cells............................................................................................. 14 Adding graphic content to your email ............................................................................................. 15 Inserting images into your email layout ....................................................................................... 15 Using background images in your email layout ............................................................................ 16 Styling and other features.................................................................................................................. 17 Formatting your email’s content ..................................................................................................... 18 Setting styles for HTML ‘real text’ content .................................................................................... 18 Setting font-family for HTML text content ..................................................................................... 19 Setting font-size for HTML text content......................................................................................... 20 Setting color for HTML text content.............................................................................................. 21 Setting line-height for HTML text content...................................................................................... 22 Setting text link styling ................................................................................................................ 23 Extra reading..................................................................................................................................... 24 Find out more about NewZapp...................................................................................................... 24
  • 3. 2 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 and CSS code, and each email program or app interprets this code slightly differently. As a designer, the challenge is to create email campaigns that are displayed as consistently as possible across the majority of email readers. It is crucial that your emails are tested by sending to a wide range of different email readers. The easiest way to check layout issues is to use an online testing service such as Litmus or Email on Acid, which present screenshots within a variety of email readers. You should also send test campaigns to at least one or two live desktop or webmail email readers (e.g. Outlook 2016, Gmail, Apple Mail) to be able to test things like web and sharing links, and to use browser code inspectors to help troubleshoot issues. For responsive emails it is also recommended that you send test campaigns to mobile devices running Apple iOS 7+, Android 4.2+ and Windows Phone 7+ to give you a true picture of how your email will actually behave in smaller viewports.
  • 4. 3 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 the best practices for avoiding or working around some of the most common display issues encountered when creating an HTML email for sending via an Email Marketing System (ESP). NewZapp, like most ESPs, gives you the ability to upload and test send your email to all your proofing email addresses. A good level of HTML and CSS knowledge is assumed, including things like Media Queries, inline CSS styles and using HTML tables for page layout. We also offer supporting guides for Email Marketers editing their email campaigns, and Designers and Coders looking to create or edit their own HTML emails, particularly for use in the NewZapp email marketing system. Download a PDF copy of: Common email display issues - a guide for email marketers Plus download the PDF containing the complete A-Z of everything we know! The Designer’s Guide to Building Templates
  • 5. 4 Desktop PC and Apple Mac email applications Most PCs and Apple Macs come with a default email program pre-installed, which can then be configured to collect and display emails for any email address from any mail server. There are also third-party desktop applications available including: 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 is 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-driven 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, albeit with a few small foibles.
  • 6. 5 Web and mobile device email readers There are a number of free or subscription webmail and online email readers available to use directly in your browser, each with its own way of interpreting HTML emails to consider. With mobile devices as with desktop computers, most come with their own email applications pre-installed and specific to each Operating System. Again, there is also the option of installing third- party mail applications, usually via app stores. Very often an HTML email will need to be designed to behave ‘responsively’ on mobile devices, at the very least by stacking elements for easier reading on narrower screens. 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 outline some of the more important best practice techniques for building HTML emails that will give the best results in all major email readers >>
  • 7. 6 Creating your HTML email structure When building HTML emails it is good practice to start with building and testing the complete template structure before going on to style and add links etc to the actual email content. This means:  setting the correct content in the <head> of the email;  using a 100% width HTML container table in the <body> to set the background fill and email alignment in the reader window;  using nested tables and multiple table cells to define image and text content layout and spacing;  inserting unformatted text and image content;  if creating a responsive email, adding CSS Media Queries for the desired viewport widths (breakpoints) then adding and testing the required classes on layout elements. On the following pages we will cover best practice when using these key structural elements to start creating your HTML email >>
  • 8. 7 What to include in your email <head> tag Key <meta> tags What to do …  The following <meta> tag should be included as a matter of course: <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  If you are designing a responsive email, you should also include these: <meta name="viewport" content="initial-scale=1.0, width=device-width" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> Why?  If the Character Encoding (or Character Set) for your email is not defined there is the risk that some email readers may not display special text characters properly.  The viewport attribute allows you to take control of mobile device viewports: o initial-scale=1.0 sets the initial zoom level to 100% when the email is first loaded. o width=device-width sets the width of the email to follow the screen-width of the device. It should be noted that for Windows Phone devices a separate CSS declaration is used to do the same thing.  Setting http-equiv=”X-UA-Compatible” content=”IE=edge” targets Windows Phone devices specifically to prevent them rendering in ‘Quirks Mode’ and interpreting your email width incorrectly. Some email readers default character encoding may not render special characters correctly
  • 9. 8 What to include in your email <head> tag Essential CSS <style> declarations What to do …  The following CSS styles should be included between the <head> and </head> tags of your email as a matter of course: <style type="text/css"> .ReadMsgBody {width: 100%} .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%} .ExternalClass {width: 100%} td a, td a:link, td a:visited, td a:hover, td a:active, div a, div a:link, div a:visited, div a:hover, div a:active {color:#000001;text-decoration:underline} img, a img {border:none !important} table, th, td, tr {color:inherit;font-family:inherit;font-size:inherit} </style> Why?  For those email readers that do support CSS declarations in the <head> of your email, these styles ensure that they do not impose their own CSS on your layout.  .ReadMsgBody and the .ExternalClass selectors are specifically for Outlook.com webmail to stop the background fill container collapsing.  The td a and div a selectors stop email readers imposing their own link colours on your content - use the link colour value used in the email <body> tag here.  The img, a img selectors ensure that images display consistently with no borders (e.g. if they have links set on them).  The table, th, td, tr selectors ensure that nested tables pick up the text styles set on the next parent element that has an inline style declaration rather than using the browser defaults. If no default link colour is set, some email readers will impose their own default value
  • 10. 9 What to include in your email <head> tag CSS Media queries for responsive emails What to do …  CSS and Media Queries should be used in the <style> tag to alter the email layout for narrower mobile viewport widths.  You must also include the @-ms-viewport class as shown. <style type="text/css"> /* desktop reader CSS here */ @media screen and (max-device-width: 645px), screen and (max- width: 645px) { @-ms-viewport {width:device-width !important} /* mobile CSS here */ } </style>  Use the CSS ‘attribute selector’ method along with ‘~=’ and the ‘!important’ declaration e.g. Why?  Support for CSS and Media Queries is almost universal for mobile devices.  The @-ms-viewport CSS selector targets Windows Phone 8 devices to ensure emails fit the width of their screens correctly.  The CSS ‘attribute selector’ method stops email readers that recognise CSS but ignore Media Query rules (e.g. Yahoo! webmail) implementing any responsive styles  Using ‘~=’ in the attribute selector ensures that you can use multiple classes in HTML elements.  The !important declaration prevents email readers from imposing their own styles  Minimise formatting in the CSS to keep the <style> declaration as short as possible - email display on Windows Phone 7 seems to have an issue otherwise. table[class~='responsive-table'] {width:100% !important}
  • 11. 10 Using HTML tables to lay out your email Stretching container table What to do …  Use a single-cell 100% width table as the first element within your email’s <body> tag.  Set the colour you want as a background fill (including white) and the alignment on the <td> . <table width="100%" border="0" cellspacing="0" cellpadding="0" style="table-layout:fixed;"> <tr> <td width="100%" align="center" valign="top" bgcolor="#FFFFFF"><!—// email content here //--></td> </tr> </table> Why?  Some email readers set their own default viewport background fill colour, so a 100% width container table ensures the correct background colour as well as stretching to fill all readers’ preview panes including on mobile devices.  Setting align and valign on the <td> tag is more reliable than adding them to the <table> tag or using <center> tags.  The style=”table-layout:fixed;” declaration is used to fix a bug in Yahoo! Mail which forced emails to sit to the left of the preview pane. Use a 100% width container table to set background colour fill and alignment for inner content
  • 12. 11 Using HTML tables to lay out your email Using tables with multiple cells in your layout What to do …  Use tables with single or multiple cells to define your email’s layout.  You can nest tables within other tables, but avoid nesting more than 9 tables deep.  Never merge cells (i.e. rowspan on <tr> or colspan on <td>).  cellpadding, cellspacing and border= on all tables should be set to “0”.  Always set the alignment for any <td> that has content (e.g. <td align=”left” valign=”top” >). Why?  Table layouts give the most stable results across all readers.  Too many nested tables can give unpredictable results in some email readers.  HTML attributes like rowspan, colspan, cellpadding, cellspacing and border give mixed results and should be avoided.  Each email reader’s default setting for cell alignment may not be what you expect (e.g. for Outlook.com the default horizontal alignment is align=”center”) so it’s best to set them in the <td> to avoid any surprises.  For responsive emails all these attributes are easily altered using CSS and Media Queries to give a better layout on narrower viewports. Default alignment varies from reader to reader
  • 13. 12 Using HTML tables to lay out your email Setting horizontal and vertical spacing between elements What to do …  For horizontal spacing, use narrower tables nested inside wider ones or table columns with set widths.  For narrower columns you should insert an invisible spacer image of the correct width to prop it open.  For vertical spacing, use a fixed-height <td> containing a &nbsp; character entity and CSS style declaration like so: <table width="100" border="0" cellspacing="0" cellpadding="0"> <tr> <td height=”8” style=" -webkit-text-size-adjust:none; -ms-text-size-adjust:none; font-size:8px; line- height:8px;">&nbsp;</td> </tr> </table> Why?  You should avoid the use of CSS padding and margins as they give inconsistent results.  An invisible spacer image is useful to prevent the space being forced to collapse.  Fixed-height table cells with an accompanying CSS style declaration was developed as a reliable method for vertical spacing in Outlook 2013+ and works with all major email readers.  Note that It is important to use either a &nbsp; entity or an image to prop the cell open vertically.  The –webkit-text-size-adjust and –ms-text-size-adjust CSS properties are crucial for stopping email readers resizing cell content and therefore your spacer row height.  For responsive emails, if you need to create a CSS declaration within a Media Query to alter the height of a row be sure that you update all of the CSS properties i.e. font-size and line-height too.
  • 14. 13 Using HTML tables to lay out your email Using background colour fills in your email layout What to do …  Set background colour fills only in <td>s.  Use the HTML bgcolor attribute in the first instance, not CSS.  When nesting tables with multiple cells inside <td>s you need to place the background colour fill on the parent container <td> rather than on the nested table’s own individual cells. <table width="300" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="300" align=”center” valign=”top” bgcolor=”#CCCCCC”>&nbsp;</td> </tr> </table> Why?  Background colour fills in <td>s have better support than setting them in the <table>, <tr> or even <body> tags.  The HTML attribute bgcolor also has wider support than the CSS background-color property.  Some email readers (e.g. Mail for Android) have their own default background colour fill for their viewport. It is therefore recommended that for consistent results in all email readers you should set a colour fill on the <td> of the 100% width container table.  Some email readers (like that used in Apple iOS) will allow the background fill of a cell to show through as borders on any tables nested inside - especially noticeable on multiple-cell tables. Be aware that background colour fills can bleed through foreground colour fills in iOS
  • 15. 14 Using HTML tables to lay out your email Creating borders around table cells What to do …  Create consistent borders around table cells by using table nesting and empty row spacing: o set the border colour as a fill in a <td>; o place a 1 column 3 row table inside that allowing space each side the thickness of the required border; o the top and bottom cell row heights of that table should be the same as the required border thickness - use the vertical spacer method; o finally, set the middle <td> fill colour.  Alternatively, it is possible to use an inline CSS style declaration on the <td>: <table width="300" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="296" align=”center” valign=”top” style="border:5px solid #FF4000;">&nbsp;</td></tr> </table> Why?  Support for the HTML border attribute is patchy at best amongst most common emails readers.  Testing has found the nested table method described above to give the most consistent results.  Inline CSS borders work best on single-cell tables, with the same colour, thickness and style all round.  Note that this method is known to cause alignment issues in Outlook desktop applications.  Other email readers may show different border colours or even revert it black. Borders can be created purely using nested tables
  • 16. 15 Adding graphic content to your email Inserting images into your email layout What to do …  Best formats for email images are .jpg, .gif and .png.  Images should be inserted into their own table cells with style=”display:block” in the <img> tag.  All images should be used at their original size with correct HTML width and height attributes.  For images 19px tall or less, the parent <td> needs to be treated as a vertical spacer: <td height=”15” align=”center” valign=”middle” style=” –webkit-text-size-adjust:none; -ms-text-size- adjust:none; font-size:15px; line-height:15px; display:block”> <img src=”some-image.png” width=”200” height=”15” hspace=”0” vspace=”0” border=”0” style=”display:block” /> </td> Why?  Using style=”display:block” in <img> tags stop email readers inserting a white gap under images.  However, images in the same <td> will move to their own line; place each image in its own <td>. Using CSS display:block prevents sliced images from breaking apart  Many email readers will show images at their original dimensions regardless of the width and height set - ensure they are the right size for your email to start with.  With images turned off, setting width and height stops the placeholders breaking the email.  A gap can appear above or below shorter images unless the <td> uses the vertical spacer fix.
  • 17. 16 Adding graphic content to your email Using background images in your email layout What to do …  Set background images in the <td> using HTML background attribute – note that they will tile in some web and desktop email readers.  A background colour fill should be set as an alternative.  In responsive emails, a fixed image can be hidden and an alternative background image shown – use both the HTML background attribute and CSS background-image property as shown: <td height=”15” align=”center” valign=”middle” bgcolor=”#669900” background="mobile-bg.png" style="background-image:url('mobile-bg.png');">&nbsp;</td> Why?  You cannot reliably set how the image will tile or be positioned within a cell using CSS.  Email readers such as Outlook desktop application or Lotus Notes will generally ignore background images in a <td> so it is essential that a backup colour fill is set. Ensure you have a fill colour set in the <td> as a fallback if background images are not supported  For these applications, a single background image can be set in the email’s <body> tag.  If you use background images in both the 100% container table <td> and the <body> tag be aware that some email readers that will show both images.  For responsive emails, placing the background image in both background and background-image ensures it appears in all major email readers.
  • 18. 17 Styling and other features Once the email’s layout structure has been created, fixed content added, the next stage is to go back through and set the following:  text and image links where required;  text styling – font, colour, size, weight etc;  alt and title text where required;  for editable emails, this is the point where you need to define editable areas using custom tags and other elements as specified by your email service provider. On the following pages we will cover best practice when adding these crucial properties to elements in your HTML email layout >>
  • 19. 18 Formatting your email’s content Setting styles for HTML ‘real text’ content What to do …  Set the default text styling for your email in the <body> tag using an inline CSS declaration.  CSS formatting should be included in the <td> and any other HTML element enclosing content, such as <span>, <p>, <a>, <div> and <font> tags. <body … style="font-family:Arial, Helvetica, sans-serif; font-size:13px;"> … <td align=”left” valign=”top” style=" -webkit-text-size-adjust:none; -ms-text-size-adjust:none; font- family:Arial, Helvetica, sans-serif; font-size:14px; color:#993300; font-weight:normal; text-decoration:none; line-height:18px;">Lorem ipsum <span style=”color:#FFCC00; font-weight:bold; text- decoration:underline;”>sit amet dolore</span> quora.</td> Why?  Default text styling set in the <body> tag ensures that any content that does not have any formatting of its own does not revert to browser defaults.  Setting text formatting using CSS in the <head> of your email doesn’t work in all email readers - inline CSS style declarations on individual HTML elements is more reliable.  Avoid using standard HTML attributes in <font> tags as this is not always recognised.  Inline CSS set in elements immediately around content takes precedence over any other styling.  Avoid using ‘shorthand’ CSS notation for text styling – the full ‘longhand’ style declaration with each attribute defined separately and in full is more reliable.  In responsive emails, you can alter text formatting attributes by adding alternative styles to a Media Query then setting classes on the relevant <td>. Email reader defaults will take over if inline styles are not included on the <td> and other elements surrounding HTML text
  • 20. 19 Formatting your email’s content Setting font-family for HTML text content What to do …  Limit your selection of primary and fall-back fonts in the font-family property to web-safe examples for consistent results across most email readers e.g. Why?  Web-safe fonts are supported by the majority of desktop reader applications and online webmail programs.  However, it should be noted that most mobile devices have a very limited range of fonts installed, so your styling may fall-back to each device’s own serif or sans-serif font. Example of font-families in Outlook 2016 How they display in Apple Mail iOS 8 How they display in Android 4.2 Mail How they display in Windows Phone 8 style="font-family:Arial, Helvetica, sans-serif; …” style=”font-family:’Times New Roman’, Georgia, sans-serif; …”
  • 21. 20 Formatting your email’s content Setting font-size for HTML text content What to do …  Use only pixel (px) units rather than pt, em or % values.  Avoid using sizes below 10px, and limit the use of larger font sizes e.g. 32px or more - consider using a graphic for these instead. <td align=”left” valign=”top” style=" -webkit-text-size-adjust:none; -ms-text-size-adjust:none; font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#993300; line-height:30px;">Lorem ipsum sit amet dolore quora.</td> Why?  Font-sizes smaller than 10px are not only difficult to read but may be flagged up by spam filters for this reason.  Conversely, over-large font-sizes may be flagged by spam filters for ‘shouting’.  Email readers such as the Outlook desktop application will increase the letter-spacing on 11px text, potentially breaking your email layout by overflowing onto more lines.  font-size is easily adjusted for responsive emails using CSS and Media Queries. Email readers such as Outlook can add extra white-space in 11px text with unexpected results
  • 22. 21 Formatting your email’s content Setting color for HTML text content What to do …  Use either Hex (e.g. #FFCC00) or RGB (e.g. rgb(192,45,67)) values in the color CSS property.  Use longhand CSS notation for Hex values, never the shortened version.  Avoid using bright red colours (e.g. #FF0000, rgb(255,0,0)).  Ensure that your text colour has sufficient contrast against the background colour for accessibility – aim for at least the WCAG ‘AA’ standard. <td align=”left” valign=”top” style=" -webkit-text-size-adjust:none; -ms-text-size-adjust:none; font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#993300; line-height:30px;">Lorem ipsum sit amet dolore quora.</td> Why?  Digital rather than print colour definitions should be used for digital communications.  Shorthand Hex values are not supported in the majority of email readers.  The use of a bright red colour on text can be flagged up on spam filters.  Similarly, text colours that are the same as or very close to the background fill will also flag up on spam filters.  It is recommended that an online contrast checker like WebAIM is used.  color is easily adjusted for responsive emails using CSS and Media Queries. Ensure your text color provides sufficient contrast against the background
  • 23. 22 Formatting your email’s content Setting line-height for HTML text content What to do …  Use the line-height property in the inline CSS of elements containing text or image content.  Use only pixel (px) units rather than pt, em or % values. <td align=”left” valign=”top” style=" -webkit-text-size-adjust:none; -ms- text-size-adjust:none; font-family:Arial, Helvetica, sans-serif; font- size:14px; color:#993300; line-height:30px;">Lorem ipsum sit amet dolore quora.</td>  For a <td> containing an image under 19px tall, use line-height along with height and font-size to ensure the cell remains the correct height – similar to the vertical spacer fix. Why?  Using the line-height property with pixel (px) values gives the most consistent results across all the major email readers.  line-height is easily adjusted for responsive emails using CSS and Media Queries – especially useful for adjusting vertical spacing when altered along with height and font-size.
  • 24. 23 Formatting your email’s content Setting text link styling What to do …  Set the default text link colour for your email in both the HTML <body> tag and in a style declaration in the <head> – see Essential CSS <style> declarations.  For fixed text links you will need to copy the inline style declaration from the <td> or other surrounding element into the <a> tag.  Add the text-decoration property to control whether the link is underlined or not and ensure any underline is the correct colour.  Do not use black (#000000 or rgb(0,0,0)) for your email link colour. Why?  Setting your email’s default text link colour in both the <body> and a style declaration in the <head> as well as repeating inline styles in all <a> tags stops email readers applying their own default link styling.  You can also use different formatting for different links, e.g. you can choose certain links to be underlined and others not, use different colours and font-weights etc.  Some email readers (e.g. Gmail) will turn a pure black email link into their own default link colour. However, a small difference in the colour value (e.g. #000001 or rgb(0,0,1)) is enough fool the reader into ignoring it. <td align=”left” valign=”top” style=" -webkit-text-size-adjust:none; -ms-text-size-adjust:none; font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#993300;">Lorem ipsum sit <a style=" -webkit-text-size- adjust:none; -ms-text-size-adjust:none; font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#993300; text-decoration:underline;">amet dolore quora</a>.</td> Funny things can happen to your text links if you don’t set an inline CSS style on the <a> tag
  • 25. 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: Download a PDF copy of: Common email display issues - a guide for email marketers Plus download the PDF containing 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