RSS Feed9 best practices for email design
March 2nd, 2008 by Verne
Designing for an email is still quite far off from designing for a browser. In fact, email reader standards are pretty historic in the sense that (a) it requires designers to degrade their modern coding practices and (b) there really are no true standards.
Fortunately, there are bodies in place that are working on standardizing the way emails are being rendered. But something tells me that we shouldn’t hold our breath (after all, we haven’t even fully standardized the experience within browsers yet). So in the mean time, here are some basic best practices to follow when designing for emails that will ensure your work displays as intended.
1. Go old school with your HTML
Scrap everything you’ve learned in recent years about tableless CSS structures and revert back to the HTML that your grandma grew up with (a little exagerated but it seems that long since we’ve used tables). Forget about positioning divs with CSS and rely on trusty table cells to lay out your content as many email readers will not render positioning instructions properly or at all. Be safe, be old school.
2. Use inline style tags
Most major email readers, whether they’re online, like Gmail and Hotmail, or desktop applications, like Outlook and Thunderbird, will ignore everything between the <head></head> tags, including your style definitions (whether you do it via <link> or <style></style> tags). This means you should style your HTML using inline styles. Be careful though - there are many CSS properties that will not render properly, like the aforementioned position property. A detailed report on how various major email readers performed against an Acid Test (which tests a handful of common CSS properties) can be found here.
3. Don’t rely on using background images
Using background images has become an essential tool on the designer’s belt. However, there is such an inconsistency between which browsers will actually display background images that it’s best to not rely on them. As an Outlook 2007 user, I know as a fact that no background images are displayed (this is true for Gmail as well). On the other hand, readers like AOL Webmail and Windows Live Mail (not Hotmail) will render background images correctly. Since it’s too difficult to predict what reader your audience is using, your use of background images should only be for enhancement and not as something your entire design depends on.
4. Consider your images blocked by default
For security purposes, many email readers will block images embedded in an email by default. The reader must opt-in on each email to display the images (though some may allow readers to set their preference). What this means is that you should rely on your images to communicate your message. Avoid replacing too much text with images and make sure your email design still gets the point across even when images are not displayed.
5. Use the ALT attribute for images
To avoid completely losing the message on an image when images are blocked, fill out the ALT attribute for each of your images. This ensures that the important content from the image (i.e. the text) is still passed along. This also helps in cases where the reader is using a text-only email client, as the image will be replaced by the ALT attribute.
6. Use absolute paths
This one’s a no-brainer but make sure to use absolute paths when referencing images. Relative paths (i.e. /images/my-image.jpg) will break as the email reader won’t know what the path is relative to. Your image paths should look like this instead: http://www.mywebsite.com/emails/images/my-image.jpg. This is so simple that it can often be accidentally overlooked so make sure to double check your image paths before you transition from draft to final.
7. Be considerate of file sizes
Loading up your email design with large images will slow down the download process on the reader’s end and may deter them from reading it all together. In some cases, exceptionally large emails may also be flagged for spam and viruses. To minimize these risks, optimize 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. Where possible, use plain text to communicate your message.
8. Avoid rich media and forms
In a browser, using Flash, animated GIFs and forms add interactivity to the user experience. In an email, it bulks up the file size, raises security flags, or just doesn’t work. If there are interactive components attached to your email campaign, you are far better off linking the reader to a live site than to attempt to embed them into the email itself. It’s an extra step but at least you can be sure that your rich media and forms will work.
9. Design for smaller spaces
Just like designing for a web browser, you need to be considerate of screen resolutions and window sizes. In addition to this, email readers often have added sidebars and navigations on both sides of where your email content is displayed, further decreasing the amount of space you have to play with. Be safe and keep the width of your email design at least within 800px (we commonly use 750px).
If you’re running an email campaign and would like to learn more about best practices for email designs, speak to us. We’d love to help you.
Accessibility also includes, among many other things, the extent to which your site is printer-friendly. In other words, the ability for your audience to print your content and take it with them so that they may have access to it while away from the computer. As with all aspects of accessibility, making your site printer-friendly is ideal, but not manditory. Sometimes it’s just not necessary - like an artist’s online portfolio. Other times, like with real estate listings on an agent’s website, it just makes sense.
