Getting Started

Build responsive email layouts


The HTML email framework developed to help you build responsive HTML email layouts/templates by coping & pasting the pre-built grid, module, typography, content blocks & rows, alignment, spacing, button & image options into the provided boilerplate.html This HTML email framework support's over 40+ email clients and has been thoroughly tested using Litmus.com. This framework is available to download on GitHub.


Boilerplate

boilerplate.html


We start with our boilerplate code, this is the base you need to build your responsive HTML email layouts/templates. This will allow you to copy & paste in grid, module, typography, content blocks & rows, alignment, spacing, button & image options. We paste these where it says Let's Go! stacking them one after another to create your desired template structure.

   
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

	<title>Email Framework</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <!--[if !mso]>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <!--<![endif]-->
    
    <!-- Demo Only -->
    <link rel="stylesheet" href="mail.css" type="text/css" />
    
    <style type="text/css">
    
        /* Paste CSS */
    
    </style>
    
	<!--[if gte mso 15]>
	<style type="text/css">
		table { font-size:1px; line-height:0; mso-margin-top-alt:1px;mso-line-height-rule: exactly; }
		* { mso-line-height-rule: exactly; }
	</style>
	<![endif]-->    

</head>
<body marginwidth="0" marginheight="0" leftmargin="0" topmargin="0" style="background-color:#F6F6F6;  font-family:Arial,serif; margin:0; padding:0; min-width: 100%; -webkit-text-size-adjust:none; -ms-text-size-adjust:none;">

	<!--[if !mso]><!-- -->
	<img style="min-width:640px; display:block; margin:0; padding:0" class="mobileOff" width="640" height="1" src="images/spacer.gif">
	<!--<![endif]-->

    <!-- Start Background -->
    <table width="100%" cellpadding="0" cellspacing="0" border="0" bgcolor="#F6F6F6">
        <tr>
            <td width="100%" valign="top" align="center">
      
                <!-- Let's Go! -->
      
            </td>
        </tr>
    </table>
    <!-- End Background -->
    
</body>
</html>

Please Note :

● You must remove the link rel="stylesheet" tag.

● You need to add the CSS from mail.css into the style tag of your boilerplate.html.


Grids

Responsive grid options


Build responsive layouts with ease by using these responsive HTML email grid options. Choose from 7 grid options to create the perfect layouts/templates. These grid options are available in seperate form & even bundled together into a master template.

Grid options:

Grid One

      
<!-- Start Wrapper  -->
<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><!-- Spacer -->
    </tr>
    <tr>
        <td align="center">
                  
            <!-- Start Container  -->
            <table width="600" cellpadding="0" cellspacing="0" border="0" class="container">
                <tr>
                    <td width="600" class="mobile" style="font-family:arial; font-size:12px; line-height:18px;">
                        Grid One
                    </td>
                </tr>
            </table>
            <!-- Start Container  -->                   
                  
        </td>
    </tr>
    <tr>
        <td height="10" style="font-size:10px; line-height:10px;"> </td><!-- Spacer -->
    </tr>                        
</table> 
<!-- End Wrapper  -->    

Grid Two

  
<!-- Start Wrapper  -->
<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><!-- Spacer -->
    </tr>
    <tr>
        <td align="center">
                  
            <!-- Start Container  -->
            <table width="600" cellpadding="0" cellspacing="0" border="0" class="container">
                <tr>
                    <td width="300" class="mobile" style="font-family:arial; font-size:12px; line-height:18px;">
                        Grid Two
                    </td>
                    <td width="300" class="mobile" style="font-family:arial; font-size:12px; line-height:18px;">
                        Grid Two
                    </td>
                </tr>
            </table>
            <!-- Start Container  -->                   
                  
        </td>
    </tr>
    <tr>
        <td height="10" style="font-size:10px; line-height:10px;"> </td><!-- Spacer -->
    </tr>                        
</table> 
<!-- End Wrapper  -->  

Grid Three

    
 <!-- Start Wrapper  -->
 <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> <!-- Spacer -->
     </tr>
     <tr>
         <td align="center">
                  
             <!-- Start Container  -->
             <table width="600" cellpadding="0" cellspacing="0" border="0" class="container">
                 <tr>
                     <td width="200" class="mobile" style="font-family:arial; font-size:12px; line-height:18px;">
                        Grid Three
                     </td>
                     <td width="200" class="mobile" style="font-family:arial; font-size:12px; line-height:18px;">
                        Grid Three
                     </td>
                     <td width="200" class="mobile" style="font-family:arial; font-size:12px; line-height:18px;">
                        Grid Three
                     </td>                    
                 </tr>
             </table>
             <!-- Start Container  -->                   
                  
         </td>
     </tr>
     <tr>
         <td height="10" style="font-size:10px; line-height:10px;"> </td> <!-- Spacer -->
     </tr>                        
 </table> 
 <!-- End Wrapper  -->     
 

Grid Four

    
<!-- Start Wrapper  -->
<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><!-- Spacer -->
    </tr>
    <tr>
        <td align="center">
                  
            <!-- Start Container  -->
            <table width="600" cellpadding="0" cellspacing="0" border="0" class="container">
                <tr>
                    <td width="150" class="mobile" style="font-family:arial; font-size:12px; line-height:18px;">
                        Grid Four
                    </td>
                    <td width="150" class="mobile" style="font-family:arial; font-size:12px; line-height:18px;">
                        Grid Four
                    </td>
                    <td width="150" class="mobile" style="font-family:arial; font-size:12px; line-height:18px;">
                        Grid Four
                    </td>
                    <td width="150" class="mobile" style="font-family:arial; font-size:12px; line-height:18px;">
                        Grid Four
                    </td>                    
                </tr>
            </table>
            <!-- Start Container  -->                   
                  
        </td>
    </tr>
    <tr>
        <td height="10" style="font-size:10px; line-height:10px;"> </td><!-- Spacer -->
    </tr>                        
</table> 
<!-- End Wrapper  --> 

Grid Five

 
<!-- Start Wrapper  -->
<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><!-- Spacer -->
    </tr>
    <tr>
        <td align="center">
                  
            <!-- Start Container  -->
            <table width="600" cellpadding="0" cellspacing="0" border="0" class="container">
                <tr>
                    <td width="120" class="mobile" style="font-family:arial; font-size:12px; line-height:18px;">
                        Grid Five
                    </td>
                    <td width="120" class="mobile" style="font-family:arial; font-size:12px; line-height:18px;">
                        Grid Five
                    </td>
                    <td width="120" class="mobile" style="font-family:arial; font-size:12px; line-height:18px;">
                        Grid Five
                    </td>
                    <td width="120" class="mobile" style="font-family:arial; font-size:12px; line-height:18px;">
                        Grid Five
                    </td>
                    <td width="120" class="mobile" style="font-family:arial; font-size:12px; line-height:18px;">
                        Grid Five
                    </td>                    
                </tr>
            </table>
            <!-- Start Container  -->                   
                  
        </td>
    </tr>
    <tr>
        <td height="10" style="font-size:10px; line-height:10px;"> </td><!-- Spacer -->
    </tr>                        
</table> 
<!-- End Wrapper  -->  

Grid 200-400

      
<!-- Start Wrapper  -->
<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><!-- Spacer -->
    </tr>
    <tr>
        <td align="center">
                  
            <!-- Start Container  -->
            <table width="600" cellpadding="0" cellspacing="0" border="0" class="container">
                <tr>
                    <td width="200" class="mobile" style="font-family:arial; font-size:12px; line-height:18px;">
                        Grid 200
                    </td>
                    <td width="400" class="mobile" style="font-family:arial; font-size:12px; line-height:18px;">
                        Grid 400
                    </td>
                </tr>
            </table>
            <!-- Start Container  -->                   
                  
        </td>
    </tr>
    <tr>
        <td height="10" style="font-size:10px; line-height:10px;"> </td><!-- Spacer -->
    </tr>                        
</table> 
<!-- End Wrapper  -->  

Grid 400-200

   
<!-- Start Wrapper  -->
<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><!-- Spacer -->
    </tr>
    <tr>
        <td align="center">
                  
            <!-- Start Container  -->
            <table width="600" cellpadding="0" cellspacing="0" border="0" class="container">
                <tr>
                    <td width="400" class="mobile" style="font-family:arial; font-size:12px; line-height:18px;">
                        Grid 400
                    </td>
                    <td width="200" class="mobile" style="font-family:arial; font-size:12px; line-height:18px;">
                        Grid 200
                    </td>
                </tr>
            </table>
            <!-- Start Container  -->                   
                  
        </td>
    </tr>
    <tr>
        <td height="10" style="font-size:10px; line-height:10px;"> </td><!-- Spacer -->
    </tr>                        
</table> 
<!-- End Wrapper  -->

Grid Master Template

You can download the grid master template via GitHub at
https://github.com/g13nn/Email-Framework/blob/master/grids/grid-master.html


Spacing on mobile

For grid options featuring more than one td   we need to add spacing between them for the 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 20 between the td



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

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

 
<!-- Start Wrapper  -->
<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><!-- Spacer -->
    </tr>
    <tr>
        <td align="center">
                  
            <!-- Start Container  -->
            <table width="600" cellpadding="0" cellspacing="0" border="0" class="container">
                <tr>
                    <td width="300" class="mobile" style="font-family:arial; font-size:12px; line-height:18px;">
                        Grid Two
                    </td>
                    <td height="20" style="font-size:10px; line-height:10px;" class="mobileOn"></td>
                    <td width="300" class="mobile" style="font-family:arial; font-size:12px; line-height:18px;">
                        Grid Two
                    </td>
                </tr>
            </table>
            <!-- Start Container  -->                   
                  
        </td>
    </tr>
    <tr>
        <td height="10" style="font-size:10px; line-height:10px;"> </td><!-- Spacer -->
    </tr>                        
</table> 
<!-- End Wrapper  --> 


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]-->
    


Modules

Responsive module options


The best part about this framework is the modules. Fully tested modules that you can simply copy & paste into your projects which will certainly speed up your development time. These module options are available in seperate form & even bundled together into a master template. You can find the growing number of modules at https://github.com/g13nn/Email-Framework/tree/master/modules

Module options:

Module One

     
<!-- Start Wrapper  -->
<table width="640" cellpadding="0" cellspacing="0" border="0" class="wrapper" bgcolor="#FFFFFF">
    <tr>
        <td height="20" style="font-size:10px; line-height:10px;"> </td><!-- Spacer -->
    </tr>
    <tr>
        <td align="center">
                  
            <!-- Start Container  -->
            <table width="600" cellpadding="0" cellspacing="0" border="0" class="container">
                <tr>
                    <td width="300" class="mobile" align="center" valign="top">
                            
                        <!-- Start Content -->
                        <table width="280" cellpadding="0" cellspacing="0" border="0" class="container" align="left">
                            <tr>
                                <td width="280" class="mobile" style="font-size:12px; line-height:18px;">
                                    <img src="http://placehold.it/280x210" width="280" height="210" style="margin:0; padding:0; border:none; display:block;" alt="" class="imgClass" />
                                </td>               
                            </tr>
                            <tr>
                                <td height="20" style="font-size:10px; line-height:10px;" class="mobileOn"> </td><!-- Spacer -->
                            </tr> 
                            <tr>
                            	<td height="20" style="font-size:10px; line-height:10px;" >
                            </tr>
                        </table>
                        <!-- Start Content -->                                
                    </td>
                    <td width="300" class="mobile" align="center" valign="top">
                          
                        <!-- Start Content -->
                        <table width="280" cellpadding="0" cellspacing="0" border="0" class="container" align="right">
                            <tr>
                                <td width="280" align="left" class="mobile" style="font-family: Century Gothic, Arial, sans-serif; font-size:20px; line-height:26px; font-weight:bold;">
                                    Testing Modules for the email framework 
                                </td>               
                            </tr>
                             <tr>
                                <td height="20" style="font-size:10px; line-height:10px;"> </td><!-- Spacer -->
                            </tr>                            
                            <tr>
                                <td width="280" align="left" class="mobile" style="font-family: Century Gothic, Arial, sans-serif; font-size:14px; line-height:20px;">
                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porta purus porttitor enim scelerisque, vel malesuada lorem mattis. Curabitur ac orci libero. 
                                </td>               
                            </tr>
                             <tr>
                                <td height="20" style="font-size:10px; line-height:10px;"> </td><!-- Spacer -->
                            </tr>                             
                            <tr>
                                <td width="280" class="mobile" style="font-size:14px; line-height:20px;">
                                    
                                    <!-- Start Button -->
                                    <table width="170" cellpadding="0" cellspacing="0" align="left" border="0"> 
                                        <tr>
                                            <td width="170" height="36" bgcolor="#000000" align="center" valign="middle" 
        style="font-family: Century Gothic, Arial, sans-serif; font-size: 16px; color: #ffffff; 
        line-height:18px; border-radius:3px;">
                                            <a href="" target="_blank" alias="" style="font-family: Century Gothic, Arial, sans-serif; text-decoration: none; color: #ffffff;">My Button ></a>
                                            </td>                                           
                                        </tr>                                        
                                    </table>
                                    <!-- End Button --> 
                                    
                                </td>               
                            </tr>
                            <tr>
                                <td height="20" style="font-size:10px; line-height:10px;"> </td><!-- Spacer -->
                            </tr>                             
                        </table>
                        <!-- Start Content -->                     
                         
                    </td>
                </tr>
            </table>
            <!-- Start Container  -->                   
                  
        </td>
    </tr>                       
</table> 
<!-- End Wrapper  --> 
    

Module Two

    
<!-- Start Wrapper  -->
<table width="640" height="400" cellpadding="0" cellspacing="0" border="0" class="header" background="http://placehold.it/640x400" style="background-image: url(http://placehold.it/640x400);">
    <tr>
        <td align="center">
            <!--[if gte mso 9]>
            <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:640px">
            <v:fill type="frame" src="http://placehold.it/640x400" color="#ffffff" />
            <v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
            <div style="font-size:1px;line-height:1px">
            <table width="640" cellspacing="0" cellpadding="0" border="0" align="center">
            <tbody>
            <tr>
            <td height="400" align="center">
            <![endif]-->            
                  
            <!-- Start Container  -->
            <table width="600" cellpadding="0" cellspacing="0" border="0" class="container">
                            <tr>
                                <td width="280" align="left" class="mobile" style="font-family: Century Gothic, Arial, sans-serif; font-size:20px; line-height:26px; font-weight:bold;">
                                    Testing Modules for the email framework 
                                </td>               
                            </tr>
                             <tr>
                                <td height="20" style="font-size:10px; line-height:10px;"> </td><!-- Spacer -->
                            </tr>                            
                            <tr>
                                <td width="280" align="left" class="mobile" style="font-family: Century Gothic, Arial, sans-serif; font-size:14px; line-height:20px;">
                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porta purus porttitor enim scelerisque, vel malesuada lorem mattis. Curabitur ac orci libero. 
                                </td>               
                            </tr>
                             <tr>
                                <td height="20" style="font-size:10px; line-height:10px;"> </td><!-- Spacer -->
                            </tr>                             
                            <tr>
                                <td width="280" class="mobile" style="font-size:14px; line-height:20px;">
                                    
                                    <!-- Start Button -->
                                    <table width="170" cellpadding="0" cellspacing="0" align="left" border="0"> 
                                        <tr>
                                            <td width="170" height="36" bgcolor="#000000" align="center" valign="middle" 
        style="font-family: Century Gothic, Arial, sans-serif; font-size: 16px; color: #ffffff; 
        line-height:18px; border-radius:3px;">
                                            <a href="" target="_blank" alias="" style="font-family: Century Gothic, Arial, sans-serif; text-decoration: none; color: #ffffff;">My Button ></a>
                                            </td>                                           
                                        </tr>                                        
                                    </table>
                                    <!-- End Button --> 
                                    
                                </td>               
                            </tr>                                       
            </table>
            <!-- Start Container  --> 
                
            <!--[if gte mso 9]>
            </td>
            </tr>
            </tbody>
            </table>
            </div>
            </v:textbox>
            </v:rect>
            <![endif]-->                
                  
        </td>
    </tr>                       
</table> 
<!-- End Wrapper  --> 
    

Module Three


    
 <!-- Start Wrapper  -->
 <table width="640" cellpadding="0" cellspacing="0" border="0" class="wrapper" bgcolor="FFFFFF">
     <tr>
         <td height="20" style="font-size:20px; line-height:20px;"> </td> <!-- Spacer -->
     </tr>
     <tr>
         <td align="center">
                  
             <!-- Start Container  -->
             <table width="600" cellpadding="0" cellspacing="0" border="0" class="container">
                 <tr>
                     <td width="200" class="mobile" style="font-size:12px; line-height:18px;" align="left">
						<!-- Start Content -->
						<table width="180" cellpadding="0" cellspacing="0" border="0" class="container">
    						<tr>
        						<td width="180" class="mobile" style="font-size:12px; line-height:18px;">
           				            <img src="http://www.placehold.it/180x100" width="180" height="100" style="margin:0; padding:0; border:none; display:block;" border="0" class="imgClass" alt="" /> 
        						</td>               
   						 </tr>
                             <tr>
                                <td height="20" style="font-size:10px; line-height:10px;"> </td><!-- Spacer -->
                            </tr>                              
<tr>
                                <td align="left" class="mobile" style="font-family: Century Gothic, Arial, sans-serif; font-size:20px; line-height:26px; font-weight:bold;">
                                    Title One 
                                </td>               
                            </tr>
                             <tr>
                                <td height="20" style="font-size:10px; line-height:10px;"> </td><!-- Spacer -->
                            </tr>                            
                            <tr>
                                <td align="left" class="mobile" style="font-family: Century Gothic, Arial, sans-serif; font-size:14px; line-height:20px;">
                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit.  
                                </td>               
                            </tr>
                             <tr>
                                <td height="20" style="font-size:10px; line-height:10px;"> </td><!-- Spacer -->
                            </tr>                             
                            <tr>
                                <td class="mobile" style="font-size:14px; line-height:20px;">
                                    
                                    <!-- Start Button -->
                                    <table width="180" cellpadding="0" cellspacing="0" align="left" border="0"> 
                                        <tr>
                                            <td width="180" height="36" bgcolor="#000000" align="center" valign="middle" 
        style="font-family: Century Gothic, Arial, sans-serif; font-size: 16px; color: #ffffff; 
        line-height:18px; border-radius:3px;">
                                            <a href="" target="_blank" alias="" style="font-family: Century Gothic, Arial, sans-serif; text-decoration: none; color: #ffffff;">My Button ></a>
                                            </td>                                           
                                        </tr>                                        
                                    </table>
                                    <!-- End Button --> 
                                    
                                </td>               
                            </tr>
                             <tr>
                                <td height="20" style="font-size:10px; line-height:10px;"> </td><!-- Spacer -->
                            </tr>                                 
						</table>
						<!-- Start Content -->
                     </td>
                     <td width="200" class="mobile" style="font-size:12px; line-height:18px;" align="center">
<!-- Start Content -->
                        <table width="180" cellpadding="0" cellspacing="0" border="0" class="container">
                            <tr>
                                <td width="180" class="mobile" style="font-size:12px; line-height:18px;">
                                       <img src="http://www.placehold.it/180x100" width="180" height="100" style="margin:0; padding:0; border:none; display:block;" border="0" class="imgClass" alt="" /> 
                                </td>               
                            </tr>
                             <tr>
                                <td height="20" style="font-size:10px; line-height:10px;"> </td><!-- Spacer -->
                            </tr>                              
<tr>
                                <td align="left" class="mobile" style="font-family: Century Gothic, Arial, sans-serif; font-size:20px; line-height:26px; font-weight:bold;">
                                    Title Two 
                                </td>               
                            </tr>
                             <tr>
                                <td height="20" style="font-size:10px; line-height:10px;"> </td><!-- Spacer -->
                            </tr>                            
                            <tr>
                                <td align="left" class="mobile" style="font-family: Century Gothic, Arial, sans-serif; font-size:14px; line-height:20px;">
                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit.  
                                </td>               
                            </tr>
                             <tr>
                                <td height="20" style="font-size:10px; line-height:10px;"> </td><!-- Spacer -->
                            </tr>                             
                            <tr>
                                <td class="mobile" style="font-size:14px; line-height:20px;">
                                    
                                    <!-- Start Button -->
                                    <table width="180" cellpadding="0" cellspacing="0" align="left" border="0"> 
                                        <tr>
                                            <td width="180" height="36" bgcolor="#000000" align="center" valign="middle" 
        style="font-family: Century Gothic, Arial, sans-serif; font-size: 16px; color: #ffffff; 
        line-height:18px; border-radius:3px;">
                                            <a href="" target="_blank" alias="" style="font-family: Century Gothic, Arial, sans-serif; text-decoration: none; color: #ffffff;">My Button ></a>
                                            </td>                                           
                                        </tr>                                        
                                    </table>
                                    <!-- End Button --> 
                                    
                                </td>               
                            </tr>
                             <tr>
                                <td height="20" style="font-size:10px; line-height:10px;"> </td><!-- Spacer -->
                            </tr>                                 
                        </table>
                        <!-- Start Content -->
                     </td>
                     <td width="200" class="mobile" style="font-size:12px; line-height:18px;" align="right">
<!-- Start Content -->
                        <table width="180" cellpadding="0" cellspacing="0" border="0" class="container">
                            <tr>
                                <td width="180" class="mobile" style="font-size:12px; line-height:18px;">
                                       <img src="http://www.placehold.it/180x100" width="180" height="100" style="margin:0; padding:0; border:none; display:block;" border="0" class="imgClass" alt="" /> 
                                </td>               
                            </tr>
                             <tr>
                                <td height="20" style="font-size:10px; line-height:10px;"> </td><!-- Spacer -->
                            </tr>                              
<tr>
                                <td align="left" class="mobile" style="font-family: Century Gothic, Arial, sans-serif; font-size:20px; line-height:26px; font-weight:bold;">
                                    Title Three 
                                </td>               
                            </tr>
                             <tr>
                                <td height="20" style="font-size:10px; line-height:10px;"> </td><!-- Spacer -->
                            </tr>                            
                            <tr>
                                <td align="left" class="mobile" style="font-family: Century Gothic, Arial, sans-serif; font-size:14px; line-height:20px;">
                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit.  
                                </td>               
                            </tr>
                             <tr>
                                <td height="20" style="font-size:10px; line-height:10px;"> </td><!-- Spacer -->
                            </tr>                             
                            <tr>
                                <td class="mobile" style="font-size:14px; line-height:20px;">
                                    
                                    <!-- Start Button -->
                                    <table width="180" cellpadding="0" cellspacing="0" align="left" border="0"> 
                                        <tr>
                                            <td width="180" height="36" bgcolor="#000000" align="center" valign="middle" 
        style="font-family: Century Gothic, Arial, sans-serif; font-size: 16px; color: #ffffff; 
        line-height:18px; border-radius:3px;">
                                            <a href="" target="_blank" alias="" style="font-family: Century Gothic, Arial, sans-serif; text-decoration: none; color: #ffffff;">My Button ></a>
                                            </td>                                           
                                        </tr>                                        
                                    </table>
                                    <!-- End Button --> 
                                    
                                </td>               
                            </tr>
                             <tr>
                                <td height="20" style="font-size:10px; line-height:10px;"> </td><!-- Spacer -->
                            </tr>                                 
                        </table>
                        <!-- Start Content -->
                     </td>                    
                 </tr>
             </table>
             <!-- Start Container  -->                   
                  
         </td>
     </tr>                        
 </table> 
 <!-- End Wrapper  --> 
    
    

Module Four

    
<!-- Start Wrapper  -->
<table width="640" cellpadding="0" cellspacing="0" border="0" class="mobileOff" bgcolor="#f6f6f6">
    <tr>
        <td height="10" style="font-size:10px; line-height:10px;"> </td><!-- Spacer -->
    </tr>
    <tr>
        <td align="center">
                  
            <!-- Start Container  -->
            <table width="600" cellpadding="0" cellspacing="0" border="0" class="container">
                <tr>
                    <td width="300" class="mobile" align="left" style="font-size:12px; line-height:18px;">
                        This is your pre header!
                    </td>
                    <td width="300" class="mobile" align="right" style="font-size:12px; line-height:18px;">
                        <a href="" target="_blank" alias="" style="font-size:12px; line-height:18px; color:#222222; text-decoration:underline;">View Online</a>   
                    </td>
                </tr>
            </table>
            <!-- Start Container  -->                   
                  
        </td>
    </tr>
    <tr>
        <td height="10" style="font-size:10px; line-height:10px;"> </td><!-- Spacer -->
    </tr>                        
</table> 
<!-- End Wrapper  -->  

Module Five

    
    <!-- Start Wrapper -->
    <table width="640" cellpadding="0" cellspacing="0" align="center" border="0" class="wrapper" bgcolor="#ffffff">
        <tbody>
            <tr>
                <td height="20" style="line-height:20px; font-size:20px;"> </td>
            </tr>            
            <tr>
                <td align="center" bgcolor="#ffffff">
                                        
                    <table width="600" cellpadding="0" cellspacing="0" align="center" border="0" class="container">
                        <tr>
                            <td align="left" class="mobile" style="font-family: Century Gothic, Arial, sans-serif; font-size:20px; line-height:26px; font-weight:bold;">
                                    Here's that all important title for your intro copy! 
                            </td> 
                        </tr>
                        <tr>
                            <td height="20" style="line-height:20px; font-size:20px;"></td>
                        </tr>                         
                        <tr>
                            <td align="left" style="font-family:Verdana, Arial, sans serif; font-size: 14px; color: #4d4d4d; line-height:18px;">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur orci neque, efficitur sit amet luctus eget, malesuada eu turpis. Duis bibendum sem pharetra quam ullamcorper malesuada. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
                                <a href="" target="_blank" alias="" style="color: #000000; text-decoration: none; font-weight: bold; text-decoration:underline;">this is a link!</a> 
                            </td>
                        </tr>
                                                        
                        <tr>
                            <td height="20" style="line-height:20px; font-size:20px;"> </td>
                        </tr>
                                                        
                        <tr>
                            <td align="left" class="center">
            
                                    <!-- Start Button -->
                                    <table width="190" cellpadding="0" cellspacing="0" align="left" border="0"> 
                                        <tr>
                                            <td width="190" height="36" bgcolor="#000000" align="center" valign="middle" 
        style="font-family: Century Gothic, Arial, sans-serif; font-size: 16px; color: #ffffff; 
        line-height:18px; border-radius:3px;">
                                            <a href="" target="_blank" alias="" style="font-family: Century Gothic, Arial, sans-serif; text-decoration: none; color: #ffffff;">My Button ></a>
                                            </td>                                           
                                        </tr>                                        
                                    </table>
                                    <!-- End Button -->  
                                                                    
                            </td>
                        </tr>
                    </table>
                                                
                </td>
            </tr>
            <tr>
                <td height="20" style="line-height:20px; font-size:20px;"> </td>
            </tr>            
        </tbody>
    </table>
    <!-- End Wrapper -->  
    
    
    

Module Master Template

You can download the module master template via GitHub at
https://github.com/g13nn/Email-Framework/blob/master/modules/module-master.html


Typography

Using typography in HTML email


Content block

To start creating content you will need to add a content block (see below) you add the content block inside one of your td   in your grid. On your surrounding td   you will need to add a align="center" tag. You will need to set a width on the table and td of your content block at minus 20px of the grid's width. This will align your content block center giving you padding each side. To get padding on the top and bottom simply add a spacer to the top and bottom of your wrapper. Spacing code can be found in the next steps below.

    
<!-- Start Content -->
<table width="SETWIDTH" cellpadding="0" cellspacing="0" border="0" class="container">
    <tr>
        <td width="SETWIDTH" class="mobile" style="font-family:arial; font-size:12px; line-height:18px;">
            Content
        </td>               
    </tr>
</table>
<!-- End Content -->
    

Notes:

● Simply type your text where it says content.

● You can adjust the font size if you do make sure the line height is adjusted to +6 of the font size value.

● You must add your font family to the style tag each time you do a new content table or row.

● 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 class="mobile" style="font-size:12px; line-height:18px;">
        My Title
    </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> <!-- Spacer -->
 </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" alias="" style="font-size:12px; line-height:18px; color:blue; text-decoration:underline;">my link</a>   
    


Buttons

Simple Button for Email Clients


The example below does not link the whole button only the text. To create a fully clickable button you can do so using this online tool

    
<!-- Start Button -->
<table width="200" cellpadding="0" cellspacing="0" align="center" border="0"> 
    <tr>
        <td width="200" height="36" bgcolor="#000000" align="center" valign="middle" 
        style="font-family: Arial,Helvetica,sans-serif; font-size: 16px; color: #ffffff; 
        line-height:18px;">
        <a href="" target="_blank" alias="" style="text-decoration: none; color: #ffffff;">My Button ></a>
        </td>
    </tr>
</table>
<!-- End Button --> 


Images

Correctly render images in email clients


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" class="imgClass" 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).


Image Sizes

Here is a table to show you what size your images should be set to inside our grid blocks or content blocks.

  Grid   Size   Content
  Full Width   800px / 100%   800px / 100%
  The Wrapper   640px   640px
  The Container   600px   600px
  Grid One   600px   580px
  Grid Two   300px   280px
  Grid Three   200px   180px
  Grid Four   150px   130px
  Grid Five   120px   100px
  Grid 200-400   200px-400px   180px-380px
  Grid 400-200   400px-200px   380px-180px


Designers

Included in this framework is a PSD containing all widths and guidelines for designing emails templates with the email framework in mind.


Supported Clients

Thoroughly tested using Litmus.com


This email framework is supported on over 40+ 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)   ✔   Gmail (Android, iOS & Apps) does not support media queries. Desktop version only.
  Outlook 2011 for Mac   ✔
  AOL Mail (Explorer, Firefox & Chrome)   ✔
  Hotmail   ✔
  Outlook.com (Explorer, Firefox & Chrome)   ✔
  Yahoo! (Explorer, Firefox & Chrome)   ✔
   Lotus Notes 7 , 8 , 8.5 & IBM Notes 9   ✔
   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