HTML Fails: What No One Tells You About Email HTML
2 Today s Webinar Presenter Kate McDonough Campaign Manager at PostUp Worked with various ESPs: Constant Contact, Campaign Monitor, ExactTarget, Distribion Questions from today s webinar will be held at the end. kmcdonough@postup.com
3 Today s Agenda Some basic tips and pitfalls to avoid: The Anatomy of an Email DOCTYPES Table Properties Tags and Capitalization Alt Text & Which Clients Display Images by Default Misuse of <center> and <br> Tags Copying & Pasting HTML
The Anatomy of an Email 4
5 The Anatomy of an Email All emails have a basic skeletal structure Ignoring the structure and misplacing the bones can lead to rendering problems Not all elements of the skeleton must be used, but they should be in the same order
6 The Anatomy of an Email <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>this is the title of your document, when viewed as a webpage some browsers will show this</title> <style type="text/css"> * { padding: 0px; border: none; line-height: normal; outline: none; list-style: none; -webkit-text-size-adjust: none; } </style> </head> <body marginwidth="0" marginheight="0" style="width: 100%!important;-webkit-textsize-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; " offset="0" topmargin="0" leftmargin="0" bgcolor="#ffffff"> <table align="center" border="0" cellpadding="0" cellspacing"0">
7 The Anatomy of an Email <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>this is the title of your document, when viewed as a webpage some browsers will show this</title> <style type="text/css"> * { padding: 0px; border: none; line-height: normal; outline: none; list-style: none; -webkit-text-size-adjust: none; } </style> </head> <body marginwidth="0" marginheight="0" style="width: 100%!important;-webkit-textsize-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; " offset="0" topmargin="0" leftmargin="0" bgcolor="#ffffff"> <table align="center" border="0" cellpadding="0" cellspacing"0">
8 The Anatomy of an Email <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>this is the title of your document, when viewed as a webpage some browsers will show this</title> <style type="text/css"> * { padding: 0px; border: none; line-height: normal; outline: none; list-style: none; -webkit-text-size-adjust: none; } </style> </head> <body marginwidth="0" marginheight="0" style="width: 100%!important;-webkit-textsize-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; " offset="0" topmargin="0" leftmargin="0" bgcolor="#ffffff"> <table align="center" border="0" cellpadding="0" cellspacing"0">
9 The Anatomy of an Email <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>this is the title of your document, when viewed as a webpage some browsers will show this</title> <style type="text/css"> * { padding: 0px; border: none; line-height: normal; outline: none; list-style: none; -webkit-text-size-adjust: none; } </style> </head> <body marginwidth="0" marginheight="0" style="width: 100%!important;-webkit-textsize-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; " offset="0" topmargin="0" leftmargin="0" bgcolor="#ffffff"> <table align="center" border="0" cellpadding="0" cellspacing"0">
10 The Anatomy of an Email <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>this is the title of your document, when viewed as a webpage some browsers will show this</title> <style type="text/css"> * { padding: 0px; border: none; line-height: normal; outline: none; list-style: none; -webkit-text-size-adjust: none; } </style> </head> <body marginwidth="0" marginheight="0" style="width: 100%!important;-webkit-textsize-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; " offset="0" topmargin="0" leftmargin="0" bgcolor="#ffffff"> <table align="center" border="0" cellpadding="0" cellspacing"0">
11 The Anatomy of an Email <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>this is the title of your document, when viewed as a webpage some browsers will show this</title> <style type="text/css"> * { padding: 0px; border: none; line-height: normal; outline: none; list-style: none; -webkit-text-size-adjust: none; } </style> </head> <body marginwidth="0" marginheight="0" style="width: 100%!important;-webkit-textsize-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; " offset="0" topmargin="0" leftmargin="0" bgcolor="#ffffff"> <table align="center" border="0" cellpadding="0" cellspacing"0">
12 The Anatomy of an Email <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>this is the title of your document, when viewed as a webpage some browsers will show this</title> <style type="text/css"> * { padding: 0px; border: none; line-height: normal; outline: none; list-style: none; -webkit-text-size-adjust: none; } </style> </head> <body marginwidth="0" marginheight="0" style="width: 100%!important;-webkit-textsize-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; " offset="0" topmargin="0" leftmargin="0" bgcolor="#ffffff"> <table align="center" border="0" cellpadding="0" cellspacing"0">
13 The Anatomy of an Email <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>this is the title of your document, when viewed as a webpage some browsers will show this</title> <style type="text/css"> * { padding: 0px; border: none; line-height: normal; outline: none; list-style: none; -webkit-text-size-adjust: none; } </style> </head> <body marginwidth="0" marginheight="0" style="width: 100%!important;-webkit-textsize-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; " offset="0" topmargin="0" leftmargin="0" bgcolor="#ffffff"> <table align="center" border="0" cellpadding="0" cellspacing"0">
DOCTYPES 14
15 Why Use a DOCTYPE? DOCTYPES should be used in all emails and be placed before the <html> tag Some web clients will strip out the DOCTYPES Subtle differences in how email clients render HTML emails with different DOCTYPES 8 variations
16 The Best DOCTYPE for Email XHTML 1.0 transitional: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1- transitional.dtd"> Proven to be most reliable
17 Effects of Not Having a DOCTYPE No DOCTYPES = no paragraph margin This can be seen in clients like: Gmail Apple Mail ipad iphone Symbian S60 (Nokia)
18 Effects of Not Having a DOCTYPE No DOCTYPES = Some special characters not supported Problems in IE browsers with rendering margins and padding as specified
Table Properties 19
20 Not Setting Table Properties Specifically cellpadding and cellspacing Why this matters: Affects the alignment of your email Breaks with multiple tables If not set to 0 Outlook will add 2 pixels of padding between all cells in a table
21 Not Setting Table Properties <table width="600" cellpadding="0" cellspacing="0">
Tags & Capitalization 22
Capitalizing Tags 23
24 Capitalizing Tags Emails are in XHTML format Case sensitive, requires all tags to be lowercase Capitalized tags should be kept to web design only
Alt Text & Default Display Image 25
26 Not Including Alt Text Spam filters & scoring Alt text can function as CTAs for emails that are image heavy
27 Not Including Alt Text Desktop clients that enable images, support alt text:
28 Not Including Alt Text Webmail clients that enable images, support alt text:
29 Not Including Alt Text Mobile clients that enable images, support alt text:
Misuse of <center> and <br> Tags 30
31 Using the Tag <center> to Center-Align Commonly used to center align text <center> can display differently in certain browsers Purely presentational rather than structural
Using the Tag <center> to Center-Align 32
33 Using the Tag <center> to Center-Align <center> <table border="0" cellpadding="0" cellspacing="0" bgcolor="#ebebeb"> <tr> <td align="center"> <table> <table border="0" cellpadding="0" cellspacing="0" bgcolor="#ebebeb align="center"> <tr> <td align="center"> <table> content content </table> </td> </tr> </table> </center> BEFORE </table> </td> </tr> </table> AFTER
34 Misuse of the Break <br /> Tag Written multiple ways: <br> <br/> <br /> Preferred variation is <br />. If your doctype is specified using HTML you can use the <br> tag. In XHTML, you must close the tag with a final slash (e.g. <br />) Most emails use XHTML Using break tags; in place of rows with fixed heights in place of lists
Copying & Pasting HTML 35
36 Copying & Pasting from a Microsoft Product Never keep your HTML in a Word doc Never copy and paste from a Microsoft Product Copying and pasting from a Microsoft program can cause damage Microsoft products embed unseen code
37 Copying & Pasting from a Microsoft Product
Questions? 38
Thank You! kmcdonough@postup.com Find me on twitter @PostUpKate marketing@postup.com 39