Versatile Newsletter 2 - 9 layouts, modular system | Documentation v1.0 - 14 May 2010


Versatile Newsletter 2


Thank you for purchasing my template. If you have any questions that are beyond the scope of this help file feel free to contact me using the form on my profile page. If you want to stay up to date with file updates and new releases, follow me on twitter or send me an email with your info and I will add you to my mailing list. Thanks so much!


  1. Folder structure
  2. (Re)Introduction to coding html emails
  3. How to Create and edit a Versatile Html Email V2 template

folder structure

The package contains:

  1. /01.layout-creator - There are cases when you need a completly different layout then anything you find included in the package. The layout creator system is here for such cases: it allows you to create new newsletter templates ( with the same general feel as the ones included but completly different layouts) without having to write any code. More on this later. For now it is sufice to know that if you need a new layout, you will use whats contained in this folder to create it.
  2. /02.layouts-embedded-css - This is the folder that contains the 9 layouts that come with the package. They have embedded css and so they are more easy to work with to create the newsletter then files with inline css.
  3. /03.layouts-inline-css - This folder contains the same 9 layouts as /02.layouts-embedded-css but this time they have the css inlined. Ideally the newsletters you send out should have the css inlined because some email clients strip the <head> section along with the css embedded in it. The existence of this folder is more of a requirement of themefrest then anything else and it can be ignored completly for the following reasons:
    • it would be a nightmare to edit these files compared to the embedded css files
    • there are FREE online services that convert your embedded css files to inline css files ( I used one of these services to convert the embedded css tempaltes to the ones included in this folder and I will show you how to use it yourself in the last part of the documentation)
  4. /04.screenshots-email-clients - This folder contains proof that at at the moment of creating this product ( january 2011 ) the layouts worked and looked consistent in all major email clients. It is there to help item reviewers but also give you the certainty that the newsletters build with this product are indeed compatible with all major email clients.
  5. /05.png-psd-sources - Contains .png and .psd sources that will come in handy if you decide to create custom color schemes and / or to alter the design ( eg. change the content divider's looks)
  6. /06.documentation - Contains the documentation you are reading now
  7. readme-first.txt

Email readers have little support for CSS so if you want to design an html email that renders constantly across different email clients then an XHTML & CSS aproach to the design is wrong. You need to go back to TABLE based layouts, using minimum CSS and only for presentation purposes.

I though it would be a good idea to start the documentation with a refresher on the topic that will make it easier to understand what is going on in the newsletters provided. Below you will find general guidlines, links to external references and example source code.

Designing layouts using tables:

Using CSS in newsletters


Introducing the Step by Step Newsletter Creator System

As I mentioned before in the documentation it is always prefered to stack more tables one under the other then nesting them or creating very complicated table structures as it reduces the risk of the layout breaking in the email clients.

Starting from this principle I created a modular newsletter system, composed of:

  1. The Base file. It contains the general newsletter layout + the table which would hold the newsletter content.
  2. The Modules. - The term module is used to describe a pre-made table structure. Starting from a base <td> width of 120px and 166px and using spacers, 10 modules with different colomn structures have been created. The will hold the actual content and will be stacked inside the table specially created for this purpose from the base file.

So, creating a layout is as simple as staking different modules in the main content section of a base file template, customizing the css to your liking and then transforming the embedded css to inline css. This last step can be automated using html Premailer, a free service found at http://premailer.dialect.ca/

To make things even easier I created some helper pages from where you can copy paste the source code for modules and base files, get dummy text, placeholder images of various sizes and examples of the tags and classes you have available to put the content in the newsletter. This greatly reduces the time needed to create a layout and also allows you to build a whole layout, that you can be sure work fine in most email clients, without having to write a single of code.

I call it the Step by Step Newsletter Creator System and you can acces it here: ../layout-creation/00-start.html

It has 4 simple steps:

  1. Choose a base file + customize it if needed
  2. Stack as many modules as needed to create the desired layout
  3. Add the actual content in the modules
  4. Finish - host iamges, inline css etc

We will go over every step in detail, below.

How to customize a base file:



  1. Customize the background/ background color:
    To change the background color change the bgcolor and background values of <body> and the wrapper table:
    <body leftmargin="0" marginwidth="0" topmargin="0" marginheight="0" offset="0"  bgcolor="#E3E3E3" background="images/bg.png">
    
    <!-- wrapper table - needed as some readers strip the <html>, <head> and <body> tags -->	
    <table cellpadding="0" cellspacing="0" width="100%"  bgcolor="#E3E3E3" background="images/bg.png" class="wrapper">		
    			
  2. Customize the view in mobile devide / browser text:
    
    	Mobile version <a href="http://www.site.com/mobile">here</a>.<br>
    	To view hosted version click <a href="http://www.site.com/hosted">here</a>.
    			
    and css
    .view-mobile-browser{ line-height:14px; font-size:11px; }
    	.view-mobile-browser a{ color:#3a3a3a; }
    			
  3. Customize the view or website text
    
    	Visit our website
    	<br><a href="http://www.site.com/">www.YourWebsite.com</a>
    			
    and css
    .ourwebsite{ line-height:14px; font-size:11px; }
    	.ourwebsite a{ font-weight:bold; }
    			
  4. Customize the logo:
    Open the file logo.png in the /png-psd-sources/individual-layers folder
    Edit it with gimp, photoshop or fireworks, save it as a jpg in /layout-creation/images and link to it's location
    <a href="http://www.site.com/"><img src="images/logo.jpg" width="182" height="57" border="0" alt=""></a>			
    			
  5. Customize the menu / slogan
    
    	  <a href="http://www.site.com/">Lementu</a>
    	| <a href="http://www.site.com/">Donecos</a>
    	| <a href="http://www.site.com/">Sagittis</a>
    	| <a href="http://www.site.com/">Lorem  &amp; Pellentes</a>		
    			
    and css
    .menu-or-slogan{}
    	.menu-or-slogan a{ color:#3a3a3a; text-decoration:underline; }
    			
  6. Customize the main content section
    5.1 Change the border or remove it
    <table cellpadding="0" cellspacing="0" width="600" bgcolor="#ffffff" bordercolor="#d6d6d6"   
    border="1" rules="none" frame="border"  align="center" class="main-content-wrap"><tr><td>
    
    ...
    
    </td></tr></table>			
    			
    and css
    .main-content-wrap{ border-width: 1px 1px 1px 1px; border-spacing: 0px; border-style: solid solid solid solid; 
    border-color: #d6d6d6 #d6d6d6 #d6d6d6 #d6d6d6; border-collapse: collapse; background-color: #ffffff; }
    			
    5.2 Change background color
    <table cellpadding="0" cellspacing="0" width="600" bgcolor="#ffffff" bordercolor="#d6d6d6"   
    border="1" rules="none" frame="border"  align="center" class="main-content-wrap"><tr><td>
    
    ...
    
    </td></tr></table>			
    			
    and css
    .main-content-wrap{ border-width: 1px 1px 1px 1px; border-spacing: 0px; border-style: solid solid solid solid; 
    border-color: #d6d6d6 #d6d6d6 #d6d6d6 #d6d6d6; border-collapse: collapse; background-color: #ffffff; }
    			

    Note: If you change the background color from white you will have to edit the module dividers and content spacers to make them match the new color.

  7. Modify the social media
    <table cellpadding="0" cellspacing="0" bgcolor="#efefef" class="social">
    <tr>
    	
    	<td width="30"  height="45" valign="middle">&nbsp;</td>
    	
    	<td width="120" height="45" valign="middle"><b>Connect with us:</b></td>
    	
    	<td width="25"  height="45" valign="middle">
    		<a href="http://www.wordpress.com/" title=""><img src="images/social/wordpress.png" width="24" height="24" border="0" alt=""></a> 	 
    	</td>
    	<td width="88"  height="45" valign="middle">
    		&nbsp;&nbsp;<a href="http://www.wordpress.com/" title="">Our Blog</a>
    
    	</td>
    	
    	<td width="25"  height="45" valign="middle">
    		<a href="http://www.facebook.com/" title=""><img src="images/social/facebook.png" width="24" height="24" border="0" alt="" ></a>	 
    	</td>
    	<td width="88"  height="45" valign="middle">
    		&nbsp;&nbsp;<a href="http://www.facebook.com/" title="">Facebook</a>
    	</td>
    	
    	<td width="25" height="45" valign="middle">
    		<a href="http://www.linkedin.com/" title=""><img src="images/social/linkedin.png" width="24" height="24" border="0" alt=""></a>	 
    	</td>
    
    	<td width="88" height="45" valign="middle">				 
    		&nbsp;&nbsp;<a href="http://www.linkedin.com/" title="">LinkedIn</a>				
    	</td>
    	
    	<td width="25" height="45" valign="middle">
    		<a href="http://www.twitter.com/" title=""><img src="images/social/twitter.png" width="24" height="24" border="0" alt=""></a> 	 
    	</td>
    	<td width="88" height="45" valign="middle">
    		&nbsp;&nbsp;<a href="http://www.twitter.com/" title="">Twitter</a>
    	</td>
    
    	
    </tr>
    </table>			
    			
    and css
    .social{ border-top:1px solid #D0D0D0; border-bottom:1px solid #D0D0D0; }
    	.social a{ color:#3a3a3a; text-decoration:none; }
    			

    You will find more social media icons in layout-creation/images/social

  8. Customize the company Info
    <p>
    	<b>YourCompany</b>, Some Adress
    	<br> Some City, XY 305, Some Country
    	<br>T: +1 234 567 8910
    	<br>E: <a href="mailto:office@yoursite.com">office@yoursite.com</a>
    </p>			
    			
    and css
    .companyinfo{}
    	.companyinfo a{}
    			
  9. Customize the subscription options
    <p>
       This newsletter was sent to mail@asite.com
       <br>from YourCompany because you subscribed
       <br><a href="http://www.site.com/">Unsubscribe instantly</a> 
       | <a href="http://www.site.com/">Forward to a friend</a>
    </p>			
    			
    and css
    .subscription{}
    	.subscription a{}
    			
  10. Customize the copyright Info
    <p>&copy; 2010 <b>Your Company</b>. All rights reserved.</p>		
    			
    and css
    .copyright{}
    	.copyright a{ color:#565656; text-decoration:none; }
    			

Step 02. Add Modules + Module Dividers

Step 03. Add Content

Step 04. Inline css + Finish