views:

708

answers:

13

I read somewhere that when creating a HTML email, you should use the table-based layout. You should not be care about creating tableless css based layout. Is that true? I have to create a newsletter layout for my company, but I dont feel confortable writing 3 nested tables.

+2  A: 

There's certainly no standard that mandates it, and in fact, best practices dictate that tables should not be used for layout (except in the case of laying out tabular data).

There is an argument to be made for using tables in presentation, as there's no guarantee the plethora of desktop and web-based email clients will render CSS-based presentation properly... However, I wouldn't say that's an argument in-and-of itself.

James Burgess
Totally disagree... best practice for websites is not the same as best practice for HTML emails.
Greg
Sorry, James, but I have to disagree with you. I've had to build many an HTML email, and every best practice guide I've seen and every personal experience I can recount shows me that tables in HTML email is the way to go. We can lay most of the blame for this at Microsoft's feet for using Word as the HTML rendering engine in Outlook 2007.
Scottie
I perfectly understand the different requirements for browsers and email clients. I addressed both points of view: there is no standard, but it might be the only way to guarantee compatibility.
James Burgess
"there is no standard"That, right there, is the crux of the problem. If we thought that the browser wars were bad, the email client wars are worse.
Scottie
Actually I thinkt he problem is there is no war - wars advance technology and the fact that IE had competition is what drove browsers forward. Outlook being a de facto monopoly on windows is what kills the environment. Competition for health!
annakata
+18  A: 

If you want your HTML-email to look good in most email clients, you should write your HTML as it still was 1999 :)

truppo
+1 This is absolutely 100% the right approach. If people think browsers (meaning IE) are bad, mailers are far far far worse.
cletus
Probably the most accurate advice. Tables are certainly not a requirement for email, but CSS layouts just aren't well supported. So it really is just best to pretend that email design is some weird time-warp because many of the techniques used back then apply to email design now.
Bryan M.
+1  A: 

I won't advise you to do it, but you had probably hear this because a lot of email reader supports only a few html and css. They often don't bundle a full html/css parser, and in the past table was much used to do layouts..

Boris Guéry
A: 

In the past it was common to use tables for page layout, and many people who create pages are still more comfortable doing it this way.

As James says, best practice is to use CSS positioning facilities for page layout except when it actually is tabular data; but personally I often find it hard to get the effects I want with CSS.

Colin Fine
A: 

where did you read this? Moreover, if there is a recommendation then it should be NOT to use tables.

Luixv
+3  A: 

This is probably more based on the reality of email client rendering (which is terrible) than anything else. Technically it's almost certainly wrong, but pragmatically it might be the best advice. Truppo touches on this.

annakata
A: 

You may want to look at this, although this is specifically about the Oulook html/css subset support described:

http://msdn.microsoft.com/en-us/library/aa338201.aspx

PQW
+1  A: 

The reason tables are used is two-fold:

  1. HTML e-mail can be rendered in a vast array of clients with widely differing abilities. It's like trying to design a website for every browser, then multiply it by 10.
  2. Quite a few web e-mail clients play havoc with CSS layout.
Cybergibbons
+18  A: 

I'd highly recommend paying a visit to the Email Standards Project website. It lists almost every major email client (both standalone and web-based) on the market and outlines how much HTML support is built into each one.

Also check out Campaign Monitor's email design guidelines for some practical guides for proper HTML email building -- including, sadly yes, "use tables."

Scottie
+1. Good links, will bear them in mind.
James Burgess
The Email Standards Project site looks pretty dubious. If they can't tell the difference between a webmail client and a desktop client, then I question their ability to make sound recommendations on html standards.
Lèse majesté
+1  A: 

I would love a world where no one expected HTML to be used where plain text would do, but that is not the situation. If your job is to come up with HTML that will not embarrass you when your subscribers try to view it in their favorite email clients (applications or web based email), it is hard to stick with semantic markup and CSS.

Take what I am saying with a grain of salt because I have only done this as a learning exercise and not professionally. Based on an article I had bookmarked and further links I found in that article, the following pages seem to have a good discussion of the real issues involved in sending HTML email.

http://www.sitepoint.com/article/code-html-email-newsletters/

http://www.sitepoint.com/article/principles-beautiful-html-email/

http://www.sitepoint.com/article/designers-guide-html-email/

Given the issues involved, using tables for layout makes practical sense.

Sinan Ünür
A: 

I found outlook having problem with div based layouts.

Priyan R
A: 

We've been doing some tests with customers on how newsletters look on their computer and found that a majority is using a layout in Outlook or in Mail that shows a width of only about 45 characters. They don't bother to double-click to open the email in a new window or scroll around. The emails with some content other than a logo and text that appeared somewhat better were the ones with only one big GIF...

Marc
A: 

+1 on Campaign Monitor's advice. I've also seen a lot of great content from Emma. In my experience, the simpler you can make an email newsletter template, the better. This is doubly-true in a world where an increasing percentage of users are reading your message on a mobile device with a small screen.

TheFoot