24 SEPTEMBER 2015
Designing a beautiful but functional HTML emailer can be challenging for the most experienced designer, especially if you don t have a lot of experience working with code. This guide takes you through best practice for HTML emailer design so you can make sure yours are always spot on. Keep it simple The most effective emailers are those with a basic design structure behind them. This can still be bold and eyecatching but simplicity is key to making sure the design reaches the user intact. All email clients render margins and padding very differently and some strip out CSS styling altogether. By keeping your designs simple, you minimise the risk of unexpected changes from email clients. Use Photoshop rather than InDesign Use a grid system nothing should overlap Design may display slightly differently across browsers Emailers should be a max of 600px wide
DESIGN WITH DEVELOPMENT IN MIND HTML emailers are coded using the traditional method of Tables rather than the more modern language of Divs. Use a grid format When using tables, you re not as free to layer graphics and text as you can when building a website with Divs. Your design should be laid out in Photoshop in a document size of 600 pixels wide. You should be able to draw clear grid lines between the content so that nothing overlaps. Use media queries Media queries are used to style HTML in a way that makes content display according to the pixel width of the device. Whilst media queries are generally well supported when it comes to emailers, some browsers and devices strip these out. Make sure you have a solid fallback in place to catch the email clients that do this. Be prepared for problems Always ensure you link to an online version of your emailer. This is an exact copy of your desktop emailer but the HTML file is hosted online and accessed via a web browser meaning the results are much more accurate. When designing, this link to view online should be at the very top of the email.
THINK RESPONSIVELY Responsive emailers are challenging but not impossible. Use one column for the best results If you want a solid solution that works across every email client in a similar way, you ll need to use a one column design. Set the width to display at 100% and it will resize automatically depending on the device. Multiple columns? Be flexible What if you d like a two-column emailer? This structure is most challenging to achieve in Outlook 2013 and Android devices as there are bugs in both. You can overcome these problems but it s not always possible to achieve exactly the same display across every browser and device so be prepared for your design to be slightly adapted. An editable emailer could be a better investment for the long term Our email campaigns manager of choice is MailChimp where we build fully responsive custom templates that are editable by the user in MailChimp without any coding knowledge. Creating a one-off editable template may be slightly more time consuming but its by far a better long term investment as you can reuse the template, adding new content for every email. You can also build areas to be repeatable within the design panel in MailChimp. This means the user can easily add new sections, perfect for a Newsletter for example, where rows might be repeated.
Designing HTML emailers USING IMAGES Images are an important design feature but they won t always appear automatically. Don t put important text content in images Some email clients block images on first load and the last thing you want is the appearance of a blank email. HTML text will always load more quickly than an image so stick to keeping text in the email itself and using images for aesthetics rather than essential content. Host images online Use absolute paths to reference the images in your emailer. Images must be hosted publicly for your recipients to view them.
TEST UNTIL IT S RIGHT Testing time and amends should be factored into any emailer project. Get it right Using a solid third party email testing platform such as Litmus or Email on Acid is crucial to see how your email behaves in a live environment. MEASURE PERFORMANCE AND LEARN FOR THE FUTURE When do you read your emails? Before sending your email, consider when your audience are most likely to open and read it. You can use previous campaign data to look at the best open rates or you can split test the emailer if you have a large audience and send at different times of the day to see which had the best open and click rates. What did you learn? Monitor trends over a number of campaigns to better understand who your subscribers are, where they are based and what sort of content they enjoy most. Use subject lines that get the best open rates and content that gets the best click rates.