November, 2009

Effective Websites Newsletter

Hi [FirstName],

For the past two months I've covered the basics of setting up an email newsletter. This month I'm concluding the series with some information about how to format your emails so they will be readable in the widest possible variety of email programs.

If you missed my previous newsletters on this subject you can read them at my website. You can read the first part in my September newsletter and the second part in my October newsletter.

Dave Salahi

Back to top

Composing HTML Emails

People use a wide variety of email programs ranging from Outlook & Windows Mail on Windows to Apple Mail on the Mac to a variety of web-based mail services like Gmail, Yahoo & Windows Live Hotmail. Unfortunately, there is little standardization of the way these various email "clients," as they are called, display the formatting of an email. For example, Gmail doesn't display most of the formatting in an email and it doesn't display pictures at all unless the reader specifically tells it to. The lack of agreement on any HTML email standard means that your newsletter which looks great in your email program might look awful in someone else's.

One solution is to not use any formatting at all and send only plain text messages. This will guarantee that your email newsletter will work in any email program. But with a plain text message you not only have no pictures or colors, you don't even have simple text formatting like bold or italics. So, plain text  messages are boring to look at and not very good at grabbing your readers' attention.

Most businesses today send HTML-formatted emails, like this one, so that they can insert images and make use of font formatting. Because of the disparity in the way email clients display HTML messages, you must follow certain rules when creating your messages. Basically, you have to use a lowest-common-denominator approach. (HTML stands for Hypertext Markup language and is the language of the web. Standards for display of web pages in web browsers are pretty good nowadays but email programs are years behind in this area.)

First, you want to use tables to control the layout of your message. The use of tables allows you to position each part of your message exactly in the desired location. Tables can, for example, enable you to have a two-column layout.

Another rule is that you don't want to get too fancy in your use of formatting or layout. As mentioned above, different email clients can display the same message quite differently from one another. You want to use only the basic text formatting options including bold, italics, font size and color. You can use CSS formatting but, if you do, use inline styles and don't link to an external style sheet. External style sheets are often ignored by email programs.

When inserting images, it's best to insert a link to the image on your web server rather than embedding the image in the email. This will keep your email filesize small and quick to download which will minimize any problems with your ISP or the recipient's ISP. Their email program will still have to download the image when they view the message but that's generally preferable to embedding.

Keep the width of your email narrow, around 600 or 700 pixels. (This email is about 600 pixels wide.) Many people will be reading your email on relatively small screens. And, most web-based email programs have side columns for their menus or for advertisements so the width available for your message will be reduced even if the screen would otherwise be wide enough for a wider message.

A number of other rules apply but are beyond the scope of this quick lesson in email formatting. For in-depth reading on this subject I recommend the Sitepoint article How to Code HTML Email Newsletters (warning: technical jargon!).

One way to make sure your email looks good is to get an email template. The following email services offer free templates that you can download and customize for your needs:

• CampaignMonitor
• Constant Contact
• MailChimp

These templates have been tested in a variety of email clients and messages based on them are likely to look good in all of the common email programs. However, it's still a good idea for you to test in as many email clients as you can, particularly after you've customized the template. You want to make sure that your changes didn't break anything. You can get free email accounts from most of the popular web email services like the ones mentioned above. And you can ask friends and colleagues to tell you how your email looks in their email program. If they know how to capture a screen shot ask them to do that and email it to you so you can see exactly how it looks to them.

One last tip before we wrap up this issue — you might want to run a spam check on your newsletter just before you send it. Site Build It and others offer free spam checking services. You send them a test copy of your email and they will send you back a report telling you how "spammy" it looks along with some tips on reducing your spam score. By reducing your use of words that spammers use (like "free") you can reduce your risk of having your emails get caught in a spam filter.

If you have any questions please contact me at dave@artistic-webdesign.com or 949-362-0842. And if you want some help setting up an email marketing I can help you with that.

Back to top