Many email templates were developed using older table-based layouts that "break" easily and are very complicated to maintain.
Tables in HTML are fantastic for displaying tabular data. But as a layout tool they interfere with some dynamic and rich media elements, cause accessibility challenges, hog bandwidth, create maintenance issues, and are more fragile than CSS layouts. And for all of these reasons, it is time to update your broadcast email templates.
In this edition of Web Design Tips, I'll quickly show you how to convert a broadcast email template from a table-based layout to a fast and lovely CSS layout.
Handle With Care: Table-Based Layouts Break Easily
I have a confession to make. One of Practical eCommerce's email templates (our supplement) broke. It was not a huge issue, but a few horizontal rules got out of place. The problem had to do with the template' s table-layout.
The table width had been set to 550 pixels—a good safe width for emails. Below our first table was a series of nested tables like an array of Russian stacking dolls lined up on a table. The nested tables had varying widths. Some reached the full 550 pixels, others went half way.
The main table also had 20 pixels of cellpadding.
Our problem arose when we inserted ad copy that exceed 530 pixels in width (the live area of 550 pixels minus the cellpadding). Some of our nested tables would grow wider, taking the horizontal rule with them (like one of our Russian stacking dolls grew fat). While other table cells and horizontal rules stayed the same (prescribed) size.
You might think that we'd have no problem at all if we were more careful about our ad copy's dimensions, but that's not really the case. Most of the content editors that are available with mail campaign tools don't warn you about pixel widths. And with good reason, those editors are designed to appeal to non-technical users. So unless you plan on having a coder set up each issue of your newsletter, you need a more flexible design.
CSS: The Answer
I didn't want to change the way that the newsletter looked, instead I wanted to change the way it was created.
Specifically, I wanted to create a structure wherein my horizontal rules (remember that was my challenge) would not change size, if we overstuffed the ad content div.
To get the conversion job underway, I sketched a wireframe of the original email template as it displayed in a preview pane. I drew a box for each
element that I expected to use. I came up with a total of eight:
Wrapper—At 550 pixels wide the wrapper div (
) provided the frame work for my email layout.
Browser link—Our original template included a link that would allow users to see the message in their default web browser. So I needed one in my new CSS template.
Issue Date—Pretty self-explanatory.
Email to a Friend—This section would house one link.
Unsubscribe—We include a unsubscribe option right at the top of the newsletter.
Content—In our supplement this is a message from one of our advertisers.
Footer—This section offers a second unsubscribe link and provides recipients with our contact information , including our physical address.
Video: PeC's Email Supplement Template Convert to CSS
The Style for the CSS Template
Now here is the style for the template. I had to make some modifications from the way that I would normally of styled the template to compensate for some email readers.
As an EcommerceNotes subscriber, we're pleased to provide you this unique educational offer. If you'd prefer to not receive any email communications from us, please unsubscribe your email address.
I didn't want to change the way that the newsletter looked, instead I wanted to change the way it was created. 