Document
advertisement
Convio Email Broadcast Tool User Group Mee+ng January 5, 2011 Topic: Using the Email On Acid online service to improve your newsle;er delivery success rate Email On Acid online service Using Email on Acid to improve your newsle;er delivery success rate • What is Email On Acid? • How does it work? Email Design Tips • Email Client general differences • HTML structure & CSS: What are the rules for crea+ng HTML Email? • Client fixes: some examples • “Inline” your CSS to overcome Gmail deficiencies • Using Email On Acid in conjunc+on with Convio Email On Acid online service What is it? • A paid online tool for evalua+ng the “success” of your HTML newsleUer design in most available email clients on the market today. hUp://www.emailonacid.com Email on Acid provides: 1. Client tes+ng 2. Code Analysis 3. CSS “inlining” 4. Tips & Tricks 5. Support as +cket and forum Email On Acid online service How does it work? Use EOA to verify what messages look like in many email clients. Check results in one place, without the need for many physical or virtual machines and opera+ng systems. Test in one of two ways: 1. Copy/paste your code into the processor 2. Send a test email to your specified EOA account address Addi@onal features: 1. Analyze your code as it is interpreted by each client 2. Find help and +ps for each client 3. Use addi+onal online tools Email On Acid online service How does it work? Demo of features: 1. Interface 2. Client tes+ng a)
Copy/paste method b)
Send email method 3. Code Analysis 4. Tips & Tricks Email On Acid online service How does it work? Developer Tools 1. CSS “inlining” 2. Character encoding www.emailonacid.com/character_converter/ Email On Acid online service Email Design Best Prac@ces : Email Client General Differences • Gmail hates you, the designer. All defined CSS styles in the <head> element are removed All defined CSS styles in <style> blocks are removed (anywhere!) All script tags are removed (though you should not use these as a general rule). <body> tag is replaced with a <div> tag. Background URL references are ignored Doctypes are removed, and replaced with XHTML 1.0 Strict …and more! • All styles must be “inlined” to display properly in Gmail • Other clients will generally obey your style blocks Email On Acid online service HTML structure & CSS: What are the rules for crea@ng HTML Email? • Code as if it were 5 years ago • Use tables for layout, and even rows for lists. • Nest tables to avoid odd behavior with structure • Use very simple CSS • Inline your CSS using one of two tools: • Email on Acid Inlining tool (requires a paid account and running a test). Tests can be run for free on limited clients. • Free Premailer online tool Email On Acid online service Client fixes: some examples. Yahoo fixes • Yahoo will override your links. To force back, add these styles. /* Yahoo link color fix */ .yshortcuts, .yshortcuts a, .yshortcuts a:link, .yshortcuts a:visited, .yshortcuts a:hover {color: #CCC; } .yshortcuts a span { color: #CCCCCC } • Yahoo removed the boUom margin to paragraphs. To restore, add this /* Yahoo paragraph boUom margin fix */ p {margin-­‐boUom: 20px;} /* change to your desired value and units */ Email On Acid online service Client fixes: some examples. Hotmail fixes • Hotmail will collapse centered emails using tables. This restores backgrounds with centered content table. .ReadMsgBody { width: 100%;} /* fixes width and line-­‐height issue */ .ExternalClass {width: 100%; line-­‐height: 100%; } body { width: 100% !important; display: block !important;} • Hotmail will change all header tags (h1 through h6) to green. (don’t ask). /* Hotmail Green Header tags fix */ / * add !important to all color rules for header tags (h1 through h6) e.g. h1 { color: #23456 !important; } • To avoid gaps around images, add this to all img elements / * Add style display:block to ALL image elements. */ e.g. img {display:block;} e.g. <img src=“test.jpg” style=“display:block”> Email On Acid online service Client fixes: some examples. Outlook fixes • Bulleted Lists in Outlook are all messed up. The absolute safest bet considering the fact that Outlook 07 and 2010 does not support background images is to create tables to display your bulleted list. Another possible workaround for those who are more daring is to use this in your embedded CSS: ol, ul { margin: 0; padding: 0; } td#content ol li, td#content ul li { margin-­‐leu: 1.75em; } • Avoid using “margin” or “padding” CSS proper+es in your TABLE tag. Cellpadding and Cellspacing aUributes are generally safe but margin or padding will ouen be added to every TD within the table. • It is ok to use padding on individual cells: <td style=“padding-­‐top:20px;”>content</td> Email On Acid online service Client fixes: some examples. Outlook fixes • To use styles specific to Outlook, you can use an MSE condi+onal statement block to override a par+cular element/s: <!-­‐-­‐[if gte mso 9]> <style> .sidebar-­‐header h1, .sidebar-­‐header h2 { color: #FFFFFF !important; font-­‐family: arial, "Arial", verdana, arial, sans-­‐serif; font-­‐size: 14px; font-­‐weight: lighter; line-­‐height: 17px; width: 100%; } </style> <![endif]-­‐-­‐> Email On Acid online service Client fixes: some examples. Redundancy in tags • To be sure your background colors will be retained, specify background color redundantly in the tag also. • This works for some other styles also, such as width, and ver+cal align. <table width="100%” style=“width:100%;” border="0" cellspacing="0" cellpadding="0” > <tr> <td valign="top” bgcolor=“#CCC” style=“background-­‐color: #CCC;”>content</td> </tr> </table> Email On Acid online service Email Design Best Prac@ces : “Inline” your CSS to overcome Gmail deficiencies • What is “Inlining CSS?” • The process of taking external stylesheets, or style blocks and placing the styles inline with the element. • What CSS can I use? (see next slide) • Either hand code this into the HTML, or code as a web page and “inline” the styles using a tool. • Why should I care? 1. Improve cross-­‐client compa+bility (beUer in Gmail, Yahoo, Hotmail, Etc.) 2. Allows designer to code using central CSS file. Email On Acid online service Email Design Best Prac@ces : “Inline” your CSS to overcome Gmail deficiencies Linked styles Style block Inline styles Email On Acid online service Study the chart! HTML structure & CSS: What are the rules for crea@ng HTML Email? Green is good Red is bad Wow, lots of red! Download at: hUp://www.campaignmonitor.com/css/ Email On Acid online service Email Design Best Prac@ces : “Inline” your CSS to overcome Gmail deficiencies • Use EOA’s Inlining tool Email On Acid online service Email Design Best Prac@ces : “Inline” your CSS to overcome Gmail deficiencies • Free tool: Premailer hUp://premailer.dialect.ca/ • “Inlines” your CSS Email On Acid online service Using Email on Acid in Conjunc@on with Convio • Copy all “inlined” HTML content into the Convio editor. • Use a blank sta+onery Email On Acid online service Using Email on Acid in Conjunc@on with Convio • Send tests to yourself • Test on physical machine just to cover your bases. • Auer “inlining” styles, be sure to leave your style blocks in the file. Those styles will be used by other clients than Gmail. • Known issue: • Convio adds an addi+onal page wrapper to your page currently. I am trying to resolve this and allow a unique page wrapper for each unit, but this case is pending. I will inform you all of the resolu+on. • A poten+al work-­‐around for this is to remove your doctype, html tag pair, head sec+on tag pair, and move your style block to inside the body tag. Q&A Joel Fuller jfuller@berkeley.edu
