1
Table of Contents
Why is email display an issue in email marketing? .......................................................
2
Why is email display an issue in email marketing?
Businesses and consumers use a wide variety of devices and email progr...
3
Expert Email Design
There are quite a few pitfalls to be aware of when creating and sending HTML email campaigns. The
Ne...
4
Desktop PC and Apple Mac email applications
Most PCs and Apple Macs come with a default email program pre-installed, whi...
5
Web and mobile device email readers
There are a number of free or subscription webmail and online email
readers availabl...
6
Creating your HTML email structure
When building HTML emails it is good practice to start with building
and testing the ...
7
What to include in your email <head> tag
Key <meta> tags
What to do …
 The following <meta> tag should be included as a...
8
What to include in your email <head> tag
Essential CSS <style> declarations
What to do …
 The following CSS styles shou...
9
What to include in your email <head> tag
CSS Media queries for responsive emails
What to do …
 CSS and Media Queries sh...
10
Using HTML tables to lay out your email
Stretching container table
What to do …
 Use a single-cell 100% width table as...
11
Using HTML tables to lay out your email
Using tables with multiple cells in your layout
What to do …
 Use tables with ...
12
Using HTML tables to lay out your email
Setting horizontal and vertical spacing between elements
What to do …
 For hor...
13
Using HTML tables to lay out your email
Using background colour fills in your email layout
What to do …
 Set backgroun...
14
Using HTML tables to lay out your email
Creating borders around table cells
What to do …
 Create consistent borders ar...
15
Adding graphic content to your email
Inserting images into your email layout
What to do …
 Best formats for email imag...
16
Adding graphic content to your email
Using background images in your email layout
What to do …
 Set background images ...
17
Styling and other features
Once the email’s layout structure has been created, fixed content
added, the next stage is t...
18
Formatting your email’s content
Setting styles for HTML ‘real text’ content
What to do …
 Set the default text styling...
19
Formatting your email’s content
Setting font-family for HTML text content
What to do …
 Limit your selection of primar...
20
Formatting your email’s content
Setting font-size for HTML text content
What to do …
 Use only pixel (px) units rather...
21
Formatting your email’s content
Setting color for HTML text content
What to do …
 Use either Hex (e.g. #FFCC00) or RGB...
22
Formatting your email’s content
Setting line-height for HTML text content
What to do …
 Use the line-height property i...
23
Formatting your email’s content
Setting text link styling
What to do …
 Set the default text link colour for your emai...
24
Extra reading
If you would like to know more about designing and coding entire email campaigns from scratch, or
about e...
Email building best practice - a guide for designers
Upcoming SlideShare
Loading in...5
×

Email building best practice - a guide for designers

1,813

Published on

Published in: Design, Technology, Business
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,813
On Slideshare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
20
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Email building best practice - a guide for designers

  1. 1. 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. 2. 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. 3. 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. 4. 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. 5. 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. 6. 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. 7. 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. 8. 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. 9. 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. 10. 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. 11. 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. 12. 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. 13. 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. 14. 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. 15. 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. 16. 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. 17. 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. 18. 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. 19. 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. 20. 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. 21. 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. 22. 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. 23. 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. 24. 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

×