How to Code HTML Email Template

HTML emails are a popular marketing tool and you will almost definitely come across clients that want you to build them. So here are some tips and rules to code a good email template.

#1 Use TABLES for the layout.

Here’s a simple example.

<table cellspacing="0" cellpadding="10" border="0">
 <tr>
  <td width="100"></td>
  <td width="200"></td>
 </tr>
</table>

#2 Use inline CSS

HTML emails do support limited CSS, but you can’t use an external style sheet. Instead, you use inline CSS to style the various elements in the tables.

<p style="background: #cccccc; color: white;">Some text goes here.</p>

The snippet above shows you the basic syntax for inline CSS. As you can see, the code is essentially the same, you just embed it right into the code of your HTML rather than linking to another document.

#3 Be Careful With Images and Width

Use a small document width of the email template (600px) most of mailers don't support a wide width. Image need to be uploaded to a server. Be careful with background images its not a good idea to use it as some of mailers (like hotmail) don't support that css option.

#4 Test your code

After you build a the tenmplate it need to be tested and I'm not talking only about Internet Explorer, Firefox, Chrome is even worse it need to be tested in most popular used email clients Gmail, Yahoo, Hotmail, Outlook, AOL etc.

Cross-browser CSS3 rounded corners

Almost all modern browser (FireFox, Safari, Chrome and Opera since 10.50 pre-alpha) supports CSS3 border-radius, but unfortunately none of a versions of Internet Explorer (even IE8) does not support this property.

Step 1.  Border-radius for modern browsers

 This is the way that works in all modern browsers (except IE8) like FireFox, Safari, Chrome and Opera since 10.50 pre-alpha:

.rounded-corners {
-moz-border-radius: 10px; /* Firefox */
-webkit-border-radius: 10px; /* Safari, Chrome */ 
-o-border-radius: 10px; /* Opera */
border-radius: 10px; /* CSS3 */
}
 

Step 2. Border-radius for Internet Explorer

Download the Download file, put it somewhere on your site, and then use this CSS code:

.rounded-corners {
  behavior: url(http://yoursite.com/border-radius.htc);
}

And replace http://yoursite.com/ on your absolute path, where you have placed the border-radius.htc file.
I think it’s better to put this CSS in a separate file and connect it using conditional comments:

<!--[if IE]><link rel="stylesheet" href="ie.css" type="text/css" 

media="screen, projection" /><![endif]-->

 

 

 

Cross browser css float clearing

Solution 1: The :after Pseudo-Element (Best one)

The :after pseudo-element adds an element to the rendered HTML page. This method has been used quite extensively to resolve float-clearing issues. Here is how the CSS looks:

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

The CSS class “clearfix” is applied to any container that has floating children and does not expand to enclose them.
But this method does not work in Internet Explorer up to version 7, so an IE-only style needs to be set with one of the following rules:

.clearfix {
 display: inline-block;
}

.clearfix {
 zoom: 1;
}

Depending on the type of issue you’re dealing with, one of the above two
 solutions will resolve the issue in Internet Explorer. It should be 
noted that the zoom property is a non-standard Microsoft proprietary property,

 and will cause your CSS to become invalid. 

Solution 2: New element with a clear: both option.(Old one)

This is an outdated method, but is an easy option. Simply add an extra element at the bottom of the container and “clear” it. Here’s how the HTML would look after this method is implemented:

<div>
    <div style="float: left">Some floated text</div>
    <p>Some unfloated text</p>

  <div style="clear: both"></div>
</div>

</div>

Solution 3: Overflow Property

By far the best, and easiest solution to resolve the collapsing parent issue is to add overflow: hidden or overflow: auto to the parent element. It’s clean, easy to maintain, works in almost all browsers, and does not add extra markup.
You’ll notice I said “almost” all browsers. This is because it does not work in IE6. But, in many cases, the parent container will have a set width, which fixes the issue in IE6. If the parent container does not have a width, you can add an IE6-only style with the following code:

// This fix is for IE6 only
.clearfix {
 height: 1%;
 overflow: visible;
}

In IE6, the height property is incorrectly treated as min-height, so this forces the container to enclose its children. The overflow property is then set back to “visible”, to ensure the content is not hidden or scrolled.
The only drawback to using the overflow method (in any browser) is the possibility that the containing element will have scrollbars or hide content. If there are any elements with negative margins or absolute positioning inside the parent, they will be obscured if they go beyond the parent’s borders, so this method should be used carefully. It should also be noted that if the containing element has to have a specified height, or min-height, then you would definitely not be able to use the overflow method.
So, there really is no simple, cross-browser solution to the collapsing parent issue. But almost any float clearing issue can be resolved with one of the above methods.