scriptygoddess

06 Sep, 2002

HTML emails and stylesheets

Posted by: Jennifer In: Lessons learned

(This is more of a "work-related" post) – Part of my job (unfortunately) is designing HTML emails… which, if you thought difficulties with browsers was a problem, you don't even want to know from the HTML email world!

In any case, while I know HTML for the web relatively well, I know very little about HTML for email… the little tricks you have to do to get things to work, etc.

In one of the last campaigns we did, the stylesheet wasn't loading in some cases. (Specifically when viewed through outlook-webmail). I just learned today that, I had a DIV tag encompasing the content of the email… and if I had put the <link href="http://www.yourserver.etc/styles.css" type="text/css"> INSIDE that div tag… it WOULD HAVE loaded it. =sigh= live and learn.

Anyone out there who does HTML emails, if there's good reference links for info on it, send 'em my way… I'm trying to get up to speed on this stuff…

15 Responses to "HTML emails and stylesheets"

1 | Eve

September 7th, 2002 at 1:41 am

Avatar

I would love to know too. I have been sending an html email out for over a year now for work and it's been a trial and error process all along. What works in aol, doesn't work with yahoo or outlook and ugh. what a pain in the….
I have always thought somebody needed to write a good html email book.

2 | Melanie

September 7th, 2002 at 7:51 am

Avatar

I had to set up a html email for an automated daily newsletter. Best way I found for it was, surprisingly, to use ms word 2000 and outlook 2000. Since you can email directly from word without making the document into an attachment it emailed it perfectly every time.
Maybe the source of something like that might help?

3 | goddessDave

September 13th, 2002 at 9:12 am

Avatar

Not sure if these guys have tech info on HTML emails.. there is a ton of email marketing info tho..

http://www.clickz.com/

4 | jennifer

September 17th, 2002 at 12:48 pm

Avatar

Here's a good one:
ConsultLogic

5 | Nate

May 27th, 2003 at 6:52 pm

Avatar

I'm in the same field and am trying some pretty complex html layouts with background images. However these little background buggers refuse to show up in Netscape's email client. Do you know anything about this?

Any tips or can or ideas would be greatly appreciated.

6 | Jennifer

May 27th, 2003 at 10:52 pm

Avatar

If you're putting your background image in a BODY tag – that may be your problem. Some email programs ignore that tag – or strip it out… What I've been doing is nesting tables (yeah, I know usually a bad thing) So I have one BIG table set to 100% width – 100% height. It's a one row – one column table that serves as my "frame" for my email – if I have a background color or image, I'll put it as a background for that cell. Then the rest of the design goes inside that cell…likewise, I'm now putting any style declarations inside that cell (as opposed to being inside the HEAD tags like a regular HTML page…)

7 | Nate

May 28th, 2003 at 9:56 am

Avatar

Sounds like you are doing pretty much what I have been doing. Yeah, nesting tables can be bad, but your design is very limited w/o it.

Even with everything you've listed above, Netscape and AOL's email clients still omit the bg images. Do you think Style Tags would work?

8 | Mike

August 20th, 2003 at 10:03 am

Avatar

I've run into this frustration myself.

I have found that many email programs will not load any stylesheets at all, especially not when embedded in the HTML document. Yet, if you try to link to a stylesheet, you'll likely have that link removed because many mail clients recognize certain tags as indicative of SPAM.

For example, you can't use certain common elements like online forms (they will not appear at all in certain email clients) or IFRAMES, and if they have a spam-blocker program installed, it may search for any 1×1 graphics used to track whether or not a reader has opened the email.

9 | monkey

September 9th, 2003 at 5:17 pm

Avatar

One thing I've noticed is that Outlook 2002 will strip the leading dot off css pseudo-classes. That is, if your stylesheet defines a style like this:

.boldblue { font-weight: bold; color: blue; }

Outlook will change the definition from ".boldblue" to "boldblue" and you will find that the style is never applied in the html page.

The way around this to define the class as *.boldblue

10 | Jennifer

September 9th, 2003 at 9:46 pm

Avatar

Something I learned recently – style tags etc. in general – bad. Any web based email system (like outlook's webmail) or even AOL email – completely strips out ALL style tags, and stylesheets. :(

I'm looking into whether it'll allow font tags, because I think for HTML emails, you're forced to use HTML 1.0. Blech!!

11 | Fred

October 28th, 2003 at 10:24 am

Avatar

I'm encountering an issue when sending out html emails that Microsoft Outlooks webmail strips all background images from the body of the email. Does anyone know how to resolve this?

Also if a users email client does not support HTML based emails, how do you present a text only alternate message?

12 | Sam

November 11th, 2003 at 5:09 pm

Avatar

I am just learning HTML, and I have done a couple of sites in Dreamweaver, but now my employer needs me to design emails. I have no idea how to do this since I come from a graphic design background. Does anyone have any good pointers, or know of any how-to books?

13 | Trevor Saint

December 29th, 2003 at 7:11 am

Avatar

I have found in my experience with email signatures etc. That any css or style sheets must be placed below the body tag in order to function correctly. The use of embedded css styles works better than external style sheets. I know that this working works perfect with both Microsoft Outlook 2000 – 2003 and Outlook Express. If you also require default colour to the text like say purple that follows the design of your signature, you can achieve this by simply editing the font style in css. Works a treat.

I hope this helped. Its taken countless hours to get it right.

Regards

Trevor Saint

14 | Tim

January 15th, 2004 at 4:28 pm

Avatar

If it helps anyone, I wrote up what has worked for me. It gets a fair amount of Google traffic and people seem to read it for a few minutes. So maybe it has some value for this discussion:

http://www.reachcustomersonline.com/content/2003/03/23/07.47.59/

Basically, I use tables with stylesheet embedded. It works with different webmail clients, including Yahoo, Hotmail, as well as AOL 7/8 and Outlook.

15 | genevieve

October 7th, 2004 at 11:57 am

Avatar

hello,
I'm having trouble with the anchor tags within my html email. I've tried removing the "" marks so that the code reads instead of as this was some advice I read on another help site, but this still doesn't seem to work. Does anyone know how to get this to work?

Thanks a lot! g

Featured Sponsors

Genesis Framework for WordPress

Advertise Here


  • Scott: Just moved changed the site URL as WP's installed in a subfolder. Cookie clearance worked for me. Thanks!
  • Stephen Lareau: Hi great blog thanks. Just thought I would add that it helps to put target = like this:1-800-555-1212 and
  • Cord Blomquist: Jennifer, you may want to check out tp2wp.com, a new service my company just launched that converts TypePad and Movable Type export files into WordPre

About


Advertisements