14 replies [Last post]
grelen
Offline
Regular
Last seen: 14 years 29 weeks ago
Joined: 2005-10-19
Posts: 12
Points: 0

Hi,

Can anybody tell me the extent CSS is supported when reading an email newsletter in an email client?

I hate the idea of reverting back to tables for layout.

Also, have you any advice before I get busy designing it all?

What are the pitfalls?

I intend to hand code the xhtml and CSS and then thread it into netscape navigator and then encode the images in MIME format.

Any advice is appreciated, thanks.

G

Anonymous
Anonymous's picture
Guru

Re: Are CSS-styled e-newsletters possible?

grelen wrote:
Any advice is appreciated, thanks.
My only advice is to avoid HTML email at all costs. It is never appreciated.

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 40 weeks 6 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

Re: Are CSS-styled e-newsletters possible?

Triumph wrote:
grelen wrote:
Any advice is appreciated, thanks.
My only advice is to avoid HTML email at all costs. It is never appreciated.

I second the sentiment.

If you need to distribute a newsletter via email format it in plain text. Otherwise, put it in at attachment. Otherwise, put a link in the email pointing to the website.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 7 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Are CSS-styled e-newsletters possible?

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 46 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Are CSS-styled e-newsletters possible?

Quote:
I don't get what everyone's beef is with them.

The email protocol was not designed or meant to deliver anything but plain text

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 7 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Are CSS-styled e-newsletters possible?

Hugo wrote:
Quote:
I don't get what everyone's beef is with them.

The email protocol was not designed or meant to deliver anything but plain text

Tables were never designed for layout and floats were never designed to lay out columns. The Internet wasn't originally designed to sell stuff.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 40 weeks 6 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

Are CSS-styled e-newsletters possible?

Well, as the tag line says, I could be wrong.

But email and newsgroups go back before the web and were designed for different purposes. Ya wanna do pretty screens, there's the web over there - use it. Smile

html email looks lousy in mail readers that don't have rendering engines in them. My biggest beef with Thunderbird is I can't figure out how to send a plain text email. Outlook started it all, I suppose. But some people still read email with elm or pine. Lots more than use text based browsers.

Now attachments - I could go on forever about those. :twisted:

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 10 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Are CSS-styled e-newsletters possible?

Maybe the OP has a commission to produce it and he isn't in a position to argue Wink

It always pays to search the forums first before asking. If you had dont that you would have come across some earlier threads including two in January. 1 | 2

Point #1 (as everyone has been so keen to point out) its best to use plain text for emails for a number of reasons. You can't embed malicious code in plain text, you can in html, images in particular can be a problem. Many people prefer plain text emails, these people won't like receiving html ones. Plain text is smaller and quicker to access for people on slow or expensive connections (e.g. reading email on mobile phones at £1 /Mb with 3G in UK)

If you still wish to go ahead, check out what is said in those threads.

  • Most modern email readers handle HTML/CSS just fine.
  • There can be problems with webmail services. Since people access webmail with web browsers there isn't any problem with support for CSS at the user end, the problem is in the mangling that the webmail service may do to the email before serving it to the user's browser. These are the rules of thumb I followed.
    • don't rely on the <body>, yahoo mail for one removes your <body>, wrap the email in a containing <div> as well.
    • use inline styles.
    • keep things as simple as possible.
    • its not a web page - you have far less space - in a mail client the user is likely to have a much smaller window than they use in their web browser and it is likely to be quite a cluttered display, you don't want to add to that clutter.
  • get yourself as many common webmail accounts as possible and check your email in all of them - hotmail, yahoomail, gmail ...

If you do use HTML/CSS, content yourself that your email will be a lot smaller than if you had tried to use tables.

/edit, minor corrections

[/][/]
Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 46 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Are CSS-styled e-newsletters possible?

Chris, ever the voice of reason rightly points out that the OP may have been commissioned to produce this work rather than desiring to achieve this for themselves (not that it really is a valid excuse)
and the links provided to those previous threads should help you along the way.

However Chris's point about viri is not stressed anything like strongly enough; allowing the email protocols to deliver code in this way is the main reason we have such a horrendous problem with malicious code being spread around the internet, the majority of viri are spread via email, and the fact that MS managed to produce such an exploitable client as Outlook allowing such nasty exploits as iframes being invisibly executed (one of the reasons I hate seeing mention of that tag due to it's ability to be malicious)

HTML email is bad and really should not exist and should have been prohibited, email protocols were intended to be lightweight ridding on the back of tcp/ip as text they consume no bandwidth html on the otherhand doubles the bandwidth and size as you now have both plain text and html code being delivered needlessly.

Sadly business(spammers) have latched on to html emails as a marketing tool and naturally believe they have a right to abuse the system to their own benefit, this would have been better if it were prevented,what they didn't know about would not have been missed, but the ability exists and we shall accommodate requests to do this work even though we know it's essentially wrong, oh well.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

jamesleslie
Offline
Regular
Last seen: 15 years 3 weeks ago
Joined: 2006-03-10
Posts: 21
Points: 0

Are CSS-styled e-newsletters possible?

I just finished working for a company where i was coding HTML emails for major clients.... the largest one of its kind in the uk

Here is the basic strategy....

Always use Tables for layout... think about what may happen if you try to use positioning in a web based client... it goes doolally!

The head of a document will get stripped in most clients so if you want to use css either use inline styles or move your internal stylesheet into the body (not valid but it works)

validate your document (accept internal stylesheet failure)

Use HTML 4 doctype and remember to add in the meta tag for css

try to keep a good ratio of content to code.... spam ratings increase the more code there is to content.

Never use Javascript etc, it will get stripped out by all clients and will probably mean you get a bounceback

stick with basic css1 tags as many of the css2 don't get supported

always host images rather than attach them and make sure you have good alt tags.


Hope that helps, but as people have said, as security gets tighter it is anticipated that emails with images in them will get bounced more than ever, many people anticipate a move back to straight text emails in the near future.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 46 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Are CSS-styled e-newsletters possible?

First thing I do other than set my email client to plain text is to ensure a rules set denying callback to port 80 to retrieve images - a well known spammers trick to verify email addresses- lets hope you're right and there is a move back to plain text in the future.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 10 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Are CSS-styled e-newsletters possible?

jamesleslie wrote:
Always use Tables for layout... think about what may happen if you try to use positioning in a web based client... it goes doolally!

James -- positioning is not the alternative to tables. As we say for all web sites try to let the content flow. Tables certainly aren't necessary for html emails. Its that sort of attitude that still sees many people thinking tables are the only mechanism for designing webpages.

DisinfectedBarfbag
DisinfectedBarfbag's picture
Offline
Enthusiast
Kent, UK
Last seen: 1 year 32 weeks ago
Kent, UK
Timezone: GMT+1
Joined: 2005-08-06
Posts: 411
Points: 1

Are CSS-styled e-newsletters possible?

Ed Seedhouse,

If you select an account in Thunderbird, then click on View Settings, then on Composition and Addressing you will see that you can de-select html messages at the top of that section.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 9 weeks 4 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9674
Points: 810

Are CSS-styled e-newsletters possible?

For the record, Gmail had a bug where it executed any Javascript code in a plain text email.

But they fixed it now Laughing out loud

Verschwindende wrote:
  • CSS doesn't make pies

jamesleslie
Offline
Regular
Last seen: 15 years 3 weeks ago
Joined: 2006-03-10
Posts: 21
Points: 0

Are CSS-styled e-newsletters possible?

Chris..S wrote:
jamesleslie wrote:
Always use Tables for layout... think about what may happen if you try to use positioning in a web based client... it goes doolally!

James -- positioning is not the alternative to tables. As we say for all web sites try to let the content flow. Tables certainly aren't necessary for html emails. Its that sort of attitude that still sees many people thinking tables are the only mechanism for designing webpages.

I work freelance as an xhtml/css coder... and have only used css for layout on my sites for the last 18 months. I try to make my sites as fluid as possible and tend not to even use tables for tabular data now, prefering css. I have always hated tables and the horrific and unreadable code they can produce (especially nested ones)

I took a temporary job with this company to pay the rent over xmas and was merely conveying the "rules" they use, they send more (solicited) mail than any other company in the country and know the tricks of getting into inboxes.

I gotta say too... it was an absolute nightmare trying to go back to html 4 and the extended code of tables!