Design & Development

Web Design Tips: Converting an Older Table-Based Email Template To CSS

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

Image shows the template wireframeI 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 <div> element that I expected to use. I came up with a total of eight:

  • Wrapper—At 550 pixels wide the wrapper div (<div id="wrapper">) 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.

<code> &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 
 Transitional//EN" "http://www.w3.org/TR/xhtml1
 /DTD/xhtml1-transitional.dtd"&gt;

 &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;

&lt;head&gt;
    &lt;meta http-equiv="content-type" content="text/html;charset=utf-8" /&gt;
    &lt;style type="text/css"&gt; body {text-align: center;} #wrapper {width: 550px;} #browser-link, #browser-link a {color: #122d95; text-decoration: underline; font-weight: normal; font-size: 10px; line-height: 200%; font-family: Lucida Sans,Lucida;} #logo-link{border-bottom: 1px solid #cfcfcf; padding: 0px;} #logo-link img {width: 550px; height: 72px; padding: 0px; border: 0pt;} #dater {margin: 0px; padding: 0px; float: left; width: 50%; border-bottom: 1px solid #cfcfcf; text-align: left; font-weight: bold; font-size: 12px; line-height: 300%; } #dater em {font-style: normal; color: rgb(160, 40, 44); } #dater span {font-weight: normal;} #dater p{margin: 0px; padding-left: 12px;} #befriend {margin: 0px; padding: 0px; float: left; width: 50%; border-bottom: 1px solid #cfcfcf; text-align: right; font-weight: bold; font-size: 12px; line-height: 300%; } #befriend p {margin: 0px; padding-right: 12px;} #befriend a {text-decoration: none; color: #000000;} #unsub {clear: both; margin: 0px; padding: 0px; width: 100%; border-bottom: 1px solid #cfcfcf; text-align: center; font-family: Arial; font-size: 11px; font-style: italic; line-height: 200%; } #unsub a {color: #122d95;text-decoration: none;font-weight: normal;} #unsub p {margin: 0px; padding: 12px;} #ad-content {margin: 0px; padding-top: 20px; padding-right: 0px; padding-bottom: 20px; padding-left: 0px; width: 520px; text-align: left;}&lt;/style&gt;
           &lt;style type="text/css"&gt; #footer{clear: both; margin: 0px; padding: 0px; width: 100%; border-top: 1px solid #cfcfcf; text-align: left; font-family: Arial; font-size: 11px; font-style: normal; line-height: 100%;} #footer a {color: #122d95; text-decoration: underline; font-weight: normal;} #footer p {margin: 0px; padding-left: 12px; padding-top: 10px;} .vcard {padding-left:12px;}&lt;/style&gt;

&lt;/head&gt;

&lt;body&gt;
    &lt;div id="wrapper"&gt;&lt;!--This is the Main container for the email template--&gt;

    &lt;div id="browser-link"&gt;&lt;!--This div is for the view in browser link--&gt;
    &lt;a href="../../*%7cARCHIVE%7c*"&gt;View in Browser&lt;/a&gt; 
    &lt;/div&gt;&lt;!--end browser-link--&gt;

    &lt;div id="logo-link"&gt;&lt;!--This div houses the logo--&gt;
    &lt;a href="https://www.practicalecommerce.com"&gt;&lt;img src="http://img.mailchimp.com/2008/07/25/a717915556/ecommercenotes.gif" alt="Ecommerce Notes Supplement. If you're seeing this message you have images turned off. Try turning images on to see our logo, and other images on this page" /&gt;&lt;/a&gt;
    &lt;/div&gt;&lt;!--end logo-link--&gt;

    &lt;div id="dater"&gt;&lt;!--This div hold the email's date--&gt;
    &lt;p&gt;Ecommerce&lt;em&gt;Notes&lt;/em&gt; &lt;span&gt;- April 15, 2009&lt;/span&gt;&lt;/p&gt;
     &lt;/div&gt;&lt;!--end dater--&gt;

     &lt;div id="befriend"&gt;&lt;!--This div hold the forward to friend link--&gt;
     &lt;p&gt;
     &lt;a href="../../*%7cFORWARD%7c*"&gt;Forward to a Friend&lt;/a&gt;&lt;/p&gt;
     &lt;/div&gt;&lt;!--end befriend--&gt;

     &lt;div id="unsub"&gt;&lt;!--This div hold the first unsubscribe statement--&gt;
     &lt;p&gt;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 &lt;a href="../../*%7cUNSUB%7c*"&gt;unsubscribe&lt;/a&gt; your email address.&lt;/p&gt;
     &lt;/div&gt;&lt;!--end unsub--&gt;
     &lt;div id="ad-content"&gt;&lt;!--the ad goes here--&gt;




   AD COPY GOES HERE



  &lt;/div&gt;&lt;!--end ad-content--&gt;

  &lt;div id="footer"&gt;&lt;!--this is the footer matter--&gt;

  &lt;p&gt;*|LIST:DESCRIPTION|* You can &lt;a href="../../*%7cUNSUB%7c*"&gt;unsubscribe&lt;/a&gt; your email address (*|EMAIL|*) from this list at any time.&lt;/p&gt;
  &lt;p&gt;Our mailing address is:&lt;p/&gt;
  &lt;p&gt;*|HTML:LIST_ADDRESS_HTML|*&lt;/p&gt;
  &lt;p&gt;Copyright &amp;copy; 2009 Practical eCommerce. All rights reserved.&lt;/p&gt;

  &lt;/div&gt;&lt;!--end footer--&gt;

  &lt;/div&gt;&lt;!--end wrapper--&gt;

&lt;/body&gt;

 &lt;/html&gt;
</code>

Resources

Armando Roggio

Armando Roggio

Bio   •   RSS Feed


email-news-env

Sign up for our email newsletter