1.What we AlWAYS do?
1.1 position of the css In email,the external stylesheets for the html is not allowed,we just can use inline-style,write the style in the tag attribute.
1.2 Use table tag. Spans,divs,ul and ol are used sparingly to achieve specific effects, while HTML tables do the bulk of the layout work. Tables are still the best way to achieve consistent results across email clients. The email equivalent of the browser window is the "viewport", or the area in an email client dedicated to showing the actual email. And we sugguest you to give up the old tags,just like
, and so on.
1.3 reset the style Just like the templates we used to do usually.The only difference is the point 1,you need to write the style in the tags.
1.4. Images should be posted on your publicly accessible web server In your code, use absolute paths to point to them. Attachments are often stored in randomly named temporary cache folders by some email programs.
2.What we CAN'T do
2.1 Include a section with styles Apple Mail.app supports it, but Gmail and Hotmail do not, so it's a no-no. Hotmail will support a style section in the body but Gmail still doesn't.2.2 Link to an external stylesheet Not many email clients support this, fotget it.
2.3 Background-image / Background-position Gmail and outlook don’t support this.So,you know it.
2.4 Clear your floats. Oh,use table,forget this.
2.5 Margin Yes, seriously, Hotmail ignores margins. Basically any CSS positioning at all doesn't work.
2.6 Font-xxxxx It will cause some problems you don’t know,and don’t use CSS shorthand.
2.7 Bgcolor Please use whole code like #ffffff,don’t use #fff.
3.To the designer
3.1 If possible,don’t use gradiant event Background is not supported in most emails.3.2 As simple as possible.
4.CSS Properties
Support for CSS Properties | |||||
| Outlook 2007 | Thunderbird | Gmail | Hotmail | Yahoo! |
background-color | |||||
background-image | |||||
background-position | |||||
background-repeat | |||||
border | |||||
border-collapse | |||||
border-spacing | |||||
clear | |||||
color | |||||
cursor | |||||
display | |||||
float | |||||
font-family | |||||
font-size | |||||
font-style | |||||
font-weight | |||||
height | |||||
letter-spacing | |||||
line-height | |||||
list-style-image | |||||
list-style-position | |||||
list-style-type | |||||
margin | |||||
opacity | |||||
overflow | |||||
padding | |||||
position | |||||
text-align | |||||
text-decoration | |||||
text-indent | |||||
vertical-align | |||||
visibility | |||||
white-space | |||||
width | |||||
word-spacing | |||||
z-index |
5.Tips
They are also full-service HTML email marketing providers out there. Most noteably, MailChimp. With MailChimp, you design your emails right within their web editor. You still have a nice amount of control, the prefab template is pretty nice, and MailChimp will do everything possible to make sure the email looks it's absolute best in all email clients. That alone is worth the reasonable rates ($30/month for lists up to 2,500 and goes up and down from there). MailChimp offers more though, a service which is almost invaluable, managing your lists for you. You get a customizable web page you can send people to to sign up for your emails, which will automatically add them to your list. Even better, they also handle unsubscribes automatically. Both of these things can be as transparent to you as you would like. Statistics on your emails are provided.表格整理中...