Back to the Tables...

Published at Sept. 30, 2010 | Tagged with: , , ,

... or how table based layout still lives

When I first started to write HTML (about ten years ago) the web has nothing common to the current one. Modem connections, IE4/IE5 were the major browsers and Netscape was far far away in the competition. These were dark ages for the web. CSS was a new conception that every one mentions but few dared to use. These was the ages of the table based layouts - hard to do and impossible to maintain. Multiple colspans and rowspans, nested table, absolute HTML horror until you(or your boss) decide that "this page need some minor improvement" this was when the real hell started. One less or extra column usually destroys the whole layout. These may seem like a bad coding practice or joke to most of you but I`m sure that everyone that walked this way will agree with me about this.table based layout

Years later when I realized the power of CSS and started to build CSS based layouts with floated divisions I was like a new born. It was amazing - simple, clean, easy to build and even easier to maintain. Yes there was some other holes where to fall like box models and other browsers differences but it was a great improvement. Then I learned that table were for table-data only, everything else should be done with CSS and I was happy.

In the last years I was mainly focused on back-end development and the JavaScript part from the front-end so I have to confess that I was little away from all this HTML&CSS; stuff. I only write simple things or take deeper when some of the front-end developer faces a problem. But how you all know a man always goes back to its roots so it was my turn now. I have a simple template to code from PSD to HTML/CSS. Header, two fixed width columns, some rounded corners nothing to worry about so I sit down and started. I was pretty happy with the result until I decided to check is there something special that I must have in mind for these e-mail newsletters.

What? Didn`t I tell you? Yes it was a template for a newsletter that is going to be send to users via e-mail. From the time when I started to use CSS layout I have never thought that there will be a time when I will go back and do table based layouts again but it looks like contrasting to the browsers the e-mail clients haven`t evolved in much in the last 6-7 years(at least when we talk about CSS support). So the tables are back in the game and these are some simple rules I found over the net that you must have in mind when you do html e-mails.

  • Use table to build your layout
  • Do not declare your CSS in the head tag, use inline styles insted of this
  • Avoid using background images
  • Avoid using images at all(just joking but have in mind that you have to check how your mail will look without them cause most of the mail clients did not load images until you confirm that you really want them )
  • If you are going to use images my personal advice is to use absolute URLs instead of adding the images to the mail. This will save bandwidth of your customers(especially for the ones that use mobile devices), you will be able to change and image every time when you need(if you noticed a problem with am image after the mail is send)

There are several companies that offer e-mail testing services one if them is Campaign Monitor. I have to confess that their price seems a little high to me but it depends from project requirements. The good thing is that the provide absolutely free e-mail clients CSS support table. I found it very useful and that you will do too.

Another solutions is Litmus they have lower prices but their test support less clients.

A free but just for basic tests is Email on Acid

If you know any other(especially free) simiral services please share the with me.
I hope that this will help to someone else, and if you have any questions fee free to ask.