Getting Started

Build responsive email templates confidently


The HTML email framework developed to help you build responsive HTML email templates using the pre-built grid options and basic components you need to build responsive HTML email templates. This HTML email framework support's over 60+ email clients and has been thoroughly tested using Litmus.com.


Boilerplate

boilerplate.html


We start with our boilerplate.html, this is the base you need to build your responsive/fluid HTML email templates. This will allow you start building HTML email templates using the provided grids & component options.

   
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <title></title>

  <style type="text/css">
  </style>    
</head>
<body style="margin:0; padding:0; background-color:#F2F2F2;">
  <center>
    <table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#F2F2F2">
        <tr>
            <td align="center" valign="top">
                
                
            </td>
        </tr>
    </table>
  </center>
</body>
</html>


Grids

Responsive, Fluid & Hybrid grid options


Build responsive/fluid & hybrid layouts with ease by using these pre-built grid options. Create the desired structure you need for your HTML email template. These grid options are available in separate form, snippets (Sublime, Atom) & even bundled together into a master template.

Examples:

Responsive Example

      
<table width="640" cellpadding="0" cellspacing="0" border="0" class="wrapper" bgcolor="#FFFFFF">
  <tr>
    <td height="10" style="font-size:10px; line-height:10px;">&nbsp;</td>
  </tr>
  <tr>
    <td align="center" valign="top">

      <table width="600" cellpadding="0" cellspacing="0" border="0" class="container">
        <tr>
          <td align="center" valign="top">
            Grid One
          </td>
        </tr>
      </table>

    </td>
  </tr>
  <tr>
    <td height="10" style="font-size:10px; line-height:10px;">&nbsp;</td>
  </tr>
</table>  

Fluid Example

  
<table width="640" cellspacing="0" cellpadding="0" border="0" align="center" style="max-width:640px; width:100%;" bgcolor="#FFFFFF">
  <tr>
    <td align="center" valign="top" style="padding:10px;">
      
      <table width="600" cellspacing="0" cellpadding="0" border="0" align="center" style="max-width:600px; width:100%;">
        <tr>
          <td align="center" valign="top" style="padding:10px;">
            Grid One
          </td>
        </tr>
      </table>

    </td>
  </tr>
</table>

Hybrid Example

  
    <tr>
      <td align="center" height="100%" valign="top" width="100%">
        <!--[if (gte mso 9)|(IE)]>
        <table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
        <tr>
        <td align="center" valign="top" width="600">
        <![endif]-->
          <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:600px;" bgcolor="#ffffff">
            <tr>
              <td align="center" valign="top" style="font-size:14px;">

                Grid One

              </td>
            </tr>
          </table>
        <!--[if (gte mso 9)|(IE)]>
        </td>
        </tr>
        </table>
        <![endif]-->
      </td>
    </tr>

Grid Master Templates


Spacing on mobile

For grid options featuring more than one td we may need to add spacing between them for height on mobile. We can do this by using the following code example below. This allows you to separate the blocks in mobile view by adding a height of 10 between the td . You can also you padding for this.



<td height="10" style="font-size:10px; line-height:10px;" class="mobileOn"></td>

Here is an example of this in action using the responsive grid two option.

 
<table width="640" cellpadding="0" cellspacing="0" border="0" class="wrapper" bgcolor="#FFFFFF">
  <tr>
    <td align="center" valign="top">

      <table width="600" cellpadding="0" cellspacing="0" border="0" class="container">
        <tr>
          <td width="300" class="mobile" align="center" valign="top">
            Grid Two
          </td>
          <td height="10" style="font-size:10px; line-height:10px;" class="mobileOn">&nbsp;</td>
          <td width="300" class="mobile" align="center" valign="top">
            Grid Two
          </td>
        </tr>
      </table>

    </td>
  </tr>
</table>

Mobile Hack

Sometimes a responsive grid just isnt enough, we may need to create Mobile versions of panels. For the desktop version we add the class="mobileOff" on the table   Underneath that table we add the mobile table with a div and some outlook conditions around it. This will switch off your desktop table and display the mobile one.

    
<!--[if !mso]><!-- -->
<div class="mobileOn" style="font-size: 0; max-height: 0; overflow: hidden; display: none">                
    <table width="320" cellspacing="0" cellpadding="0" border="0" class="mobile" align="center">    
        <tr>
            <td align="center" style="color: #000000; font-size: 12px; line-height: 18px;">
                Let's Go!
            </td>
        </tr>
    </table>                                                                    
</div>                                                                    
<!--<![endif]-->
    


Components

Common components you'll need when coding HTML emails


Content block

There may be some cases where you want to add a further table to your grid in this email framework this is called a content block (see below) you add the content block inside your tds   in your grid. To get padding on the top and bottom simply add a spacer to the top and bottom of your wrapper. Spacing example code can be found in the next steps below.



<table width="100%" cellpadding="0" cellspacing="0" border="0">
  <tr>
    <td align="center" valign="top">
      <!-- Content -->
    </td>
  </tr>
</table>


Notes:

● Simply add your elements (Eg. h1 tag) where it says content.

● You may only need a content block in certain situations. You can rely on the grid alone to house your content.



Content row

Within a content block you can add as many content rows as you require. To add another row to your content block simply add the following code under your closing tr   tag in your content block. This can be used to create titles, paragraphs, buttons and much more.

   
<tr>
  <td align="center" valign="top">
    
  </td>
</tr>   
  

Alignment

To align your content you will need to add align="left" , align="right" or align="center" to your containing td


Spacing

When stacking our titles, paragraphs and buttons like this we may need some spacing. To do this simply add the following row where you need your spacing. We add this in the same way as above. Making sure its added after the closing tr   tag.

    
 <tr>
     <td height="10" style="font-size:10px; line-height:10px;">&nbsp;</td>
 </tr>
    

Please Note :

Outlook(2013) will sometimes add extra spacing to your spacers. To stop this from happening you will need to add & nbsp; between the td's.


Links

You can add links to your text by wrapping your text in an a href=""   tag. You will also need to add style="" tag to your a a href=""   tag like so.

   
<a href="#" target="_blank" style="color:#66cccc; text-decoration:underline;">Link</a>
 

Buttons

An example of using buttons in HTML email. Other button styles can be found at
https://github.com/g13nn/Email-Framework/tree/master/components/buttons.

    
<table width="200" height="44" cellpadding="0" cellspacing="0" border="0" bgcolor="#2b3a63" style="border-radius:4px;">
  <tr>
    <td align="center" valign="middle" height="44" style="font-family: Arial, sans-serif; font-size:14px; font-weight:bold;">
    	<a href="#" target="_blank" style="font-family: Arial, sans-serif; color:#ffffff; display: inline-block; text-decoration: none; line-height:44px; width:200px; font-weight:bold;">Button</a>
    </td>
  </tr>
</table>


Images

By using the following HTML below you will avoid various common display issues. Make sure that the containing td   is stripped of font-size & line-height inlining styling, as this will effect how your image is rendered.

    
<img src="" width="" height="" style="margin:0; padding:0; border:none; display:block;" border="0" alt="" /> 
    

Please Note:

It's important to set a width & height on your img   tag & remove any styling on your surrounding td   so that your image renders correctly on Outlook(2013).


Snippets

Snippets to help you code faster


Fully tested HTML email snippets for Sublime Text & Atom https://github.com/g13nn/Email-Framework/tree/master/snippets


Supported Clients

Thoroughly tested using Litmus.com


This email framework is supported on over 60+ email clients.

  Client   Supported
  Apple Mail 7 , 8 (Desktop)   ✔
  Apple Mail & iOS Devices   ✔
  Outlook (2000, 2002, 2003, 2007, 2011, 2010, 2013, 2016)   ✔
  Thunderbird 31   ✔
  Android - 2.3 & 4.2   ✔
  Gmail (Desktop)   ✔
  Gmail (Mobile, iOS, Android, Apps)   ✔  
  Outlook 2011 for Mac   ✔
  AOL Mail (Explorer, Firefox & Chrome)   ✔
  Hotmail   ✔
  Outlook.com (Explorer, Firefox & Chrome)   ✔
  Yahoo! (Explorer, Firefox & Chrome)   ✔
   Windows Phone 8   ✔
   Office 365   ✔


Please Note :

It's important to run your code through the W3C validator to ensure you haven't made any errors while editing the HTML. Once you have validated your HTML code send a test to litmus to ensure your HTML email layout/template renders correctly in all major email clients.


Comments

Leave your comments below