Best practices for styling HTML emails

Question

I m designing an HTML template for an email newsletter  I ve learned that many email clients ignore linked stylesheets  and many others  including Gmail  ignore CSS block declarations altogether  Are inline style attributes my only choice  What are the best practices for styling HTML emails

User · Answer

Mail chimp have got quite a nice article on what not to do. ( I know it sounds the wrong way round for what you want)

http://kb.mailchimp.com/article/common-html-email-coding-mistakes

In general all the things that you have learnt that are bad practise for web design seem to be the only option for html email.

The basics are:

Have absolute paths for images (eg. https://stackoverflow.com/random-image.png)
Use tables for layout (never thought I'd recommend that!)
Use inline styles (and old school css too, at the very most 2.1, box-shadow won't work for instance ;) )

Just test in as many email clients as you can get your hands on, or use Litmus as someone else suggested above! (credit to Jim)

EDIT :

Mail chimp have done a great job by making this tool available to the community.

It applies your CSS classes to your html elements inline for you!

User · Answer

I find that image mapping works pretty well  If you have any headers or footers that are images make sure that you apply a  bgcolor  fill in the blank  because outlook in most cases wont load the image and you will be left with a transparent header  If you at least designate a color that works with the over all feel of the email it will be less of a shock for the user  Never try and use any styling sheets  Or CSS at all  Just avoid it    Depending if you re copying content from a word or shared google Doc be sure to  command F  Find all the     and     and replace them within your editing software  especially dreemweaver  because they will show up as code and it s just not good    ALT is your best friend  use the ALT tag to add in text to all your images  Because odds are they are not going to load right  And that ALT text is what gets people to click the  see images  button  Also define your images Width  Height and make the boarder 0 so you dont get weird lines around your image    Consider editing all images within Photoshop with a 15px boarder on each side  make background transparent and save as a PNG 24  of image  Sometimes the email clients do not read any padding styles that you apply to the images so it avoids any weird formatting    Also i found the line under links particularly annoying so if you apply  lt  style  text-decoration none  color  whatever color you want here     it will remove the line and give you the desired look   There is alot that can really mess with the over all look and feel

User · Answer

Fraid so  I d make an HTML page with a stylesheet  then use jQuery to apply the stylesheet to the style attr of each element  Something like this   var styleAttributes     color   font-size       all the attributes you ve applied in your stylesheet for  i in styleAttributes           body     css styleAttributes i  function                this  css styleAttributes i                Then copy the DOM and use that in the email

User · Answer

Campaign Monitor have an excellent support matrix detailing what s supported and what isn t among various mail clients   You can use a service like Litmus to view how an email appears across several clients and whether they get caught by filters  etc

User · Answer

In addition to the answers posted here  make sure you read this article   http   24ways org 2009 rock-solid-html-emails

User · Answer

The resource I always end up going back to about HTML emails is CampaignMonitor s CSS guide   As their business is geared solely around email delivery  they know their stuff as well as anyone is going to

User · Answer

I ve fought the HTML email battle before  Here are some of my tips about styling for maximum compatibility between email clients    Inline styles are you best friend  Absolutely don t link style sheets and do not use a  lt style gt  tag  GMail  for example  strips that tag and all it s contents   Against your better judgement  use and abuse tables    lt div gt s just won t cut it  especially in Outlook   Don t use background images  they re spotty and will annoy you  Remember that some email clients will automatically transform typed out hyperlinks into links  if you don t anchor  lt a gt  them yourself   This can sometimes achieve negative effects  say if you re putting a style on each of the hyperlinks to appear a different color   Be careful hyperlinking an actual link with something different  For example  don t type out http   www google com and then link it to https   gmail com   Some clients will flag the message as Spam or Junk  Save your images in as few colors as possible to save on size  If possible  embed your images in your email  The email won t have to reach out to an external web server to download them and they won t appear as attachments to the email    And lastly  test  test  test  Each email client does things way differently than a browser would do

[html] Best practices for styling HTML emails

Examples related to html

Examples related to css

Examples related to html-email