Using CSS in email? Or alternative?

[nathanpacker]

I have a script sending out an email to some users, and I was going to try to use CSS to format it, until I found out it's nearly impossible. So I have 2 questions.

1. Is it possible to use CSS in email, and ensure everyone can read it? (This would be the best option)

2. If option #1 is not possible, i need a resource or some info somewhere to show me how to do some af the things that CSS can do, only in plane jane HTML. For instance, a bit of CSS might say:

font: 70%/1.5 Verdana, Tahoma, Arial, Helvetica, sans-serif;

But I can't quite get the same effect using plane HTML. I mean the font is easy enough, but I can't figure out how to get the font size the same. I guess I'm just really amature at HTML. Also changing the hover color on a text link. And changing the character spacing, so I can make the lettering a little closer.

Ok that's enough. I think you get the point. To be honest, I'm trying to "copy" a CSS template in an email I'm sending, but haven't been successful in using CSS in email.

Any suggestions would be helpful.

[MidiMagic]

I have a script sending out an email to some users, and I was going to try to use CSS to format it, until I found out it's nearly impossible. So I have 2 questions.

1. Is it possible to use CSS in email, and ensure everyone can read it? (This would be the best option)

No.

Many email systems (such as Pine) don't understand HTML or CSS. They will print your code in the body of the email, making the recipient mad.

Remember that many people don't have a choice of what email client they have to use. It is decided for them by bosses, universities, or ISPs. And some spam filters go "BLEAUGH!" when they see HTML, and throw the email in the spam box.

2. If option #1 is not possible, i need a resource or some info somewhere to show me how to do some af the things that CSS can do, only in plane jane HTML. For instance, a bit of CSS might say:

font: 70%/1.5 Verdana, Tahoma, Arial, Helvetica, sans-serif;

But I can't quite get the same effect using plane HTML. I mean the font is easy enough, but I can't figure out how to get the font size the same. I guess I'm just really amature at HTML. Also changing the hover color on a text link. And changing the character spacing, so I can make the lettering a little closer.

Please do not put HTML in emails either. As I said earlier, many spam filters go "BLEAUGH!" when they see HTML, and automatically throw the email in the spam box. And many email systems display your code as part of the text, making an illegible message. Your attempt at fontmaking would look like this to the user of an non-HTML emailor when the recipient opens his mail:

<span style="font: 70%/1.5 Verdana, Tahoma, Arial, Helvetica, sans-serif;">Hi Larry, how are you.</span>

When I get an email that looks like that, it goes in the recycling bin.

Caveat Emailor.

Email is not for nice formatting. Email is for sending letters to friends. And especially email is not for advertising. I love blasting spam advertising into oblivion with my DELETE button.

Keep emails to text and attachments.

[nathanpacker]

Thanks for the reply. Sounds like you have had some nasty experiences with HTML email. By the way, the email I'm sending is not an advertisement. It is in response to a form a user fills out on my site, with information they requested. I simply wanted to give it to them in a way that is nice and professional looking.

It can't be that uncommon. I Receive HTML-formatted emails all the time. In fact, Daniweb, which I consider to be the gem of information on this type of thing, sends HTML emails for everything, don't they? And besides, I tested most of the major email services that people use with my HTML email, Gmail, Hotmail, Yahoo, AOL, and they all seem to be taking it fine.

I think the only problem I would really have with HTML email would be users who specifically turn off HTML email, wouldn't it?

I appreciate your opinion. I have given up trying to us CSS in email. However, I would like to hear something encouraging about HTML email, as it seems to be used all the time, so it can't be that bad! (Plus, I think I've finally achieved the look I want without using CSS.) If I get enough opinions that HTML email is really that bad, I won't be completely opposed to going back to just a text email.

But I do have to say that this email will not be going to hundreds of people. The form will most likely be filled out by no more than one or two people a month, if that.

[MidiMagic]

It's not bad, if you can get it to render legibly on non-html systems. Minimize tag use.

My experience has been the following:

- Most UNIX and VMS email systems (e.g. Pine) don't parse the HTML. They display the code as text. Most unix terminals use monospace fonts. This includes ALL systems which are connected to in a Telnet-type environemnt.

- Many institutions (including colleges) take administrator privileges away from users, and do one of the following to emails containing HTML:
- Turn off HTML parsing (you see the HTML as text)
- Render the page as plain text by sstripping all tags out of the code. But you see the & codes instead of the characters they make.
- Throw emails containing HTML into spam boxes.
- Throw the HTML email away entirely, often without notifying the user that he didn't get it.

They do this to prevent malicious software from getting into their systems.

- Some system-wide firewalls strip HTML code out of the incoming email data stream, leaving plain text.

- Some legacy browsers (such as Lynx, used on DOS systems), and emailers render only a few tags. The other tags are just deleted from the text without formatting it. Fonts are meaningless on such browsers, since they use the CGA text screen.

[nathanpacker]

Well thanks for the info. Now I don't know what to do. I had this nice email all set up, and I don't want to go back to text. I guess I might, but really, this email will go to no more than 1 or 2 people a month. Man, now you got me thinking about going back to plain text. 2nd opinions anyone?

[MidiMagic]

Find out what email systems your clients have.

Send different emails to clients with different systems.

[jbennet]

Yeah, outlooks secuorty settings hate html emails too

[nathanpacker]

Find out what email systems your clients have.

Send different emails to clients with different systems.

Lol, well there aren't really any "clients" per se. Theoretically, the person filling out the form can be anyone in the world, so I can in no way predict or find out what systems most people will be using. I have however put a little something in my code to tell me the end users Browser and OS info. But that can only give me small clues about their email usage. But anyway like I said, the numbers of people filling out this form will be very low, a couple a month at most.

And about Outlook, there are options to choose whether or not to read HTML, and I'm pretty sure by default, Outlook is set to read emails as HTML, not plain text. I've just recently installed it on my pc, and didn't make any changes in the settings, and it is set to read HTML, and the HTML renders fine.

But apparently you all are very opposed to HTML email. I appreciate the opinions. I'm just wondering why then I get so many HTML emails every day from reputable organizations like Buy.com, TigerDirect, eBay, and DANIWEB. Surely their emails are being ready by MANY more recipients than mine, and are being farely successful, right?

That is my biggest question. Daniweb sends out HTML emails for all it's thread replies and all that. And I've looked at the source, it's just plane old HTML, no different from the one I'm sending.

How 'bout you Dani? I know you probably won't read this, but if you do, what experience/problems have you encountered sending out HTML email to all the daniweb members?

[jbennet]

I have outlook 03 and by default HTML messages have all links, scripts and pictures blocked, which makes them useless.

[nathanpacker]

I have outlook 03 and by default HTML messages have all links, scripts and pictures blocked, which makes them useless.

I guess with the pictures, you're right, I do have to add the sender to my safe list to see them, but the rest of the HTML seems to render fine. I don't know, I just wish it wasn't such a big deal. I was really proud of the little HTML email I created! Now I'm so sad I may have to trash my baby and go plain text!

[MattEvans]

Personally; I'd prefer to recieve plain text email.

The biggest problem you're likely to hit with email + CSS is linking... for the same reason pictures from remote locations don't load by default; linked CSS ( i.e. link href="" ) isn't going to load by default. There's a risk of someone operating spam emails that invoke cross site scripting attacks (webmail only) even attempt distributed denial of service attacks ( webmail or email applications ) if remote resources are requested upon opening an email.

The only other problem you might run into would be if email clients used their own stripped down parser/renderers; and if those renderers didn't implement CSS fully. For the reason I've already mentioned; CSS shouldn't be implemented fully in email clients; because there are CSS properties that can invoke downloads from remote locations ( background-image for example ).

Ideally though; an email client shouldn't block all CSS to prevent such occurances; it should block whatever module it is that fulfils remote downloads.

How exactly are you using CSS?

<span style="font-family:Arial;">inline?</span>

<style type="text/css">
span{font-family:Arial;}
</style>
<span>embedded?</span>

<link rel="stylesheet" type="text/css" href="http://yourdomain.dot/email.css"/>
<span>remote?</span>

The only other problem you might hit is rendering differences in email applications, if they use OS specific controls; those'll likely be the system's lowest common denominator (i.e. My old MS Outlook will use the same HTML rendering component as MSIE5; regardless of the fact Opera is my default browser ).

These pages might help; they are more related to HTML email in webmail clients. Still; CSS is more likely to be actively stripped out of webmail views as apposed to just being ignored, so perhaps they'll help you somewhat..

http://alistapart.com/articles/cssemail

http://www.campaignmonitor.com/blog/archives/2005/08/optimizing_css_1.html

[nathanpacker]

Well I've definitely decided against using CSS, so I'm not using it at all. Before that, I was using linked CSS. But thanks for the info on the HTML. I"ll look into that.

[Dukane]

Why not add an option to the form so the user can select HTML or Plain Text?

[nathanpacker]

Why not add an option to the form so the user can select HTML or Plain Text?

Good idea. Clean, easy. Just a little check box in the form. Nice. I'll have to give that a try.
Thanks.

[tgreer]

The norm for HTML email is to use embedded style attributes in each tag.

<p style="font-family: Verdana;">...</p>

[MidiMagic]

Too often the recipient of your email may not have control over his computer, because he is part of a business or university network that is controlled by systems administrators.

One idea is to send a plain text email, and provide a link in it to a formatted website.

[jbennet]

Quite a lot of websites (forums etc...) offer the user the choice of either HTML or PlainText. I suppose it wouldnt be that hard to set up.

[nathanpacker]

Quite a lot of websites (forums etc...) offer the user the choice of either HTML or PlainText. I suppose it wouldnt be that hard to set up.

No, not hard at all, I may do that actually. However, I really think that this form is going to be filled out so little, and some will not even supply an email address anyway, as it is optional, so I may just leave it as is. If it were going to a wider group of people, I would change it.

However, this discussion has been very educational and useful, as I do have a couple other sites with emails that will go out far more regularly, so plain text may be the way to go there.

[pty]

I came across this post about CSS in email - it may be of some use.

Make sure you encode it as a multipart-mime though because some email clients don't like HTML