Whether you like it or not, HTML email marketing campaigns are a core requirement for any successful email marketing program.

An email campaign can boost a companies revenue by millions of pounds, for example over this Christmas period how many do you think you will receive from your favourite brands – electronics, music, etc?

Email marketing is a cheap and successful online marketing method. Cheap in relation to posting out printed flyers to every recipient. And successful by being able to measure the success of every email campaign, tracking every open time and read time for each email. HTML emails done correctly, offer a better conversion rate, and people choose HTML over plain text format more often.

So, here’s a list to help all email marketers and designers create the perfect email, and make sure it appears as you intended on your customers computers. If you feel I’ve missed any important ones, feel free to leave a comment.

Make no mistake, HTML email design and development is a complete minefield. There are very few rules that you can rely upon across all mail clients. Let’s do this:

1. USE INLINE CSS + TABLES
External and internal style sheets are ignored by a number of email clients. Back to the old school with tables too. Yes, it means going back to 1999 coding, and does make the code heavy, but it means you can guarantee locking down the styles to be correct in the ‘majority’ of email clients.

2. EMAIL TEMPLATES
Unless you have extensive personal experience to draw on,
you’re most likely going to want start with a template that gets most of the fundamentals right. Save yourself some time, get some inspiration and free templates here:

• carbon graffiti
• campaign monitor gallery

3. USE ABSOLUTE DIMENSIONS
In pixels for all measurements. For example, give images and tables exact pixel dimensions – so the browser knows exactly how to display it. Email clients are not as forgiving as web browsers.

4. THE DESIGN
The width of the email design to be no more than 600 pixels wide, so the full width of the email can be seen in the view port in email preview mode.

5. ACCESSIBILITY
Make sure it is readable, with images turned off does the email make sense? By default images are not displayed in most email clients (unless you have added the address to your contacts), also not creating the best look for your company.

Image of email in web-mail client (Gmail) – notice that the email doesn’t make much sense with the images turned off? This can be improved by adding copy to the ALT attribute in the html code:

• Use Alt attributes
• Use anchor link as well to take people to important subheadings in your email
• Last resort – have a prominent link to your web version of the same email

6. FANTASTIC COPYWRITING
Attention grabbing headlines that will make users want to read more and click through. The attention grabbing information should be already visible in the viewport area when the email loads, very few people will scroll – like on web pages unless they like the information, drawing them down the page.

Image of email in web-mail client (Thunderbird) – notice that even with the images turned off the email still reads well, with the headline drawing you into the main content of the email. Simple design, yet to the point and easy to read, effective.

7. CSS SUPPORT IN EMAIL CLIENTS
Enter The email standards project.

These guys have taken the email design issue by the scruff of the neck and are actually getting Yahoo, Gmail, Outlook to take notice of the need for Email standards compliance.

Currently we grade the email clients in the following way:

The Angel’s Choir:

Strong and generally reliable HTML rendering capabilities – Thunderbird, AppleMail, and Opera Mail
You can essentially treat these mail clients as if they are normal, modern browsers.

The Muddlers:

This group includes the majority of the remaining mail clients and includes Outlook 2003, Outlook Express, and Yahoo Mail.

While you’ll probably encounter some variability in their renderings — often in text size and margins/padding – the Muddlers will generally honour your page layout.

The Legion of Doom:

Each uses their own unique but evil super-powers to subvert and destroy your HTML
Outlook 2007, Gmail, Lotus notes – rewrite CSS, padding/margins, no positioning support, removes backgrounds.

8. TESTING
Use litmusapp.com which sends back how your email looks on the following email clients:

Web-based email clients

* AOL Web
* Comcast
* Earthlink
* Gmail
* Mail.com
* MSN Hotmail
* Windows Live Hotmail
* Yahoo! Classic
* Yahoo! Mail

Desktop email clients

* AOL 9
* Lotus Notes 6.5.4
* Outlook 2003
* Outlook 2007
* Outlook Express 6
* Outlook XP
* Thunderbird
* Windows Mail (actually, what is that?)

Mobile email clients

* Blackberry
* Windows Mobile 5
* Windows Mobile 6

9 . THE FUTURE
At various sites there are thousands of new subscribers to html newsletters every single month. And those subscribers still always choose HTML over plain text at a rate of 15-20 to 1. In short, while we might not like it, your clients probably prefer HTML email, and so does their audience.

10. STICK WITH IT
Use the templates, HTML formats are here to stay so remember to keep it simple as possible, and test early and often.

Need our help? We offer web design and development services that will take the stress away from your email marketing campaign. Contact us to find out how we can help you.

Since then we have been getting great feedback from the charity based in Portslade.

Programme Manager, Fiona Taylor says:

The number of bookings has far exceeded out targets for this year, and it’s all thanks to the site review Callender Creates carried out, they executed the findings in the design and structure of the new site. Very Exciting.. We are just watching the traffic grow each month!

Site redesigns that are done well, are often regarded as switching a switch and letting all the visitors who could not understand the way to navigate around a site, and get the information they require.

In this instance, this has led to:

• Increase in number of bookings
• Increase in seo and accessibility
• With database work planned soon, to make searching and booking even easier online

We have used Google analytics and Crazy Egg to demonstrate to the client the actions and visitor journey on the site. We have explained also the way the pages are written can determine which pages the visitor clicks onto.

Check out the site at www.concordia-iye.org.uk

Probably the most important one being “You have less than 5 seconds to catch your customers attention.” If the design or interface of the web site or application confuses you will repeatedly lose valuable customers.

A company’s homepage is its face to the world and the starting point for most user visits. Improving your homepage multiplies the entire website’s business value, so following key guidelines for homepage usability is well worth the investment..

We use an article by Jakob Nielsen that was written back in 2002. It is very easy in the Web 2.0 bubble to over-complicate things, these points bring things back to basics and enhance your website’s business value at the same time.

To increase the usability of your website we advise the following easy steps to take:

1. Include a strapline or one sentence tagline
2. Write a window title containing keywords from the pages content, good for the search engines
3. Group similar content into meaningful categories
4. Include a search box, another tool for people who may prefer navigating to content this way
5. Emphasize the sites main tasks
6. Useful meaningful graphics, something that is associated with the content
7. Provide new and fresh content directly on your homepage
8. Don’t overcomplicate ‘format critical’ content, especially navigation
9. Begin link names with the most important keywords, don’t forget these are ‘action items’

These aspects can be continually reviewed by analysing site and visitor statistics. We can find which are the most popular pages, as well as the least popular, exit pages.

Of course, like search engine optimisation, the content should not be forgotten. It is an ongoing process, and the difference in using professionally copywritten content should not be underestimated.

Reference: http://www.useit.com/alertbox/20020512.html

Akamai and JupiterResearch have conducted a study among 1,000 online shoppers and have found, among other results, that one third of respondents have, at one point, left a shopping website because of the overall ‘poor experience.’ 75% of them do not intend ever to come back to this website again.

Online shopper loyalty also increases as loading time of webpages decreases. Will this study finally show developers of shopping websites the importance of the performance of their websites?”

Read the comments on the original article at Slashdot

Thus, when advertising a product, one might use a definition list:

Lower cost

The new version of this product costs significantly less than the previous one!

Easier to use

We’ve changed the product so that it’s much easier to use!

Safe for kids

You can leave your kids alone in a room with this product and they won’t get hurt (not a guarantee).

Lists may also be nested and different list types may be used together, as in the following example, which is a definition list that contains an unordered list (the ingredients) and an ordered list (the procedure):

The ingredients:

• 100 g. flour
• 10 g. sugar
• 1 cup water
• 2 eggs
• salt, pepper

The procedure:

1. Mix dry ingredients thoroughly.
2. Pour in wet ingredients.
3. Mix for 10 minutes.
4. Bake for one hour at 300 degrees.

Notes:

The recipe may be improved by adding raisins.

The exact presentation of the three list types depends on the user agent. Try not to use lists purely as a means of indenting text.

This is a stylistic issue and is properly handled by style sheets. Using padding, margin, or text-indent.

Follow these tips and you will have a site that is guaranteed to get more attention than a web site that chooses to ignore them!

Make sure your site looks professional
Take a hard, cold look at your site – or ask a friend who will be brutally honest to look at the site. Does it look professional? Are the graphics professional-quality and clear? Are the fonts, font sizes, and font colors used in a consistent way?

Don’t use the name of your company as the web page title
Every web page has a windows-style title bar. The title that appears in that title bar is determined by what you include in the title “tag” in the html code for the page.

Focus the home page and product pages on your customers’ interests, not yours
It’s tempting to write a lengthy description of your business accomplishments and run it on your home page with a big photo of yourself. But prospects and customers have come to your site to find out what you sell and how it will help them.

Avoid a cluttered look
If you sell multiple products, you want them all to be found. And if you are being billed by the number of “pages” on your web site, you may want to keep costs down.

Minimize graphic sizes to make sure your pages load quickly
Photos and other graphic images make your pages look appealing and help illustrate what you sell. So, they are important to include. But don’t let the size of graphics slow down your web site.

Make sure it’s easy to place an order
Imagine how annoyed you’d be if you ran into the supermarket to pick up a container of milk, and couldn’t find the checkout counter? Website visitors are no different.

Be sure your contact information is easy to find
Customers not only want to know what you sell and who you are, they want to know how to reach you.

Share links with other businesses in your community
The tips above will help you get found in search engines and help make your pages more appealing to potential customers.

Relax, to make this job easier we give you just what you’re looking for over at alistapart >> 10 Tips on Writing the Living Web