HTML Email solutions, tips & best practices

Dynamic Solutions list goes here

It is best to start with HTML5 Doctype. Since now a days responsive is mandatory for all clients we need to code our HTML creatives with responisve ready. To make responsive we will be using media queries and some of the CSS3 styles. So, it is best to use CSS3 with HTML5 Doctype.
Write the codes clean and neat to look good and readable to all developers like giving proper indents, adding meaningful classes and ids, adding reasonable title and alt texts to the images etc., which makes you a good coder.
Don't forget to add responsive meta tags to ensure the responsive work properly

mandatory
<meta name="viewport" content="width=device-width">
this is optional
<meta name="format-detection" content="telephone=no">

Start with 100% table and add content table with align center property to make sure the content aligned center to the page

               
              <!-- wrapper table -->
              <table width="100%" border="0" cellspacing="0" cellpadding="0">
              <tbody>
                <tr>
                  <td align="center" valign="top">
              <!-- conent table -->
                    <table width="600" border="0" cellspacing="0" cellpadding="0" align="center">
                    <tbody>
                      <tr>
                        <td valign="top">Here goes the actual email contents</td>
                      </tr>
                    </tbody>
                    </table>
              <!-- conent table ends -->  
                  </td>
                </tr>
              </tbody>
              </table>
              <!-- wrapper table ends -->

Try to keep all rows in a table has single column. If multiple columns needed insert a table for that particular row and add the coloumns needed.
Make sure all rows in a table has same number of columns, if not make them same using colspan
Try not to use padding & margin as much as possible. It is better not to use margin inline styles for desktop versions. For mobile versions you are free to use all major CSS3 styles, since all mobiles supports almost all HTML5 and CSS3 specifications.
For empty row spaces use this code instead of using spacer images
```
            <tr>
            <td valign="top" style="font-size:1px; line-height:1px;" height="10" class="height_01"></td>
            </tr>
            
```
Here height will be varied depends on how much height needed and the following Outlook specific conditional codes needs to be added to the head section by targeting the class="height_01"
```
            
            
```
Note: This will target only MS Outlook versions greater than 2013. Because only those versions ie: greater than MS Outlook 2013 which causes the spacing issue of empty rows which is not more than 16px height.
In this one id="height_01" is added for future purppose to make use of id, in case if the class styles not working.

To align any content to centered to the parent block, use this code. Either it may be text contents or image.

<tr>
            <td valign="top" align="center">
            <table border="0" cellspacing="0" cellpadding="0" align="center" class="align_center">
            <tr>
              <td valign="top" align="center">Centered contents goes here.</td>
            </tr>
            </table>
            </td>
            </tr>

Here the class class="align_center" is to make any block to center aligned for mobile versions. Either it may be right aligned or left aligned content in desktop versions. The following styles needs to be added to the media query for mobile responsive.

.align_center{
            float:none;
            margin:0 auto !important;
            }

Always use nested tables. Try not to use stacked table coding style.

Standard HTML email template

Standard HTML email template with all neccessary classses and styles added

            
            <!DOCTYPE html>
            <html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
            <head>
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <meta name="format-detection" content="telephone=no">
            <title>Cartier</title>
            <style type="text/css">
            body { margin: 0px; padding: 0px; background-color: #FFFFFF; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none !important; -ms-text-size-adjust: none !important; }
            * { line-height: normal !important; }
            a[href^="x-apple-data-detectors:"] { color: inherit; text-decoration: inherit; }
            a[x-apple-data-detectors] { color: inherit !important; text-decoration: none !important; font-size: inherit !important; font-family: inherit !important; font-weight: inherit !important; line-height: inherit !important; }
            a { text-decoration: none; }
            div { display:inherit !important; }
            
            @media screen and (max-device-width: 480px) {
            *[class~=full] { width: 100% !important; min-width: 100% !important; }
            *[class~=contents] { width: 84.375% !important; }
            *[class~=hide] { display: none !important; }
            *[class~=show] { display: block !important; font-size: inherit !important; max-height: none !important; width: auto !important; line-height: normal !important; overflow: visible !important; }
            *[class~=imgfull] { width: 100% !important; height: auto !important; }
            *[class~=text_center] { text-align: center !important; }
            *[class~=align_center] { float: none !important; margin: 0 auto !important; }
            *[class~=align_right] { float: right !important; }
            *[class~=align_left] { float: left !important; }
            *[class~=coldrop] { display: block !important; width: 100% !important; padding: 0px !important; }
            .arrange_top { display: table-header-group !important; }
            .arrange_bottom { display: table-footer-group !important; }
            *[class=autoheight] { height: auto !important; }
            *[class=autowidth] { width: auto !important; }
            *[class=autowidthheight] { width: auto !important; height: auto !important; }
            body[yahoo] *[class~=no_bg] { background: none !important; background-color: #ffffff !important; }
            body[yahoo] *[class~=top_banner] { width: 100% !important; background-size: cover !important; background-position: 100% top !important; }
            *[class~=padding_lr10] { padding: 0px 10px 0px 10px !important; }
            *[class~=padding_t10] { padding: 10px 0px 0px 0px !important; }
            *[class~=nopad] { padding: 0px 0px 0px 0px !important; }
            *[class~=margin_b10] { margin-bottom: 10px !important; }
            *[class~=margin_t10] { margin-top: 10px !important; }
            *[class~=height20] { height: 20px !important; }
            *[class~=height15] { height: 15px !important; }
            *[class~=height10] { height: 10px !important; }
            *[class~=height5] { height: 5px !important; }
            }
            
            @media screen and (max-device-width: 414px) {
            }
            
            @media screen and (max-device-width: 375px) {
            }
            
            @media screen and (max-device-width: 320px), screen and (max-device-width: 360px) {
            *[class~=hide2] { display: none !important; }
            }
            </style>
            
            <!--[if gte mso 9]>
            <xml>
              <o:OfficeDocumentSettings>
                <o:AllowPNG/>
                <o:PixelsPerInch>96</o:PixelsPerInch>
             </o:OfficeDocumentSettings>
            </xml>
            <![endif]-->
            
            <!--[if gt mso 14]>
            <style type="text/css">
                .height_01 {
                font-size:1px;
                line-height:1px;    
                }
            /*Windows 10 phone link fix*/
                span.MsoHyperlink {
                mso-style-priority:100 !important;
                color:inherit !important;
                text-decoration:none !important;
            }    
            </style>
            <![endif]-->
            
            </head>
            
            <body yahoo="fix">
            <!-- wrapper table -->
            <table border="0" cellpadding="0" cellspacing="0" width="100%" style="table-layout:fixed;">
            <tbody>
            <tr>
            <td style="vertical-align:top;" align="center" bgcolor="#FFFFFF">
            <!-- contents table -->
            <table class="full" align="center" border="0" cellpadding="0" cellspacing="0" width="640" style="min-width:640px;">
            <tbody>
            <tr>
            <td style="vertical-align:top;" align="center">Here goes the actual Email contents</td>
            </tr>
            </tbody>
            </table>
            <!-- contents table ends -->
            </td>
            </tr>
            </tbody>
            </table>
            <!-- wrapper table ends -->
            </body>
            </html>