We start with our Boilerplate, 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;"> </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;"> </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
You can download the grid master templates via GitHub at
Responsive : https://github.com/g13nn/Email-Framework/blob/master/grids/responsive/responsive-grid-master.html
Fluid : https://github.com/g13nn/Email-Framework/blob/master/grids/fluid/fluid-grid-master.html
Hybrid : https://github.com/g13nn/Email-Framework/blob/master/grids/hybrid/hybrid-grid-master.html
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"> </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;"> </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>
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