HTML Newsletters - Design Considerations
Originally posted on Liquid Light
By Mike Street
Email newsletters are an effective way of letting your subscribers and customers know about news or upcoming offers. Normal text emails (or plain text emails) get the message across, but HTML emails make the information more attractive and appealing.
When creating HTML emails there are several things that we all need to take into consideration. Below is a list of pitfalls and challenges that need to be taken into account when designing and making an email.
Think about the devices and platforms
When building a website, being able to predict what the output will look like across platforms is a fairly easy task, thanks to the standards browser manufacturers are adhering to. However, with the myriad of devices (iPad, Android phones, iPhone, Windows tablets, Desktop PCs etc) and the plethora of mail applications available for each device, getting the email to behave exactly the same way in each of these is near-on impossible.
Different email clients support different features, which is why some emails will look different on different devices. For example, iPhones allow rounded corners, but other email clients do not. For this reason, your email won’t look exactly the same on every device. As long as you are prepared for this, you can ensure your theme and message get across clearly and effectively no matter what service it’s delivered too.
Think responsively
With a staggering amount of emails read on mobile (48% in fact) - ensuring your email looks good on a smartphone is paramount. Giving your email a simple layout and reducing the number of assets needed to be downloaded (images, attachments etc) will help with the conversion of your email. You should also make sure your email has a clear call to action - so mobile users have a simple action to carry out. For example, making sure you don’t have a huge header image the user has to scroll past to get to the content.
Reduce images
A lot of email clients will prevent images being downloaded by default - meaning you shouldn’t rely on graphics to get across the main point of the email. One of the reasons for this is images can use up data allowance for mobile users - customers won’t want to have to pay to view your email unexpectedly. The other reason is that spammers are able to get hold of information about the user when they chose to download the images (including what computer they are on and their IP address) which is why many clients block images by default.
Because of this, there is no way to force download of images in an email, so make sure your message is accessible without them.
If you do decide to use images in your email, make sure you include alternative (alt) text. This provides a textual reference for the image and is often displayed if the images are not. The alt text should describe the image, but encourage the user to download images to get the full experience. If the alt text completely describes the picture, the customer wouldn't feel like they would need to download the images.
Fonts, videos & other media
Emails are very restrictive with what media they can display. A custom font you may have on your website won’t work in an email - unless it’s an image (and, as explained above, images aren’t ideal). Videos also can’t play in the majority of devices - the best method for showing and sharing media is to have a representative image and text link. Emails are very much based around basic HTML and Images - leave anything fancy on your website and create an attractive Call-to-action to bring users through to your content.
Another media to consider to use in an email is the animated GIF. This is an image format which can allow simple, looping animations. Many email clients display these, meaning you can make an email come to life with some well placed moving images.
Keep your mailing list legal
There are several laws you need to follow when maintaining an email list and sending emails. Make sure people have opted-in to your mailing list. The CAN-SPAM Act of 2003 requires the following things [source]:
- Never use deceptive headers, from-names, reply-tos, or subject lines.
- You must always provide an unsubscribe link.
- Remove recipients from your list within 10 business days.
- The unsubscribe link must work for at least 30 days after sending.
- You must include your physical mailing address in the email (PO Boxes are not sufficient).
You must also ensure people opt-in to your mailing list - just because a customer has bought something for you, it does not entitle you to automatically add them to your mailing list.
Some good examples
Below are a few great examples about simple, clean, responsive HTML emails
Making sure your email is ready to be sent out is just as important as making sure the content is error-free. Let us know if you have any tips or any questions about emails - or if you have any other examples!
