Software

Developing an HTML-formatted mail message

Creating HTML-based e-mails for newsletters or other content is a simple process if you adhere to a few guidelines like using tables for layout, keeping the design simple, and sticking with inline CSS.

As an application developer, I have worked with sending e-mail messages for various system-related tasks but never for commercial purposes. This recently changed when a client asked me to design a newsletter delivered via e-mail. It was a straightforward request, but the task of including HTML in e-mail is not so simple.

Take your pick

As any Web developer knows, controlling the user experience with the vast array of browser options available is not easy. For this reason, developers often select and use a set of target browsers (usually Internet Explorer or Firefox) during the development process.

Weekly development tips in your inbox
Keep your developer skills sharp by signing up for TechRepublic's free Web Development Zone newsletter, delivered each Tuesday.
Automatically sign up today!

When reading e-mail, a user may utilize one of the previously mentioned browsers or use a specific mail client such as Microsoft Outlook, Eudora, Thunderbird, and Lotus Notes. The overwhelming number of options results in a familiar development technique: developing for the common denominator.

Dumb it down

While researching techniques for designing and delivering efficient HTML-based mail messages, a common component is utilizing the established practice of HTML table-based layout. CSS and Web standards are the suggested solution for Web-based development these days, but the same is not true for HTML e-mail.

I don't mean to infer that no e-mail clients support CSS, but you should use HTML tables for layout if you need HTML-formatted e-mails to consistently display in a user's e-mail client. (Remember the many caveats of page layout with tables?)

You can use the following guidelines to make every attempt to deliver a consistent presentation regardless of the e-mail client:

  • One table is used to control the layout of the message body. You should use single- or two-column layouts.
  • The message body can consist of a header, the body, and a footer. Individual tables are used for each.
  • Use table and table column attributes to control display characteristics. This includes alignment (both vertical and horizontal), cell spacing, and padding and borders.
  • Avoid DIV tags and utilize SPAN elements where appropriate. SPAN elements can be used for styling text, as well as positioning text above or below content.

CSS options

CSS can and should still be used (well, only inline CSS) for styling elements like color and font. That is, include the CSS with its element. For example, the following header element is styled as 12-point Times Roman presented as red.

<h1 style="">Example</h1>

Listing A is a very simple example of sending an HTML-formatted mail message via an ASP.NET page coded with C#. The code creates a mail message and populates the sender (from), recipient (to), and subject fields. The body of the message is formatted as HTML, and the appropriate markup is added. Only the ASP.NET Web Form's Page_Load event code is included. The example demonstrates a basic one column structure with individual tables for the header, body, and footer portions of the message.

Testing

The only way you can really know whether a design is acceptable is by testing it. This can be a time-consuming process (which is why many developers loathe it) because you need to install the mail client software (like Eudora and Lotus Notes) and test with various Web-based services like Hotmail, Gmail, and Yahoo Mail. If the design works well with these clients, you can expect positive results with other readers. If you aren't targeting a specific e-mail client, a good rule of thumb is testing a solution with both Internet Explorer and Firefox.

Resources

Working with HTML-based e-mail newsletters is not a new concept. Countless developers have traveled down the treacherous road and, thankfully, some of them share their hard work with the rest of the community. Here are valuable resources for creating HTML newsletters:

Reaching customers

The ultimate Internet killer app is e-mail, and using it to reach current and prospective customers is a no-brainer. However, developing visually appealing e-mails with HTML and CSS has its pitfalls. Two ways to avoid problems is using tables for layout and keeping the design simple.

What advice do you have for developers who need to design HTML-based e-mails? Share your experience with the Web development community by posting to the article discussion.

Miss a column?

Check out the Web Development Zone archive, and catch up on the most recent editions of Tony Patton's column.

Tony Patton began his professional career as an application developer earning Java, VB, Lotus, and XML certifications to bolster his knowledge.

About

Tony Patton has worn many hats over his 15+ years in the IT industry while witnessing many technologies come and go. He currently focuses on .NET and Web Development while trying to grasp the many facets of supporting such technologies in a productio...

32 comments
sdyfs
sdyfs

how to do this in php

adam
adam

I finally put in a ton of hours and came up with a script that will allow your precious emails to be displayed correctly in GMail and other troublesome web-based email clients. It is extremely easy to use, and you can try it out for $1: Get it HERE: http://www.vivwebsolutions.com/tools-css.php

greg
greg

in the asp.net code: i read somewhere its recommended to use system.net.mail eg: Dim Frm_Mail As System.Net.Mail.MailMessage = New System.Net.Mail.MailMessage () Frm_Mail.To.Add ( New System.Net.Mail.MailAddress ( "youremail@yourdomain.com" ) ) Frm_Mail.Bcc.Add ( New System.Net.Mail.MailAddress ( "myotheremail@mydomain.com" ) ) Frm_Mail.From = new System.Net.Mail.MailAddress ( "noreply@mydomain.com" ) Frm_Mail.Subject = "form submission" Frm_Mail.Priority = System.Net.Mail.MailPriority.High Frm_Mail.IsBodyHtml = True Frm_Mail.Body = "hello world" Dim Smtp As New System.Net.Mail.SmtpClient () Smtp.Host = "mail.mydomain.com" Smtp.Credentials = New System.Net.Mail.NetworkCredential ( "myemail@mydomain.com", "mypassword" ) Try Smtp.Send ( Frm_Mail ) Catch Ex As System.Net.Mail.SmtpException Response.Write ( Ex.ToString ) End Try

jaydj
jaydj

is there any html newsletter software available to make the tasks less difficult ? i'd be interested to try any out.

bblackmoor
bblackmoor

No! No no no no no! What do you think you are doing? Will you have articles next on how to create bulk-email messages or how to write code to turn other people's workstations into zombies? Will you have articles on how to write trojans or how to find a ISP that won't shut down your account if you're a spammer? Ye gods, what are you thinking?!? What you OUGHT to be doing is writing articles on how to FILTER so-called HTML mail so that the user never sees it, or how to prevent such spam-laden, virus-bearing filth from being propagated across one's networks. You should be showing people how to PROTECT themselves from this kind of attack, not showing people how to launch one. I am flabbergasted. I hope the person who wrote this article is never permitted to write another one for TechRepublic, and whichever editor approved it is fired.

Mad-H
Mad-H

.....do people send HTML e-mails? This is one of my pet hates, IMHO e-mail should be in plain text as HTML a) may not necessarily be supported at the recipient b) is a good way of getting spam confirmation or spyware/viruses in via links to external sites/downloads a prime example of this is my Judo sensei - someone used to send "pretty" e-mails to him, but his mail program (I can't remember exactly which one it was, but it was one of the mainstream web-based ones) used to show the message in plain text, html tags and all. And so, as he isn't a technical person, he couldn't read any mails from that sender. Personally, I lock down my mail reader as tight as I can (for security purposes) and most mails with html in get well and truly broken - the amount of companies that don't either offer plain-text mails or that take the time to make sure their marketing mails are readable without images, etc is atrocious. I think this practice should be discouraged with extreme prejudice =8) - if you need to send HTML content, send a link to a website - this is the correct medium over which to deliver HTML content. /rant hehehe Do other people agree with me over this or am I throwing an unnecessary wobbler?

matthew
matthew

But I actually LIKE html-formatted e-mails. They are easier to read, and you can use pictures, formatted text, etc. to get your message across. SPAM comes in HTML *and* plain text versions. Either must be filtered.

Nodisalsi
Nodisalsi

If an email is posted as multipart/alternative, a email client can select the HTML or plain text portion as it sees fit. Unfortunately, AFAIK, there are no email clients which are capable of: Composing in HTML, AND Stripping out tags to include a text part, AND Base64 encoding images so they can be embedded. And even if there was - I fear that M$ will still mess it all up so that emails composed by outlook clients would not fit in this framework. I don't even know if Outlook manages multipart as the RFC2046 would recommend?

larrydownes
larrydownes

I may conceptually agree with you Mad H, but the reality is HTML email generates considerably more response than text based email. Simple as that.

jes1111
jes1111

Talk about having your heads buried in the sand! I have some news for you: it is no longer necessary to have a man holding a red flag walk in front of your horseless carriage. Okay?

Hamish_NZ
Hamish_NZ

(edit: this is directed at the original article, not Mad_H! :P) I don't agree that using tables for layout is necessary 'un-compliant' (ultimately, it's a stylistic issue), but other than using tables there is NO reason not to make user totally compliant HTML in your emails. I'd also make the point the Techrepulic is not currently following your rules - your emails use DIVs and SPANs all over the show, sometimes breaking the layout (NOT because of the email client - it gets broken because the code does not always handle different (ie small) window sizes very well). The emails also use stylesheets in the header - something that you (seem) to be against. w/regards plain text emails - decent email readers will convert properly designed html emails into good plain text emails anyway. Problem solved.

bblackmoor
bblackmoor

Of course I agree. No responsible person sends so-called HTML mail, period. PERIOD. And no technically competent person permits it to reach them. Unfortunately, the vast majority of people with email addresses are not technically competent. The people who see no harm in so-called HTML mail are the same people who are to blame for zombie networks and widespread virus outbreaks.

sekhar
sekhar

I totally disagree with you. If you are marketing director for a product, would you prefer to place an advertisement with the avialable offers or place an advertisement which says 'come to this so and so office and find out what the offers are'? They need to lure the customer by showing a glimpse of how good their product is, which can only be possible with nice colours and design. so there is no other go.

david
david

This article was about doing what a customer asked for, and I have exactly the same task. They want HTML mail to go out and know that the vast majority of their customers will see it in Outlook Express or Outlook, and don't care about the rest. I used to use Topica for one clients' mailings and you can supply a separate text version (the email client decides which to display), which widens the usability. But it's extra work to charge for, of course. Personally I only ever send in plain text!

50THZ
50THZ

************

bblackmoor
bblackmoor

So-called "HTML mail" is a competence test. If you say you like it, you are not competent to use a computer. It's just that simple. It's like saying you like driving on the sidewalk, or that you don't think people in food service should wash their hands after visiting the restroom. Sometimes a disagreement is simply a matter of opinion. This is not one of those times.

B9Girl
B9Girl

All this talk about stripping emails of html because people aren't "competent" to deal with them is entirely too condescending. This becomes a freedom of communication issue. I don't want any sysadmin filtering what arrives in my inbox without my explicit consent (like spam filtering, I'm all for that). But stripping HTML from a regular email because of purist programmer ethics is interfering with my rights to communicate. It's too paternalistic/big brotherish for my taste. In the grand scheme of things, so what if HTML display is a little funky? So what if someone sees a few stray tags in their message? If it was a really important message, they'd find a way to figure out what it says. Probably by asking their irritated sysadmin who'd rather be playing Doom than answering "stupid" questions. Such is life. Computing has not been the exclusive domain of elite geeks for over a decade now. Like operating a car, we all have to deal with technology even if we aren't race car drivers that live and breathe exhaust fumes.

Mad-H
Mad-H

......if it's not supported or blocked at the client end, it ends up looking worse for the company. A good marketing department should understand these isues and be able to provide good content however the recipients view the advertising. I use firefox as my brower and have a fake proxy set up in IE so that any links images in outlook get "blocked" (they can't be retrieved by IE) and I have received a _great_ many e-mails that are just a set of placeholders for images with unlabelled links on them, so while my mouse changes when I move over them, I have no idea what they are for. You can't seriously tell me that's good marketing, can you (personally, when I receive a mail like that I unsubscribe or block that company's mails)? What if the mail gateway strips HTML from mails - this may not be under the recipients' control and may be dictated by their company's security policy? Fair enough, if the company asked for it, if it's internal then they may know their web-client capabilities, but so many mails are sent out not knowing this or the implications of doing it.

Gene_Deel
Gene_Deel

I receive an html newsletter , but it clearly states at the top - if this email is unreadable, please go here (URL) and read it. I love that approach - it allows them to communicate in their preferred medium, but if my email client breaks it, I'm not without a means of receiving their newsletter.

Mad-H
Mad-H

....to the author, my original tirade was more directed at HTML mails in general rather than at the article specifically, and if that's what the customer wants, _and you know the capabilities of the mail clients_ then you _can_ make mails look good. _However_, another of my original points was you don't always know how the mail clients will render an HTML mail. If you look at some of the replies that talk about the MIME content of the mails, you will see that there is a whole can of worms that is potentially opened up when sending HTML mails........much like the can I opened up with my original post =8)

hcr62
hcr62

I am not sure about this, but for some time I have used the following approach: I create a web page, which has embedded links to enable forwarding the page via eMail. (See http://www.miscelpage.com/allshare/space2020.shtml) The only content in the email is the link (after viewing the page, click on the link at the bottom to share this page). Now, in the example related to this subject, couldn't the applicant for a job say "Please view my resume (http://www.myloc.com/myresume.html) and click the reply at the bottom of the page to indicate further interest. Thank you." Something like this seems to address all the concerns regarding actual eMail content while providing the opportunity to demonstrate HTML (and Java-script, etc.) skills. IMHO

50THZ
50THZ

or 'hear, hear', as the case may be

BlueCollarGeek
BlueCollarGeek

I hope you mime encoded a plain text alternative with it, because the html will never make it to my HR person's inbox. It sucks to do that to you, but the reality is html e-mails can pose security risks to a network. In my industry, there is no need for html e-mails. The industry you would most likely be seeking employment in as a GUI/Graphic Designer may have a much more liberal attitude toward html e-mails. I agree wholeheartedly that you need to distinguish yourself from all the others when seeking employment, but it may not be as effective as you might hope. Good Luck!

rain.longson
rain.longson

Here's a question, I'm looking for a job I?m a GUI/Graphic designer. I've been thinking this past week of creating my e-mails in application to a job in HTML to match my web site and Word doc resume. In this e-mail HTML I do not use any images, just a table with 2 rows (columns don't seem to work, they re-arrange themselves into rows). Color blocking the bottom where my contact info is in a dark grey and linking the URL to my site instead of having the http://... and my name is a link to my e-mail address (I know, you can just reply). The links are red ? not blue and not underlined, but I have them go to a very dark red on hover. My signature is set-up to come up as some cursive font on the users? machine. The background of the page is a super light grey, the text is Tahoma colored a dark, dark, grey, with the header in red and it?s underlined in red. As a designer people expect my resume to be good to look at and laid out perfectly, above and beyond the content, ditto for my portfolio and any written print material. I thought that going this one step further might help prove that, yes I can design, yes I know HTML and how to make things look good in ANY format, but if it?s annoying, I DO NOT want to annoy someone that I?m applying to for a job. I want to stand out from the upteen e-mail applicants out there, in a good way, not a bad way. I?d love feed back from everyone out there about this use of HTML e-mail.

simon
simon

you would use a whitelist and a spam filter so you can view email safely in any format. There are simple measures you can take to make viewing emails a pleasant experience, not a trip back in time to PINE and TelNet. Now I would not expect my mom to be able to configure her email properly but that's why she's got an AOL account, but I think anyone who frequents this site is competent enough to figure this out. Just my opinion of course. ;-)

Mad-H
Mad-H

It's not necessarily the users' competency that I'm referring to, it's the client software and the way it's configured. Also, without wanting to sound like a fascist administrator, if the company decides that will be it's communication policy and you don't wish to give consent for your mail to be filtered that way, then there's no reason why they have to allow you external e-mail access (but that's taking it to extremes). To justify _why_ this might be a good idea [to strip HTML] - the traditional way of getting spammed mail addresses verified or to get viruses in via e-mail is to put an "unsubscribe" link in the message or to put a payload file in the mail which generally relies on the user to click the link or open the file. But if you have embedded HTML in a mail, all you need is embedded content from an outside website, and you can bypass content checking at the mail gateway, to a certain extent. Taking IE and outlook as an example, if spyware can dload silently through any unpatched vulnerabilities when you are surfing using IE, as outlook uses parts of the IE engine to display HTML content in e-mails then the same vulnerabilities apply when viewing embedded external content in an e-mail. You say "So what if someone sees a few stray tags in their message? If it was a really important message, they'd find a way to figure out what it says." - but what if every message I sent you was in Japanese (assuming you don't currently speak Japanese) - you _could_ get it translated each time, but surely you'd want the mails sent out in a format you can understand? Referring to the example I have seen - the mails were sent out by an MS program, and if you have ever looked at the HTML frontpage (especially the older versions) produced, you will know that it is no easy matter for a programmer to read it, let alone a user. And, with all due respect, you seem to be missing a large, fundamental point when you say "Probably by asking their irritated sysadmin who'd rather be playing Doom than answering "stupid" questions." as the whole point of this is to avoid having the users need to ask these "stupid" questions - the "doom-playing sysadmins" you refer to wouldn't have put in these sort of measures, these would have been put in by conscientious admins who are trying to protect the company's assets and the integrity of their systems.

BlueCollarGeek
BlueCollarGeek

The choice really is the company's. The elite geeks follow marching orders just like all the other lemmings these days. And the company said make it secure.

Joey Indolos
Joey Indolos

Why don't YOU write an article detailing these aspects. I subscribe to some mail-based marketing services, and some allow you the option of choosing between plain-text and HTML. If using MIME can automate this or make it user-transparent, it would be very useful indeed, especially when dealing with clients who wouldn't know what you mean when you ask them to chose between plain-text and HTML.

Andrew Houghton
Andrew Houghton

There are two points here 1) blocked images, and 2) gateways stripping HTML. However, both of these issues can be averted, by proper MIME encoding of the e-mail message. When programs like Outlook block images, it is because the image resides on a server. The e-mail sender used a link to the image. The MIME standard allows you to embed the images in the e-mail message. In these cases Outlook will not block the image content. The second item falls along the same lines. The MIME standard allows you to specify alternate content. You can set the default content to be an HTML e-mail and provide an alternate content representation in plain text for gateways that strip HTML from the e-mail message or for e-mail clients who have turned off acceptance of HTML content. A little extra work on the developers part can make HTML e-mail a pleasant experience for all recipients. Too bad the article didn't go into these aspects.

matthew
matthew

As if most sysadmins are female. Very PC, but kind of silly nonetheless... If you're going to be generic, go ahead and say "he". PC is very annoying.

bblackmoor
bblackmoor

"What if the mail gateway strips HTML from mails...?" That is an indication of a sysadmin that knows what she is doing. It is a great pity that more are sysadmins are not this competent.

Editor's Picks