EDM (email direct marketing) is becoming an increasingly popular marketing channel. An advantage of emails over other marketing channels is that they can be scheduled to be delivered at a time when they will be most effective. For example an email for a pizza chain could be delivered late in the afternoon when people are deciding what to have for dinner. A well designed HTML email will get your customer’s attention but your time will be wasted if it can’t be displayed in their email client. HTML emails display somewhat differently to traditional webpages and have their own set of design rules.

The limitations of HTML emails

  • Users may not download your images so it is important that your email can still convey information without them
  • HTML emails need to be kept to 600px wide so they display on a wide range of screens
  • Float elements don’t work in HTML
  • Background images will be stripped
  • The majority of HTML emails will be viewed on mobile devices
  • png images are not widely accepted in email clients, use jpg and gif images instead

HTML email design tips

A good mindset to have when creating HTML emails to follow the advice of Prince and party like it’s 1999. Table based layouts are encouraged for HTML emails for the most consistent display across different email clients.

You can’t be sure that your end user’s email client will download any external files so it is best to use inline styles instead of referencing an external stylsheet. Your favourite web font is also off the menu.

Background images will be stripped from your email but you can create colourful emails by setting the colour on the table cell.

But is there an easier way to do this?

Even if you are a HTML and CSS expert you may not have the time or inclination to create your emails from scratch each time. I have gone through how to create these emails from scratch above but there are also some great tools that will do all this for you.

As well as maintaining your mailing list and sending out emails, MailChimp has an email designer app that allows you to design your HTML email using a drag and drop interface.

Inkbrush is a free online tool that can create responsive HTML emails from a design image that you upload and slice as required.

Testing your emails

Once you have created your emails you can use an online tool to test your email and see how it will look in a variety email clients.

Litmus is an online testing tool that allows you to preview your email in over 40 different email clients. You can see how your email will look with or without images and you can see how it will look in the preview pane.

While it is important to have great looking HTML emails you also need to consider your content. Text sections should be kept short, about 3 lines or so. You don’t need to tell your entire story in the email. You also need need clear CTA (call to action) sections to lure your readers off the email and onto to your website where they can become your customers.

What tips do you have for email? What is something that you really hate in marketing emails?