There hasn't been much focus on the art of designing e-mail newsletter layouts. The process does not require as much intensive work as building an entire webpage or CMS theme. You can make a single-page email template and copy out the styles to work in a myriad of situations.
For this tutorial I want to present a demo newsletter for Template Monster and explain some of the techniques we can use. The codes are more focused around rendering properly within e-mail clients such as Outlook, GMail, Hotmail, and Yahoo! Mail. This means we are building on top of HTML tables because the other methods for constructing layouts just do not work.
Live Demo - Download Source Code
From Humble Beginnings
I like to start email projects by looking over the HTML Email Boilerplate template. This provides a lot of helpful CSS styles and basic table structures for making your own template. There are so many odd browser quirks for rendering e-mails that you could spend weeks studying them.
I try to be reasonable and only keep the CSS classes that I am going to use. This boilerplate is full of code comments which explain why you should be using certain properties or elements. If you are unfamiliar with email design then this is definitely a good place to start. My own demo will use the same XHTML Strict doctype which is also used by Google Mail.
TemplateMonster Newsletter - Tutorial Demo
Aside from all the inline CSS styles the header is actually very simple. We do not need to include fancy meta tags because most of these will be stripped out anyways. However the styles are important and generally render best when placed inside the header. I am not using very many resets because not all e-mail parsers will bother picking them up.
Instead we setup basic defaults for paragraphs, images, links, and table structures. All of the specific customizations should be added inline onto the element. This prevents your styles from being stripped out by the parser and causing your fonts or images to appear distorted.
Digging into Body Content
The most annoying part of building around tables is the amount of repetitive HTML you have to look through. When you are accustomed to adding content into simple HTML div elements it can be exhausting to go through multiple layers of tables. But ultimately this is the most preferred method for supporting all email layouts.
This code block includes just the heading section of my newsletter. You will notice we only have 2 tables here - one for the 600px wrapper and another which contains the header contents. Most e-mail designers will agree that 600px is a nice estimate for the maximum size of your reader's screen. Software like Microsoft Outlook can render windows even smaller. So it is best to use your own discretion and test out designs in as many e-mail readers as possible. The elements within a table use different rules for placing content. You will see a lot of attributes which simply do not appear in typical HTML. Things like cellpadding and valign control specific rendering patterns within tables which do not require CSS. For more complicated solutions like border colors we need to place inline style attributes. Structure of a Table As long as your HTML code is using a table row <tr> and internal table data cells <td> then your markup should validate just fine. I like to wrap all this content inside a <tbody> element as standards often dictate. However it will not screw up your email to omit this container. Now the inner body content actually has to use 2 more tables for content structure. First we define an outer container which uses a white background and some CSS3 box-shadow effects(where applicable). In e-mail readers without CSS3 support it will look the same as if we didn't even use these properties at all.
| ||||||||||
