I went though all of this recently. I never even contemplated using tables for html email. As with webpages, you get css or plain text. I was hoping for a real breakdown chart of findings in this article. It was too brief, but a good start on the “next frontier.” (Cough, cough.)
>>hypertext can be just as useful to an e-mail recipient as it can be to someone browsing a Web page.
-exactly. I vastly prefer plain text for most emails, but a monthly newletter with thumbnails of the month’s new products is far superior for customers than a plain text link. Customer’s prefer it and sales are better.
It was frustrating, as it seems Hotmail was testing email stripping when I was testing them. I swear some would be stripped and some wouldn’t, but I may be flashing back to puberty and hot chicks testing males. Uhh…
I sent my emails with Worldcast, the crappiest little spam machine going - but free! I started out using a style block. The newsletter is nice and clean looking, much like a css blog. No floats or absolute positioning used. (I tried calling background images inline to check; Yahoo, Hotmail and Outlook 2003 ripped it out.)
I never noticed any stripping of css rules as noted in the article because I condensed the css block for size savings. Lucky me! Two birds with one stone. I did notice the block was removed from inside my first div (I was trying to hide it in there in a Hotmail test) and placed above, along with html header tags and a doctype, none of which I included.
>>rules of “cascading” style sheets resulted in mine overruling those of the client
-The solution offered is off a bit. I, too, used a div around my content to mimic a body tag, but then all you have to do is give it an id (#myStuff) and then use that in your declarations (#myStuff blockquote, etc.) to concentrate the css on your email. Don’t use the id “message” as Yahoo uses that; more below.
It also follows from above that undeclared properties **can** be picked up from the webmail page’s css. For example, links at Hotmail are a smaller font size with no underline, and they get lost in the text, so each one required explicit styling. Fortunately, I didn’t encounter any problems other than that; just keep in mind what the webmail page’s css might apply.
>>Maybe web-based email sites should *only* allow inline styles?
-I say **can** above because here is something really missing from the article: Yahoo is brilliant! It wraps your message in a div with id=message, then it goes through your stylesheet and plunks “#message” in front of every selector to concentrate your css in case you didn’t. Awesome! Congrats to the genius at Yahoo who coded that. Hotmail, get your act together!
With a css block I just added a short note at the bottom:
“Note: sadly, Hotmail takes out any styling in emails done through CSS (the modern, shorter way to format HTML). We could redo the entire newsletter using 7,000 fonts tags, but aren’t too keen on that, so if you’re seeing “just the facts” with no pretty colors, that’s why.”
That note has display:none set in the block, so those with css don’t see it. Nice! Anyway, if your tag structure is good, the email isn’t too bad looking. (In other words, treat Hotmail as the NN4 of webmail.)
Bonus: I had to try it. With ad-supported newsletter senders you can have an open div at the very bottom with display:none and it will be closed automatically by the receiver’s client and the ad hidden. Worked in the few I tried. Ha!
>>is it possible to “hide” the html and display an alternative text-only email body?
-why not just send a multi-part email??? (Of course consider that you just added 50% to your page size, and how many actually use a text only email client anyway.) With css you could have a copy of all the text at the top in one div set to display:none for css clients, then the style block and “real” email below, though some is likely moved above as noted, so a waste of effort really. But this brings up a very good point: using css the html really isn’t very messy at all because no/few attributes are used, so plain text fanatics can easily read it still, analogous to how NN4 users can still use a website without style. Very different from your typical table-and-font apple it might be compared to.
I then gave up on using a css block:
Because of Hotmail stripping css blocks, I went to inline css just to try that for a while. Hotmail users are 12% of my list. Coldfusion does much of it for me, so not so difficult, but I might go back to a css block anyway. Adding extra content afterwards with all the required inline styles is a real pain. I only have two fingers, one’s often busy, and a css block saves a lot of time. If, however, you type really well, really give a damn, or work in a really big company where you are paid to waste time, use inline styles if going with css.
Overall, compared to table-and-font email:
Massive plus: CSS email helps avoids spam filters because they look at font tags, red font tags, ALL-CAPS, etc. Not an issue with css. Also the html percentage of the mail is checked - which I’m hoping doesn’t include the style block, but even if it does…
Nice little plus: CSS email is smaller overall. Also a 17.5kb email I did with inline css was down to 14kb using a css block, so 20% smaller still, and much, much easier to write. Once you’ve done the css once, you can forget it.
Not nonplussed: CSS lets you more easily copy html from your blog or elsewhere and paste it in. I often do that. Depends how you get/store your newsletter info.
Yeah, whatever, just send it:
For all the village “html is evil” people: out of all the css html emails I’ve now sent to a non-web oriented subscriber list of 3000, I’ve never had a single complaint, and subscribers were never even asked if they wanted html, as it is a list developed over years and was always plain text before I switched. (There was a brief interregnum where I tried sending a plain text email with a link to the monthly newsletter onsite, and I might consider that again, but for the user it can be like getting up off the sofa to swim the channel. -“Next month.”) Even if I did lose a few readers - which I highly doubt - it is more than made up for by the increased customer enjoyment/responses gained, as well as the more “professional” patina the html newsletter gives.