最佳实践与编写 HTML 电子邮件时的注意事项

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:

What are 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?

解决方案

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