HTML Fails: What No One Tells You About HTML

Transcription

1 HTML Fails: What No One Tells You About HTML

2 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. [email protected]

3 3 Today s Agenda Some basic tips and pitfalls to avoid: The Anatomy of an DOCTYPES Table Properties Tags and Capitalization Alt Text & Which Clients Display Images by Default Misuse of <center> and <br> Tags Copying & Pasting HTML

4 The Anatomy of an 4

5 5 The Anatomy of an All s 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 6 The Anatomy of an <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <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">

14 DOCTYPES 14

15 15 Why Use a DOCTYPE? DOCTYPES should be used in all s and be placed before the <html> tag Some web clients will strip out the DOCTYPES Subtle differences in how clients render HTML s with different DOCTYPES 8 variations

16 16 The Best DOCTYPE for XHTML 1.0 transitional: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " transitional.dtd"> Proven to be most reliable

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

19 Table Properties 19

20 20 Not Setting Table Properties Specifically cellpadding and cellspacing Why this matters: Affects the alignment of your Breaks with multiple tables If not set to 0 Outlook will add 2 pixels of padding between all cells in a table

21 21 Not Setting Table Properties <table width="600" cellpadding="0" cellspacing="0">

22 Tags & Capitalization 22

23 Capitalizing Tags 23

24 24 Capitalizing Tags s are in XHTML format Case sensitive, requires all tags to be lowercase Capitalized tags should be kept to web design only

25 Alt Text & Default Display Image 25

26 26 Not Including Alt Text Spam filters & scoring Alt text can function as CTAs for s that are image heavy

27 27 Not Including Alt Text Desktop clients that enable images, support alt text:

28 28 Not Including Alt Text Webmail clients that enable images, support alt text:

29 29 Not Including Alt Text Mobile clients that enable images, support alt text:

30 Misuse of <center> and <br> Tags 30

31 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

32 Using the Tag <center> to Center-Align 32

33 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 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 s use XHTML Using break tags; in place of rows with fixed heights in place of lists

35 Copying & Pasting HTML 35

36 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 37 Copying & Pasting from a Microsoft Product

38 Questions? 38

39 Thank You! Find me on 39