We all have read how effective email can be as an online marketing communications tool. Reported by Hubspot not so long ago, data gathered from Focus.com found that e-mail marketing software ranked third in the top technological marketing investments of last year, just behind that of website analytics and, unsurprisingly, social media monitoring.
Anyone that has already actively searched for email marketing on the web will likely have come across services such as MailChimp, Campaign Monitor and a range of other free and paid for services that roll the design, sending and analysis processes of email marketing neatly into one package.
The aforementioned services enable you to design and build email newsletters, either from scratch or from a selection of their many free (and paid for) templates, which are then able to be embellished with your own text and images.
For the typical marketer with limited resources, be it time or coding know-how, these pre-built templates offer a quick and easy solution to producing and sending attractive looking emails to prospects and customers.
However, inherent of fixed template designs there are unfortunately imposed design restrictions on image dimensions, positioning, volume of text and so on. For those that are left feeling frustrated by having their creativity choked, and have decided to venture out to design and build their own fancy looking email newsletters, we thought it would be useful to share some tips to consider when designing and building effective email newsletters.
If there’s one thing that we have learnt from researching the designing and building of email/newsletters/e-shots (whatever you want to call them), it is that producing a design that displays correctly and consistently across all email clients is a challenging task. Generally speaking each client, whether it’s Outlook, Gmail, Windows Live Mail etc, offers varying support for different features. For example – Outlook 2007 and Windows Live Mail do not support background images, where as Gmail does.
The list goes on and on, (and you can view it here), so to make sure every recipient views your attractive email design how it was intended to look, we suggest firstly researching this. There is a wealth of information available from different websites, including the ones previously mention, which shares the results of useful testing information.
2. Use HTML to build your template
With the documented lack of support for other coding languages across email clients, HTML is the programming language of choice to design and build your custom template. Although that isn’t to say that every feature in HTML is supported – as already discovered. Therefore keep this in mind when designing, and research what the solutions are.
If you have no idea where to start with HTML, there are an endless number of excellent video tutorials on coding using HTML that are on YouTube for you to begin with. Getting started is not as difficult as you might think!
3. Use tables
To make sure everything is displayed how it was intended to be across all clients, use tables in HTML to build your layout. Again referring back to the testing results provided from Campaign Monitor, tables are widely supported amongst email clients and will ensure (some exceptions I’m sure) consistency.
4. Keep it around 600 pixels wide
Again, research has told me to keep the main ‘body’ of the email, (i.e. where all of the content goes) within a 600 pixel wide table – or as close to that width as possible. This is because the preview area of email clients again varies, so you don’t want a third or half of your email being cut-off due to it being too wide!
5. Use ‘alt’ tags for all of your email’s images
This ‘alt’ tag refers to the HTML. You’ll notice that when you receive a HTML email newsletter/ eshot, typically all of the images that might feature within it are set to not display as default by your email client. This is set based on the grounds of safety and spamming, regardless of where the email came from. You might have noticed also that the ‘empty’ image(s) sometimes include text which provide a title or description of that particular image. This indicates that an alt tag has been used, and is helpful to the viewer, for obvious reasons, in this event.
6. Include social media icons and hyperlinks in your email
What better opportunity to increase your following than to encourage recipients of your email to visit your social media pages. You can find a range of free to use social media icons to use on the web, both from the social networking sites themselves and third-party made. Make sure to place these in a prominent place, and encourage recipients to visit the sites!
7. Test your template
To see how your HTML email appears in different email clients, test them prior to going live. Services such as Email On Acid offer the ability to do this, by previewing how it will look in an exhaustive list of clients.
8. Provide a web version alternative
In the unfortunate event of the email not displaying correctly in the recipient’s email client, providing a link within the newsletter to a hosted version elsewhere such as on your website is a great and convenient solution.
To conclude, this list is by no means definitive. The best way to start designing and creating effective HTML newsletters is by looking at other examples and the theory that goes behind them. As a marketer, a free and potentially powerful communications tool requires considerate attention to make the difference, and if you haven’t utilised email marketing campaigns already, now is the time to start.