Herr’s a few tips of my own, regarding CSS in email:
<a href=“http://www.armandoalves.com/blog/archives/2005/01/11/zen-and-the-art-of-css-in-email/”>http://www.armandoalves.com/blog/archives/2005/01/11/zen-and-the-art-of-css-in-email/</a>
I am having trouble with an e-mail I am composing for a client. All of the images in the email are showing up as broken links and the images appear as an attachment. The URL’s for all the images are an absolute path. When I send it to myself in Outlook or to Yahoo the images appear, however when I view it on the client’s computer all of the images appear broken. I’ve checked their settings in Outlook and still no good.
Any help or advice would be greatly appreciated!
I understand all this and I am very excited to send out html emails - but I don’t understand how to do it. If I copy the html into the email - it comes out as plaintext html. If I add the html page as an attachment, some mail clients parse it and some show it as an attachment. This is confusing.
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.
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/scriptbuilders/category.php?search=send+complex+HTML
there are other scripts but I have not had a look at these yet.
cheers
dogart
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.
hi dudes,
let me tell you directly the tips forhtml newsletters
- use as much as css
- use images and text in 50-50% ratio
- if at all used tables rather than css don’t cut it in many parts just have 3 or 4 straight rows
- also important put “click here to unsubscribe …” this is also very imp.
- use as much as gif images
- dont use bgcolor property
etc etc etc…
Cheers
Ram…
Hope this is enough 4 u guys out there!!
Hi All,
Great article.
But here’s my problem: we are a website development company, and our clients want to use an HTML-rich newsletter service that allows them to manage their own content (text and graphics). Therefore, whilst the article is excellent in describing how an HTML email should and can be hand-coded, the challenge for us is to provide a WYSIWYG newsletter editing environment to our clients that results in a newsletter being created that obeys all (or nearly all) of the rules.
Currently we use ourselves, and onsell to our clients, ‘12all’ from www.activecampaign.com. But there are some issues with it. The main issue is that the 12all developers themselves recommend that the newsletter is created external to the online WYSIWYG environment, i.e. using notepad or dreamweaver, and then cut and pasted into the WYSIWYG area and fine tuned if necessary. This (for me) almost completely defeats the object of having a WYISWYG tool in the first place.
So I guess my question is - is there a browser-based WYSIWYG product out there that is specifically designed to generate code (as per the article) for maximum email client friendliness?
Side issue/question: ideally, the same WYSIWYG product should allow the cutting and pasting of content (tables, bullets, etc. - but not graphics, that’s asking too much) from MS Word. We all know the cr#p code that Word generates - I absolutely marvel at the ability to cut and paste, for example, a table from Word directly into Editize (a fantastic WYSIWYG product) which results in a) all the cr#p Word code being cleaned up AND b) the table structure being preserved. That’s great, but the problem is that (AFAIK) I’m not then able to use the excellent, clean, XHTML code that Editize generates in an HTML newsletter because - in being so clean - it doesn’t follow the coding rules of the article for maximum email client friendliness.
Why should a WYSIWYG area allow cutting and pasting from Word (or other PC-based editor)? Because
- A PC-based editor is a much more efficient and responsive environment to work on, mull over, etc. content for a newsletter than an online WYSIWYG environment
- A PC-based editor automatically saves your work in progress, unlike an online WYSIWYG environment. (don’t tell me you’ve never typed a long forum posting such as this one only to have something go wrong when you hit the submit button and as a consequence lose everything you’ve just typed!)
Phew. I think I’m done. Comments? Feedback? Thank! 
P.S. I always copy a long forum posting such as this into my PCs clipboard memory prior to clicking ‘Submit’ - I’ve been burnt too many times in the past
I publish a weekly html bulletin to around 3500 subscribers. On the whole it works pretty well and displays consistently in most popular mail clients. However, I’ve had a couple of reports from subscribers in corporate environments who are not receiving my weekly email. I have discovered it is being blocked because the message contains character strings over 1024 in lenght. A tech support guy in one of these companies reckons it’s their Symantec Firewall which is blocking the file because of buffer oveflow attack concerns. However in the two cases I have discovered so far Messagelabs managed spam filtering is also a common application.
Despite the fact that the vast majority of our subscribers receive our email without any problem, my preference is to make my email conform to these restrictions (there are probably others who are not receiving it but haven’t bothered to let me know).
Does anyone have any ideas how this can be achieved? Does a tool/editor exist which can break the message up into 1023 character strings? will that solve the problem? . Kevin
Hi there!
Is it possible to forward an html email without losing the setup and images?
thanks for your answer
This article is very well-written and has some very useful advice. However, SitePoint’s own email newsletters don’t use most of the guidelines outlined in this article. I’m kind of on the fence here. Do I follow what’s actually being used, or what’s being suggested? And which one is “proper” anyway? If it works, it works, right?
Great article, especially that, as you said, online resources seem to be pretty limited when it comes to HTML email creation. Another problem is that CSS can greatly simplify the creation of an email (without all those <font>, <table> or <img src=“dot.gif”>). It also allows you to easily modify the design and the content and it considerably reduces the email file size when it comes to emails with lot of content; but it is badly supported in a lot of the email clients and some allows properties others don’t. This problem seems corrected with webmails: after all, modern browsers have an almost complete support of CSS, but it is not the case. Since the email is within another web page, the webmails disable some properties and allow others, but every webmail has its own “forbidden” properties. Because of the lack of resources about this problem, I tested almost all the CSS properties in three webmails (Yahoo! Mail, Hotmail and Gmail) and posted on my website which one were supported or not (http://www.xavierfrenette.com/archives/2005/04/12/css-support-in-html-emails-of-hotmail-yahoo-mail-and-gmail/). I hope this article will help and that the same tests will be made for the different desktop email clients.
Email delivery isn’t getting any easier … thats for sure.
Hi,
An interesting thread, there sure are many issues to deal with. Recently we had to send out a HTML email, using PHP, and the major hurdle was understanding the need to correctly specify the “multi-parts”. Eventually, thru trial and error, we got there. Now we have a minor problem with images in the HTML email, and I see others here have mentioned this.
Some rules we found that were necessary for HTML and including images (as enclosures, or ‘embedding’ the actual image in the email), …
- In the email header, you will need these specifications:
Mime-Version: 1.0
Content-Type: Multipart/Mixed; boundary=Message-Boundary-28823
The value after “Message-Boundary-” can of course be anything at all, the rule being though, that any following ‘parts’ have exactly the same value.
-
Keep the HTML as simple as you can (stay away from M$ bloatware).
-
The HTML content can then be something like:
--Message-Boundary-28823
Content-description: Mail message body
Content-Type: text/html; charset=US-ASCII
Content-Transfer-Encoding: 7bit
<?xml version="1.0" ?><html>
<head>
<title></title>
</head>
<body>
<div align="left"><font face="Arial"><span style="font-size:10pt">Here is some stuff</span></font></div>
<div align="left"><br/>
</div>
<div align="left"><font face="Arial" color="#0000ff"><span style="font-size:10pt"><b>some more things ..................</b></span></font></div>
<div align="left"><br/>
</div>
<div align="left"><font face="Arial" color="#ff0000"><span style="font-size:10pt">an image</span></font></div>
<div align="left"><br/>
</div>
<div align="left"><br/>
</div>
<div align="left"><img src="cid:8225872.1115035110.27684" width="454" height="450" border="0" alt="graphic"/></div>
<div align="left"><br/>
</div>
<div align="left"><br/>
</div>
<div align="left"><font face="Arial"><span style="font-size:10pt">and then some more text</span></font></div>
<div align="left"><br/>
</div>
<div align="left"><br/></div>
</body>
</html>
- Now, notice the “<img src …” specification, we have the usual width and height, and we have a value …
“cid:8225872.1115035110.27684”
to reference the image in the HTML email. Again, the value after the “cid:” can be whatever you like, as long as it is exactly the same as the ‘image part’ like this …
--Message-Boundary-28823
Content-ID: <8225872.1115035110.27684>
Content-Type: Application/Octet-stream; name=sample_image.jpg
Content-Transfer-Encoding: base64
Content-disposition: attachment; filename="sample_image.jpg"
/9j/4AAQSkZJRgABAQEBLAEsAAD/2wBDACAWGBwYFCAcGhwkIiAmMFA0MCwsMGJGSjpQdGZ6
eHJmcG6AkLicgIiuim5woNqirr7EztDOfJri8uDI8LjKzsb/2wBDASIkJDAqMF40NF7GhHCE
etc,etc, encoded in base64
- The “final” part is slightly different, to define the end of the HTML email, and the completion of all the parts.
--Message-Boundary-28823--
it juts needs the two trailing dashes.
HTH
Peter
Hi Kevin,
You could try HTML Tidy Online
I always use this to clean up my HTML code and it also improves the display of your HTML bulletin. In the 2nd column (Pretty printing) you can enter a margin number that Tidy uses for line wrapping. I use 66, but you can enter a value that suits you. Click on the advanced link on the right for more options.
If you use long urls, you can also use SnipURL or [URL=http://tinyurl.com]TinyURL to shorten it. That also saves a lot.
I found that outlook dumps the internal styles if you specify them in the <head> and is very restrictive of what you can save as html stationary, you can use thunderbird (firefox’s email program) to import your html and outlook recieves it ok
I think the information in this article could be very useful to me, but I haven’t been able to figure how to make the text of the HTML code show up as anything other than the text of the HTML code. How do I make it show up as what the HTML code DOES?
Can this be done using CSS not <table> tags??? Since you are already embedding CSS in the HTML this would be a lot nicer solution!
I didn’t find the one thing I came here to find out: How do I reference an image? Is it aboslute, or relative?
I’ve used this (open source) PHP software with great success several times: WEBInsta Mailing Manager