The Complications of Constructing HTML Emails
02 Jun 2016
Since starting the process of learning HTML and CSS, I have now been exposed to the challenges faced when designing for emails. With the various amounts of email clients and multiple browsers to view them on, this has allowed for a vast amount of variation in regards to compatibility and support of HTML and CSS.
As a result, this has restricted the way in which designers go about creating their campaigns to ensure each consumer gets the best possible user experience. Your communication should be optimised when viewing it in your recipients chosen email client and/or browser. This means your email will look different depending on where and what the user is viewing it on. Rather than being able to use all the latest features in HTML and CSS, designing for emails is very restrictive.
The Email Standards Project is an organisation that aims to improve the email experience for designers and readers by working with email client developers to eventually ensure that designers will be able to rely on a solid, consistent level of web standards support when building HTML emails.
But until then there are a few dos and don'ts on how to construct a successful email across all platforms – here are a few of the main ones!
Do
â Use tables
This is the only universally accepted method that renders emails correctly and will not break across email clients.
â Make your CSS inline
Popular email clients strip out CSS in the <head>. An easy way to solve this is to write your CSS in the <head> and then use an inliner such as Zurb’s to convert your CSS inline ready to send. Also ensure that you write out your CSS in full declaring each property – do not use shorthand.
â Provide image dimensions
Some clients automatically apply their own which can cause major issues when rendering so make sure to apply a width and a height in your style tag as well as individual attributes for each image.
â Keep it 600px max wide
This allows users to scroll down rather than side-to-side and enable the user to view your email the way it was intended.
Don’t
â Rely on images
Not all email clients display images by default, they require the user to actually enable the download. This is especially important if your main message is on an image as half of your subscribes will never see that message. Therefore, make sure to use the ‘alt’ and ‘title’ attributes so they can still see what it is they are missing.
â Use PNG Images
Not all web browsers support them; instead use JPEG’s and GIF’s.
â Use only custom fonts
Not all clients support @font-face so make sure to set web safe font’s such as Arial and Times New Roman as fall backs e.g. font-family; ‘bebasregular’, Times New Roman, serif
â Use Paddings or Margins
Outlook 2007/10/13 does not support padding on <p> <div> and <a> tags and Outlook.com does not support margins therefore in Outlook your layout will be destroyed. Instead you can set your widths in each cell not table or apply padding and margins to a class to create space when needed. Do not use ‘float’ to position your content use the ‘align’ attribute.
Although this will help when initially beginning to design emails, there are many other issues you will discover when testing that I haven’t touched on. For example when linking an image to a webpage some email clients will automatically add a blue boarder around it to indicate that it is a link. Obviously this is not aesthetically pleasing and you will soon get used to adding ‘border: 0’ to the style attribute in the image tag whenever a link is wrapped around an image. Part of the process is to uncover the strange add-ons – especially with Outlook - and the hacks to correct them. A handy link to have up while designing is The Ultimate Guide to CSS. This allows you to check if an element you are unsure of is supported across the 10 most popular mobile, web and desktop email clients.
Moreover, the key to a successful campaign is testing it. You can do quick tests of your emails in PutsMail. It is a good idea to create different email accounts across the various email clients. This way you can view your campaign exactly how your recipients will see it.
Finally, you need to send your campaign. This needs to be done by an Email Service Provider (ESP), the delivery engine behind your marketing campaign. You cannot use your own personal email as you risk blacklisting your IP address as ‘spammy’ which would affect your personal regular communications from getting through. Using an ESP such as Touchpoint, is a much more effective way as it not only saves you time but it also provides figures and analysis on how many people engaged with your email, click-though rates and which ones they clicked. For more information about our direct marketing platform, Touchpoint and how it could benefit you, please click here.
By Aisling McCagh, Junior Designer, MarketingFile
References
http://www.joanmayans.com/docs/mailchimp_html_email_design.pdf
http://www.sitepoint.com/rules-best-practice-email-design-coding-practices/
http://www.lizlockard.com/email-marketing-service-providers-reasons/
Please login to comment.
Comments