Email newsletter HTML/CSS rules

I keep forgetting this rules I made for myself, so here they are. Target platforms:
gmail, hotmail, yahoo, outlook 2007, outlook express, iphone mail, android gmail

  • Basically, dont use a stylesheet – do inline styles on divs and spans (trust me – this will reduce your cross-browser issues)
  • Dont use h1, h2, p, etc – just use div and span (other tags have their own styles in yahoo etc)
  • Only use margins, don’t use padding
  • Use margins, but only like this: margin-right, margin-bottom, margin-left
  • So, you need top margin?: use a general padder like this:

    <div style="margin-bottom: 16px;">
    <table cellpadding="0" cellspacing="0"><tr><td></td></tr></table>
    </div>
    
  • Don’t use colour shortcuts like this: #efe. Write it fully, eg: #eeffee
  • Need a solid line?
    <div style="border-top: 1px solid black; font-size: 0px;">&nbsp;</div>
    

    If you have set the line height in a parent div you might want to add

    line-height: 0px

    to the above solid line div. Althought, I’ve found it’s best to avoid line-height altogether (outlook)

  • Fine-print not fine enough in iPhone mail? (ok you’re allowed to use stylesheet now :)
    <style type="text/css">
    div, span { -webkit-text-size-adjust:none; }
    </style> 
    
  • Need to right-align an image? Pop it in a table
    <table cellpadding="0" cellspacing="0" align="right">
      <tr>
        <td>
          <img src="image.jpg" alt="" />
        </td>
      </tr>
    </table>
    
    

If you follow these strict rules you shouldn’t be compaining about Outlook 2007 (lowest common denominator)

Leave a Reply

Your email address will not be published. Required fields are marked *