By proceeding to accessing this website, you unconditionally agree to its terms and conditions. If not, please stop and leave now.

On Sale

Hi! I have written six books. See if you like them.

Book cover of 'Vastu Shastra Explained' 2020 Fresh Clean Jokes For Kids 2020 Fresh Clean Jokes For Everyone FFMPEG Quick Hacks Learn To Ride A Motorcycle In Five Minutes FFMPEG Quick Hacks

Creating User-Friendly Email Newsletters

Table of Contents

Many product and service companies spend a fortune on e-mail newsletters. But, most e-mail newsletters are never read. Some subscribers unsubscribe almost immediately after receiving their first e-mail. Some others would not even try the unsubscribe link. They will simply mark the e-mail as "junk."

What prompts this lost love? Usually, quality of content is often blamed. Usability could also be a reason. In this article, I will focus solely on e-mail usability.

Factors Affecting Email Usability

If you start thinking like a subscriber, you will easily know what the problems are. Here is my list.

Remote-Loading Images

Almost all HTML newsletters contain remote-loading images. Most e-mail clients block those images and show boxy placeholders. First, it ruins the look of the e-mail. Second, it makes people wonder what is wrong. E-mail clients do provide options to load those blocked images. But, most users never see those options even though they may be looking right at them. When you are checking your inbox, you do not want to stop and think. You click "Delete" and move to the next e-mail.

HTML-Only Format

Although most e-mail clients can display HTML e-mail, some people still prefer text e-mail. You need to accede to their wishes.

Text-Only Format

Text-only e-mails can strain the eyes. Some e-mail clients unwisely choose serif fonts to display plain text messages. Even monospace fonts are difficult to read, even with anti-aliasing techniques such as ClearType. Most e-mail users, even software programmers, work with default settings all the time. They never change to a better font that is easy on the eyes. For these people, HTML messages are the best option.

HTML Sledgehammered (Converted) to Plain Text

In some organizations, e-mail clients are configured to display all e-mail in plain text. This means even HTML messages are displayed as plain text. Formatting may go haywire. Such e-mails are not always properly indented or word-wrapped.

Unusable Reply Address

"No-reply" e-mail address are good for sending usernames and passwords. If you are promoting a product or a service, you maybe losing sales. Even if the e-mail contains links to web pages that provide full information about your product/service, people still prefer to contact via e-mail. If they can get hold of a human who will respond promptly, they are more like to do business with you.

No Native Font Support

Fonts are sometimes hard coded in HTML e-mails. Most of these fonts are TTF regulars from the Windows 9x days. In newer Windows operating systems such as Vista or 7, support for more optimized fonts is required. Older fonts that were not optimized for ClearType rendering will not look as good. Similarly, someone who uses Linux will get a underwhelming experience, as most distributions do not ship with Windows fonts.

Unusable Color Combinations

In HTML e-mails, it is often the practice to use a center-aligned body surrounded by a dark-colored background. When someone tries to reply to one of these e-mails, the reply text will be invisible, as the black text gets lost in a dark background.

Inability To Quote

HTML messages need to support established e-mail etiquette regarding quoting and commenting. If customers want to quote certain parts of the newsletter, then the e-mail template should support it. If the e-mail uses tables or floats, quoting can become impossible.

Limitations of Outlook 2007 and Outlook 2010

When Office 2007 was released, Microsoft switched the HTML rendering engine from Internet Explorer to Word. This change meant that image backgrounds, floats and other snazzy effects would not work or work only suboptimally in Outlook 2007. This greatly annoyed the cottage industry that had grown over several years to provide HTML e-mail marketing services.

This had one positive side-effect. HTML e-mails that supported Outlook 2007 had improved usability. These e-mails could be easily quoted and commented, which is what e-mail users wanted. (Some e-mail marketing folks started using tables, which made things difficult again.)

Ways To Improve Email Usability

Some of the suggestions I am going to make may be contrary to established wisdom. Don't let that stop you. Just read on and see what you can use.

Embed Images

Go ahead and embed your company logo. Embed only absolutely useful images. Do not use decorative images. Keep the size of the images small. Do note that images are embedded using plain text encoding such as Base64. This means that the e-mail size increases exponentially with the size of the image. Do not let your e-mail size go over 40 or 45 KB. Most image requirements can be substituted with CSS. (You can even spruce up your e-mail with CSS3.)

Won't images increase the use of bandwidth for the customer? Well, bandwidth will be used up anyway when the user makes the e-mail client display the remotely hosted images. Won't these messages hold up the message queue at the mail server? So, add a "e-mail priority" header to your e-mail with the value set to "Not Urgent." Your e-mail gets delivered only after the "Urgent" and "Normal priority" email gets delivered. You can even add a "Precedence" email header set to "Bulk".

What about storage and archiving cost? Well, an image that helps the user identify the sender should be worth it. Many people never read the headers. They check only the e-mail preview pane. Boxy placeholders wastes their time. Most users welcome anything that saves their time and effort. (The fundamentalists among you should not send any e-mail because even text occupies space.)

What about mail filters? Embedded images is an age-old feature of HTML e-mail. Spam filters cannot block e-mails solely because they contain images. Some courteous spammers send all-text spam. That does not cause spam filters to block text messages. Spam filters consider several factors before flagging a message as spam.

Multipart Alternate Emails

When you send a HTML e-mail using Outlook Express or Thunderbird, the e-mail client will automatically (behind-the-scenese thing) attach a plain text version of the HTML. It does this so that people who read e-mail in plain text will not see the HTML source code. Such an e-mail is called a multipart alternate e-mail. Such an e-mail allows for graceful degradation of HTML messages.

You can use the same logic when you send newsletters to HTML subscribers. Create a well formatted plain text version of your e-mail and make it part of your e-mail. In other words, your e-mail should contain both HTML and text bodies. People who read only plain text e-mails will see the plain text version and people who accept HTML will see the HTML version. This also helps when the user reads e-mail in HTML but replies in plain text or when his HTML reply is converted to plain text before sending or when his HTML reply is read by the recipient (the company) as plain text. Phew!

Neatly format and manually word-wrap the plain text version. Add new lines wherever necessary to improve readability. And, keep it short and simple. Don't go overboard with ASCII art.

Here is an example of a well-formatted plain-text alternative of a HTML e-mail.

Text Email Example

Greetings from ChipMonkey India Private Limited. 

We are pleased to bring you our newsletter for 
January 2010.

New Releases
  * Windows Monkey Upgrade (from XP to 7)
    This ChipMonkey was a MCSD supporting Windows XP. It 
    has now been upgraded to support Windows 7. We are 
    sorry to say that it does not support Windows Vista.
  * Linux Monkey Netbook Edition
    Netbook users are a class apart. Most of them are now
    squinting at the netbooks and wondering why the text 
    is so small. They are a horribly dissatisfied lot.
    Linux Monkey is a RHCE and has traditionally supported 
    Red Hat, CentOS, Fedora, and Ubuntu. We now bring you 
    the Netbook edition. This ChipMonkey is trained in 
    Ubuntu Netbook Remix, Linpus Linux and SplashTop.

Newsletter Subscription

To unsubscribe to our newsletter, send a mail to
newsletter@chipmonkey with the subject "unsubscribe" or
just click this link:

To subscribe from another e-mail address, send a mail
newsletter@chipmonkey with the subject "subscribe" or
just click this link:

Alternatively, you can add our news feed to your favorite
desktop or online feed-reader application.


 ChipMonkey India Private Limited - Evolution Reloaded
 * 99, ARZ Avenue, Malleswaram, Bangalore, 560003.
 * Website:  * Email:
 * Phone: +91 80.94912332  * Fax: +91 80.94912333 

The last part of the e-mail starting with two hyphens and a hard space is the signature. Many mail clients recognize it as such and color-code it. This is a legacy from newsgroups.

HTML Email Example

Now, here is the HTML version. Things to note are:

Don't know how to send the two versions, html and text, in the same e-mail? Most e-mail components do support this feature. Just check the documentation.

ASP Source Code To Send HTML E-mail With Alternate Text Version

Here is a simplified source code in Classic ASP for sending mutlipart e-mail with HTML and text bodies. The source code also demonstrates how to add headers for priority and precedence.


Option Explicit

Call Main()

Sub Main()

  Dim oMsg, sHTMLBody, sTextBody

  ' Reads HTML content from a file in the same folder
  sHTMLBody = Get_File_Contents(Server.MapPath(".") & "\email_body.htm")
  ' Reads text content from a file the same folder
  sTextBody = Get_File_Contents(Server.MapPath(".") & "\email_body.txt")
  Set oMsg = CreateObject("CDO.Message")

  With oMsg
    .From = "ChipMonkey Newsletter <>"
    .ReplyTo = "ChipMonkey Sales <>"
    .To   = ""
    .Subject = "January 2010 edition - WindowsMonkey Upgrade and LinuxMonkey Netbook editions released"
    ' Adds content for plain text view
    .TextBody = sTextBody
    .Fields("urn:schemas:mailheader:content-type") = "text/plain; charset=""utf-8"""
    ' Adds content for HTML view
    .HTMLBody = sHTMLBody
    .Fields("urn:schemas:mailheader:content-type") = "text/html; charset=""utf-8"""

    .Fields("urn:schemas:mailheader:content-type") = "multipart/alternative"
    ' Adds an embedded image from the same folder
    .AddRelatedBodyPart Server.MapPath(".") & "\ChipMonkey_Logo.gif", "chipmonkey_logo.gif", 1

    ' Sets priority to "not urgent"
    .Fields("urn:schemas:httpmail:priority") = -1
    ' Sets precedence to "bulk"
    .Fields("urn:schemas:mailheader:Precedence") = "bulk"
  End With

End Sub

' Returns content of a text file
Function Get_File_Contents(sFilePath)

  Dim oFSO, oFile, sFileContents
  Set oFSO = CreateObject("Scripting.FileSystemObject") 
  Set oFile = oFSO.OpenTextFile(sFilePath, 1, False, -1)
  sFileContents = oFile.ReadAll()  
  Set oFile = Nothing
  Set oFSO = Nothing

  Get_File_Contents = sFileContents 
End Function

A *chip monkey*

As the newsletter e-mail and their replies can contain non-English characters, the e-mail should use the UTF-8 charset. For the same reason, the ASP script expects the HTML and plain text versions of the e-mail to be stored in Unicode.

Now, don't rush and test this code unmodified. The domain does not exist now. If you put this script on your site and try to send message, the e-mail may be sent to the junk folder. Use valid e-mail addresses and valid links from your own domain.

Valid Reply Address

There is an unusually common mistake that even fast-footed companies make - putting obstacles before revenue stream. "No-reply" addresses are a prime example of this behavior. Companies spend a lot of money to get the customer interested. When the customer becomes interested and wants to contact you, what happens? You block his reply! It does not matter if the contact address is in the body of the e-mail. It is easy to miss that. People scan web pages and e-mails. They don't read it word by word. You should never lose sight of how people use e-mail.

Put the e-mail address of Sales or Support in the "reply-to" header and try to convert queries to sales. Do not expect all prospects to visit your website and order your product. Only the biggest companies can get away with that. When dealing with smaller operators, people will buy only if they are able to contact a human. Even with big companies, some careful buyers go through a reseller intermediary that they can interact with.

Universal CSS Font Stack

A lot of people like Verdana. Some are partial to Tahoma. Trebuchet MS has its following. But, not everyone has these fonts. And, these fonts are not suitable for everyone. Windows Vista and 7 users prefer Segoe or Vista 'C' fonts such as Corbel or Consolas. Linux users would want Liberation or "Free" fonts that are shipped with their distro. There is another problem. If you do not specify a font, then some e-mail clients will use a serif font! The solution is to use a universal CSS font stack. I recommend that you put the following styles in the head section of the HTML e-mail. Do not use CSS features that embed fonts.


  Name: V. Subhash's Universal CSS Font Stack 
  Version: 2016.02.10
  Purpose: Native font support for HTML in Linux, Mac, and
           Windows operating systems

a {
  color: navy;
  border-bottom: 1px dotted navy;
  font-weight: normal;
  text-decoration: none;

a:visited {
  color: purple;
  border-bottom-color: purple;

blockquote {
  border-left: 5px solid whitesmoke;
  margin: 1em 5%;
  padding: 1em 2em;

body {
  /* Order: Mobile (Android),
   *        Special,
   *        Linux (Liberation, Free, DejaVu),
   *        Mac (Cyrillic, Central European, UI),
   *        Windows Vista UI, Windows XP UI,
   *        Windows (Non-Microsoft-Core-Web, Non-Microsoft-app-bundled, not
   *		     found in both Mac and Windows),
   *        phonetic,
   *        Mac Unicode fallback, Windows Unicode fallback,
   *        Adobe Standard Type 1, generic
  font-family: Droid Sans,
               "CMU Sans Serif", 
               "Liberation Sans", FreeSans, "DejaVu Sans",
               "Helvetica CY", "Helvetica CE", "Lucida Grande",
               "Segoe UI", Tahoma,
               "Lucida Sans Unicode",
               "Doulos SIL", "TITUS Cyberbit Basic",
               "Last Resort", "Arial Unicode MS",
               Helvetica, sans-serif;
  padding: 1em;
    If you would like to make a web page more readable, 
    uncomment the following comment block.
    font-size: 0.45cm!important; 
    max-width: 9in!important; 
    margin: 1em auto!important; 

code, pre, xmp {
  /* Order: Mobile (Android)
   *      Special,
   *	    Linux (Liberation, Free, DejaVu),
   *	    Mac, Vista, XP,
   *	    Adobe Standard Type 1, generic
  font: Lighter 1em "Droid Sans Mono",
                    "Anonymous Pro", "CMU Typewriter Text", 
                    "Liberation Mono", FreeMono, /* DejaVu Mono (Looks ugly) */
                    Monaco, Consolas, "Lucida Console", "Courier New",		    
                    Courier, monospace;

code { background-color: #EFEFEF;  }

h1, h2, h3, h4, h5, h6 {
  /* Order: Mobile (Android),
   *        Special,
   *	      Linux (Liberation, Free, DejaVu),
   *	      Mac (Cyrillic, Central European, non-Windows UI),
   *	      Windows Vista Serif, Windows XP Serif, Windows UI,
   *	      Windows (Non-Microsoft-Core-Web, Non-Microsoft-app-bundled, not
   *	         found in both Mac and Windows),
   *	      phonetic,
   *		    Windows Unicode fallback, Mac Unicode Fallback,
   *	      Adobe Standard Type 1, generic;
  font-family: "Droid Serif", 
               "CMU Serif", 
               "Liberation Serif", FreeSerif, "DejaVu Serif",
               "Times CY", "Times CE", Palatino,
               Candara, "Trebuchet MS", "Times New Roman", "Segoe UI", Tahoma, 
               "Lucida Sans Unicode", "Doulos SIL", "TITUS Cyberbit Basic",
               "Arial Unicode MS", "Last Resort", 
               Roman, serif;
  font-weight: normal;
  margin: 1em auto;

h1 { font-size: 2.4em; }
h2 { font-size: 1.9em; }
h3 { font-size: 1.5em; }
h4 { font-size: 1.2em; }
h5 { font-size: 1.1em; }
h6 { font-size: 1em; font-weight: bold; }

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
  border-bottom-style: none;

li {
  line-height: 1.5em;
  margin: 1em;

ol { list-style-type: decimal; }
ol ol { list-style-type: lower-alpha; }
ol ol ol { list-style-type: lower-roman; }
ol ol ol ol { list-style-type: upper-alpha; }
ol ol ol ol ol { list-style-type: upper-roman; }

p {
  line-height: 1.5em;
  margin: 0.5em auto 1.5em;

pre {
  background-color: #EFEFEF;
  border: 1px dashed lightgrey;
  margin: 1em 5%;
  padding: 1em 2em;
  overflow-x: auto;

u { background-color: #EFEFEF; text-decoration: none; }

Good Color Combinations

Choose your colors carefully. Even if the choice of colors are dictated by branding requirements, you need to ensure:

Most importantly, you should ensure that when the recipient tries to reply to your HTML email, the reply should not acquire new color combinations.

Fluid Layout For Minimum Dissonance

In the HTML version of the sample e-mail given above, there are no tables, no floats, no fixed font sizes (em sizes only, no points or pixels)... basically nothing that annoys the user or that interferes with the settings of the e-mail client.

Support for Outlook 2007 and Outlook 2010

If you are styling anchor tags or coloring header tags, then ensure that you use inline styles. Although this is an annoying requirement, do remember that some web clients will strip out the style portion of the header. When this happens, inline styles will ensure that the e-mail looks as intended.

Sample Email Screenshots

The proof of the pudding is in the eating. Let us see how the above ideas worked out in various operating systems and e-mail clients.

Outlook Express 6 in Windows XP

In Windows XP, text will be displayed in a good sans serif font Lucida Sans Unicode.

HTML view in Outlook Express 6

Change the view to plain text by selecting Tools » Options » Read » Read all messages in plain text » OK in the main Outlook Express window and you get this. (Sure, your customer will see the HTML version and the embedded images as attachments. But, it was his choice to subscribe for HTML and read it in plain text. You have done everything in your power to meet his requirement.)

Plain text view in Outlook Express 6

The next screenshot shows how the e-mail should look when the subscriber hits the Reply button. The body of the e-mail should not become completely black or be displayed with some unusable foreground-background color combination.

HTML reply in Outlook Express 6

Some customers will select Format » Plain Text before they compose their reply. Others would have set their mail-sending format to plain text. So, even if they are composing in HTML, the reply will go out as plain text. Here is where the extra break tags help in improving the readability. Outlook and Outlook Express need the extra break tags.

Plain text reply in Outlook Express 6

Thunderbird 2 in Linux Mint 8

In Thunderbird running on Linux Mint, the e-mail will be displayed using Liberation fonts. Most mainstream Linux distributions ship with Liberation fonts supplied by Red Hat. (Ubuntu does not ship with Liberation but its "Free" or Deja Vu fonts will be picked up, thanks to my universal font stack.) Thunderbird 2 supports CSS3 effects.

HTML view in Thunderbird 2 running on Linux Mint 8

Seamonkey in Ubuntu 9.10

Seamonkey seems to have better CSS3 support. (I have installed CMU fonts in Ubuntu. Otherwise, the e-mail would be displayed using FreeSans and FreeSerif fonts.) Note the "reply-to" e-mail address. (Thunderbird and Seamonkey do not need breaks before the header tags, as they are very advanced when it comes to converting HTML to text. Linux users have to pay the price for poor performance of Outlook and Outlook Express.)

HTML view in Seamonkey 2 running on Linux Mint 8

Now, check out the e-mail headers for precedence and priority. See how the links and the signature are automatically formatted by the e-mail client even in plain text view.

Plain text view in Seamonkey 2 on Ubuntu 9.10 (Karmic Koala)
Header display is set to *All*

Opera 10.10 in Ubuntu 9.10

The plain text version allows the e-mail to be easily quoted when drafting a reply. Here it is in Opera.

Composing a plain text reply in Opera 10.1 on Ubuntu 9.10

E-mail clients can color-code e-mail discussions. Newsletter messages need to support those features. Here is the Opera preview pane when viewing the above message.

Preview of a plain-text reply in Opera 10.1 on Ubuntu 9.10

Outlook 2010 Beta in Windows 7 RC1

In Windows Vista and 7, the e-mail will be displayed using Segoe UI font, which is optimized for ClearType tuning.

HTML view in Outlook 2010 Beta in Windows 7 RC1


E-mail marketers should not focus on looks alone. Newsletter messages should support features provided by e-mail and e-mail clients. They should also support people who use different operating systems and e-mail clients. Usability improvements help in retaining the customer and bring in new sales.