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.

That is where our company can help, as well as complete rebranding with a web site redesign we have improved the message we are giving our new and existing clients. Making it easy for you to do business on the web, with our experience in web design and development often utilising new and emerging web technologies.

Our old site and logo was ‘oh so web 1.0′ which was created back in 2004 when the business was first launched. Often is the case with any online business, the content on the web site was too overwhelming to encourage a simple understanding of our services and background. We found this turned prospective customers off.

Today, it is our strategic aim to be transparent, open and clear about what how we can solve your customers tasks online, and create a memorable and satisfying experience at the same time. This is often something we can help you with even before the practical work begins.

The aims for our new web site

1. Clearer Company message
2. Improved branding
3. Increase effectiveness of the web site as a marketing channel
4. Users to spend more time on sites pages
5. Improved usability and signposting

How will we measure success? By consistently reviewing our web analytics data. The launch of any web site is the first step and sometimes the simplest. It’s the continual reviewing of the site content, architecture and ease of use that requires finetuning throughout a websites lifecycle.

In the case of our web site, we have removed much of the old content from the previous site to show our talent as a agency that listens, and then carefully crafts usable online applications that clients and customers love.

Being based here in Brighton, the community aspect with this redesign was encouraged from the start, with critique on logo and web layout. Such as the comments that feature on these flickr images. We found this very helpful giving insight into what our peers, colleagues and friends thought. All very positive I’m pleased to say.

Since going live two weeks ago, our daily traffic has tripled as a result of the redesign and recent coverage over at the following CSS Galleries:

1. csszone
2. cssmoon
3. cssstar
4. css-lounge
5. commandshift3
6. cssdrive
7. cssremix
8. csselite.com
9. webdesign-is-art.com
10. cssflash.com
11. cssclip.com

Please tell us what you think. We look forward to hearing from you.

Just one look at the events calendar is enough to make any person nervous, with the amount of world renowned speakers and also some homegrown talent going over to share knowledge, hang out with friends and make new aquaintances.

How to maximise everyones time at SxSW08

This is how I can see the event working. After the initial check in for flight, and at the hotel. All delegates are required to register. This will be a good initial check to get a vibe for just how friendly and excitable everyone will be about the week ahead. Hopefully to spot some of the Brightoninan’s that will also be there.

The main key ingredients for the week will be networking and marketing. Covering all corners of the event, as well as the all important after party’s sponsored by some big brands, Google, MicroHoo!..

An exciting part of any conference it’s not knowing what’s going to be the topic of the day to discuss with other delegates, from inside the seminars to what is happening outside with respect to popular technology and business developments posted on techcrunch.

As with any early adopters for web apps and spending a lot of time generally online you should have an general opinion or most things happening online, and be ready to contribute to conversations with people who either have little knowledge to actual innovators on the topics.

Above all, I think having fun with the web is still the main thing to remember at SxSw, dont take the web too seriously, the world will not end if you get a 404 page error.

Personally, I’m looking forward to how many connections we can all make at the event, and I’m looking forward to contributing to the blogosphere whilst in Austin..

Jim Callender

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

Vodafone: 191 million customer worldwide, and member of w3c mobile working group

Do users want the web on their mobile?

The answer is yes, due to:

1. The largest uptake of mobile web content in africa and developing countries
2. Creation of worldwide mobile web initiative

Leading to the mobile web best practices – which focus on the following:

1. designing for one web
2. rely on web standards
3. stay away from known hazards
4. be cautious of device implications
5. optimise navigation
6. check graphics and colors
7. keep it small (file size)
8. use the network sparingly
9. help and guide user input
10. think of users on the go > stripped down version, interaction design

These are the current best practice details for mobile content creation.

Mobile web 2.0

1. transition of mobile apps to an internet model mobile web and connected apps
2. user choice
3. leverage open standards
4. more interactive mobile apps running in the browsers

Further resources
www.w3c.org/2005/mwi/bpwg/techs > wiki with info about the mobile web
dev.mobi > venture between nokia, aol and microsoft > developer resources and forum

The event was in the upmarket surroundings of Kensington, around 600 delegates arrived in the rain for the two days fun, seminars and power networking!

The alternative title of the event should have been: ‘ways of bridging interaction between on and off line world‘.

The programme was definitely more catered for the business point of view, rather than getting down and dirty with web code. This is probably going to be saved for the Future of Web Design conference this April, which I will be attending.

Most the the speakers gave advice on start up businesses, online communities and communication.

Probably my favourite speaker was Khoi Vinh who just made an exceptional case for web design being simple and clear. With the experience he has used on the New York Times site.

Here are my notes..

===============================

First was Mike Arrington of Techcrunch:

He focused on what to focus on for a new web application:

1. have a good idea

- invent a market
- destroy a market
- remove friction

2. have a business plan
3. have a revenue model – bandwidth charges – youtube $1m a month!
4. build it cheap, test the waters – don build full blown site from start..
5. avoid high burn rate – don’t hire everyone from the start..

>> stay hungry like you did the first 6 months.. as long as you can

example: youtube
>> they threw away their original business model, and flaunted intentralonl copyright law

>> however they had so much growth the money poured into cover burn rate
>> first to market this type of media
>> they removed frictions by provided a much needed service 65,000 videos uploaded a day

now thousands of flash enabled video sites, but weren’t the first, and thats the important factor.

case studies:

mybloglog.com > viral marketing for blogs
amiest.com > do to music industry what digg did to news industry > vote for content and music tracks, the more popular the price of track goes up.

attributes of winners
- passion for what they are doing
- doing something extraordinary

losers
- poor founder/team choices
- lifestyle ego entrepreneurs
- raised too much money
- spending too much money
- forgot about scaling
- had to try too hard at marketing

the buzz factor
- solve a real problem
- dont be 200th video sharing platform
- dont have a blog, start one now! – comment on people leaving comments..
- if buzz isnt happening, rethink your product (not your marketing)

> every successful entrepreneur says best time is in early days > when weren’t making money, but making the best work.

===============================

Edwin Aoki – The changing face of online communities

- we must make sure that the tools and services we can build can be used safely and effectively
- most users don’t care/ don’t care about the implications of being online, they don’t often think about or consider:

> security
> spam
> social effects

the applications must be accessible to all, including:
- the usually, audibly or motion impaired
- older generations
- people of developing and emerging nations

the future is in the balance

mashups vs. accessibility
- power and ease of use
- social benefits and commercial interests
- online and off line interactions

===============================

Tara Hunt – fostering/building online communities

A virtual community is:
1 – personal homepage/profile
2 – personal content creation
3 – ability to interact with ‘friends’ and share content

succession of users of community based sites
visitor -> customer -> community member

benefits of community
- heightened customer loyalty
- self policing
- amplified word of mouth > by love of using the product
- better feedback
- stronger and more interesting filters of content

3 levels of community
1 – lightweight social processes
2 – collaborative
3 – high end

high end social networking
lostpedia.com
couchsurfing.com

social networking case study
- create fun and freedom
- keep the dialogue going – personal use of product, answer customer emails personally
- experimental approach to development

===============================

All in all a great conference, even if it was just for the networking!

The Saturday night party out priced everyone who fancied meeting up in London. A place more suitable for Prince Harry’s friends, with sign by cloakroom “no dancing in this venue”..

However, a more suitable bar was found and fellow geeks reveled in the news of digg.com supporting openid, netvibes API’s and

Further resources:
Photo sets on flickr
Slide Presentations on Slideshare

bookmarks taken home from FOWA
programmableweb.com > mashups
aws.amazon.com > ec3 and mech turk
mybloglog.com
secondlife.com > where online and off line lives gets a bit murky
openid.com > Mine is: jimcallender.openid.com
ixda.org > interaction design organisation
jyte.com > social networking site supporting openID
wesabe.com > acheive career aims
mobilemonday.org.uk > mobile networking group in London

The tool offers various options that you can configure to suit your needs, but the way I see it working best for webmasters is that it allows us to increase the perceived relevance of the sites we select (and yes, we can exclude sites from the results). The results that appear after those are pulled from Google’s regular search results. You simply add the code for the customized search engine to your site.

Those with Adsense accounts can make money by displaying ads within the search results. Take a moment to to learn how easy it is.

It’s another decent step by Google to take over the world of the web. However, it’s worth a look if you want tolook at adding an additional income stream to your web site..

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.