Thursday, August 16, 2012

HTML Email Tips & Tricks

Recently I worked on a HTML Email project and couldn't find many helpful blogs, websites, especially with suitable examples. Most of the information was either scattered around or just not useful. So here I am, trying to put all that I learnt, in a gist. Hope you would find it helpful.


1.   Use <table> for content, instead of <div> as they are difficult to style. If need be, use <div>  
      to enclose a <table>.
     
2.  Mobile Devices: 
     Always use px, instead of %. Min-width & max-width for most mobile devices is around 
     550-600px. 
     Desktops, laptops or large screens:  
     % can be used when entire body width needs to be considered. 


      @media only screen and (min-device-width: 481px) and (max-device-width: 767px) {
      /* css for most Androids */
      }
      @media only screen and (max-device-width: 480px) {
       /* css for Iphones */      
       }
      @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
       /* css for Ipads */
       }

    <body width='100%' min-width='600px' > ....</body>
     

3.  Use widths, font-size in pixels(px) for every <td>.


     
     <td style='width:200px; font-size:12px;'></td>  


4.  Mobile Devices: 
     Use ids instead of classes for media queries. Also, accessing them as div[id="main"] 
     prevents Yahoo! Mail from reading the query styles and rendering them.
     Outlook 2007-10 also doesn't render CSS2 selectors ( div[id='main'] { .... } ), hence use   
     CSS1 i.e. div { .... } . 
    

     @media only screen and (max-device-width: 480px) {
       div[id='main'] { .... }   
       }
    

5.  Mobile Devices: 
     Using % for table width messes the scaling in Iphones.


6.  Use cellpadding, cellspacing on a table, instead of padding. (reference)

    
     <table cellspacing="0" cellpadding="0" border="0" width="400">