HTML Email: Form vs Function
One of the greatest challenges when a client is looking to create an effective HTML email is finding the right balance between design and compatibility. It’s all well and good to make a beautiful graphic to send out to your database but will all the images display, and if not is the message lost? On the other hand you could create a basic, stripped back email to ensure the content is displayed, but research has shown that without engaging graphics this is far less effective.
These challenges are born from the great variations in rendering capabilities across different email clients. In other words an email may appear completely differently in Gmail than Hotmail and even Outlook 2007 compared to Outlook 2010.
Finding the right balance between engaging, eye catching design and cross client compatibility is difficult and takes a certain amount of experience to understand what will and won’t work. While this often can be frustrating there are a number of key elements which are a good place to start when designing an email to ensure maximum effectiveness:
Table of Contents
When creating an email that will be readable across a number of clients the rule of thumb I use here at Bang Online is to stick within a maximum width of 650px. This ensures that your email will be viewed full width (as you designed it) in virtually any email client and on mobile devices.
The layout of the content is obviously based on the objective of the email, whether it is a monthly newsletter, a quick news blast or an eye catching promotion.
In my experience there should only ever be a maximum of three columns in an email, and more often than not I would recommend having just two columns simply because of the sizing limitations in trying to keep the content within 650px wide. Of course there are exceptions to this rule if you have a really unique design or layout, however those are the types of emails that can become quite problematic and time consuming to code and test across all clients.
Also a thought to keep in mind when designing your email layout is to have your call to action up high. Based on our research click through rates are much higher when the call to action is front and centre in the email rather than down the bottom under a bunch of other content. Makes sense.
Its generally common knowledge in the industry that HTML emails are built with <table> tags as opposed to <div> like most websites, which in itself provides its own challenges, however you can still greatly style the content.
CSS still works in HTML email therefore you will still be able to add classes and style all the other elements as per usual. Instead of referencing a stylesheet however the CSS must be added in the <head> tag of the HTML file.
One issue with styling an HTML email is that you are unable to use custom fonts in your body content, such as headers. The alternative to this is using webfonts. If you have a custom font that is specific to your businesses branding then this is likely not the solution for you and images may be a better alternative, however if looking for some creative fonts that will display in many email clients its worth a look. Campaign monitor have a more in depth look at it here.
Images are a broad topic but the two main elements to understand to make a visually appealing and functional email are the Design/Sliceup and Image Display.
When creating the initial design for your email campaign it is important to try and avoid using a block image or too many graphical elements if possible. While it is nice to have one big pretty graphic as you will learn in the next section this can be a fatal flaw. Ideally your HTML email should contain a mix of feature images to catch the eye (including a call to action) and text based content which will outline or consolidate the message in your images.
Another element to keep in mind when creating your email is that many email clients won’t display background images at all. In the past I have avoided the use of background images as much as possible and when I have used them it’s with the understanding that most people won’t see them.
While researching this article however I have come across a site that promises “Bulletproof Email Background Images”. I am yet to have the chance to test this but it certainly looks promising and could add another element to email design. Check it out at http://emailbg.net/.
So once you have your images all nicely designed and inserted into the email, you start testing and they don’t appear! As mentioned earlier there is a great variance between how emails are rendered across clients and this is a perfect example, just check out the table from Campaign Monitor below .
So we need to plan for worst case scenario, that no images will be displayed, and work our way up from there.
Almost all email clients block displaying images by default so this is your first hurdle, which can be overcome in part by alt text. Alt text gives you the chance to still display your message, call to action and contact details if all else fails image wise, so make sure with every image you use the alt text is defined and succinct.
Some annoying clients go even further and block alt text when images aren’t displayed which is when the subject line becomes crucial as it is the only text (outside of text content mentioned earlier) that you can control. A short and sweet subject line will not only help when images are blocked but will make readers more likely to open the email in the first place.
Finding the right balance between design and cross client performance is often the most difficult element in terms of creating an HTML email and it generally takes quite some experience to understand the best practices and most effective ways of doing things.
This is only one side of creating an effective HTML however as the content itself are what will turn make for strong click through rates and in turn conversions. But that is for another blog, another day.
In the meantime this is a great article which has a number of solid tips regarding to both layout and content.