There are two main schools of thought concerning designing and building emails. Either, build the whole thing as images, or build as much as possible as HTML. The pro’s and con’s of building using images versus HTML could be the subject of quite a lengthy article. Assuming you’ve settled for placing all, or at least most of the text of your email as HTML, and you’d like some pointers as to how to do this, read on. This first article covers designing emails that make maximum use of live HTML text. The second article covers the HTML used to build the email.

Overview

Outlook 2007, which at the time of writing has been available for a couple of years, was instrumental in changing the way HTML emails need to coded. The programme’s capabilities set back email design by years. Out went background images and style sheets. Back in came inline styles and tables within tables within tables. For more on this read Campaign Monitor’s blog entry ‘Microsoft takes email design back 5 years’.

Visual design

Header images

Content really should be king. The best-looking email might have a low success rate if it’s not be well worded from title to footer. Assuming it has been received and opened, make sure there’s something enticing right at the top. In this example, see left, the heading is HTML text and located top left, right where it should be easily visible no matter what the recipient is using to view it. The banner area contains only 2 images, the big one on the right, and the drop shadow. If the large image has either not been loaded, or it;s out of view, no matter it’s simple setting the scene.

Further down, where ever possible, we’ve placed images below or beside text, and kept them small. Remember alt text is only seen by a few email programmes. so it was regrettable to have to use images for titles in the places we did.

Layout grid

We always kept our emails to a certain width. As with web page widths, the ‘how wide should an email be’ debate runs and runs. Like many others, we set our width to between 500px and 600px. Going much wider will mean many people will have to scroll horizontally to read the content. We also produced or design using a layout grid, which both helps keep designs neat and consistent. It also really sped up the coding process as we didn’t have to keep working out the values of the columns and gutters.

I have to admit that we didn’t always build for emails like this. Looking around it’s clear that many other people who would like to build like this also have to deviate from the ideal. Ultimately both clients and recipients expect a rich visual experience. In practice this often equates to a big fat image at the top with important information contained in text within the image. Whether or not this matters depends on the audience. If an email is being sent to recipients who are keen to receive it then they are much more likely to click to load the images.

The next part will cover covers coding.

Resources

• The Campaign monitor blog features email tips and tricks
• Check out the Campaign monitor resources section for free email templates, a gallery of designs, a chart showing what works and what doesn’t and much more.

Tags:

• Email design
• HTML