css - Best Practices & Considerations when writing HTML Emails

Question

Closed. This question is opinion-based. It is not currently accepting answers.

Answer 1

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+
• Email on Acid

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
• Email on Acid | CSS Basics: A Beginner’s Guide to Stylizing HTML

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