WhiteSites Blog

What CSS rules work with All Email Clients

Posted on Dec 14, 2011 by Paul White

Recently 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.




Permalink
4744 Visitors
4744 Views

Categories associated with What CSS rules work with All Email Clients

Discussion

No Comments have been submitted
name
Email Needed to confirm comment, but not made public.
Website
 
 
When you Post your Comment, you'll be sent a confirmation link. Once you click this link your thoughts will be made public.. Posts that are considered spam will be deleted, Please keep your thoughts and links relavent to this Article