Tips and tricks: Designing an email template
Creating professional email templates for your email marketing strategy is a good idea. Input your content and images into the ready made templates and send. Simple. Customising a template will save you time and effort, especially if you’re sending emails on a regular basis. For example, if you’re sending fortnightly newsletters, it’s easy to input the latest news and send, instead of drafting a new template each and every time.
Some companies will opt to use their Email Service Provider’s (ESP) free templates – here at Wired we offer free templates that can be customised to fit your brand. However, we do understand that some marketers are looking for something extra.
You may wish to design and build your own template – we offer this service too – but you run the risk of building a template that you think looks great, but looks awful when it arrives in inboxes. Oh dear.
To ensure you have consistency across your templates, here is a handy list of tips and tricks to follow when you’re designing your email template. Simply follow the tips as you’re building it, or reference the list once you’ve finished.
1. KISS – Keep It Simple Stupid
When it comes to design, simple is always better. Your design should enhance your message – not distract away from it. It can be easy getting carried away, especially if you know how to edit a template using HTML, but then you risk getting caught in spam filters, or your email may not render properly.
2. Use the right software
Many ESPs will use WYSIWYG editing systems – whilst these systems have worked well for years, they can break and cause problems. WYSIWYG editors can sometimes add additional code that makes your emails display unexpectedly wonky. If you’re using a more modern system (such as our Drag and Drop Template Editor, for example) you won’t have the same issues.
3. Keep the width under 650 pixels
By restricting the width of your email, you are ensuring that they always display in Outlook’s vertical preview pane – it’s important to cater to different client users, even if it means extra work. And remember, it’s easier for users to scroll vertically than horizontally.
4. Use tables
If you’re used to coding – you may be put off by using tables, but it’s important to include them to ensure your email renders in the same way across all email clients.
5. Avoid body attributes
You may come across email clients that don’t pay attention to body attributes, which means your hard work has been for nothing. If you do come across an email client like this, you should, for example, use a 100% width light grey table in which your content should be nested, if you’re looking to create a light grey email background.
6. Don’t use HTML bullet points
Lovely looking HTML bullet points do not render very well when used in email. Instead, use a plain text version of a bullet point, for example a dash – or an asterisk * to make sure your readers don’t see any missing details.
7. Be cautious with video
Using video in email marketing is still a relatively new concept, and as such many companies have not mastered the art just yet. Most emails clients won’t allow users to view rich media by default, so your video may not get seen.
If you are having this problem, consider taking a screen shot of your video, placing a small ‘play’ triangle in the middle, and linking out to a web page where the video will be embedded.
8. Use inline CSS
Some email clients, such as Gmail and Yahoo are browser based, and will strip out things like BODY, DOCTYPE and HEAD tags. This will no longer be a problem if you use inline CSS.
9. Write inline CSS in full
It’s tempting to write inline CSS using shorthand, but you should write it out in full. Instead of writing:
font: italic 12px Arial
Write it out in full:
font-style: italic; font-size: 12px; font-family: Arial
10. Use Absolute Image paths
Any images being used within your template should be hosted on your website. Make the image path point to the URL of the page on which the image is hosted. Find the URL by right clicking on the image and select ‘View Image Info’. It should end with a file extension, such as .jpg not .com.
11. Use PNGs at your own risk
Be careful when using PNG files for your images. PNG files are not supported in Lotus Notes, but may render in other email clients. It’s worth checking in various clients before you send.
12. Enter an image height and width
By stating a specific image height and width, you are protecting yourself further from a broken template. Images are not shown automatically when a contact opens an email, so by declaring the height and width, your template will be displayed in the same way even with images turned off.
13. Use the right number of images
Large image files will increase email load time – remember to think of those contacts that will be opening emails on mobile devices. You should also take care to balance your text and image ratio – too many images will make ISPs see your email as spam – stick to a 60:40 ratio in favour of images.
14. Include Alt Text
As previously mentioned in point 13, images are not shown automatically in the majority of email clients. For this reason, it is important to include Alt Text so that the contact can understand the email, even with the images switched off.
15. Create a plain text version
Not everyone renders their emails in HTML. Some users prefer to read plain text emails and some email clients can only open plain text emails, so it’s important that it’s included. Some spam filters will block your email if you do not include a plain text version.
Your plain text email should be mostly the same as the copy within your HTML.
16. Shorten your URLs in your plain text email
This will not be needed in your HTML version as the link will be hidden by text or an image; however, links are shown in plain text emails. If your URL is too long it can look untidy, especially if you have lots of links.
Use a link shortener such as bit.ly or ow.ly so that links don’t overtake your email.
17. Include an unsubscribe link, address and your name
By including an unsubscribe link, your company’s physical address and your company name, you are ensuring your email is not breaking the law. Simply build this into your template so that it doesn’t need re-entering every time you send.
By now, I’m sure your template will look fab – but what next? Take a look at these articles to help your email marketing strategy: