5 Tips for Designing Successful Emails

May 14th, 2009 | By Rich Barrett | 3 Comments

kiddrawingDesigning a successful email is not as easy as it looks. A common mistake is to think of an email as a mini-webpage or print brochure but that line of thinking will get you into trouble. Designing an email comes with its own set of rules and you need to approach it with some specific thoughts and methods.

The following is a list of 5 things to think about when designing your next email campaign. By no means is this all you have to think about but covering this ground will result in a marked improvement in the success of your campaign.

If you’re a website designer then you’ve probably picked up a set of tricks using CSS (Cascading Style Sheets) that you’ve come to live by. Well, you’d better sit down for this: CSS doesn’t work in most email software. At least, not in the way you’re probably used to using it. Background images, positioning, padding, floats… You’re going to have to unlearn all of those tricks. To be sure that your email looks the way you intended it on all email browsers you’re going to have to go back to the old way of doing things. That means relearning tables and inline styles.

When designing your email, stick to a grid that can easily be cut up into a table. Be careful about how you make elements break out of that grid and be aware of the variable heights of HTML text and how it can affect adjacent elements. Use basic inline styles on your text (like: font size=”2″, remember that?).  And whatever you do, don’t use background images. They just don’t display properly in several email clients.

People don’t have a lot of time so you have to grab their attention. If one simple, bold photograph will do, don’t use three. If a concise headline and a paragraph of copy gets the point across, don’t make readers scroll to read multiple paragraphs. Plus, factor in things like image load time for people on slower connections (depending on your target audience these people do still exist).  It pays to keep your design simple. But keep in mind: simple does not mean boring.

If you follow the first two points too closely you might end up with a boxy looking email – a rigid grid structure; headers and footers a little too clearly delineated from the content; a boxy, uninteresting email. It doesn’t have to be like this if you get a feel for the space that the email is living in. Try not putting a border around everything and see how your content interacts with the white area around it. Try using rounded corners. Create graphics that contain some of the background in it so that the elements can give the appearance of breaking the grid without actually doing so. Set your header on white and your body copy contained below it in a colored box with the footer text floating freely on white underneath it. Or even set your entire email against a colored background. Any of these tricks can help give you a compliant, yet un-boxy, email.

As you’re probably aware, a lot of popular email browsers, like Outlook and Gmail, block all email images by default – leaving viewers with just the text, alt tags and their own free will to enable the images if they’d like. Therefore, you can’t count on the message to be conveyed solely through the images. Alt tags are very important in this case so don’t be afraid to pack them with pertinent info that may be missed by people that don’t load your images.

If your email contains a mixture of both text and images, it’s a good idea to utilize that text to repeat offers and call-to-actions that you already have inside graphical buttons. If a call-to-action is important, it’s worth repeating a couple of times in the email but in different contexts. Mention it with a nice underlined text link in the body copy. Throw it at the top of a sidebar. End the email with a shiny, red, clickable button.

Though designing an email may be smaller in scale than designing a website it is still a project that has certain goals in mind that you need to consider.

As a designer, you’re orchestrating a dialogue with a reader. What is the ideal end result of that dialogue? Is your email meant to entice readers to click to a website? A landing page? A sign-up form? Or is the email itself the final destination containing a printable coupon or a newsletter with useful information that would be relevant to the reader?

These two results can require very different design approaches. It’s always important to keep in mind “Where is this all going?” Make sure that your design choices work towards answering this question.


Photo used with a Creative Commons license courtesy of Yukon White Light

Tags: , ,

  • http://www.arrickmaurice.com Arrick Maurice

    Nice write up Rich.

  • http://design-newz.com/2009/05/14/5-tips-for-designing-successful-emails/ 5 Tips for Designing Successful Emails | Design Newz

    [...] 5 Tips for Designing Successful Emails [...]

  • http://www.richbarrett.com/2009/05/14/5-tips-for-designing-successful-emails/ 5 Tips for Designing Successful Emails « Rich Barrett – Web Design | Online Marketing | Web Comics

    [...] I just wrote an article for the new Email Transmit Info Center blog (which incidentally I also designed). It’s about how to design emails. Read it here. [...]

Email Transmit Info Center – Email Marketing Blog is proudly powered by WordPress | Entries (RSS) and Comments (RSS).