How To Code HTML Email Newsletters

[ArticleBot]

This is an article discussion thread for discussing the SitePoint article, "How To Code HTML Email Newsletters"

[-Ox]

It seems that if you do a <div style="background: url(Images/b.gif)">adfdas</div> HOTMAIL strips the background image out, however you can define the donts and colours and all that but it leaves those in but takes out the background images

[fred!head]

Thanks for the feedback, everyone. I'm a bit thick and only now thought to click the Comments link at the bottom of my article.

Some specific responses, if it helps:

DH: I would not recommend sending html email from an email client on your computer, at least not on a regular basis and to more than 10 people or so. Some ISPs block emails that have a lot of people in the bcc or cc field which is the primary way this gets done "locally." If it's personal email that you want to add html, one trick is to create a signature file and use your html page as the file. If it's an email to lots of people on a regular basis, I'd try an email service provider like EzineDirector.com which allows up to 499 emails per month for free (they change the free number periodically so it may not last forever).

mcahill: I use email service providers and make a point to do a text only version of my html email newsletters. Spam filters are less likely to tag your html email as spam if you include a text only version. I use Intellicontact.com but I believe ConstantContact.com, CoolerEmail.com, and others allow you to include both text and html in a single email. The text version of my email newsletter is a polite note that offers a link to the online version of my current newsletter.

Roxanne: Thanks for the ALA link. I've added it to the version of this article on my website. I still prefer actual code samples, though. 8-) That's how I learned the TD.feature trick mentioned in the ALA article, by reading code I inherited and was asked to maintain.

gyulus: padding-top: 5px 5px 0 20px; should be padding: 5px 5px 0 20px which is CSS shorthand with the parameters for top, right, bottom, left. Also referred to as TRBL or "trouble" format. At least by me. It save three lines of code and some number of characters and bytes to your file size. My bad.

-Ox: I would use the background image parameter for your table, not a div, for the reasons you cite.

On the GMail stuff, one of my subscribers uses GMail and he clicks alot of links so I've assumed what I send display properly. Perhaps I should email and ask him a direct question...

Thanks for your feedback!

Tim

[CodeLes]

I found this article helpfull, and simple...

[jax502]

It's a very helpful article about composing and creating an email newsletter. But I think it lacks the detail about the process of actually "Distributing" it. I read some threads here that are having problems sending it through email. I am having the same problem myself. I know that our email client needs to have an option that says "send as html" or something like that. Well I tried the same thing in Outlook Express and sent my newsletter as an HTML, and I received it as HTML code on my yahoo and gmail account. I am a little confused too.

[jax502]

Those are some good links anandg.

[apdaniel]

I have had trouble previously with hotmail and HTML email. Primarily a lot of CSS is disabled using this service. For example, my email has many 'thumbnail' sized images in it with CSS used to define a shadow using background-image. Hotmail strips this from the displayed email. I've found all backgrounds are pretty much useless in HTML email. It's solid colour or nothing at all.

If you have access to, and skill with, Microsoft IIS 5 or above you can use xmlhttp in some ASP code to read in an external CSS style sheet and display it as inline. The benefit of this is that the css file you use for your website is the same one used for your email, thus removing the need to duplicate each change you make.

It's such an annoying case of trial and error with these things!

[bbscan]

This is a great thread, one critical item is that if you have a "call to action" in your email make sure it is a text link or if it is a graphic you provide a text link as an alternative. So many email programs now strip out graphics a user may never see what action you are asking them to take if you just use images.

[dogart]

Wooohooo is all I can say to start with.
I've been trying to find out some info about doing html email newsletters as
I getting requests from clients more frequently now.

I have seen a few ask the question about how to attach or insert html into email.
I use Entourage 2001 V9 on the Mac.
Last night I found the way!!! Scripts...called "send complex HTML E 1.2.1"
here's a link that may help out....
http://www.macscripter.net/scriptbui...d+complex+HTML
there are other scripts but I have not had a look at these yet.

cheers
dogart

[greiner]

Hey guys,

Another email service provider that you might like to check out is Campaign Monitor - http://www.campaignmonitor.com.

It has been built just for web designers and includes all the features you need to run great looking campaigns, all for just 1 cent/recipient.

Cheers,

Dave.

[jphorn]

I've used this (open source) PHP software with great success several times: WEBInsta Mailing Manager

[chris_the_crow]

hello every body,

Very interesting indeed as i am now facing the issues with the different rendering of our newsletters depending their webmail client
Replying to Jim Toal

What we do (not very proffessional but it works...) is to have your newsletter saved in the stationery folder (typicaly C:\Documents and Settings\user\Application Data\Microsoft\Stationery) then from outlook (i use outlook 2003) choose Actions>new mail using>More Stationery>choose the one u saved and click OK...

It took me a lot of time to figure this one out ... hope it helps

The thing of course is that i have now to recode all my CSS into in-line attributes in the newsletter tags ...

Does any body know of an utility that can do the conversion for me?

Thanks

[Dez]

Originally Posted by chris_the_crow

hello every body,

What we do (not very proffessional but it works...) is to have your newsletter saved in the stationery folder (typicaly C:\Documents and Settings\user\Application Data\Microsoft\Stationery) then from outlook (i use outlook 2003) choose Actions>new mail using>More Stationery>choose the one u saved and click OK...

Thanks

Hi Chris,

This has been one of the best threads I've seen in a long time.

Could you lead us thru please, step by step, on everything u did before saving the newsletter? How did u start it for example? What program?

Dez.

[artcoder]

I heard that gmail will strip out all styles (either embedded or inlined). And when I did a quick send of a page with an internal style sheet, it appears that gmail does strip out the CSS. So now I am resorting to the use of <font> tags. Have anyone experienced this?

[anandg]

Originally Posted by artcoder

I heard that gmail will strip out all styles (either embedded or inlined). And when I did a quick send of a page with an internal style sheet, it appears that gmail does strip out the CSS. So now I am resorting to the use of <font> tags. Have anyone experienced this?

-artcoder (at) webmarksonline.com

Hi artcoder,

Gmail doesn't strip out inline defined style sheets, it does strip out embedded style sheets like any other webmail client does. You can use the HTML Email Validator, to check if your HTML code is correct for a compatible HTML email:
http://www.anandgraves.com/html-email-validator/

I'm very curious about the HTML code you used for your HTML email which you sent to Gmail. Perhaps you could post your code or part of it.

[Dez]

Originally Posted by anandg

Hi artcoder,

Gmail doesn't strip out inline defined style sheets, it does strip out embedded style sheets like any other webmail client does. You can use the HTML Email Validator, to check if your HTML code is correct for a compatible HTML email:
http://www.anandgraves.com/html-email-validator/

I'm very curious about the HTML code you used for your HTML email which you sent to Gmail. Perhaps you could post your code or part of it.

Hi Anand,

Brilliant website in your link - some excellent ideas there.

One thing, if someone wanted to send multipart/alternative email with PHPMailer as mentioned on your website, and they wanted to include an image, say to the right hand side of the email, how would they do that please ?

Any help appreciated.

Dez.

[Dez]

Also, is there any way to get links within an email to aol users to open in a new window ?

Have tried target="_blank" but no good.

Any help much appreciated.

Dez.

[freakyworx]

Originally Posted by Dez

Hi Anand,

Brilliant website in your link - some excellent ideas there.

One thing, if someone wanted to send multipart/alternative email with PHPMailer as mentioned on your website, and they wanted to include an image, say to the right hand side of the email, how would they do that please ?

Any help appreciated.

Dez.

you'd be the judge guys

[Beansprout]

Good article.

A List Apart's article on the same subject is also a good read

[georgiav4]

Hi,
I found your article really helpful, but I'm having a issue with my text version of the HTML email.

Does anyone know of a way to format the plain text to fit a 60 caracters width? I know that on a MAC plataform there are softwares that do an auto clean up like entourage, but I work in a PC plataform. Does anyone know of a solution for this issue? Any thoghts? Anything would help.

I appreciate any help. Thanks!

[Pozzy]

Thanks for the article, helped a lot.

[jco99]

For all of you who are having trouble sending emails through Outlook, please check check out the following, from the Macromedia site (http://www.macromedia.com/cfusion/kn...fm?id=tn_15200)

Inserting HTML into e-mail in Outlook 2000 Example
In Outlook, choose Tools > Options.
Click the Mail Format tab.
In the Send in this message format pop-up menu, choose HTML.
Click Settings.
Select the option to Send pictures from the Internet with messages.
Click OK.
Click the New button to open a new message.
Choose Insert > File.
Browse to find the Dreamweaver HTML file on your hard drive or disk. Click the HTML file once to select it.
Before clicking Insert, click the drop-down arrow next to the Insert button.
From the submenu, select Insert as Text.
Complete your e-mail options.
Click Send.

[fred!head]

Hi,

I wrote this article awhile back and have tried to update the version on my site since it is harder to update the SitePoint version.

Just an FYI that I've updated my article to include what I've discovered about coding so that email appears fine in GMail and similar email reader software that strips out stylesheet declarations. Here's the URL to the section (hack off the intrapage jump or scroll up to see the full article):

http://www.reachcustomersonline.com/...ndex.php#GMail

Hope this is helpful.

[Dez]

Many thanks Fred, that does look helpful - you've obviously put in a lot of work on that.

I must admit, I could do with a hand on this. I send html emails from Outlook 2003, and most people receive them ok, but a few people with aol and hotmail, receive the emails with garbled html code. This is despite Outlook 2003 apparently sending html mime emails that conform to the relevant standards So, I click new email in Outlook, and then compose the email, where do I go from there please? Do I somehow put extra html code in?

Any help on this, would be really appreciated.

Dez.

[Dez]

Can you use any of this thru Outlook ?