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.

Why? Not just because they are great fun, but also very valuable tools in training, learning emerging internet technologies and trends.

Getting to the cutting edge of Internet leaders minds is what it is all about, and chatting up close and personal with other exciting innovators on the web.

Being able to spend each day in a group with in-depth focus on a many topics, allowing you to discuss your problems, share solutions, and make lasting connections with your peers and future colleagues.

Extra special keywords for these events: Usability, Development, Marketing and Networking

dConstruct 2008 Designing the social web. 3rd-5th September, Brighton, UK.

‘It’s a grass-roots conference that gathers some of the brightest minds in the industry from around the world’

Head The Singularity 2008 conference has now been renamed ‘Head’, 24th-26th October, Online (worldwide).

‘It’s a seminal web event intended to form a time capsule or snapshot of Web ’08 . The conference will have experts in WebDesign & Blogging, Artists, 3D & Flash Developers, Gods of JavaScript & MarkUps, Hackers, Entrepreneurs; conducting sessions on various topics.’

Adaptive Path UX Intensive, October 13-16 2008, Copenhagen.

‘Workshop series examines the four key elements that contribute to a successful interactive experience: Design Strategy, Design Research, Interaction Design and Information Architecture. Workshops are led by Adaptive Path’s team of experts, including: Dan Saffer,
Chiara Fox, Brandon Schauer and
Todd Wilkens’.

Search Marketing Expo – SMX London,
4-5 November 2008, London.

‘2 days of sessions featuring the latest intelligence on cutting-edge SEO and PPC tactics and best practices from the brightest minds in search marketing’

The User Experience 2008 Conference, 16-21 November 2008, Amsterdam.

‘These guys bring together structured disciplines and apply them to improving the user experience while considering business needs — something we should all do everyday’.
Testimonial from Jason McKenzie, PricewaterhouseCoopers

Adaptive Path MX, 1-3 March 2009, San Francisco.

‘MX brings thought leaders from IDEO, Google, The Mayo Clinic, Cisco, and many others, to show you what it takes to get great experiences out into the world’.

SXSW Interactive, March 13-17, 2009, Austin, Texas.

‘The SXSW Interactive Festival features five days of exciting panel content and amazing parties. Attracting digital creatives as well as visionary technology entrepreneurs, the event celebrates the best minds and the brightest personalities of emerging technology’.

All we can say is that it’s very exciting to be part of this and the future of the internet, we hope to meet you there. If you have any questions about what these events mean to how we work contact us.

Date -Thursday, August 21, 2008
Time – 6:30 PM – 8:30 PM

Why are we doing this?

As email marketing has fantastic results in terms of converting new and existing customers to buy your products and learn about your company.

Reaching your customer using email newsletter campaign is still a fantastic way to encourage visits to your site. With email being still the largest social network in the world!

Sending emails has the main purpose of enhancing the relationship of a company with its current or old customers. As well as encouraging customer loyalty and repeat business no matter how large and small your business.

Researchers estimate that US firms alone spent $475 million on email marketing in 2007, as it proves to be a cost effective method of marketing and increasing sales.

Todays level of reporting combines very detailed analytics that measure the effectiveness of every campaign you send out. This and more will be discussed on the evening.

Register on upcoming at the Email Marketing Masterclass page.

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.

The theme for the event focused on creative approaches for design:
The main ways for the speakers we by ‘changing your perspectives’ and ‘asking and collaborating with other people for ideas’.

Inspiration vs duplication – Often leads to designs being directly copied as its easier, but leads to abuse. How do we go about doing the right thing? By looking for elements that solve problems in intersting ways.

Inspiration. Takes practice and is never ending process. Lead to wealth of ideas that you can apply to web design

Future design trends:

• Softer colours – wordpress org
• Use of video – Ms Dewey
• Horizontal vs Vertical Scrolling – ie. Personal portfolio site site where you can push creativity

User experience vs brand identity – ‘The iceberg experience’

User Experience and successful websites are built upon the following values: Visual 10%, Interaction 90%.

• Top part of iceberg is amazing but underneath is terrible.
• Like code on some web pages. The main and rewarding part of experience is when they start interacting with the site.
• Looks do count but if not thought well the user can be left with shallow experience.
• Create good cohesive experiences, by paying more attention to whats underneath.

A great designer creates the tools to help a user achieve a task they need to accomplish. A user will validate the success of the designers work or design.

Inspired design: a usable design need not be a Safe design (back to horizontal scrolling? , as this is the way the limits of design can be pushed further online.

Hot Design Tips – from various speakers

• Make connections. Show your name, your company. Develop relationships. Build trust. – join communities
• Trust, passionate users, ambassadors, Enthisiasm – Be human
• Desire paths, don’t try to predict things – get the site out the door and see how people use it.
• Adapt to scale – its a great problem to have. Solve problems that you didn’t worry about before
• Subtraction is iteration too.
• Realign don’t redesign – users will lose their pathways if you remove/change important functions.
• Don’t panic – listen and learn carefully before reacting to latest release.

References to sites and books mentioned by the speakers:

• Society of Digital Agencies – Created best practices for our service industry.
• Ideas that spread are more likely to suceed. These are idea viruses. Best ones are by friends and recommendations. Purple Cow
• Designing for Interaction – New Riders
• Ways of saying hello – Business card book
• Juxtapoz.com
• Seedconference
• Revyyer.com
• Abriefmessage.com
• Shauninman.com
• Creativebits.org

The evening had 5 speakers, all from different areas of the digital market place.

• Marketing - Jon Bains – Co-Founder, Lateral
• User experience – Nikki Barton – Creative Director, CIMEX
• Agencies - Andy Hobsbawm – European Chairman, Agency.com & Co-Founder, Green Thing
• Advertising - Guy Phillipson – CEO, Internet Advertising Bureau
• Media Planner – Pete Robins – Co-Founder, Agenda21

A marketing look in the future for digital media. Based on what brand is all about rather than the bling of web 2.0.

User Experience:

• The mouse will be dead in 2012 > Replaced by multi-touch and gesture interfaces.
• A beginning of a new era of interface design.
• The primary device of the internet in 2012 will be the Mobile device

The mobile will be the first device for internet usage.

How do we do this in a limited number of pixel resolution, and with whose standards? The challenge still lays ahead.

Agency Perspective:

• Using more analytics for recommending next steps for client in digital campaigns, based on data and information captured.
• Traditional agencies will be catching up with digital competitors, due to cross marketing and outsourcing projects to experts in the field. This will lead to the marketing companies who choose to do this becoming more digitally motive.
• Digital PR will be BIG, lots of requests from clients in 2008. Digital PR versus Press, no compeition who will win this one.

Information is cheap, it’s becoming easier to be more creative

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

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

“Web Content Accessibility Guidelines 2.0 (WCAG 2.0) covers a wide range of issues and recommendations for making Web content more accessible. This document contains principles, guidelines, and success criteria that define and explain the requirements for making Web-based information and applications accessible. “Accessible” means usable to a wide range of people with disabilities, including blindness and low vision, deafness and hearing loss, learning difficulties, cognitive limitations, limited movement, speech difficulties, photosensitivity and combinations of these.â€?

Whether this new set of guidelines is the new forward-looking, non-technology-dependant vision of accessibility it claims to be or whether it is just another document here to slow down corporate to small web agencies. Perhaps at some point these discussions will include real people with real disabilities who, for some reason, have very little to do with this, but currently that doesn’t seem to be the case.

However, the new guidelines are, in fact, a work in progress and not formally approved yet. It’s not the easiest read at the moment, in fact if you find yourself reading all of it in one sitting you have very good patience.

There’s always something to be said for open discussion like mailing lists and actual accomplishment via showcase web sites. So perhaps groups like the WCAG Samurai (www.wcagsamurai.org) wouldn’t have to exist if the WAI (Web Accessibility Initiative) committee didn’t tend to move and operate like a sumo wrestler itself.

Remember WCAG 2.0, like WCAG 1.0 before it, is a set of guidelines.

So what shall we do whilst we wait for the guidelines? Well, those of us that actually make websites and care about making them useful and accessible to real people are just going to have to go on doing the best we can on our own, like we’ve pretty much been doing. We will continue to use our experience to think about what we’re doing and how we can make it as useful as possible to all users. That’s what we’ve been doing and what we should continue achieving. We’re hopefully already showing the big company sites how easy it is to do, Roger Johansson’s article on “Google, meet web standards� shows how easy it is to creates accessible standards based sites with just a little bit of thought and forward thinking.

For more information on this subject, heres a good WCAG 2.0 link from this years @media 2006 where the accessibility gurus of Bruce Lawson, Patrick Lauke and Gez Lemon try to explain the finer points to the audience, with not the clearest of explanations, but good for the broad understanding of the subject.

They say they are “hard at work developing some cool projects”. Why don’t you listen to their podcasts maybe we can learn something together…