Long ago, emails were text. No formatting, images or attachments. For alternative fonts, different colours and other spectacle, you turned to web pages.
Then design options began to seep into emails. Gone was the uniform text, now one could choose between colours and other layout options.
With time, HTML emails grew popular, and for a while it seemed as if the walls between web pages and emails were thinning.
A troubled past
But not all was well. Email clients varied wildly in how they handled these new-fangled techniques. What rendered well in one program could in another look like minimalist Martian poetry.
Furious traditionalists called for restraint: Given that the web was turning into a funhouse, surely there was no need for emails to have garish palettes, animated GIFs and big, blinking hyperlinks. Somewhat surprisingly, the reins were pulled back, and most email clients today handle both plain text and HTML.
But that was in the past, right?
The above is important to keep in mind when designing emails in general and especially for marketing. Emails can be styled to within an inch of their lives, but they are essentially meant – and expected – to offer fast, efficient communication.
Also, while most browsers have evolved to accept new standards, many email clients have refused to change. (Some have become even less flexible.) Web pages are made for browsing, displaying and informing, and while emails can do much of this, there are major differences.
Follow these eight tips to get the most out of your email campaigns.
1. Basic advice
- Campaignmonitor.com offers a few useful points to have in mind when starting to design an email.
- Keep it simple – the more intricate the layout, the more possible it will run into the brick wall of bad support of standards.
- Go back in time – think old-school, use nested tables and inline CSS.
- Test – and test again, then test in two weeks’ time. What works in a client right now might not work next month.
2. The top (important) link
Sometimes carefully designed emails are shredded by incompatible software, interrupted transmissions or other glitches. For this reason it as an absolute must to have a link (ideally in the top of the email) to a web page version of the email.
Don’t fall for the temptation to use this link for other purposes (eg directing users to advertisements or unexpected sign-up forms). Annoyed visitors are unlikely to return.
3. The all-important landing page
Make these as interesting as possible. Hook, grab and pull your visitors quickly. Typically, you have seconds before the move on.
But more importantly, make sure the landing page works. This is omitted surprisingly often. Like most people, I receive regular emails from many large UK businesses, and it is remarkably common that URLs in the emails lead to missing pages.
This is avoided by some testing. It’s a simple but essential step: Even if you bring in massive traffic via an email campaigns, all is in vain if the landing page is unusable, broken or missing.
4. On the subject
An oft-underestimated component of a successful campaign is the subject line. This is the immediate interface between the users and the (expected) content of the email, so it must grab their attention.
Don’t fall prey to any of the most common offenders. We all know them, but they can still sneak into rushed campaigns.
Here are a few tips on how to make subject lines (and much other online copy) striking:
- Make it personal but don’t go overboard with the name-using.
- Use a number. Seven solid tips, five fantastic points etc.
- Ask a question. Though don’t make the answer obvious.
- Punchy lines. Not jokes, but strong and concise writing.
- Keep it brief. Don’t waffle.
5. Horizontally, all the way.
Emails should be designed for horizontal viewports. This is not news to most designers, but it’s less well known exactly how slim the average viewport is. According to MicroMass Communications’s research, the normal size of a preview pane is about 638x86 pixels.
That was not a typo. The average default space is 638 times a meagre eighty-six pixels. This means a majority won’t see the first 100 pixels of an email. And given the shift towards mobile usage of the internet, including emails, viewports aren’t getting bigger.
To make the most of this small space, use columns, hyper-efficient copy and graphics that engage users with a minimum of fuss.
6. Define or defeat
Web browsers are forgiving tools. When they come across messy or semi-correct HTML, they often parse the page anyway and ignore snippets of flawed or nonsensical code. Think of them as jolly uncles or aunts, who sigh but smile at other people’s silly ideas.
In comparison, email clients are uptight, surly and have zero patience with less-than-correct manners. CSS is frowned upon. Images arriving undefined are tossed into the room at random. Garbled or faulty HTML is shown the door.
To get a gold star for well behaviour, define the heights and widths of embedded images, use Alt and Title tags, and make links absolute. In short, don’t try anything fancy unless you are absolutely convinced you can get away with it. The email client might be watching.
7. Writing rules
Use images sparsely. While impressive and eye-catching, they are slow to load and transfer. Speed matters, and all the more so in a world going mobile. Also, many email clients don’t show images unless asked to do so.
Instead, rely on text to do the job. Superb copy loads in a flash and is easy to fit in small spaces. See above tips for ideas on writing in an exciting and direct way.
8. If possible, avoid CSS (for now)
In general, CSS and email clients don’t play well. The level of compatibility even in major clients and devices is bewildering. This likely to change but at this point, making CSS render well across all or most email clients is tricky and takes time.
Sometimes, however, CSS is needed for email design – when it is, make sure all properties are inline and not in shorthand.
Keep it simple, concise and quick. When in doubt, test. Consider alternatives if you hit a snag. Respect your recipients – don’t pepper them with emails
The top priorities are to reach your audience, pull them in, and keep them coming back. Give them a reason to click on that link, and make sure they see it.
Soon to come: part two of this post, which will take a look at email marketing for the mobile market.
This is part one of a blog post on design for email marketing. Check back in the near future for the second installation, which will look at designing emails for the mobile market.