Coding HTML Email: Best Practices & Tips

8,970 views

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
3 Comments
16 Likes
Statistics
Notes
  • Nice video but now someone create a tool www.emailslicer.com .I can develop html email code directly online now. you should write an article about them
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • thanks for the tips!
       Reply 
    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.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
8,970
On SlideShare
0
From Embeds
0
Number of Embeds
123
Actions
Shares
0
Downloads
208
Comments
3
Likes
16
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>http://slideshare.net/stevehong/ </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>premailer.dialect.ca </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>bit.ly/mailchimptemp </li></ul></ul><ul><ul><li>bit.ly/campmontemp </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>bit.ly/csstricksemail </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>bit.ly/ffwebdevtoolbar </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>bit.ly/mailchimpinsp </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>bit.ly/mailchimpguide </li></ul></ul><ul><li>CampaignMonitor’s Guide to CSS support in email clients: </li></ul><ul><ul><li>bit.ly/campmoncsschart </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>linkedin.com/in/stevehong </li></ul><ul><li>www.crosscomm.net </li></ul><ul><li>@st3v3hong </li></ul>
  26. 26. Find this online. <ul><li>SlideShare:  </li></ul><ul><ul><li>http://slideshare.net/stevehong/ </li></ul></ul><ul><li>CrossComm Blog: </li></ul><ul><ul><li>crosscomm.net/blogs/web-strategy/online-marketing/how-to-code-html-email/ </li></ul></ul><ul><ul><li>bit.ly/crosscommemailcode </li></ul></ul>

×