Skip to page content or Skip to Accesskey List.

Work

Main Page Content

Sending Html Email From Hotmail

Rated 3.6 (Ratings: 9)

Want more?

  • More articles in Code
 
Picture of profjj

Jasen James

Member info

User since: 31 Mar 2001

Articles written: 3

The Situation

In talking with a web designer, the question came up - how can email be "spiced up"? I want to send HTML email, without using Outlook or another mail program. Now, this is normally very easy to achieve with a server-side language such as Cold Fusion. However, in this case, the simplest solution was needed, since they do not use any server-side languages.

The Solution

I remember a few years ago, reading an article on HTML email from Hotmail, long before Hotmail added it's rich text editor. So the only problem was remembering what I had read, as that was like almost 3 years ago, not in my favourites, and also nothing that I would keep on my mind for so long.

Typing normal HTML tags into the textbox when composing a message at Hotmail works out well if the recipient is using Hotmail. However, when viewed in Outlook, you don't see all the nice nifty formatting. Not what I had in mind.

The key point to take into account is the fact that the default content-type is set to text/plain, however, for it to be read correctly in a POP mail reader such as Outlook, we have to find a way to change the content-type to text/html. The solution was to wrap the html you want to look rich between <html> and </html> tags, to achieve the change of content-type. So, as an example, we can compose the following:

<html>

<p>

This basically will give you a <big>rich HTML look</big>, and solves the <u style="letter-spacing:3px;">problem of changing the content-type from</u><b style="color:blue;font-size:14pt;"> text/plain to text/html.</b>I tried it on <b style="font-size:20pt;color:green;"> Hotmail</b>, <i style="font-weight:bolder;color:blue;"> Yahoo</i> and with Outlook.

</p>

</html>

As indicated in the above code block, the message shows up at Hotmail, Yahoo, and Microsoft Outlook in HTML format.

Spicing it up

We can spice up the HTML, by doing a few of the following:

  • Using inline CSS for presentation, instead of linking to an external style sheet and using font tags. There is a possibility that it might conflict with the CSS, of web based email. (Just theoretical, test if you may.)
  • Any images needed should be uploaded to a web server, and the fully qualified web address used in the src of the <img> tag.
  • Do not use the <body> and </body> tags. Instead, use a table, and change the background color to the desired colour needed for the background, most probably use 100% for the width.

Conclusion

In conclusion, there are numerous other options that anyone who would needs to use this sort of approach to compose HTML email can explore. However, this is web development, your mind is the limit.

Hope this helps,

profjj

Jasen James [profjj] works as a Web Application Developer and IT Consultant for Computer & Business Services, a small company which he owns, in the tropical Caribbean island of St. Lucia - "Paradise on Earth"., which is host to the now infamous annual St. Lucia Jazz Festival.

The access keys for this page are: ALT (Control on a Mac) plus:

evolt.org Evolt.org is an all-volunteer resource for web developers made up of a discussion list, a browser archive, and member-submitted articles. This article is the property of its author, please do not redistribute or use elsewhere without checking with the author.