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

# Versatile Newsletter 2

Author Info
Profile: themeforest.net/user/bitpub
Website: www.bitpublimedia.ro
Twitter: twitter.com/bitpub

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!

## Table of Contents

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

## Folder structure - top

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

## (Re)Introduction to coding html emails - top

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:

- Use tables for layouts
- since the <html>, <head>, and <body> tags are generally stripped so as not to interfere with the email clients own code you should wrap the whole design in a 100% width table and set the backgound you wanted the body to have to this table

      <!-- 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">
      <tr><td>

      ...

      </td></tr>
      </table><!-- end wrapper table-->

- the width of the actual content should be 600px max so the email can be viewed in the majority of email clients without the need to horizontal scroll

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

      // newsletter content here

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

- if you want to set background images use the "background" attribute of tables rather then CSS. Make sure to set a background color using "bgcolor" that allows the text to be read in case the background you set isn't loaded

      <table cellpadding="0" cellspacing="0" width="100%" bgcolor="#E3E3E3" background="images/bg.png">

- to align content inside a table cell (<td>) make use of the valign and align attributes

      <td width="352" valign="top" align="left">

  1. valign - specifies the vertical alignment of the content in a cell. Most of the cases you want it set to "top". Default value is "middle".
  2. align - specifies the horizontal alignment of the content inside a cell. Default value is "left" so you have to use it only when you want the text to be centered or aligned right
- images are blocked by default in some email clients so make sure to set "width", "height" and "alt" so the design doesn't break. If you want to align a image left or right use the <img> tags "align" attribute along with the "hspace" attribute to create some whitespace on the left and right side of an image.

      <img src="template-1/540x300.jpg" width="540" height="300" alt="">

      <img src="template-1/540x300.jpg" width="540" height="300" align="right" hspace="10" alt="">

- the "colspan" attribute is not widely suported so it is recommended that you don't use it
- besides the wrapper tables try not to nest tables or make very complicated ones. Use a stacking system instead (more about it later in the documentation).

### Using CSS in newsletters

- don't link to an external stylesheet but use embedded css or even better inline css
- if you use embedded css make sure you define <style type="text/css"> /* your css */ </style>under the <body> tag. Also email readers consider that a newline starting with the character . (dot) is the end of the email. So if you define classes make sure to add a space before the declaration.
- use inline css <p style="...."> to make sure that the css works in every reader. I'll present a easy way to work with embedded CSS while designing the html email and then switch it to inline css almost instantly just before sending it out.
- do not use CSS short hand
- <div>'s are not suported and you should not use them
- <span>'s being inline elements are suported and are useful
- use basic css. check http://www.campaignmonitor.com/css/ to see exactly what css is suported by email clients

## How to Create and edit a Versatile Html Email V2 template - top

### 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.

### Step 01. Select a Base File

- The base file is basically the shell that will hold the modules that will contain the actual newsletter content.
- Choose a base file from the ones on the page, then copy the source code from the textarea just beneath it
- Save the source code as a new html file directly in the /01.layout-creator folder as it depends on some images contained in the subfolders /01.layout-creator/images and /01.layout-creator/placeholders

How to customize a base file:

0. 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">

1. 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; }

2. 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; }

3. 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>

4. 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; }

5. 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.

6. 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

7. 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{}

8. 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{}

9. 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

- 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
- So, creating any email layout is as simple as stacking as many modules as needed.
- Module dividers should be used to create space between the modules
- Copy the source code in the previously saved base file, right below the comment <!-- START MAIN CONTENT. ADD MODULES BELOW -->

### Step 03. Add Content

- Add the content in the modules using <h1> -> <h4>, <p>, <a>, <ul>,<img> etc.
- Use <b> instead of <strong> and <i> instead of <em>
- Use <span class="shout"> ... </span> to make a text stand out and <span class="silence"> ... </span> to make it bland in
- In the /01.layout-creator/placeholders folder you will find placeholder images of different sizes. Use them to quickly mock up
- To align text you have available the classes: .text-align-center and .text-align-right
- If you have to align pictures use both the align attribute as well as class="img-left-aligned" and class="img-right-aligned". You can change the way these elements look in the <style> section.
- Sometimes you will need to make use of <br> elements to align and separate content.
- There is a bug in Hotmail that makes headers turn green. The bug fix requires that an <span> element be included inside the header and the color be set to that, which I have done. So remember about adding the <span> element when adding headlines

      h3{ font-family:Arial, sans-serif; color:#000000; font-size:16px; font-weight:bold; }
      	h3 span{ color:#000000; } /* Hotmail header color bug fix */
      	h3 a{ text-decoration:none; color:#2A5DB0; }

      ...

      <h3><span>Suspend ornare egestas tincidunt</span></h3>

- There is a Gmail and Hotmail bug which causes extra space to appear under an image. To fix it you have to make that image display:block. I've created a class for this purpose with you can give to images with problems:

      .block{ display:block; } /* Gmail and Hotmail space under images bug fix */

      ...

      <img src="images/module-divider-3.gif" width="600" height="30" alt="" class="block">

### Step 04. Inline css + Finish

- Transform the embedded Css to inline Css
  This will ensure the css is used by the majority of client email readers.
  The way to do this is:

  1. Change in the code each class="" with style="... the rules in the class definition int the header ..."
  ex. <img src="200x150px.jpg" width="200" height="150" alt="" align="right" class="img-right-aligned"> becomes <img src="200x150px.jpg" width="200" height="150" alt="" align="right" style="margin-left:20px; margin-top:0px; margin-bottom:5px; margin-top:5px;">

  2. If you have general rules in the css you must add them to every tag:
  ex. in the css
  table{ color:#666666; font-family:Arial, sans-serif; font-size:12px; line-height:20px; }
  in the html
  <table width="600" cellpadding="0" cellspacing="0" border="0" align="center">
  becomes
  <table width="600" cellpadding="0" cellspacing="0" border="0" align="center" style="color:#666666; font-family:Arial, sans-serif; font-size:12px; line-height:20px;">

  Needless to say this is a painstaking process. Luckily there is an free online service that does all of this automatically; it is called premailer and is found as http://premailer.dialect.ca/

  Visit the page, select "Use HTML as the source" and copy paste your code that has the CSS embedded in the <head> section. It will create a version with the css inlined.

- Load all your images on a webserver and change the paths in the html to absolute paths.
- Send the html email with your favorite application or online services like Campaign Monitor and Mail Chimp.