How to Design HTML Email: 5 Steps to a Good Beginning

I can understand why marketers really love email so much. Research has shown that revenue from email has increased proportionately by 28% in one year, and companies are attributing 23% of their total sales to email marketing, compared to 18% in 2013. It's a low-cost and effective marketing tool. So, over the last few years I've picked up a few good pointers from other HTML email designers and marketing experts that I've used in my process. And over this time I've been able to hone my process.

If you have been designing HTML email for a little while or want to start, here's a little advice on how to do it effectively:

1. Start with clear objectives. This sounds pretty obvious, but everyone thinks the objective is to make sales. Yeah, don't we all. But email doesn't operate at it's best with such a broad goal. Often times, email is part of a sales process — not doing all the work of sales. So having this objective just isn't specific enough. Your email may be used to:

• direct someone to a sales page
• occupy a space in a potential customer's mind
• encourage a repeat sale
• direct for more information
• build a relationship
• move, engage, delight, or instruct

Try to get your client to be specific about what they want their reader to do, think, or believe. Sometimes this helps to hone down the point of the email. If all they can think of is sales, ask why the reader would want to buy from their point of view. Sure, you have an awesome product or company, but where is the reader in the sales process?

2. Let the objective influence the message. This is especially important for copywriters, but designers need to be aware of how important writing is to a successful email design. In turn, the message and brand will influence the way the designer goes about designing the email. And the call-to-action will influence the layout. This sounds pretty simple, but it isn't. For instance, if the objective is to build a relationship with the reader, the email message shouldn't be written or designed to resemble a hard-sell email. Readers take about 8 seconds to scan an email to see if they want to engage it. And in 8 seconds the design tells the reader most of what they want to know. To use that time wisely, the message and design must match the objective.

3. Sketch out layout approaches. If the objective is clear and the message on point, it's time for the designer to build a design that will work in an HTML email. A good place to start is with a bunch of sketches. It's a good idea to use grid paper for your sketches because HTML email is based on a grid — using an HTML table structure.

4. Create mockups for approval. Develop about 2-3 good layout ideas and build mockups (using Illustrator, Photoshop, or whatever). And provide at least two ideas for your client to select from.

5. Build using a strong table grid structure. Try to work with a maximum width of 600-640 pixels. Email can be a bit larger, but it still isn't a consistent enough experience, in my opinion, to venture too much beyond these dimensions. Also try to design using 20 pixel square increments, with 10 pixel spaces between objects that are meant to be close together (like certain images and text), and 20 or 40 pixels between content meant to be separate. This makes for a easier reading experience for the viewer. And lastly, use web-safe fonts like Arial or Georgia.

There are more specific things I can say about coding structure and responsive emails, but these basics will help you have a good beginning no matter what you do or what email marketing service you use.

Photo courtesy nokhoog_buchachon of FreeDigitalPhotos.net