By Blaize Windscheffel on 2009/08/25
As Web designers, we’ve grown pretty good at understanding how to create modern, semantic and accessible websites using XHTML and CSS. We understand what makes a good website and we know how to make it happen.
In this article, I will be discussing some basic yet effective practices to follow when you are designing for emails. By sticking to them, your work will always display and function as intended in any email client – no more mangled mailers!
9 Email Design Tips
Go Old School on Your HTML
Yes, it’s true - old school is cool… when it comes to building an effective mailer. So, when it comes to the layout of your email content, forget everything that you have learnt in recent years about table-less CSS structures and instead, revert back to the age-old method of using HTML. Forget about positioning your divs with CSS and rather rely on trusty table cells to layout your content, as many email clients will not render positioning instructions properly, or even at all.
Style Using Only Inline Style Tags
Most major email clients - whether they are online, such as Gmail and Hotmail, or desktop applications, like Outlook and Thunderbird - will ignore everything between the <head></head> tags, including your style definitions. This means that you should only style your HTML using inline style tags. Be careful though - there are many CSS properties that will not render properly, such as the position property mentioned before.
Design For Smaller Window Spaces
Just like when you are designing for a Web browser, you need to be considerate of screen resolutions and window sizes. In addition to this, email clients often have added sidebars on both sides of where your email content is displayed, which further decreases the amount of space you have to play with. Be safe and keep the width of your email design at least within 800 pixels. At Quirk, we tend to keep it to 600 pixels.
Background Images
Using background images is one of our most powerful tools. However, there is much inconsistency between which browsers will actually display background images, that it’s best practice not to rely on them. Email readers such as Outlook 2007 and Gmail will not render background images at all. But on the other hand, a reader such as Windows Live Mail (not Hotmail) will render background images correctly. Since it’s too difficult to predict what reader your intended audience is using, the use of background images should only be for enhancement purposes and not as something the entire design depends on.
Accept Images to be Blocked by Default
Many email readers, for security purposes, will block images embedded within an email. This is usually by default. Avoid replacing too much text with images and make sure your email design still gets the point across, even when images are not displayed.
Always Use the ALT Attribute for Your Images
To avoid completely losing the message on an image when images are blocked, complete the ALT attribute for each and every image used. This will ensure that the important content from the image (i.e. the text) is still communicated. It also helps in cases where the reader is using a text-only email client, as the image will be replaced by the ALT attribute.
Be Considerate When it Comes to File Size
Loading up your email design with large images will slow down the overall download process for your readers; it may even deter them from reading it all together. In some cases, exceptionally large emails may also be flagged for spam and viruses. To minimise these risks, optimise your images so that they have the smallest possible file size. This may require you to play around with JPG, GIF, and PNG formats to see which gives the highest image quality with the smallest file size.
Don’t Forget the Plain Text Version
In the good old days of Email Marketing, HTML mailers didn't always work, so designers had to create plain text versions of their HTML emails. This acted as a backup so to speak and if a recipient's email reader couldn't view the HTML email version, the plain text version would show instead. Even though Email Marketing has come a long way, you shouldn’t ignore this vital step. We offer our subscribers the opportunity to subscribe to either the HTML or the plain text version of our mailers.
Test, Test and Test Some More
It’s the only way to be confident about your design working.
Like most things, you’ll only get true results from Email Marketing if you are prepared to put the effort in. It’s vitally important to get the foundation right.
If you fall short in any of the areas mentioned in this article, then you may end up doing more harm than good – not to mention spending more time on a mailer than you need to - or even land yourself and your client in legal trouble. Once you get the basics right for your clients, you can start experimenting with more advanced Email Marketing techniques.
Interested in finding out more about Email Marketing? Contact the Quirk team today.
