Creating Emails That Pop: Basics of Design & Layout

[ 0 By

I recently posted about one of my key takeaways from Connections 2012 — design for ALL inboxes. In this presentation, Chris Studabaker told us that rather than focusing on creating emails that look great in one particular environment, emails should be optimized for all inboxes. Chris discussed two strategies for effective mobile email optimization: mobile aware and responsive.

In another one of my favorite presentations, ExactTarget’s Tana Babcock covered the basics of email design in “Intro to Email Design that Pops!” Whether you choose to use a mobile aware or responsive design approach in your emails, you must always start with basic design and layout principles in order to create attractive email to send to your subscribers. Tana’s tips below are the perfect foundation for creating awesome emails.

Design Principles: Color & Typography

Color Basics

As we all learned when we were younger, there are three parts to the color wheel: primary colors, secondary colors, and tertiary colors.

In her presentation, Tana suggests using a color-wheel approach when choosing the color palette for your email designs:

  • Primary colors: These are your brand colors & are the most important colors to incorporate when designing your emails.
  • Secondary colors: These support your brand colors & are best used for small details of the email, such as in sidebars, divider bars, or footer links.
  • Tertiary colors: These colors are rarely used, but may be a great addition for one-off communications or seasonal messages.

Here’s an example from an ExactTarget email in which their brand colors lead the color palette:

ExactTarget 2012 - Branding

The main/primary color in this email is ExactTarget’s famous orange. Orange is used in the header, links & icons in the email. What about secondary and tertiary colors? A blue heading & accents pair nicely with orange since they are complementary colors, making blue the secondary color in this email. There are no tertiary colors in this email, which makes sense since this isn’t a seasonal message and it’s not a one-off communication since this was part of a series of emails about Connections 2012.

But how do you devise a color scheme if you don’t have any brand guidelines like ExactTarget? Tana suggests devising a scheme based on:

  • Analogous colors: Colors next to each other on the color wheel.
  • Complementary colors: Colors opposite each other on the color wheel.
  • A concept she called “nature,” where colors that correspond to the nature or feeling of the brand are chosen (your logo, photography, or product shots can serve as inspiration)

For example, here at Litmus, we don’t have any specific brand guidelines, so we base our emails off of the colors in our logo (which happens to be a color wheel, so we have lots of colors to choose from!):

October 2012 Newsletter

The blue & orange colors of this email are taken directly from our logo, while the other colors in the email are neutrals that pair nicely with the pops of color.

A color design tip from Tana – “minimize the amount of colors — add visual interest without overpowering the message.” In other words, make sure your subscribers can focus on the content of the email without being distracted by the color scheme.

Choosing colors

When choosing your color palette for your emails, HEX colors (as compared to RGB) have the best support in major email clients, and choosing full 6-digit HEX codes is preferable over 3-digit shorthand variations. Tana also recommended a few sites for helping find your perfect HEX:

  • W3Schools has a color picker feature and allows you to select lighter and darker shades of any HEX value.
  • Color-Hex identifies monochromatic, analgous and complementary hues for specific HEX values, along with equivalent RGB, CMYK and HSL colors.

  • Color Scheme Designer is a favorite of ours at Litmus. Entering a HEX color nets primary, secondary and complementary colors in a variety of shades.

Typography

Before diving into fonts, typefaces and other letterform lingo, it’s important to define all the terminology that comes with typography. All of the definitions below are from FontShop:

  • Font: A collection of symbols used to set text. Note: A font refers to the physical embodiment, while typeface refers to the design — a font is what you use, and a typeface is what you see.
  • Typeface: An artistic interpretation, or design, of a collection of alphanumeric symbols. A typeface is usually grouped together with a collection of family members — bold, italic, small caps, etc.
  • Display: A category of typefaces designed for decorative or headline use. As opposed to text typefaces, display typefaces are usually meant for larger settings. For example, while the font below would look great in an appropriate headline, it would be very difficult to read a paragraph full of that text.

Display Typeface Example

  • Web-Safe: Type that’s supported online and by most operating systems. Below is the (very limited!) list:

Web-Safe

  • Serif: A stroke added to the ends of characters. Serif, web-safe typefaces include: Times New Roman, Courier, Palatino, Garamond, Bookman, and Georgia.
  • Sans-Serif: Type without the extra stroke feature at the end of characters. Sans-Serif, web-safe typefaces include: Arial, Helvetica, Verdana, Comic Sans, Trebuchet, Arial Black, and Impact.

Sans vs Sans-Serif

If you don’t have specific brand guidelines to follow when creating your emails, how are you supposed to choose the best typeface for your needs? You should focus on four main areas: legibility, readability, content, and context. Tana gave some great examples in her presentation:

Choosing the right typeface

Similarly to choosing a color palette, the text of an email should not distract from the content. As a result, make sure not to use too many different typefaces in a single email.

Don’t have many choices on your computer? Tana recommends Font Squirrel — an easy-to-use website that has tons of open-source typefaces to choose from. Just remember that any non standard (non-web-safe) fonts won’t be visible to subscribers unless they also have the font installed on their computer. Your safest bet is to stick with the web-safe choices above, and save special fonts for areas where it’s OK to capture the text as part of an image (which will appear correctly for anyone with images turned on).

Layout

When choosing a layout for your email, you must determine which type of communication it is — promotional, editorial, etc. — in order to create a proper layout for that particular email. For example, Benchmark Email breaks email layouts into the following categories:

  • Editorial: If your email includes more informative text than promotional photos and links, then you should use an editorial layout. Split up the text by adding pictures and columns.
  • Promotional: If you want to generate buzz around your product, you’ll want to use a promotional layout, which is short, well-branded, vibrant, and has a clear call to action.
  • CatalogA catalog layout has a grid-based layout that is composed of pictures and text so numerous products can be infused into the email.

Once you have a layout chosen that you like, save it so you can reuse it in the future — it’ll save you time and a headache! For example, we use a set template for our monthly product updates email:

Product Update Emails

I’m sure you’re all wondering — what about a mobile friendly layout? Responsive design? That aspect of the presentation was covered by Aldo Benedetto from Kool Smiles and Kevin Moran from Digital Additive.

Case Study: Kool Smiles

Kool Smiles was founded in 2002 as a general dentistry for children & parents for lower-income families. Prior to 2012, Kool Smiles was relying on an in-house call center and direct mail to for their communications: appointment reminders, rescheduling missed/cancelled appointments, and booking patients due for cleanings/treatments. Since this was not always the preferred method of communication by customers (and it was expensive for Kool Smiles), they began looking at email as an alternative method of communication.

Their first email campaign was sent in early summer of 2012 and it included an Email Analytics tag so they could determine which environments their subscribers were most frequently opening their email in. As a result, they discovered that over 50% of their subscribers opened their first email on a mobile device — wow!

With over 50% of their subscribers opening on a mobile device, Kool Smiles knew that they had to do something about it, especially since their first email wasn’t very mobile friendly. They began using Email Testing to make sure their future emails would look great in ALL environment. Kool Smiles also began doing research into responsive design & media queries and eventually created their own mobile-optimized welcome email utilizing these techniques:

Kool Smiles Mobile Email

The new welcome email looks great on a desktop AND a mobile device!

I really enjoyed this email optimization case study from Kool Smiles (and not only because they gave Litmus a few shout outs!) because it really addressed the importance of discovering your audience and making changes that address their needs. It’s all about your subscribers!

Summing It All Up

In summary, in order to make an email that POPS you need to focus in on four simple aspects:

  • Color: Make sure the colors go well with your brand & don’t overpower the message.
  • Typography: Focus on legibility, readability, content & context. Also, don’t use too many different typefaces in one email.
  • Layout: Choose a layout based on the email’s content & make sure it pairs well with the color & typography.
  • Audience: Know your audience & optimize your emails for them!

Additional Resources