Coding HTML Email: Best Practices & Tips


Published on

Web designers and developers can easily adapt their skills to create styled and graphic-rich HTML emails for clients, but there are many key differences between webpages and email. Avoid the common pitfalls with a primer on best practices for coding HTML email. This presentation primarily covers coding and HTML/CSS support but also includes discussion of design conventions, testing and deliverability issues.

Published in: Technology, Design
  • Nice video but now someone create a tool .I can develop html email code directly online now. you should write an article about them
    Are you sure you want to  Yes  No
    Your message goes here
  • thanks for the tips!
    Are you sure you want to  Yes  No
    Your message goes here
  • I never thought about applying a style to the alt text, that is a great idea.
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Coding HTML Email: Best Practices & Tips

  1. 1. Coding HTML Email: Best Practices & Tips <ul><li>by Steve Hong (@st3v3hong) </li></ul><ul><li>Senior Web Developer </li></ul><ul><li>CrossComm, Inc. </li></ul><ul><li> </li></ul>
  2. 2. <ul><li>Coding HTML email SUCKS! </li></ul><ul><li>Throw out web design best practices. </li></ul><ul><li>Dust off bloated &quot;old-school&quot; HTML table layouts. </li></ul><ul><li>Slap on inline CSS; no separation of presentation & content. </li></ul><ul><li>Forget things like video, audio, Flash, scripts, and forms. </li></ul>Prepare to be disappointed.
  3. 3. Wait! Don't leave! <ul><li>HTML email is pretty and it works. </li></ul><ul><li>Communicate better through design. </li></ul><ul><li>Maintain consistent branding across all messages. </li></ul><ul><li>Jump on the bandwagon. Everyone's using HTML email. </li></ul><ul><li>Face it. There are no alternatives. </li></ul>
  4. 4. Coding HTML email: Tips. <ul><li>Code HTML/CSS by hand rather than in a WYSIWYG editor to ensure the code is clean and only includes supported elements. </li></ul>
  5. 5. Coding HTML email: Tips. <ul><li>Use low-tech and simple table layouts without nesting or merging cells because CSS layouts with positioning don’t work. </li></ul>
  6. 6. Coding HTML email: Tips. <ul><li>Code only long-hand inline CSS styles instead of external or head stylesheets. CSS short-hand like “font” may not work, so write out individual properties like “font-size.”  </li></ul>
  7. 7. Coding HTML email: Tips. <ul><li>Try a tool like Premailer to make your styles inline:  </li></ul><ul><ul><li> </li></ul></ul>
  8. 8. Coding HTML email: Tips. <ul><li>Use CSS primarily for text styling. </li></ul><ul><li>Put general text styles on parent td cells but don’t rely on style inheritance from parent table cells to children cells. </li></ul><ul><li>Use inline CSS on heading and paragraph tags to overwrite inherited styles. </li></ul>
  9. 9. Coding HTML email: Tips. <ul><li>Avoid font tags because they don’t yield consistent font sizes. </li></ul>
  10. 10. Coding HTML email: Tips. <ul><li>Wrap everything in a master 100% width table for background colors and other body styles because head and body tags are stripped out by webmail. </li></ul>
  11. 11. Coding HTML email: Tips. <ul><li>Avoid conflicting with webmail CSS ID and class names by not using any or using unique names, like “clientname-footer”, rather than generic names, like “footer.” </li></ul>
  12. 12. Coding HTML email: Tips. <ul><li>Reference images with absolute instead of relative paths because they’re hosted on a web server. </li></ul>
  13. 13. Coding HTML email: Tips. <ul><li>Use alt text in a header image to ask people to “please turn on images” so that they know they’re missing out when their webmail turns off images. </li></ul>
  14. 14. Coding HTML email: Tips. <ul><li>Add CSS text styles to table cells even if they contain only images because alt text will be styled when images are turned off. </li></ul>
  15. 15. Coding HTML email: Tips. <ul><li>Take a look at MailChimp’s or CampaignMonitor's sample email templates: </li></ul><ul><ul><li> </li></ul></ul><ul><ul><li> </li></ul></ul>
  16. 16. Coding HTML email: Tips. <ul><li>Check out CSS Tricks’ HTML email screencast for a how-to video:  </li></ul><ul><ul><li> </li></ul></ul>
  17. 17. Test HTML email code. <ul><li>Test with images and CSS turned off using the Firefox Web Developer Toolbar plugin:  </li></ul><ul><ul><li> </li></ul></ul>
  18. 18. Test HTML email code. <ul><li>Set up many webmail test addresses and install several desktop email programs for testing. </li></ul><ul><li>For a fee, try MailChimp’s Inbox Inspector for final tests of your template: </li></ul><ul><ul><li> </li></ul></ul>
  19. 19. Test HTML email code. <ul><li>Avoid spam filters in testing by avoiding the word “test” and dummy text like “lorem ipsum.” </li></ul><ul><li>Make every aspect of the email production-ready before testing it. </li></ul>
  20. 20. Look out for bugs. <ul><li>Gmail doesn’t honor background-repeat styles, so plan for repeating. </li></ul><ul><li>Gmail doesn’t like quotes in font names. Don’t use “font-family:’Lucida Grande’,” but rather “font-family:Lucida Grande”. </li></ul>
  21. 21. Look out for bugs. <ul><li>Gmail doesn’t like percentage values for CSS line-height. Outlook 2007 creates too much line-height when em sizes are used. Use pixel sizes. </li></ul><ul><li>Gmail and Hotmail don’t display background images declared with CSS, so use the background attribute of the table and td tags. </li></ul>
  22. 22. Look out for bugs. <ul><li>Hotmail doesn’t like CSS margins. Try using padding instead. </li></ul><ul><li>Hotmail sometimes adds extra space in cells with images. Try a line height of 70% of the font size like this: 12px font, 8px line-height </li></ul>
  23. 23. Look out for bugs. <ul><li>Yahoo uses non-standard align and valign default values on table cells, so set them explicitly. </li></ul><ul><li>Yahoo has styles that make cellspacing ineffective on tables. Use cellpadding instead. </li></ul>
  24. 24. See other resources. <ul><li>MailChimp’s Guide: </li></ul><ul><ul><li> </li></ul></ul><ul><li>CampaignMonitor’s Guide to CSS support in email clients: </li></ul><ul><ul><li> </li></ul></ul>
  25. 25. Contact me. <ul><li>Steve Hong, Senior Web Developer, CrossComm </li></ul><ul><li>[email_address] </li></ul><ul><li> </li></ul><ul><li> </li></ul><ul><li>@st3v3hong </li></ul>
  26. 26. Find this online. <ul><li>SlideShare:  </li></ul><ul><ul><li> </li></ul></ul><ul><li>CrossComm Blog: </li></ul><ul><ul><li> </li></ul></ul><ul><ul><li> </li></ul></ul>