Practical Ecommerce

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="http://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

Comments ( 17 )

  1. Andrew_M April 23, 2009 Reply

    I would strongly stress using CSS in emails is a no-no.

    Most moden email clents still dont support or have limited support of div structures or using class styles.

    When building emails I always go for the support layed out by the email standards project and almost exclusively optimise my email to look the best in outlook 2007 as it is the most widely used in the B2B marketplace.

    http://www.email-standards.org/

  2. Armando Roggio April 23, 2009 Reply

    @Andrew,
    Thanks for the comment. You may know more than I, but I did look at the Outlook 2007 CSS rendering capabilities, http://msdn.microsoft.com/en-us/library/aa338201.aspx, before I wrote the article. And as it turns out Outlook 2007 supports all of the CSS that I used.

    I also tested the CSS template in Outlook 2007, Outlook 2003, and Thunderbird. And finally, I used an inbox inspector to validate the code in dozens of email clients. While a couple did not support the border-bottom attribute, all supported the div structure.

    Bottom line, nearly every major email client supports CSS coding (particularly the div structure). CSS coding is superior to table-based layouts in dozens of ways. And therefore CSS is what we should be using for HTML emails.

    You can argue that HTML emails are bad, but if you are going to use HTML, you should use CSS.

  3. Armando Roggio April 23, 2009 Reply

    @Andrew,

    I followed the link you offered. Looks like they are promoting CSS in HTML emails too. Here is a quote from the email-standards.org site.

    "HTML emails can be a better experience
    If you signup for an email from Threadless, you probably want to know what new t-shirts are available each week. Having a photo of the new designs is a much faster way than trying to describe it in text. HTML can make a message clearer and easier to understand, especially by giving back typographic control – add real headings, line spacing and emphasis without needing *punctuation hacks*."

    "With some design thought, restraint and skill, an HTML email can be a significantly more effective way of making your point in email."

    "So HTML in email is going to be used whether designers agree or not. Given that will be sent, and somebody will design them, shouldn’t it be web designers rather than the marketing secretary? ***And wouldn’t it be great to be able to use the same semantic, light HTML and CSS you already craft for your websites?***"

  4. web2crawler April 23, 2009 Reply

    Thank you for nice article! I want to use a dropdown css menu like this in my email template: http://www.cafewebmaster.com/dropdown-rollover-menu-pure-css-html But I am not sure if it overall works, if you dont send it as attachment. How can I define hierarchy in style="" attribute?

  5. Armando Roggio April 23, 2009 Reply

    @web2crawler, cool menu. I’ve used this technique (hiding content until something is hovered over or clicked) myself in a few website designs.

    If I understand your question, I would suggest that the hierarchy is defined in the HTML, using the `<ul>` and `<li>` tags in a nested list not in the CSS. For example, in the code you linked to, Joomla, Drupal, and WordPress are all in a nested list below the list item "Themes." Seems to me that is the hierarchy.

    To use the "style=" attribute instead of putting style in the head, just place the same code that you would have used in the head within quotes. Make sense? But I am not sure that you need to do that. Outlook 2007 and Thunderbird, as examples, will support CSS inside of a head tag, so you may be able to use the code as written.

    Lastly, I am not sure if all of these CSS attributes are supported. Specifically, I am not sure how an email client will manage "display: none."

  6. tenchi April 28, 2009 Reply

    Some interesting links here with a css property support vs platform chart:
    http://www.campaignmonitor.com/css/

    Honestly, after some real-life experiences, i switched back to table layouts… Talking about email marketing, the point is to target the wider audience… So, as far as i’m concerned, bybye CSS ! see you in a few years more. sniff!

  7. Bentot April 28, 2009 Reply

    Would css work in Microsoft Outlook 2003, Yahoo, Gmail, Hotmail, etc? Not everyone can afford Microsoft Outlook 2007.

  8. Armando Roggio April 28, 2009 Reply

    @Bentot, Short answer, yes. Long answer, some of these (Gmail, which is a very poor email tool, is an example) would not support the border-bottom attribute.

  9. Armando Roggio April 28, 2009 Reply

    @tenchi,
    Thanks for the link and the comment. CSS is very widely supported. The table you linked to shows that.

  10. chrislo2401 April 28, 2009 Reply

    I would have to agree with @Andrew_M and @tenchi and recommend against using CSS in HTML emails.

    People are using all manner of both desktop and web-based email clients so you can be pretty sure that a CSS based email will break at some point. Gmail especially is merciless and rips out any styles you have within your <HEAD> tags, so you’re forced to revert to inline styling.

    With so many people using Gmail these days, it’s not worth the risk if your business relies heavily on your email newsletters.

    Outlook 07 isn’t that great either – it doesn’t even support width which means forget about using it for layout. 07 is in fact worse than Outlook 03 as Microsoft made the bizarre decision to use Word 07’s rendering engine rather than the one they used to use in 03 (which worked much better).

    You’re much better off sticking to table-based layouts, as horrible as that is.

    A couple of links:
    http://www.mailchimp.com/articles/top-html-email-coding-mistakes/
    http://www.reachcustomersonline.com/2009/01/23/09.27.00/

  11. chrislo2401 April 29, 2009 Reply

    Sorry, meant to say "Gmail especially is merciless and rips out any styles you have within your HEAD tags…".

  12. Armando Roggio April 29, 2009 Reply

    Let’s agree to disagree. But remember table layouts are deprecated no matter where you use them.

  13. tenchi April 30, 2009 Reply

    yeah ! so lets make non valid css instead, like <style> in the <body>, oh no, better idea: let’s put all our CSS inline at element level. (wider compatibility this way). And voilà ! you end up with a horrible ugly verbose code uneasy to maintain. Like table layouts, but with a slightly weaker cross-platform support.
    Modern standards are on thing , reality is another.
    I dont mean i enjoy this situation Btw !
    Anyway, the sun is shining today!

  14. chrislo2401 May 1, 2009 Reply

    @tenchi – Exactly.

    @Armando – I appreciate that you’re trying to get everyone to move towards modern web standards, but I think you’re steering people onto the wrong track here. I haven’t read all of the references you link to, but I’d be willing to bet that none of them are talking about using CSS in emails but rather in website designs. For website designs, absolutely we should be using CSS layouts, for all the reasons you mention (speed, maintainability etc). In emails, however, they just don’t work consistently across all clients.

    Additionally, you’ve taken that quote from the email-standards.org site out of context. That page (http://www.email-standards.org/why/) is talking about ‘why’ we should be putting pressure on email client developers to adhere to web standards – it isn’t saying that we can use CSS successfully today. It is, in fact, pretty much saying the opposite:

    "Many designers who started web design in the last few years have never even coded a table based layout, which is a good thing. The current email environment means a designer not familiar with the table based approach will need to learn a completely different way of creating a page if they want to send HTML emails."

    and…

    "I think we can agree that if we could have the major email clients all supporting at least a subset of web standards, we would be in a much better situation than we are now."

    Lastly, I used your code to create an html page which I then sent to a Gmail account. You can see the result here:

    http://members.iinet.net.au/~chris.lo/htmlEmail.jpg

    You can see that all div structuring has been removed, as has font-style, font-family etc.

    You’re right that table layouts have been deprecated, but sadly we as designers have no choice but to use them in HTML emails if we want to be certain that they’ll be received as we designed them.

    Cheers,
    Chris

  15. Armando Roggio May 1, 2009 Reply

    @chrislo2401

    I have to confess that when I wrote this I had no idea how many folks I would be upset. And I know that this comment is not going to make you happy, but I honestly believe you’re wrong.

    As an example, PeC has two email newsletters. (1) The supplement that I mention in this article, and (2) our editorial newsletter that goes out every Tuesday and Thursday. Each week for as long as I have been at PeC (since September 2008), a few thousand folks read our editorial newsletter, which is done completely in CSS. No tables.

    Furthermore, as I mentioned, I tested the CSS used in this article in several email clients and it worked—a fact I pointed out in the associated video.

    So here his my challenge, you, tenchi, and Andrew_M, are all saying that CSS won’t work, yet, I have (a) examples in the video of CSS working well, (b) MailChimp’s tests, and (c) our editorial newsletter as examples that this will work.

    So with all of this evidence, why are you still clinging to tables?

  16. chrislo2401 May 2, 2009 Reply

    Hi Armando,

    Well, I would love for you to prove me wrong, believe me. Using tables for layout is an absolute pain and a nightmare to maintain. If at the end of this you can convince me that you can use CSS the way you describe, and it’ll work in Gmail, then I’ll gladly eat my hat :)

    So, to address the points you make:

    1) I’ve watched the video, and while it’s hard to really be sure at the video’s resolution, it looks to me that Mailchimp’s Inbox Inspector is showing a screenshot of your email in Gmail exactly the way I showed in my screenshot. That is, the layout structure has been removed. It looks like the ‘befriend’ div is in fact underneath the ‘dater’ div rather than to the right of it, completely ignoring the befriend div’s float attribute. As i said, I could be wrong as the detail breaks up in full-screen, so it’s hard to see.

    2) Your video shows you using the popup preview feature in Mailchimp to determine if the newsletter will behave as expected. We use Mailchimp too, and whilst it’s popup preview will display the email with CSS styles intact, it isn’t showing you what it’ll look like in Gmail or any other email client that doesn’t conform to standards.

    3) Regarding the Practical Ecommerce newsletters, the ones you say are done completely in CSS, with no tables. Do you mean like the one sent out on the 28th of April containing the link to this very article? I do get them and I’ve had a look at the source code for them. Guess what? They’re using tables.

    This is a screenshot of the newsletter in Gmail. I’m using Firebug to look at the source code for it:

    http://www.screencast.com/t/hyBgOgPRcTo

    Just to be sure, this is the page I’m taken to if I click the ‘View in your browser’ link:

    http://campaign-archive.com/?u=fbe5f2f40f28348f9f57610b8&id=4c69ea82ba&e=32854698bc

    Again – table layout.

    Regardless, Gmail just doesn’t support CSS in the HEAD section. It’ll strip out anything you put in there – as I showed in my previous post’s screenshot, and as described here :

    http://www.email-standards.org/clients/gmail/

    http://www.kephartassoc.com/story/gmail-needs-support-html-and-css-standards

    You just cannot put CSS in the HEAD section and expect it to work in Gmail – it is completely, 100% impossible. You can only use inline styles which means a lot more work as you’ll need to declare styles for every element in the page (Mailchimp does have an ‘Automatic CSS-inliner which if selected will convert your styles to inline CSS, but that doesn’t help if you don’t have a Mailchimp subscription).

    At the end of the day, if you’re not worried about how a newsletter will look in Gmail then this may not be worth worrying about. But if reaching the widest audience possible is important (as it is for most business owners & companies) then you just have to take this into consideration.

    And in case anyone thinks that Gmail isn’t worth worrying about, it’s getting more & more popular. It has around 30 million users, and the number of users is expected to catch up to Hotmail by the end of this year if it’s current growth rate continues:

    http://www.informationweek.com/news/internet/google/showArticle.jhtml?articleID=213300662&subSection=News

    Lastly, as I mentioned in my previous post, even if you’re only concerned about Outlook 2007 users (which has a massive installed base), it’s CSS support is terrible:

    http://arstechnica.com/old/content/2007/01/8619.ars

    http://www.campaignmonitor.com/blog/post/2393/microsoft-takes-email-design-b/

    http://blogs.zdnet.com/microsoft/?p=200

    I not sure what else I can tell you. We ‘cling’ to tables because it’s the only way to be sure that our newsletters will be seen by our customers the way we intend them to look.

    Cheers,
    Chris

  17. Armando Roggio May 2, 2009 Reply

    @Chrislo2401

    Thanks for the thoughtful and well researched reply. I must tell you that this comment chain is not good for my blood pressure. After I approved your comment, I spent nearly two hours collecting examples of table-layout emails that were broken (I even tried to find a newsletter registration on http://www.spankrecords.com.au/ so that I could see what your emails looked like). All told only one table-based html email had landed in one of my inboxes in the past few days that was not broken. It was from the National Hockey League .

    Anyway, after collecting 109 examples of table-layouts that did not work in Outlook 2007, Outlook 2003, Thunderbird, Gmail, and Yahoo!, I had to ask myself "What the hell are you doing?" I could not believe that I had wasted so much time or, frankly, gotten so upset about this issue.

    So instead of continuing our argument. I am going to apologize. As a contributing editor, I really should not argue in the comments, and for that I am sorry. You make some very valid points (gmail in particular). And you clearly have a great ecommerce site.

    I hope you keep reading and keep posting.
    Thanks,
    A.