It is essential that email design is not considered in the same way as print or web design. Email is a completely different medium and should be treated accordingly. While there are many basics and best practices, you should take a staged approach to designing your email templates. Test different layouts, colour schemes, calls to action and more to discover the best combination for your brand.
We have outlined some key considerations for HTML email design below.
Pre-header / Safe Sender Text
Starting with the top of your message, ensure that you have a good pre-header that outlines the content of the message. Also provide a link to a web version and request that your subscribers add you to their safe senders list.
A good pre-header can assist in lifting open rates and subscriber engagement.
Keep it Simple
Decide what your goals are from the HTML email, maybe you are looking to gain more sales or perhaps you are looking to gain more coverage for a new product launch. Whatever you are looking to achieve, don’t crowd the campaign with too much information.
Always use Tables
Web design techniques and web browsers that support them have been speeding ahead over the years, however email clients to support them haven’t! While CSS is great for all elements of web design including layout, most of it isn’t supported by many email clients.
Because of this, you should always use tables when laying out your HTML email.
Image to Text Ratio
A key consideration when it comes to deliverability and usability is the image to text ratio of the campaign. You should really design an email template with a 60:40 image to text ratio in the favour of text.
This will enable the recipient to get a feel for what is in the message before enabling images and it can also greatly assist with getting into the inbox.
Avoid Body Tags
Most email clients will strip out the body tags so they should be avoided. If you want to set background colours, use a container table instead.
ALT Tags
Ensure that you include ALT tags on all images. This enables your subscribers to understand what the images contain when they are not enabled. This is also useful for subscribers using mobile devices.
Avoid Background Images
Background images are not supported by a number of clients including Outlook 2007 / 2010.
Always Test
Most important of all is to ensure that you test your campaigns to ensure that they will render correctly in all of the major email clients.
And don’t forget HTML email design for mobile devices!
