Creating HTML Email

printas · #1 (**permalink**) 09-09-2004, 11:54 AM

I'm creating an HTML email newsletter. I have already design the page in Dreamweaver and using external stylesheet CSS to control the look of the page and text formating. I have set all links, source files, and the CSS style sheet to absolute link.

When I sent the html mail and open it in Outlook, Outlook Express, and Yahoo Mail, everything looks good exactly like what I had design it in Dreamweaver. It looks just like if I open the page in Internet Explorer.

But, if I open the same html mail in Hotmail and Google's Gmail, the formating that is link to the CSS, is not carried over. It didn't have all the formating I had made with the CSS.

Where should the relative stylesheet code of the css be place in the html page so that Hotmail or Gmail or any other web based email program does not ignore the external css style sheet I have use for the html mail.

I have heard that you should put the CSS stylesheet below the <body> tag because these web based email normally strip out your <HTML>, <HEAD>, and <BODY> tags. But is it valid to put a style sheet link under the body tag?

WebCraft · #2 (**permalink**) 09-09-2004, 05:15 PM

Can I ask, "What is your reason for html email?"
If you want to convey a message using html created pages, try using a newsletter or announcement client to live on your server, then send everyone a plain text link.

The reason is some may have more of a problem seeing your message in html than you experienced.

People will also appreciate the speed from which that email opens.

Good luck.

printas · #3 (**permalink**) 09-10-2004, 09:23 AM

Hello WebCraft,

Thank you for your reply.

I did not asked the question whether I should send an html email or text email newsletter, nor did I asked which ones is better for newsletter or announcement.

Therefore, please help if you can, based on the question I asked.

Secondly, out 1500 clients we have, 1458 of them requested that newsletter we send to them is an HTML version. We tried text email announcement before, and many don't like and they don't bother to visit the site.

Therefore, why give something to your customers what they don't want? They want HTML announcement/newsletter, so that's why we're going to give them HTML newsletter.

**mike** · #4 (**permalink**) 09-10-2004, 10:49 AM

I do not agree with dumping html email. Plain text is boring and asking people to click a link to read an email you sent them is inefficient and will crush your opening rates. Of course if you're just sending a text link you would have no idea what your opening rate was in the first place, but I digress...

Your problem with the web based email clients is a known issue and unfortuunately, it is intentional. Hotmail, gmail and several others are stripping graphics and in many cases stylesheet formatting from messages. Users can click a button to view the message 'as intended' however they must click this button every time. The default is 'no images' and there is apparently at this time no way to set the default otherwise.

It's funny because in any other circumstance, if I send you a message and a third party, cuts, chops, edits, or otherwise alters the message it would be considered a hack.

It is the equivalent of a TV station ripping the video out of all commercials and broadcasting the audio only. Unfortunately, the situation is likely to get worse before it gets better. Microsoft's much ballyhooed XP update is rumored to have a similar feature for Outlook.

I detect the unmistakable reek of impending litigation on this practice.

jlknauff · #5 (**permalink**) 09-10-2004, 04:18 PM

I've run into the same thing. To top it off, there wasn't a lot of uniformity to it. It showed improperly in my Hotmail account, but most other people got it fine. I did find that if I used CSS on page rather than external I had less problems, and NO problems when I resorted to tables (gasp-tables?!) I plan to keep experimenting until I get it just right. Email me your email address and I'll let you know when I come up with a solid solution-for some reason I don't get notifications to my posts here.

jeremysowen · #6 (**permalink**) 09-10-2004, 04:18 PM

I wasn't aware of the image issue mentioned above but can tell you that I do not use external style sheets or javascript on html emails because they tend to be less reliable in email readers. I usually use standard html tags and for headers or specific text I care more about being displayed exact I use both html tags and in-line styles since I have seen that often a web-based html reader will reak havoc on styles since they have their own defined as well. In-line styles will always take priority to avoid this issue and if style doesn't work then the html tag should keep it looking nice.

I also try to always use a white page background color and always keep my content contained in a table no more than 600 pixel wide since I know using 100% tables used to cause problems in AOL and possibly others.

Also, regarding the HTML/text email issue I send my emails to contain both header types so that 95% of people see the HTML as I hope and the few that only allow text are simply given a hyperlink to view a web page.

newconceptdesign · #7 (**permalink**) 09-10-2004, 04:20 PM

XP SP2 adds image blocking to Outlook. In order to see them you have to click at the bar that appear at the top of the message. It seems annoying but I like this feature.

jollyjumper · #8 (**permalink**) 09-10-2004, 04:59 PM

Hi,

Except from experiencing some problems with hotmail I also experience problems with the application Mail that's used on Mac OS X. The version I use to test my html messages doesn't support CSS styles at all. This gives at least one big disadvantage, the repeating of background images.

I understood that newer versions of Mail do support CSS styles, but upgrading Mail can only be done by upgrading(equal to purchasing an update) your OS X.

If someone has some hints on this, I would really love to hear them.

Kind regards,

Jolly.

Aaranged · #9 (**permalink**) 09-10-2004, 05:25 PM

My company publishes three seperate HTML e-mail newsletters a week, and I encountered precisely the same problem.

My solution was a variation on your suggested one (placing a style sheet link under the body tag). In addition to linking to the newsletter's style sheet in the usual fashion (<link> in the <head> tag), I also included the content of the external stylesheet as an internal style sheet.

I discovered I had to place this in the <body> tag, since Web-based mail programs tend to ignore it if it's in the <head> tag. While this isn't strictly speaking legal in HTML, I've encountered no problems doing so. Specifically, I've tested this solution extensively in Outlook, Hotmail and Yahoo! Mail, and it works like a charm.

One final tip. If you haven't done so, create a class name for your all your links, and make sure it's added to all your hyperlinks. Styling your links generically in your stylesheet without including a class name (i.e, a:link, a:visited, etc.) isn't going to work because Web-based mailers will ignore your generic link styles in favour of their generic link styles (especially Hotmail).

Hope this helps!

DrTandem1 · #10 (**permalink**) 09-10-2004, 08:31 PM

Yes, because of security and not wanting spam porn to spill out all over my monitor, my web-based email has been optioned, by me, not to display images. Also, by doing this, the sender does not know whether the email was read, avoiding some continuing spam.

Trying to send anything to AOL is a crapshoot. It's like writing to someone in prison. If they even get the letter, it's a miracle. When they do, it will be full of holes where the warden (AOL) cut out things they don't want you to see.

After I have perused the email on the web and scanned any attachments for viruses and worms, I may open it for a closer look, at which point it may be taken off of the server and viewed via the email client on my computer.

There is no way, especially via e-mail, for you to be assured that your HTML documents, or any other documents for that matter are viewed in the way you desire. It is difficult enough to attain browser compatibility for a web page with the various browsers available and the various plug-ins the visitor may or may not have.

That being said, all of your links and external sheets containing Java and CSS should be absolute URLs. Send a test newsletter to yourself and view it on different browsers, resolutions and email clients including whatever web-based ones to which you have access.

Lastly, supply a text link as an option, if they are unable to view the contents of your email.

printas · #11 (**permalink**) 09-11-2004, 01:02 AM

Thanks to everybody that contributed to this post. I've learn so many lessons from all your post here; and now I have to go back to the drawing board, and try, test, test, and test again :)

Deep13 · #12 (**permalink**) 09-11-2004, 01:15 AM

inline styles should help here

you might not be able to give mouse over effect to the links and all but rest should work fine..

example of inline style will be like this :

Quote:

i will suggest not to use css for newsletters...

may be you can use simple html and different font properties..

for example...if you want to make body text as red then may be something like this will help <body text="red">

if you want to have thin order for the layout then instead of using class you can do something like this..

Quote:

<table width="600" cellpadding="0" cellspacing="1" bgcolor="#CCCCCC">
<tr bgcolor="#FFFFFF">
<td>
put page content here...
</td>
</tr>
</table>

Regards
Deep

AuctionHugh · #13 (**permalink**) 09-11-2004, 08:35 AM

I don't send out html emails except what Yahoo and Outlook produces, but this is a very helpful thread for the future. Another reason why webproworld is such a great resource!

----
Small Business Web Design by AuctionHugh's Wife Kathleen
Artistic - Straightforward - EASY for You!
Examples and Pricing at www.kallenweb.com.

ozchris · #14 (**permalink**) 09-12-2004, 07:57 AM

Alistapart has an excellent article on this subject:

http://www.alistapart.com/articles/cssemail/

WebAndNet · #15 (**permalink**) 09-13-2004, 12:09 AM

Based on this URL http://www.microsoft.com/windowsxp/s...eoverview.mspx,

SP2 blocks download images in Outlook Express. Outlook 2003 already has download image blocking.

Does SP2 also block Outlook 2000 or 98?

I ask, because for some reason, I have it in my head that Outlook 2000 & 98 rely somehow on Outlook Express. And if Outlook Express is blocked, then would 2000 or 98?

Thanks,
Chen Sun

Dragonsi · #16 (**permalink**) 09-13-2004, 07:36 PM

Some very interesting posts above but one thing is certain, the future of HTML newsletters is in doubt.

I have been producing an HTML newsletter for several years now and until this last 8 months or so, I had no compaints or problems in delivering these emails.

It is now becoming more and more common, not always through user-choice, that SPAM-blockers and image strippers are being utilised by email clients and mail-servers. The XP SP2 upgrade has been mentioned already but it is becoming very rare for any ISP provided email accounts not to have anti-spam as standard. These anti-spam spiders will block any email with a majority percentage of HTML code built in, restricting the recipiant from viewing the email in its original format, you just receive a load of text and code, very little is comprehendable or readable and 99% of the time, will get deleted before the end of the first sentance.

I do agree that email newsletters are best received in HTML format, they are more enjoyable to read and included images/photos can enrich the reading and encourage click throughs but with the rise of 'popular' blockers, another method will need to be utalised, such as the 2nd post above - where a plain text email links to a webpage - not the best - but could be the only way for the future.

blueenergy · #17 (**permalink**) 09-14-2004, 03:56 PM

The Alistapart article was very interesting. Some of the tricks I've already discovered like putting characters at the beginning of styles so that the dots don't get stripped.

Here's another little tip: Try to redefine existing HTML tags whenever possible. For example, I changed the style on the H3 tag and use it for headlines. Why? Because if your styles get stripped out completely, at least you'll have something that differentiates the headline from the rest of the copy.