21 Sorry to Chris

I’d just like to say I’m sorry to Chris is he thinks I’m killing the thread or whatnot. The fact is, these are my views, and that of many other people, and we can’t keep our head in the collective sand for ever. That’s what we ALL did with tables and look how long it’s taken to clean that mess up…

I actually DID enjoy the article a fair bit. It was well-written, (coming from a family of writters, I know a piece of trash from a well laid-out essay) it displayed a lot of research and a very in-depth knowleadge of the subject discussed. It’s a very nice piece as far as I am concerned and it contains a lot of valuable information.

Perhaps the most important thing I noticed in the article is how it discussed the particular workings of each email client. I find that rather interesting. For example, it is said that one can override the values in a given web-based-email layout by using CSS. This got me thinking.

<thinking_cap>
If one where to style the content of an HTML email for a particular web-based email client one could, in theory, totally take over the client. For example, you could set all exterior elements to display: none; and set all elements from the message to position: absolute; and position them where the OLD elements where, thus tricking the user into thinking nothing has happend. You could then tunnel the user’s connection through a given server using YOUR links, thus discovering username, password, and so on. He would never know the difference. You could even call up some malicious scripts or virii.
</thinking_cap>

Now tell me HTML email doesn’t have the potential to be dangerous if a well-thought-out well-target email is sent out.

posted at 06:53 pm on March 28, 2004 by daedlus

22 excellent article on HTML email

thanks for the insight on STYLES with html email. I manage 2 mailing lists that I send out. Normally, I test them on hotmail and netscape, and I also use the old deprecated “font” tags & other non-ww3 styles. It’s like this: ease of execution wins hands-down over over bending ass-backwards to comply with styles that are ransacked by the email client anyways!

What I WOULD like to know – and what wasn’t mentioned there – is, how to code an HTML email to be readable also by a text-only client. ie, is it possible to “hide” the html and display an alternative text-only email body?

thanks again for your efforts.

Rusty

posted at 09:38 pm on March 28, 2004 by Rusty

23 Thinking_cap

daedlus – I don’t know if this is still the case, but a while back I sent an HTML email to myself at Hotmail. I had visibility:hidden set for links. Sure enough, when I opened the email, all the links throughout the page were invisible.

Maybe web-based email sites should only allow inline styles?

posted at 09:38 pm on March 28, 2004 by David

24 HTML Email Convert (kinda)

Who uses ASCII email? I do, you do. In fact, we all do.

Least ways, everyone who’s reading this site does. And who reads this site? Developers, developers, developers… ;)

See where I’m going with this? The people who demand ASCII email are the same people who tinker with their mail clients to switch off HTML email, the same people who futter about with their START menus and screen resolutions, the same people who believe that “most” other people on the web are like them.

I used to believe that HTML email was the work of Satan himself. However, that was before I started working for a company that sends out permission-based HTML marketing. At first, I shuddered at this. Then I listened to our clients, and then (most importantly) their clients – the ones actually receiving the emails.

Clickthrough rates are through the roof. 95% (on average) of all recipients opt to get HTML versions of the email. Our clients give us immensely great feedback because their clients give them immensely great feedback on their emails.

I’m a standards guy. That’s why I’m here ;)

I’ve recently been chatting with my boss regarding the use of CSS in HTML email. He’s wary, but is coming around. This article is going to appear in his inbox this morning (linked from a plaintext email, I hasten to add!)

The point is this. We’re all about web standards. One of the mighty Zeldman’s points is that web standards allow one size to fit all. If we are to send HTML email, then using properly styled formatting means that it WILL be accessible to palmtops and cellphones, just as our correctly styled websites will be. Better that than a tonne of tables.

HTML email may not be ideal for sending those quick messages, but we’re talking about a different message here. You wouldn’t send out hand-written post-it notes in place of company brochures because they weigh less, would you?

Would you?

:)

posted at 11:54 pm on March 28, 2004 by Jonathan Barrett

25 ASCII will not have future

Even though for some it might seem very pleasing to write emails in ASCII (after all it is all-browser-compatible) you have to understand one rule: people will not go to websites for information [the functional aspect]. In future people will look for experience and entertainment. Therefore, when they will see ASCII email, they will delete it just because it does not give them any feelings/experience/interest. Pictures speak 1000 words! Therefore I welcome with joy CSS/HTML emails.

posted at 02:53 am on March 29, 2004 by janis:L

26 CSS in Moz T-Bird

Using Mozilla Thunderbird as E-Mail-Client has some shortcomings when defining CSS rules. I append my CSS-styles (365 Bytes) via the footer block – but I am not able to append a class to my <body> or define another <div> for content as mentioned in your article. :(
Well, at least other T-Bird and Outlook users receive and see my mails like they are supposed to look like.

posted at 02:58 am on March 29, 2004 by Frank Boës

27 How about Lotus Notes and @media?

Allow me to ignore the html=good/evil discussion and throw in 3 issues that have been bothering me so far in my experiences with standards compliant e-mail, and which I haven’t been able to test on a large scale :

A – A considerable part of my audience is forced to use Lotus Notes as their e-mail client. Lotus Notes ignores my embedded css but serves the rest of my markup as html, including header tags and hr’s, so those users still get fairly readable messages. But Lotus Notes also messes up my anchors and hard coded images. Hence my question: is there a way to get standards compliant html e-mails degrade gracefully in Lotus Notes?

B – How about e-mail client support for the @media tag to serve appropriate styles to handheld devices? Has anyone been able to test this yet?

C – Standards complaint html e-mails tend to react poorly to “RE:” and “FW:”, where the users settings take over. Are there any “best practices” to take into account here?

posted at 04:06 am on March 29, 2004 by Tim Wouters

28 been there, darn that

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.

My findings: ************

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:

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.

Et voila.

posted at 04:47 am on March 29, 2004 by stylo~

29 Eudora

Mark Wyner: “Please note that Eudora?s support for HTML in general is incredibly poor”.

Lon Baker: “When I took a similar quest I found that Eudora is pretty much incompetent when it comes to HTML email.”

I wouldn’t say Eudora is that bad. It actually renders HTML emails using the built-in MSHTML engine used by Windows and Internet Explorer. So effectively, it should be the king of HTML mail. However, it deliberately strips out code that might be used to breach security. (You can turn this off though.)

You can also choose to use Eudora’s built-in HTML display routines, but those are poor compared to Microsoft’s.

I receive a daily email from the BBC with the UK headlines. It comes perfectly formatted, just like a web page, with thumbnails, links, colours and font changes. If that is “incredibly poor” HTML email, I’d love to see the good stuff!

I feel the criticism of Eudora comes from trying to write HTML emails. There simply aren’t many options at all. There I would agree support is poor. But not for viewing incoming mails.

Eudora seems to use a basic set of HTML tags, but the fun part is that you can edit the source files. For instance, in the program, there’s no way to add an image in your signature. So I opened up the relevant file and added a simple image tag. Viola! It works. So potentially, richer HTML can be created for emails this way.

Dante Cubed: “I myself used Hotmail but was forced to move because they cut off my service.”

Why does this not surprise me.

posted at 08:16 am on March 29, 2004 by Chris Hester

30 Another Hotmail Approach--if you care...

Another way around hotmail email is to use the embedded CSS outside of the body tag, instead of using inline. What I typically do is I place my embedded style tag in the body and also outside of the body so that when hotmail strips the out the body tag I will still have my embedded styles because they were not in the body.

One Caveat is that it may break the hotmail interface if you use any global selectors like a “a img {}” so use decendent selectors noted in the article.
It was an insightful article. I am glad someone did all of the testing for me on all of the popular platforms.

posted at 09:22 am on March 29, 2004 by blakems