Best Practices & Considerations when writing HTML

Question

I've been developing websites for over a decade now, but quickly found that many of my habits in developing for the web are useless when developing for email clients. This has caused me an enormous amount of frustration, so I thought I would ask a question that would hopefully surface the best practices and necessary considerations for others like myself who may find themselves designing for gmail, outlook, etc. from time to time.

Example: <style>...</style> vs inline CSS.

In short: what transfers over from the web-world to the email-world, and what doesn't.

Answer 1

Inline css and tables - think web development circa 2000 and you'll be fine. Campaign monitor have an excellent resource for what stuff email clients can deal with. Also use http://www.emailonacid.com/ for testing - saves having to send loads of tests.

Answer 2

This seems like a great place to list some resources for anyone trying to learn HTML email. This is (probably) the most comprehensive list of HTML Email resources you will find on the web. Happy learning.

Getting Started Guides:

• Campaign Monitor
• Mailchimp
• Sitepoint
• Reach Customers Online
• Tuts+

CSS Support & General Guides:

• Campaign Monitor | CSS Support Guide
• HTML Email Boilerplate
• Litmus | Email Clients FAQ's
• Campaign Monitor | Will it work?
• Mailchimp | Email Marketing Field Guide

You should always inline your CSS in html-email. Here is a list of CSS Inlining Tools

Responsive Guides:

• Campaign Monitor | Responsive Support Guide
• Style Campaign | Responsive Support Guide
• Litmus | Responsive How-To Infographic
• Litmus | Big List of Responsive & Mobile Resources

Templates & Frameworks:

• Ted Goas | Cerberus Responsive Email Patterns
• Email on Acid | Responsive Template
• Brian Graves | Responsive Email Patterns
• Antwort | Responsive Layouts
• Zurb | Ink Responsive Templates
• Campaign Monitor | Free Email Templates
• Mailchimp | Email Blueprints

Responsive Alternate Examples:

• Tuts+ | Responsive Email Without Media Queries
• Stack Overflow | Fluid Example
• Email on Acid | Monster's Fluid Layout
• Style Campaign | Fluid Mobile Email Design
• Stack Overflow | Floating Content

Also the Ted Goas Responsive link above has an excellent fluid example.

Troubleshooting & General Guides:

• Email on Acid | Yahoo Media Query Bug Workaround
• Stack Overflow | Colspans and Rowspans in HTML Email
• Mailchimp | Outlook Conditional CSS
• Litmus | Banning Blue Hyperlinks
• Stack Overflow | Webfonts in HTML Email

You'll need to use VML to get background images working in Outlook (Except in the body tag). Here are some VML links:

• Campaign Monitor | Bulletproof Backgrounds
• Campaign Monitor | Bulletproof Buttons

Answer 3

I have been doing these (at quite times) for my work for a while now. There are many pitfalls with HTML emails. Different Email clients render HTML differently from each other and make IE6 look advanced.

Here's a summery of what I've learned so far.

• Use in-line CSS: Styles aren't always supported.
• Use table layouts: I know, but div layouts are css dependent and many of the email clients can't cope.
• Don't use rowspan: This causes weird spacing issues.
• Don't use background images: Support for these is limited.
• Style image tags with "display:block": This fixes weird spacing issues with hotmail.
• If using multiple tables nest them in one parent table: This stops more weird spacing issues.
• Don't use Javascript: Again not supported very well.
• Make sure your email is legible with no images: The user may not load them.
• Provide an online version and link to it: This lets users see the intended content, even if their email client is terrible.
• Test, test, test: Just because it works in one email client doesn't mean it works in others. A big got ya is Outlook 2007. It uses word to render HTML (sigh).

This is far from a comprehensive list, but should set most people on the right track.

Answer 4

I myself found this guide very useful as well: Guide to CSS support in email clients.

Answer 5

This is good too, so see what inline CSS is supported in what email browser: http://www.campaignmonitor.com/css/

I and also recomend litmusapp (google it!). This a s a good tool for checking things.