What CSS rules work with All Email Clients
Posted on Dec 14, 2011 by
Paul WhiteRecently one of my clients alerted me that the
HTML newsletter I built for them is not displaying correctly on Outlook 2010. So with a little research I had to figure out the best way to rebuild the newsletter to ensure it displays consistently with all email clients. If you are a developer that is used to using box model designs ( div tags ), then you might want to rethink that approach. Here are my findings.
First I want to make sure I give credit where its due.
Campaign Monitor went through the hard work to determine exactly which
CSS tyles and
HTML tags were supported with the various ( Major ) email clients. This includes the following Email clients
- Outlook 2010
- Outlook 2007
- Outlook 2003
- Outlook 2000
- Apple Iphone
- Apple Ipad
- Windows Live Hotmail
- Apple Mail 4
- Yahoo Mail Beta
- Google Gmail
- Android 2.3 Gmail
If you want the full specific list visit
http://www.campaignmonitor.com/css/If you are like me that means you only care about generating email that will look the same across all clients. If this is the case here are the
CSS Styles that you can use. If they aren't listed here, then they will not work on all Email Clients.
CSS Styles Supported by All Email Clients
- font
- font-family
- font-style
- font-variant
- font-size
- font-weight
- letter-spacing
- line-height
- text-align
- text-decoration
- text-indent
- text-transform
- color
- background-color
- HSL Colors
- border
- padding ( tables only )
- width ( tables only )
- border-collapse
- table-layout
And thats it. So in summary you have to use table based layouts to construct your emails. Most of this is due to Outlook which doesn't allow setting width, height, margin or padding on Divs. They always will go full width with no padding. Some people might say, Screw Outlook. But according to Campaign Monitor Outlook has about 27% of the market.
Discussion
No Comments have been submitted
WhiteSites Blog