2

This might seem like a rant, but I am curious.

CSS replaced tables for layout a long time ago. But we still have to use tables for layout when creating rich emails.

Why is this? Are there any other options?

Are there really technical constraints that prevent CSS from working in an email. What are they? I can see how linked or embedded style sheets might be a problem, but not even inline styles work.

Is this ever going to change?

  • 18
    I don't need an entire webpage sitting in my inbox. Plaintext emails 4 life \m/ – Anon. Feb 10 '11 at 20:30
  • 3
    CSS hasn't replaced tables at all, even for layout. Browser support for CSS tables still sucks, even in 2011. – user8685 Feb 10 '11 at 21:04
  • 3
    @Developer art, browser support for css tables, maybe, but not css. I am not talking about using css for what tables or designed for. I am talking about not having to use tables for something they were never designed for, LAYOUT. – JD Isaacks Feb 10 '11 at 21:16
  • 4
    It's 2011 - Why do you still think HTML in emails is a good idea? – Kim Feb 10 '11 at 21:28
  • 5
    @kim, its not what I think, I don't make these decisions, its what the people above me think, and as long as the competition is doing it, we will have to as well. Unless something better replaces it. – JD Isaacks Feb 10 '11 at 21:38
7

CSS replaced tables for layout a long time ago. But we still have to use tables for layout when creating rich emails.

Why is this?

Lotus Notes and Outlook, mainly.

Not sure how Outlook 2010 is, but I believe Outlook 2007 still lacks support for CSS in many ways.

Is there really technical constraints that prevent CSS from working in an email. What are they?

Yes. The constraint is the rendering engine in a couple email clients that are still popular enough to have to be concerned with.

Is this ever going to change?

Probably. But, also probably, it will be a while.

Outlook should be catching up, but we may still be a couple years from a new version .. and if that still has lackluster support we'll be looking at another 2-3 years of this.

And then there's Lotus. Who knows if they'll ever support CSS or if they'll ever die off enough to ignore.

  • 8
    Lotus Notes will not die. Its the most horrible piece of software on the planet, and it should be taken out the back and put out of its misery. But in really big companies, it scales really well and allows customisation really well. And once in a big company it gets its claws into everything and is almost impossible to remove. And that is why it will live on for a long, long time. – quickly_now Feb 10 '11 at 22:23
  • 3
    I feel the Lotus Notes hate. Every time I start a new role and I find they use Notes I die a little. – Ian Feb 10 '11 at 23:15
  • I this statement still true in 2017? Just wondering because most of the email client market moved from desktop to mobile and there are newer versions of the desktop clients as well. Even inline CSS seems not a necessity anymore. – Torsten May 11 '17 at 0:02
7
  1. Outlook 2007 switched from Internet Explorer’s HTML rendering engine to Word’s HTML rendering engine. I wish I was kidding.

  2. Lots of people use webmail clients. If webmail clients fully rendered CSS, bad things could happen (Internet Explorer, for example, lets JavaScript run in CSS files).

  3. Lotus Notes is inexplicably popular in businesses, and Lotus Notes, including its HTML rendering, is terrible.

  • @quickly_now: it’s never too early or too late to give Lotus Notes a swift kick in the nuts. – Paul D. Waite Feb 10 '11 at 22:42
  • +1, this is why the problem isn't going to go away any time soon. Bad renderers need to be replaced by good renderers, and when newer versions of Outlook have worse renderers than old versions, we're going backwards not forwards. – Carson63000 Feb 11 '11 at 0:34
  • @Carson63000: That was actually one of the worst things M$ have ever done, and that is saying something. Broke HTML emails far further than ever before in a single release. Why? Well for all the reasons quoted, it is because Outlook creates emails with Word in most places, so to achieve a consistent rendering, why not use Word to display them to? Joy. Please ensure all email viewers are broken to exactly the same degree as those that send the emails. – Orbling Feb 11 '11 at 1:05
2

The other answers explain general problems with email, but you need to use <table> elements for layout in HTML e-mails because certain e-mail clients do not support the CSS property float (or any of the positioning properties, really) at all:

  • Outlook 2007 and 2010
  • Lotus Notes 6 and 7

Of course, without support for float or other positioning properties, there's no way to position elements except with the use of <table> elements. The necessity of using <table> elements for layout will not change as long as Microsoft continues to use the Word engine for Outlook and the Word engine continues to provide a lack of support for positioning elements.

Since Microsoft has pledged its full support for using the Word engine even after heavy criticism, one can only hope that the Word engine will support positioning elements in some future version. But since Outlook 2007 and 2010 are out there and heavily used, you'll always need to deal with them for at least a few more years.

Campaign Monitor has a handy chart which describes the CSS support in each of the major e-mail clients.

1

Email is the number one usage of Internet, that's why it's such a problematic and slow process to move imho because there are just so many different clients and legacy systems to support (unlike web browsers where the number of big brands is much smaller).

But I would say the "solution" is progressive enhancement: best looking in modern email clients, yet doesn't prevent users from seeing the important contents in older ones. At your scale, that's all you can do to make things move in the right direction.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.