Around the Emma office, designer Elizabeth William is better known by her nickname, Lizard. You've seen her work in your inbox if you receive Emma's Roundups and all over the Emma website (like the imagery in our homepage video). Get to know her a bit better today, as she shares email design wisdom that'll help your messages stand out.

You've designed custom email templates for Emma customers. Templates frame content nicely, but what do you recommend for arranging the body of an email (its text and image fields)?

Great question. It's best to have your content strategy determined before you get to design. Establishing a content hierarchy is so important when making complementary visual hierarchy decisions. Here are some questions to ask yourself about the content that will help to inform the design:

1. How often do you want to send?
Sending often might mean sharing just one or two stories per email. Sending a newsletter-style monthly or quarterly email requires you to give a bit more thought to how all the stories will come together — and how your design elements will support the story.

2. What do your subscribers respond to?
Do they tend to click more on image-based links or text-based links? Do they click on stories at the top of your email, or are their clicks dispersed throughout the email? Are they mostly mobile users? The answers to these questions will determine how you should lay out your content.

3. Is the amount of content you've chosen easily replicable?
For example, if you have four articles each month and you want an image to go with each, do you have access to great imagery that will support each article every time you mail? If not, you may need to rethink what you want to do there, or think about having an in-house designer create images that you can re-use. Or, ask the Emma design team. We love making designs that work for the resources you have access to!

4. How does your brand use imagery, and how can that imagery best support your story via email? Could you utilize custom image-based headings?
Image-based headings really add pop and personality to an email.

5. What's your message hierarchy?
Do you have a featured article each time? Do you have a big image up top that spans the width of your stationery? This will help you determine if you'd like to use a similar story layout each time, or if you'd like to switch it up each month, based on the news at your company.

Other questions to consider: Can you reduce the amount of copy and let some images do the talking? Or better yet, can you create teaser copy that links to the full stories elsewhere? Can you use a sidebar for quick links, ad space or smaller supporting elements (as opposed to primary/secondary items in the content hierarchy)?

I find headlines, subheadings and body text hard to balance visually. When you design a stationery that's meant to employ consistent headline and body copy (like Emma's Agency Insider), how do you find the perfect balance?

A good headline is powerful. It needs to entice the reader, and it should be very distinguishable from the body copy. There aren't really set-in-stone rules for this type of thing since there are many ways to achieve a good balance between headline, subhead and body copy. Here's one test you can do: after you style your copy, scoot back from your computer and make sure the first thing you see in the text is are the headlines. If those are somewhat distinguishable from a distance, you're on the right track. Typically, playing with bold, italics, text-based divider lines (using dashes, forward slashes or Emma's horizontal rule tool) and color will all help to create the right balance, but always remember to self-edit.

Choose two or three styles to make each section distinct and stick with them. Don't oversaturate your text with styling. If you use much more than two fonts, two colors (even accent colors), more than two or three font sizes, it'll look cluttered. And just because I have your attention — no comic sans, please.

I've noticed that most folks stick to a clean sans-serif font, like Helvetica or Verdana. The Uppercase email (below) is a nice exception. Mixing font choices can be tricky, though. What holds this campaign together even though it employs a number of different typeface styles and colors?

There's no shame in making daring font selections (well, daring in the realm of web-safe fonts). But you've got to have the design reasoning to back it up. In Uppercase's email (I just love Uppercase, by the way!), they clearly want you to read the text in the serif font [the main article section] first. So they set it apart using a different style of font than the rest of the mailing — and they also bumped up the size a few points to create an obvious hierarchy.

Also, since that particular copy is in letter format, the serif font gives it a more classic, formal feel which is in contrast to their use of a sans-serif in the sidebar for more ad-like copy; they want to get straight to business there. Within that serif text in the main well, they've highlighted what they consider the most important piece of information by changing the color of the type and using bold and italics when appropriate.

I like mixing sans-serif and serif fonts in headline and subhead copy. I typically prefer the headline to be in the serif font and the subhead in a sans (Georgia and Tahoma provide a nice mix), with a very obvious font size difference. Using that mixture lends a classic sophistication to any campaign, but always have your brand top of mind when making that decision.

Oh, one last thought — using a serif font within your sans text for a pull quote is also a cool way to use the mixture and give it a more editorial feel.

In last year's New Year's Resolution design, you chose a striking purple color to highlight several areas, including some of the header text. I'm guessing it's not a coincidence that this is also the shade of Claire's lipstick in the design. But which came first? Did you isolate that color from the photograph? Or did you plan the color scheme, then adjust the photo?

Oh, interesting question. The color scheme for the campaign was decided before our photo shoot. I actually played off of our Emma green and used magenta as an accent color to give it a fresh feel since it was all about New Year's Resolutions. We edited the photos accordingly, and then enhanced her lipstick with that purply-pink text color to tie it all together. Photoshop is fun.

Pulling a highlight color from a logo or photograph is a great way to bring the email together visually. But, at least initially, it sounds a little daunting to those of us without design chops. What sorts of tips and tools do you recommend?

Since Emma's email tools are simply an extension of your brand, I think the most daunting part is making the foundational commitment to your brand. That is, choosing brand colors, denoting the primary, secondary and accent usage cases for each, the font styles you want to use, etc. Get together with your team to build a brand style guide, then find the specific color codes for the colors you've selected.

If you're working with an Emma designer, we'd love to help with color selections, and we can provide the proper color codes to input when using Emma's text editor. If you need a free, on-the-fly "color picker" check out Eye Drop for Chrome, or Colorzilla for Firefox. You can identify the HEX code for your color, then input it in the Emma text editor.

I also like free photo editing tools like Skitch, Gimp and Pixlr. With a little practice, they become pretty easy to use.

What is the Emma design team up to now?

We're really busy — and really excited — to be working on a new template gallery for Emma customers. They'll be able to choose from hundreds (literally, hundreds) of free readymade templates, then customize the look of their campaigns with their logo and brand colors. It's a lot of work, and we can't wait to unveil the designs soon.

+++++

Emma powers the emails of more than 30,000 businesses, nonprofits and agencies. Get 60 days free when you join today.