Embed Size (px)
Citation preview
1
Table of Contents Why is email display an issue in email marketing? .......................................................................................................... 2
Expert Email Design .............................................................................................................................................................. 3
Windows PC and Apple Mac desktop email programs .................................................................................................. 4
Webmail and mobile device email apps ............................................................................................................................ 5
Creating your HTML email structure ................................................................................................................................. 6
Introduction ........................................................................................................................................................................ 6
What to include in your email <head> tag ........................................................................................................................ 7
<!doctype html> tag .......................................................................................................................................................... 7
Key <meta> tags ................................................................................................................................................................ 8
Essential CSS <style> declarations ................................................................................................................................. 9
CSS Media queries for responsive emails ................................................................................................................... 11
Using HTML tables to lay out your email ....................................................................................................................... 13
Stretching container table .............................................................................................................................................. 13
Use <table>s with multiple <th> and <td> cells in your layout .............................................................................. 14
Setting horizontal and vertical spacing between elements ..................................................................................... 16
Using background colour fills in your email layout ................................................................................................... 18
Creating colour borders around table cells ................................................................................................................ 19
Adding graphic content to your email ............................................................................................................................. 21
Inserting images into your email layout ...................................................................................................................... 21
Using background images in your email layout ......................................................................................................... 23
Styling and other features .................................................................................................................................................. 25
Formatting your email’s content ....................................................................................................................................... 26
Setting styles for HTML ‘real text’ content ................................................................................................................ 26
Setting font-family for HTML text content ................................................................................................................ 28
Setting font-size for HTML text content .................................................................................................................... 29
Setting color for HTML text content ........................................................................................................................... 30
Setting line-height for HTML text content ................................................................................................................. 31
Setting text link styling ................................................................................................................................................... 32
Extra reading ......................................................................................................................................................................... 33
2
Why is email display an issue in email marketing? Businesses and consumers use a wide variety of devices, email programs and apps (also called email clients or readers) including:
• Microsoft Outlook desktop program (Windows & Mac OS) • Microsoft Outlook.com webmail • Microsoft Office 365 Mail webmail • Windows Phone Mail app • Apple Mail desktop program (Mac OS) • IBM Notes desktop program (Windows & Mac OS) • Google Gmail, G Suite and Inbox webmail • Google Gmail, G Suite and Inbox apps (Android & iOS) • Android device manufacturers’ own email apps • Yahoo! Mail webmail • Virgin Media Mail (uses Yahoo! Mail’s
rendering engine) • AOL Mail webmail • Opera Mail desktop program • Mozilla Thunderbird desktop program
... and many 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 as many email readers as possible. So, it makes sense that your emails are tested thoroughly before sending in as many different email readers as possible. Online testing services, such as Litmus or Email on Acid, are a great way to do this without having multiple testing accounts, programs and devices of your own. However, bear in mind these tend to just present screenshots, which is great for checking layouts, but you will still need test in a few ‘live’ readers to check web links, sharing links etc. work correctly. With live webmail testing, you can use browser Code Inspectors to troubleshoot particularly tricky issues, and for responsive emails, sending test campaigns to various mobile devices will give you a better picture of how your email will actually behave in varying viewport sizes, operating systems, and apps.
3
Expert Email Design There are quite a few pitfalls to be aware of when creating and sending HTML email campaigns, and the NewZapp Design Team’s many years of experience helps us to ensure the best results across all major email readers when designing and building editable (re-usable) email templates for your NewZapp account. In this guide we use this experience to take a look at the best practices for avoiding or working around some of the most common display issues encountered when creating any 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 live or email tester proofing email addresses. A good level of HTML and CSS knowledge is assumed, including things like Media Queries, embedded and 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: Best Practice for Marketers – Email Display Issues
Plus download the PDF containing the complete A-Z of everything we know! How to… Building Templates
4
Windows PC and Apple Mac desktop email programs Most Windows 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 Mail and Outlook 2007, 2010, 2011, 2013 & 2016
Microsoft Mail comes as a standard installation with Microsoft Windows 10, but a lot of businesses install and use some version of Microsoft Outlook instead. The latest versions of Outlook, which use Microsoft Word to render HTML emails, are some of the more challenging readers to create emails for.
Apple Mail Comes as the standard installation with Apple Mac OS. The latest version is Apple Mail 10 and, from experience, tends to be less troublesome than most other email programs.
IBM Notes
Widely used by medium-to-large sized businesses, IBM Notes (formerly Lotus Notes) is just one part of IBM’s database-driven Domino suite. It uses its own HTML display engine for emails, and since 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
Webmail and mobile device email apps
As mentioned previously, there are a number of free or subscription-based browser-based email readers available to use directly in your desktop or mobile browser, each with its own way of interpreting HTML emails to consider. The most popular free web browser readers include: • Google Gmail and Inbox • Outlook.com • Yahoo! Mail • AOL Mail Mobile devices, especially Android-based, tend to come with their own email applications pre-installed, usually proprietary to the manufacturer. But in addition, the operating systems themselves have their own email apps you can use instead. Examples of mobile email applications: • Mail for Apple iOS • Google Gmail for Android • Google Inbox for Android • Mail for Windows Phone
Add to this the option of installing any number of third-party email apps via app stores, and you can see how crucial it is to know what your target audience is likely to use to read your email campaigns so you know what you need to test in. Modern HTML emails need to be designed to behave ‘responsively’, so they show one layout on wider view screens like desktop PCs, and another optimised layout on mobile devices, usually by stacking elements for easier reading. 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 Introduction 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 <!doctype html> tag What to do … The following <!doctype> tag should be included right at the top of your HTML code as a matter of course.
Why? If you’re using any CSS in your HTML email and expect to see consistent results, you need to tell the email readers which <!doctype> it should be using to interpret it correctly.
The HTML5 <!doctype html> declaration covers all modern email readers including those in web browsers and mobile device apps. Email readers that don’t support <!doctype> will simply remove or ignore it.
<!doctype html>
8
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:
• initial-scale=1.0 sets the initial zoom level to 100% when the email is first loaded;
• 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
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}
img, a img {border:none !important}
table, th, td, tr {color:inherit;font-family:inherit;font-
size:inherit;font-weight:normal}
th {padding:0 !important;vertical-align:top !important;}
[office365] button, [office365] div {display: block !important;}
</style>
Why? These styles ensure that email readers do not impose their own CSS on your layout.
.ReadMsgBody and the .ExternalClass selectors are specifically for Outlook.com and Office 365 webmail to stop the background fill container <table> collapsing. The td a and div a selectors stop email readers imposing their own link colours on your content - copy the link colour value used in the email <body> tag into here.
The img, a img selectors ensure that images display consistently with no borders (e.g. if they have links set on them).
If no default link colour is set, some email readers will impose their own default value
10
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. The font-weight:normal ensures that readers don’t impose their own font-weights on text within these table elements. The th selector overrides any values readers may have to set their own padding and alignment values on content. The [office365] selectors prevent images from having an unexplained gap appearing underneath them due to Outlook.com and Office 365 email readers treating all images as clickable button elements.
11
CSS Media queries for responsive emails What to do … CSS and @media media queries should be used in a <style> tag to alter the email layout for narrower mobile viewport widths. Embed your CSS in <style> tags in the <head> only. Split your CSS into multiple <style> blocks e,g essential CSS (see previous section) for all readers in the first block , @media{} query styles in the second. Do not use an @ declaration within another @ declaration – say, inside an @media{} query. Use the normal CSS ‘dot’ selector method along with the !important declaration e.g.
Minimise the formatting and spaces in the CSS to keep the <style> declaration as short as possible – ideally under 16,384kB. Why? Using media query code such as:
allows you to specify CSS that is only used on devices with view screens narrower than that specified.
table.responsive-table {width:100% !important}
@media screen and (max-device-width: 645px), screen and (max-width: 645px)
{
table.selector{…}
}
12
Support for CSS and Media Queries is almost universal for mobile devices, and is improving for desktop readers (although Microsoft Outlook desktop readers still seem set on ignoring it!). CSS placed anywhere other than in <style> tags in the <head> of an email is likely to be ignored by some readers such as Gmail. Gmail will delete the whole <style> block if it finds an error inside it, so having multiple <style> blocks ensures at least some code will remain. Gmail sees any @ declaration inside another @ declaration as an error, and will delete all the CSS code in that <style> block. The !important declaration prevents email readers from imposing their own CSS. Gmail will delete any CSS in the <head> that exceeds 16,384 kB, so minifying your code makes sense.
13
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> tag.
<table width=”100%” border=”0” cellspacing=”0” cellpadding=”0”>
<tr>
<td width=”100%” align=”center” valign=”top” bgcolor=”#FFFFFF”>
<!—// email content here //-->
</td>
</tr>
</table>
Why? Some email readers, especially on mobile devices, set their own default viewport background fill colour, so a 100% width container <table> with a bgcolor set on its <td> will stretch and fill all readers’ preview panes, including on mobile devices. Setting align and valign on the <td> tag is better supported by email readers than adding them to the <table> tag or using <center> tags.
Use a 100% width container table to set a background colour fill and alignment for inner content
14
Use <table>s with multiple <th> and <td> cells in your layout
What to do …
Use <table>s with single or multiple cells to define your email’s layout rather than <div>s or other HTML elements. You can nest tables within other tables. Never merge cells i.e. don’t use rowspan on <tr> or colspan on <td>. cellpadding, cellspacing and border on all tables should be set to “0”. Always set the horizontal and vertical alignment for any <td> that has content e.g. <td align=“left” valign=“top”>.
Why? Table layouts still give the most stable results across all HTML email readers. Some desktop email programs especially do not obey CSS rules and so will not render non-table elements that rely on CSS selectors such as <div>s as expected. Beware – having too many nested tables can give unpredictable results in some email readers. HTML attributes like rowspan, colspan, cellpadding, cellspacing and border are not universally supported and are best avoided. Each email reader’s default setting for <td> cell alignment may not be what you expect e.g. for Outlook.com the default horizontal alignment for <td> is ‘centered’ - so it’s best to set them explicitly to avoid any surprises.
Default alignment varies from reader to reader
15
For responsive emails, all these attributes are easily altered using CSS and Media Queries to give a better layout on narrower viewports. For example, you can make multiple <td>s in a single <tr> stack on narrow view screen by setting them to display:block.
16
Setting horizontal and vertical spacing between elements What to do …
For horizontal spacing, float narrower tables inside wider ones and align them horizontally as required. Alternatively, use extra table columns with set widths. For narrower columns, you should insert an invisible spacer image of the correct width to prop it open e.g.
For vertical spacing of 19px or less, use a fixed-height <td> containing an image of the same height as a spacer with a CSS style declaration. For spacing greater than 19px, you can use a character entity instead of a spacer image.
<table width=”400” border=”0” cellspacing=”0” cellpadding=”0”>
<tr>
<td width=”4” align=”center” valign=”top”> <img src=”shim4w.gif” alt=”
” width=”4” height=”1” style=”display:block” border=”0”> </td>
<td width=”392” align=”center” valign=”top”> … </td>
<td width=”4” align=”center” valign=”top”> <img src=”shim4w.gif” alt=”
” width=”4” height=”1” style=”display:block” border=”0”> </td>
</tr>
</table>
<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;”> <img src=”shim8h.gif” alt=” ”
width=”1” height=”8” style=”display:block” border=”0”> </td>
</tr>
</table>
17
Why? Avoid the use of CSS padding and margin as they give inconsistent results. An invisible spacer image is useful to prevent the column width being forced to collapse if the content expands for any reason. Fixed-height <td> cells with an accompanying CSS -webkit-text-size-adjust:none, -ms-text-size-adjust:none, font-size and line-height style declaration was developed as a reliable method for vertical spacing in Outlook 2013+ and works with all major email readers. -webkit-text-size-adjust:none, -ms-text-size-adjust:none; help prevent emails readers setting their own heights on the <td> content. Note that the space in front of -webkit- is important. 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. However, for vertical spacing of 19px or less it is important to use an image inside the <td> to prevent some versions of Outlook actually trying to impose a taller minimum height than desired. On heights greater than 19px, using a instead works fine. 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 too i.e. font-size and line-height.
18
Using background colour fills in your email layout What to do … Use the HTML bgcolor attribute in the first instance rather than CSS. You can set the bgcolor attribute in <table>, <th> or <td> tags to create a colour fill.
When nesting tables with multiple cells inside <td>s, consider whether you need the background colour fill on the container <table> or <td>, on the nested <table> tag itself, or on the nested <table>’s own individual <td>s - the final effect is different for each. Why? The HTML bgcolor attribute has wider support than the CSS background-color property.
Note that bgcolor set in <td>s will sit over the top of any bgcolor set in any parent <tr>, <table>, <div> or even <body> tag, as illustrated. Be aware that some email readers (like that used in Apple’s iOS) will allow the background fill of a parent cell to show through as thin borders on any child tables nested inside. This is especially noticeable on tables with multiple cells.
<table width=”300” border=”0” cellspacing=”0” cellpadding=”0”
bgcolor=”#CCCCCC”>
<tr>
<td align=”center” valign=”top” bgcolor=”#FF0000” > </td>
</tr>
</table>
Be aware that background colour fills can bleed through foreground colour fills in iOS
19
Creating colour borders around table cells What to do … Create consistent borders around table cells by using table nesting and empty row spacing:
• set the border colour as a fill in a <td> of a set width;
• set align=”center” in this <td>;
• place a 1 column 3 row <table> inside this <td> with a width narrower than the <td> by the exact thickness of the required border each side;
• set the top and bottom <td> heights of the narrower <table> to be the same as the required border thickness using the vertical spacer method - see previous section;
• finally, set the middle <td>’s fill colour.
Alternatively, it is possible to use an inline CSS style declaration on the <td> that needs a border, but be aware this does not work consistently in all readers:
Note that the width of the <td> is narrower than the <table> to account for the width of the border. Why? Experience has found that the nested table method described above gives the most consistent results in all readers.
Borders can be created purely using nested tables
<table width=”300” border=”0” cellspacing=”0” cellpadding=”0”>
<tr>
<td width=”290” align=”center” valign=”top” style=”border:5px solid
#FF4000;”> </td>
</tr>
</table>
20
Support for the HTML border attribute is patchy at best amongst most emails readers. The inline CSS style border method shown works best on single-cell tables with the same thickness, style and color all round. However, this method is still known to cause alignment issues in Outlook. Other email readers may show different border colours or even revert it black.
21
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 <td> with style=“display:block” in the <img /> tag. All images should be used at their original size with correct HTML width and height attributes set. For images 19px tall or less, the parent <td> needs to be treated as a vertical spacer - see previous section.
<td width=”200” 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=”breaker-image.png” width=”200”
height=”15” hspace=”0” vspace=”0” border=”0” style=”display:block” /> </td>
Why? Email readers struggle with formats like .bmp and .svg. Using style=”display:block” in the <img /> tags stop email readers inserting an unwanted gap under images.
However, this will cause multiple images in the same <td> to move to their own line – hence the need to place each image into its own <td>.
Using CSS display:block and placing images in their own <td> prevents sliced images from breaking apart
22
Many email readers will always show images at their original dimensions, regardless of the width and height set in the HTML or CSS style attributes, so it’s important that they are the right size for your email to start with. Also, with images turned off (say in an Outlook preview pane) setting the image’s width and height stops the image placeholders expanding uncontrollably and breaking the email layout.
Gaps can appear above or below images less than 20px tall unless the <td> uses the vertical spacer fix.
23
Using background images in your email layout What to do … Set background images in the <td> using the CSS background-image. A background colour fill should also be set. In Responsive emails where you need different images for wider and for narrower view screens, you can create an ‘image swap’:
• use the CSS background-image property to set a background image in a <td> that will show on narrower view screens;
• insert a fixed image in the same <td> and use CSS to hide it on narrower view screens and show it
on wider view screens.
<td width=”650” height=”75” align=”center” valign=”middle”
bgcolor=”#669900” style=”background-image:url('mobile-bg.png');”> <img
src=”desktop-image.png” width=”650” height=”75” alt=” ” style=”display:block”
class=”hide-on-mobile” /> </td>
Why? Note that CSS background-repeat is generally ignored by webmail and desktop email readers, so you cannot reliably set how the image will tile or be positioned within a <td> using CSS.
Ensure you have a fill colour set in the <td> as a fallback if background images are not supported
24
Email readers such as Outlook do actually ignore background images in <td>s, and email Previews may not allow images to download initially, so a backup bgcolor fill should be set as an alternative. For these readers that block background images in a <td>, and where an overall email background is required, a single CSS background image can be set in the email’s <body> tag as well as in the 100% width container <table>. Although this ensures the image will appear in all major readers, be aware that some email readers that will show both images.
25
Styling and other features Once the email’s layout structure has been created and the 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 HTML 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 >>
26
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 elements surrounding your text content, e.g. <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>
</body>
Why? Setting Default text styles 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 styles using CSS in the <head> of your email isn’t supported by all email readers, but inline CSS style declarations on individual HTML elements is. Avoid using standard HTML attributes in <font> tags as this is not always recognised – use inline CSS. Inline CSS set in elements immediately around text content takes precedence over other styling.
Email reader defaults will take over if inline styles are not included on the <td> and other elements surrounding HTML text
27
Avoid using ‘shorthand’ CSS notation for text styling – the full ‘longhand’ style declaration with each attribute defined separately and in full is more reliable. For responsive emails, since mobile devices generally have good CSS support, you can alter text formatting attributes on narrower view screens by using a Media Query @media set for narrow screen widths along with custom selectors, which can then be applied as classes to HTML elements – see previous section.
28
Setting font-family for HTML text content What to do … Limit your selection of primary and fall-back fonts in the font-family CSS property to web-safe examples for consistent results across most email readers e.g.
Why? Web-safe fonts are supported by the majority of email readers, apps 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.
style=”font-family: Arial, Helvetica, sans-serif; …”
style=”font-family: ’Times New Roman’, Georgia, sans-serif; …”
Example of font-families in Outlook 2016 on Windows 7
How they display in Apple iOS 11
How they display in Android 6
29
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. Use -webkit-text-size-adjust:none; -ms-text-size-adjust:none; at the very beginning of the inline CSS in that order, and include the space in front of -webkit-.
<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;”>Lorem ipsum sit amet dolore quora.</td>
Why? Setting explicit pixel px font sizes helps prevent email readers resizing your text content with unexpected results. Also, units such as points pt are best used for print.
Font-sizes smaller than 10px are not only difficult to read but may be flagged up by spam filters for this reason. Some email readers such as Outlook actually automatically increase 10px text to 11px, which can give unexpected layout issues. Using -webkit-text-size-adjust:none; -ms-text-size-adjust:none; in your inline CSS also helps prevents email readers altering your text size.
Conversely, beware of over-using larger font-sizes – these can be flagged up by spam filters for ‘shouting’. font-size is easily adjustable for responsive emails using CSS and Media Queries.
Email readers such as Outlook can add extra white-space in 11px text with unexpected results
30
Setting color for HTML text content What to do … Use either Hex (e.g. #FFCC00) or RGBA (e.g. rgb(192,45,67,0.7)) 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,1)). Ensure your text colour provides sufficient contrast against the background colour.
<td align=”left” valign=”top” bgcolor=”#FFFFFF” 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 amet dolor
quora.</td>
Why? Digital Hex or RGBa rather than Print CMYK 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 by spam filters. Text colours that are the same as or very close to the background fill will not only flag up on spam filters but provide poor accessibilty. It is recommended that an online contrast checker like WebAIM is used - aim for at least the WCAG ‘AA’ standard. color is easily adjusted for responsive emails using CSS and Media Queries.
Ensure your text colour provides sufficient contrast against the background
31
Setting line-height for HTML text content What to do …
Use the CSS line-height:normal; property in the inline CSS of elements containing text. Use mso-line-height-rule:exactly; directly in front of the CSS line-height property if setting a size other than normal. Use only pixel px units rather than pt, em or % values.
Why? Using CSS line-height:normal; ensures a consistent standard text line-heights across email readers, including Outlook. If setting a line-height other than normal, using px values gives the most consistent results. When doing this, using the mso-line-height-rule:exactly; prevents Outlook imposing its own value. CSS line-height is easily adjusted for responsive emails using Media Queries, especially useful for making vertical spacers different heights – be sure to also specify the same value for CSS height and font-size.
<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; mso-line-height-rule:exactly; line-
height:21px;”>Lorem ipsum sit amet dolore quora.</td>
32
Setting text link styling What to do … Always specify the default text link colour for your email in the HTML <body> tag, and in the <style> CSS declaration in the <head> – see previous section ‘Essential CSS <style> Declarations’. For fixed text links you will need to copy the inline style declaration from the surrounding <td> (or other surrounding element) into the <a> tag. Use the text-decoration property inside the <a> tag 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)) as your email link colour - use #000001 or rgb(0,0,1). Why? Setting your email’s default text link colour in the <body>, inside a <style> declaration in the <head>, and as inline styles in all <a> tags stops email readers applying their own default link text styling. Using text-decoration inside the <a> allows you to use different formatting for different links, e.g. you can choose certain links to be underlined and others not. Similarly you can set different text formatting for links - color, font-weight, font-style etc. Some email readers (e.g. Gmail) will turn any pure Black email links into their own default link colour. However, a small difference in the colour value 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
33
Extra reading If you would like to know more about designing and coding entire email campaigns from scratch, or about editable templates for use within a NewZapp account, contact us and ask for copies of our other related publications:
For more information on getting the most from your NewZapp account, visit our Knowledge Base or contact us on [email protected].
Download a PDF copy of: Best Practice for Marketers – Email Display Issues
Plus download the PDF containing the complete A-Z of everything we know! How To… Building Templates
