html

Creating your first EDM or HTML Email

Posted on: January 25th, 2013 by Alexander Stanuga 1 Comment

Have you ever wondered how to create an HTML email? As a Designer, have you ever had a client ask how best to impliment an email marketing campaign which makes use of their visual branding, or... are you just plain curious?

Welcome to the world of EDM - Electronic Direct/Digital Mail. A marketers best friend and if designed and managed well, can prove a great skill for any web designer to be able to master. Anyone who's got an email account these days knows what an EDM look like, they often come as a personalized email, including your name or email address in the greeting, and often surrounded by graphic images and a reasonably well thought through layout.

When it comes to designing an EDM there are several things that you need to keep in mind. Well designed, it will reflect the current visual strategy of your client and also become a stand alone element of their branding. As a marketing tool it is a great way to gain data on current and potential customers for a marketing team to best tailor an online campaign.

So what is an EDM? and why might you be asked to design one?

Companies will often use EDM's as a direct sales tool, and as a method of informing customers of their latest products, news and events. Most platforms, such as Campaign Monitor, Mail Chimp etc. offer a broad range of measuring tools in order to help the user determine the success of any particular campaign.

Before you get started though, I strongly suggest you sit down and consider a few things:

  • What online marketing strategies are currently in place?
  • Are you confident in coding in HTML and inline CSS (YES inline)?
  • How many people do you hope to reach via email?
  • Why do you want to use email marketing in the first place?
  • What are your budget and time constraints
  • How often will you be sending them out?

Lets face it, without some strategy you're just pissing in the wind and the more thought through your strategy, the better chance of accurately determining your success.

Available services

There are an array of online applications out there, your decision will usually be dependent on budget constraints and subscriber lists. And as with all things digital do your due diligence, free services usually come with a catch or a limit. Campaign Monitor is the service I am most familiar with, and for this particular post that's what I will be referencing. Other services like Mailchimp, Constant Contact, iContact and AWeber.

Before you get started there are a few things that you need to remember when coding for EDM's.

Code like it's 1999

Quite literally, you need to go back to basics, despite the amazing advancements in todays web browsers, being able to work with HTML 5, CSS3 and depreciated code, Email applications seem to be stuck... well, in the past, and surprisingly Googles Gmail is one of the worst.

Tables galore

As with my previous point, you're not coding for a website (though it's ability to be displayed in a browser is important), the google-bots won't be scanning through your document to determine the hierarchical importance of your content. Also as this is primarily designed to be viewed in an email client, not a web browser, SEO is not as important.

When I was first looking into how to code one up, I made the mistake of assuming that everyone else didn't know what they were doing, after all how could you accept that amount of depreciated code when looking at others source code?

All images need Alt tags

For many this is obvious, but the main reason is many email clients turn images off until the user has indicated otherwise, google and hotmail have been notorious for this.

Test, test & test some more

Every email client has a different way of displaying your hand crafted work, some work just the way you like, others not so much. The only way to get around this is to make sure you have your bases covered by having as many different email addresses to test as you can. Below is a list of the three most commonly used, while we're on the topic, do also spend some time reading up on how they run their junk filters, Hotmail is notorious for identifying EDMs as spam.

  • Gmail
  • Hotmail
  • Yahoo mail

I would also suggest, like designing for web, that you also test the email on both Mac and PC.

Be Sociable, Share!

One Response

  1. Sandra Smith

    September 18, 2015

    Hi,
    I am wondering if there is a standard aspect ratio for main images. I am working with a vendor now and would like to know what is a typical width range of edms.

    Just looking at a couple samples(screenshots), I have found it to be 6.5-7.5. Is there an industry standard or is it an arbitrary decision? Thank you!

    Reply

Leave a Reply