I am frequently asked to build HTML email templates for clients and internal projects. Recently, I created a template as a base to start from. The template is available for download, feel free to download and use it if you are looking for a neat clean standards complient start to your email marketing campaign.
Sending HTML email can be a challenge. Questions about image hosting, embeded CSS, viewer support etc. are exponentially more complicated than a simple web page. My approach to this project was to make the template as simple as possible placing the emphasis on the content with fewer images, included CSS, simple but elegant design and fully complient markup.
Just to be safe I designed for IE6 and up. Because of this I am using a “transitional” DOCTYPE and hybrid markup strategy that utilizes tables for structure and CSS for font styles, backgrounds and margins. The layout is a simple 2 column design with header and footer. In its current form the template requires on four images, thumbnail and feature images are optional.
Super Clean CSS
3 Comments
TexasWeb, I tested your code in both gmail and hotmail and found that you can control the alignment of the text by moving your style code down below the body tag. Without doing this all of the content will center justify in hotmail and gmail.
TexasWeb: Thanks for the comments/corrections! I should have qualified my blog post by pointing out that this code was originally written for an internal only HTML email newsletter in which we had very tight control over the email reader that employees were using to view the messages.
Regardless, you make a number of really excellent points in your comments. I have looked over your linked blog post and found a lot of great information and you can be sure I will use if I have occasion to design a template for general public consumption. Thanks for contributing!
I don’t know where to start! There are som many things that simply won’t work if you want to render this email properly in ALL email clients. As you know, there are no email standards for rendering HTML and CSS.
Outlook 2007, Lotus Notes and Google Gmail do not support width/height.
If width isn’t supported then the default width becomes 100% for block-level elements. That means that text-align and float, which depend on width, won’t work. That leaves very few options–the email would have to be in an HTML table and we would have to eliminate both and tags from the markup. In order for the email to print correctly on the wide range of home and business printers the width of the table would have to be fixed at a maximum of 620 pixels and aligned to the left as many email clients won’t allow center formatting. Because Google GMail forces the content towards the center you need to add a padding of 10 to the content container. Remember that margin styles do not work in cells but padding does. When defining the CSS in-line styles it is necessary to use full and specific tags rather than CSS shorthand. http://www.texaswebdevelopers.com/blog/template_permalink.asp?id=121
Leave a Reply