HTML Email Templates – Rules to Live By

by Roland Pokornyik

The success of any email marketing campaign hinges on its HTML email templates. Create HTML email templates that adhere to best-practice principles, and you maximize not only email open rates, but also email conversion rates. Conversely, if your HTML email templates violate the requirements of today’s major email clients, then the chance of your message getting through will be severely hampered.

With that in mind, download “The Definitive Guide to Email Marketing Strategy,” and then heed these rules when creating HTML email templates:

Design Your HTML Email Templates for Mobile

A recent showed conducted by ReturnPath showed that approximately 88% of corporate emails are now being opened on mobile devices. What’s more, another study reported that 63% of Americans and 41% of Europeans would either delete or close an email that is not optimized for mobile.

The bottom line? If your emails are not optimized for mobile email clients, then your email marketing campaign is sure to suffer. That said, pay attention to your email dimensions. Most email recipients will view your email in their email client’s preview pane with images turned off. For this reason, make sure your email template is not more than 600 pixels wide; emails wider than this will cause your recipients to have to scroll horizontally to read your entire message – which is a strict no-no.

State Your Customer Value Proposition Early

When creating HTML email templates, clearly state your customer value proposition in the first 100 pixels of height, which is roughly one inch. Add a link in those first 100 pixels, and you’ve done even better. Tempted to use that first one inch for a gorgeous, branded header? You can, but your customer value proposition and a link to your landing page will yield better results.

To maximize the effectiveness of your HTML email templates, keep your call-to-action and main message above the fold, which is the area of the template that a reader can see without scrolling – studies have shown that as many as 70% of email recipients will not see content below the fold.

Create HTML Email Templates That Maximize Typography

First and foremost, use a readable font. Studies have shown that Arial and other sans serif fonts are best for email templates. The most readable font sizes are 14 pixels for body text and 22 pixels for titles. In addition, stick to no more than two typefaces and stay away from heavy serif fonts, script fonts, or novelty fonts. Highlight important text with bold and color tags.

If you want to enhance readability even more, than make ample use of bullets. Bullets are not only a great way to highlight important message points, but they also introduce white space into the email, which improves readability.

Piggyback A Text Version Of Your Email

Should you send only HTML email, text email, or both? The answer: Send both. Studies have shown than the number of people opting to view email as text only is increasing, as is the number of people reading only text-based email on mobile phones. All of your HTML email templates should include a text version.

Make Unsubscribing Easy

When users get frustrated trying to unsubscribe from your list, they eventually start to flag your emails as spam. Every time this happens, your sender reputation with email providers takes a hit, making it harder to keep your email out of the junk mail folder. Takeaway message: Make sure all of your HTML templates have clear, easy-to-find unsubscribe links that require minimal action from the user to complete the task of unsubscribing.

Don’t Use Word As Your Email Copywriting Tool

Never, never, never copy and paste content from Microsoft Word into your HTML email templates. Word content is not web-ready content and includes hidden code that you are not able to see in the Word document. What’s more, many email marketing platforms will garble Word special characters, such as the ampersand, causing them to display incorrectly in your HTML email templates. If you initially write your emails in Word, copy and save them to Notepad before inserting them into your HTML email templates. This will preserve all of your template’s formatting.

Easily Create Beautiful HTML Email Templates with EDMdesigner

We spent more than three years to create the most flexible drag-and-drop responsive email editor on the planet. Our cloud-based email editor is used by end users, enterprises, and agencies to create emails that are stunning. Here are some of the robust features that you get with EDMdesigner.

  • Drag-and-drop interface: We offer an extremely versatile drag and drop interface, so you can build almost any email design imaginable.
  • Bulletproof responsive email code: No more HTML coding – ever – with compatibility with more than 90% of all desktop, mobile, and web email clients.
  • Create HTML email templates once and reuse forever: Save your email templates, as well as your favorite elements like a news block, branded header, or the unsubscribe information. Reuse them over and over again.

Try the demo and see for yourself by clicking here.

Additional Reading