最佳实践与编写 HTML 电子邮件时的注意事项 [英] Best Practices & Considerations when writing HTML Emails
问题描述
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:
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:
这篇关于最佳实践与编写 HTML 电子邮件时的注意事项的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!