Pure CSS Emails - Good or Bad? - CSS forum at WebmasterWorld

Forum Moderators: not2easy

Message Too Old, No Replies

Pure CSS Emails - Good or Bad?

Sending mass mailers....

vicki1981

9:36 am on Apr 11, 2006 (gmt 0)

Hi all - I have a question which might have a simple answer. Then again it might cause some debate - I'm not sure yet.

As part of my job I am required to send out mass emailers coded in HTML. Personally, I prefer CSS layouts to table layouts and would like to use this for my emails.

However, is this a preferred option or not?

I realise that some webmail (not many customers would use this) doesn't view the CSS layout well when it's coded into the <head> tags. This is fine, as I can easily incorporate the code into the <body> tags and it views ok...or at least in gmail which I tested in.

Any opinions anyone?

Thanks,

Vicki

jetboy

10:08 am on Apr 11, 2006 (gmt 0)

In theory, you could probably get full CSS emails working in virtually every recent email client. Theory isn't good enough though; you need to test your work in every email client that you're likely to find in the wild. That's a lot of work.

In the days prior to GMail I did this, and got multipart-MIME CSS email working flawlessly in everything apart from Lotus Notes 6. However, the basic structure of the email was a table, primarily because I wasn't coding table-free web pages at that time.

So, good or bad? Good if it works in all the clients. There should be no disadvantages if the CSS is embedded.

Would I bother? Only to see if it could be done. I don't think there are any advantages to it - if you're going to cite file size then this could go either way depending on the design. W3C compliant emails? Too much time on your hands. ;)

JAB Creations

1:31 pm on Apr 11, 2006 (gmt 0)

I'm not big on mail myself but decent mail systems shouldn't have a problem. Web based email should work assuming it's the browser doing rendering and not some clientside program. Clientside programs tend to use IE so I'd be cautious about that.

Always give people a plain text option if you're not sure. I'd personally go with the CSS that you're mentioning with a plain text option. Just make sure that people can access plain/text when they initially sign up.

A good question to ask I guess...

Can email support BOTH HTML/CSS and plain text? I disable HTML on my personal high priority address (as to minimize the chances a referrer to a spammer's site be logged and they could then thus validate my address if they were really trying to). However it would be nice to be able to send both plain text and the HTML/CSS version in a single email to all people instead of having two groups based solely on that choice.

Anyone know?

John

jetboy

2:20 pm on Apr 11, 2006 (gmt 0)

Can email support BOTH HTML/CSS and plain text?

Yes, using multipart-MIME. If you send text/plain and text/html together with fallback text for clients that don't support MIME (highly unlikely that there are any of these in circulation any more) you've got a very backwards-compatible email format.

However, if a client supports text/html, that'll be what they get. The idea is that the client will see the highest spec version of the email that it supports.

bedlam

2:48 pm on Apr 11, 2006 (gmt 0)

However, is this a preferred option or not?

Preferred? Yes. Possible? A little doubtful.

You should test, test, test (and do your research [google.com]!) before trying this, but remember that

the head of the document may not survive
the body element of the final message is often out of your control (e.g. in webmail systems...)
mail clients are often a little, um, inept at rendering anything but the most vanilla variety html / css

(1) and (2) mean that the best methods of getting css into a page (i.e. in a style element or by using external reference) are not dependably available. This, in turn, means that you'll likely need to use quite a few inline styles or (shockingly!) a style element inside the body element (I've tried this with some luck, but never employed it on a large campaign, so TEST!)

(3) means that you may have little choice but to use a table-based layout (but again, testing is key...)

-b

bateman_ap

2:54 pm on Apr 11, 2006 (gmt 0)

I have found that GMail is an absolute pig when it comes to correctly displaying CSS and is the main reason I still code my emails "old school!" Would be nice to do emails in the same way I code all my sites now but still waiting for a bit of catch up.

4hero

3:56 pm on Apr 11, 2006 (gmt 0)

I did a few pure css emails in the past and received a few replies saying they they were not rendering correctly. Since then, I spoke to a good mate, who does this type of work for a living, and he recon's pure css emails are a definate no-no..

encyclo

4:07 pm on Apr 11, 2006 (gmt 0)

You might want to check out this thread from the HTML and Browsers forum library:

[webmasterworld.com...]

See in particular msg#7 by Don_Hoagie - there are some great guidelines in there. Basically, if you are using XSS, it needs to remain inline.

Personally, I use tables and font tags on the rare occasions I send HTML mail.

Don_Hoagie

4:13 pm on Apr 11, 2006 (gmt 0)

Thanks for the plug encyclo...

I do want to mention that right now "pure" CSS emails are a no-go (at least, last time I checked)... the big players in web-based email apps do not support positioning, or maul it beyond any usefulness. I think I said the contrary in the thread that encyclo just posted, so please disregard that. I had some sort of brain fart at the time... I probably tested in GMail and then assumed it worked everywhere else, since GMail is one of the most unforgiving web-apps.

Hopefully you can prove me wrong- i'm not a wizard of code by any stretch; I just create these emails all the time, so I've figured out what works and what doesn't... as far as I know, CSS layouts won't fly.

Edit- and yes, you're right about keeping the CSS out of the <head>... either do it inline, or embed it inside the <body> somewhere, and you'll be good in AOL/Hotmail/Yahoo/Gmail 95% of the time.

antidote45

5:15 pm on Apr 13, 2006 (gmt 0)

Anytime that I've had to do them I've had to create them in tables and then use inline style to get them to look right (almost) everywhere I tested. Even then the MacMail just wouldn't render it correctly. I'm a handcoder so it was a pretty tedious process which is why I refuse to do them anymore.

I client of mine is needing a custom HTML done and I'm looking for someone else to do it. If anyone is interested sticky me.

zackattack

5:29 pm on Apr 13, 2006 (gmt 0)

To add my pennysworth

Last year (autumn) I had to create a new mailing list template - it had to work in hotmail, outlook (express and standard) and AOL - these being the main mail clients the intended audience used.

I tested and tested and pulled hair, threw things out the window, and finally ended up using a simple table layout with very simple styles inside the body. Forget putting anything meaningful in the head area, Forget background images, you have to use embeded graphics and really only stick to the most simple text/link styling.

Dont get me wrong, you can still create nice looking work, but I can confirm (through my own painful experice) CSS is a no no...

Now someone please prove me wrong...

antidote45

1:44 am on Apr 14, 2006 (gmt 0)

Yes, I noticed background images didn't work either - just background color. It was limiting and very frustrating. I found that you had to put cellpadding and cellspacing on all the tables too to get rid of the gaps that would usually be taken care of by border-collapse. Oh, I'm getting irritated just thinking about it ;-)

boitmanis

5:41 pm on Apr 15, 2006 (gmt 0)

all informations here <snip>

[edited by: trillianjedi at 6:39 pm (utc) on April 15, 2006]
[edit reason] TOS [/edit]