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!
The package contains:
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.
<!-- 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-->
<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>
<table cellpadding="0" cellspacing="0" width="100%" bgcolor="#E3E3E3" background="images/bg.png">
<td width="352" valign="top" align="left">
<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="">
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:
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:
We will go over every step in detail, below.
How to customize a base file:
<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">
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; }
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; }
<a href="http://www.site.com/"><img src="images/logo.jpg" width="182" height="57" border="0" alt=""></a>
<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 & Pellentes</a>and css
.menu-or-slogan{} .menu-or-slogan a{ color:#3a3a3a; text-decoration:underline; }
<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.
<table cellpadding="0" cellspacing="0" bgcolor="#efefef" class="social"> <tr> <td width="30" height="45" valign="middle"> </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"> <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"> <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"> <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"> <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
<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{}
<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{}
<p>© 2010 <b>Your Company</b>. All rights reserved.</p>and css
.copyright{} .copyright a{ color:#565656; text-decoration:none; }
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>
.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">
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.