Designing HTML emailers
KVA Digital – Smart Guides
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.
Designing HTML emailers
KVA Digital – Smart Guides
Use
Photoshop
rather than
InDesign
Emailers
should be a
max of 600px
wide
Use a
grid system –
nothing should
overlap
Design may
display slightly
differently across
browsers
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.
Designing HTML emailers
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
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.
Designing HTML emailers
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.
