This is an article discussion thread for discussing the SitePoint article, “How To Code HTML Email Newsletters”
Great article.
Looks like you’ve left a tag open (2nd bulletpoint in the Subtleties section). This is causing all subsequent text to appear in red.
Cheers,
Af.
I was excited about the article because of the lack of information on this topic. However I’d like to find out more about how to send these emails.
I’m on Mac OS X and I can’t find any way to send messages correctly though Mail, Eudora, Entourage or Thunderbird. My best bet was Thunderbird. I could insert HTML in the message, however when I send messages all the remote links turn into local links and the graphic files get received by the recepient. Unfortunatly I have to revert to Outlook Express on Windows to send these HTML messages.
If anyone can help me with this I’d appreciate it.
Nice article Tim,
On the subject of images. I have always linked images to an external source which as you mentioned can be and is being blocked because of pixel spy practices by spammers. I have never had any success embeding images in an email. How does one go about that?
Cheers ~ Andrew
Good tips. I wrote HTML emails starting in 2000 and found them very popular. Then spam ruined it. It was way too much work to get around the issues.
But private email networks are popping up that take care of these issues. All email is delivered via web-browser compatible tools, including your favorite web browser. No more need for email clients or those geeky “somehting” “@” “something” “.” “domain” - just you as you are.
Keep an eye out for these as they grow. They take care of all of the issues you have talked about here.
Many of my readers request non-html versions. Do you do a multi-part email?
We send out many multipart emails. the only article I could find on this topic at all was here:
It is good to see any discussion of this, since it is such a widely used marketing tool.
To get around the problem of Hotmail, and some others, deleting your CSS I have found it more reliable to put the STYLE block straight after the <body> tag (instead of between </title> and </head>).
This kind of CSS definition you use looks very strange for me:
padding-top: 5px 5px 0 20px;
Isn’t it an accident or I missed something?
Definitely put the <style> in the body. The one thing you do not mention is that you should make certain the page will degrade gracefully. Viewed without styles it should be usable and readable.
One other thing not mentioned is print stylesheets. They are a big deal, especially since many people print longer emails to read them.
Final trick invovles the wording of your content. Setup Spam Assassian Proxy and send yourself a few test messages. It is very interesting what one finds out. For example, having a “Remove Me From List” link gets you red flagged as spam nearly automatically. But having say, “I do no longer wish to recieve this information” link flys in under the radar.
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 
Good read!
to be frank, i personally avoid using CSS in the newsletters.
Services providers like Gmail hate CSS in the mail, they deliver the mail in the spam.
So i keep the newsletter very simple without any CSS but yet attractive…
i generally dont give any mouseover effects to links in the mail and specify text color in body tag itself, which works prefect for me, mails directly go to inbox…
and yes few more things to keep in mind…
Specifying Doc Type and Charsat will also help, some spam filters do count thse things while counting spam score…
and from address should have some name i.e. from Abc <abc@sitepoint.com>
that’s all i can remember right now 
btw good article…
Regards
Deep
I have found by using inline styling (yes I know a pain) you get the most coverage of email clients. I have not found gmail to mark email using css as spam, although I think the styling of text gets taken over by gmail alot.
I have done some tests with the newsletters and how hotmail treats CSS and have found that inline styling is the way to go BUT there is a workaround. In that if one places the style block instead of between the <HEAD></HEAD> tags and rather in the body tags it actually works treats it as inline. This I am sure will annoy the purists but hey it works. I still have to test this in Gmail.
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. 
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
Thanks for this great How-To… it’s very hard to find advice on HTML email formatting. I do have one note of caution about using the target=“_blank” attribute on <A> tags in HTML email: There is an obscure bug in the Mac OS X mail application (ver 10.2.5) in conjuntion with the Safari browser that causes links in an HTML email message to fail when they are set to open in a new window. I run a small list of around 2,300 subscribers, many of them Mac users, and had this problem with only a single subscriber. So, obviously, it’s not common, but if you knew you had a lot of Mac OS X users on your list, it might be worth knowing.
From my experience there are always going to be recipients that have some kind of problem viewing your HTML email as you intended, regardless of your code.
If you’ve ever got under the bonnet of what an email looks like you’ll see that it is possible to send multiple mime types in just one email. So you could send HTML, text, Jpg all in one email if you wanted to. It’s then up to the recipients email client to decide which mime type to display. i.e. if it cannot view HTML it will display the text. If you send any kind of HTML email always send a multpile mime type email with a text version of your email.
It’s a very good idea to create a web page version of your HTML email and provide a simple text link from all of the different mime types on your email for unforseen problems viewing your HTML email.
I have encountered a problem with using UL and OL tags when composing html email with PHP. It looks like there is a problem with Apachee. I couldn’t force these tags to render properly and therefore i changed my layout and i didnt use them (but i already wasted huge amount of time trying to fix this).
Anyway this is a very good How To.
cheers
Great article - would be useful to know how to embed images within the email rather than have images as an external link to get around XP service pack 2 problem?
Cheers
Cam