HOW TO CREATE HTML EMAIL NEWSLETTERS HTML email is probably one of the most efficient and successful communication medium for both publishers and readers. Users that sign up for a newsletter want to receive information that is presented with a neat design and that can be accessed in an intuitive manner. Publishers using HTML newsletters can track statistics such as email opens, forwards or clicks, and therefore measure the interest of the reader in the products or topics included in the email. HTML newsletters are now considered the most valuable tool in email marketing campaigns. Text-based email was the most popular way to communicate with the customer during the past few years. Nowadays customers have changed, they need attractive content that can be considered engaging and easy to share.
ADVANTAGES OF HTML EMAIL NEWSLETTERS
Visually appealing to the customer Brand identity can be preserved Ability to include interactive graphics, icons, images, clickable links… Ads are much more effective in HTML than in textbased email Most of the popular email clients currently support HTML email (Outlook Express, Hotmail, Gmail, Yahoo…) Most smartphones are starting to support HTML email Ability to track statistics Increased readability User friendly Higher number of conversions to your website Cost effective Targeted audience
HTML EMAIL BASICS One of the biggest problems when coding HTML email is the variety of software tools that are available for reading email. These can be categorised into two groups, desktop software or web-based email services.
Desktop software: Eudora, Microsoft Outlook, Thunderbird… Web-based email: Gmail, Hotmail, Yahoo...
The main issue with all these tools is that each of them can display the same email in very different ways. And there’s also the reader factor, acts like resizing the windows of the software can affect the way an email is displayed.
HOW TO GET STARTED First you need to decide whether you are going to create the template yourself or use an existing template from sites like Campaign Monitor or MailChimp. This last option is better for people who don’t have much previous experience with HTML, besides the templates offered in these sites present a clean and contemporary design. There are two important concepts that you need to keep in mind when coding HTML email:
In order to control the design layout and presentation use HTML tables. If you want to control elements in your email such as background colours or fonts use inline CSS.
HTML tables are not considered as one of the accepted best practices of good web design but they are essential for HTML emails. Using a CSS only template can bring problems when the newsletter is read on different email clients. Just rely on CSS for controlling elements of your template.
USE PHOTOSHOP FOR HTML TABLE LAYOUTS
If you don’t want to create your email newsletter from a template, you can use Photoshop for organising your HTML table. One of the most useful tools in Photoshop for newsletter design is the Slice Tool, you can chop your HTML email layout into several components that will have different properties on the layout. Once you have selected your components go to File and select Save for Web & Devices. It is recommended that you save your selection as .JPG or .GIF as they are more widely supported than any other kind of formats. When you’re asked to Save as Type select HTML and Images. This is the best way for laying out all the graphic elements of your design, but you have to make sure that your text is HTML and not images.
HOW TO HANDLE IMAGES Images are the most important element in a HTML email, make sure you consider the following advice when you deal with them on a template.
Use known formats such as .JPG or .GIF and make sure that you specify the image height and width attributes in order to prevent any issues in rendering. Use alt attributes in your images so the reader doesn’t lose any content. Avoid using CSS background images, some platforms like Gmail usually present problems with them. Make sure you do some tests before sending your final email. Do not use images for containing important information, these should only be used as graphic elements. Critical information should be in plain HTML text.
SOME OTHER ADVICE
The conventional standard width for HTML email newsletters is 600px. It is important that you keep your designs as simple as possible; the ideal number of columns is one or two, using more than these numbers can actually become a challenge and present problems when the email is read on different platforms.
Minimalist designs are the best option for the publisher and for the reader. They usually have less code and image assets that might break. Consider clean designs where text and a small number of images work well, find ways to simplify your code and your overall layout. Single-image emails are not a desirable option as they are popular targets for blacklists and might end up into the junk folder of your recipient’s email.
Automatic text resizing can cause problems in tablebased layouts, avoid it and try to specify the text size on size declarations.