(02) 8319 5850 christie@benelds.com.au

How to Design the Perfect Email: Part Deux

by | Email Marketing, Infusionsoft

How to Design the Perfect Email: Part Deux

by | Feb 24, 2015

Once you’ve gotten your message nailed (or good enough for “version #1”, at least), it’s time to think about how you’re presenting it.

In the case of email, the first thing you look at should at is typography, specifically typographic hierarchy.

A wise man once said typography exists to honour content.

Typography exists to honour content

– Man, Wise

What is “typography”?

Typography is generally used to describe the type of fonts you use. Traditionally serif fonts have been reserved for print, and sans-serif fonts have been used for the web, although this is changing as our screens become much higher resolution.

And what exactly is “typographic hierarchy”?

Typographic Hierarchy is the name given to how you arrange fonts, font size, font weight, paragraph length and white space, to visually establish an order of importance in a body of text.

It exists to help your readers easily digest your content – without it, no matter how good your content is, it’ll be incredibly difficult to read.

Compare these two entries:

Come to Automation Summer Camp. Do you find it easier to get work done out of the office? Do you need a road map and a plan of attack for 2015? Is something going to give if you don’t make changes to the way you run your business? Work with the world’s fastest growing Infusionsoft Partner to transform your business in 2015. Come to Automation Summer Camp.

Come to Automation Summer Camp

Do you find it easier to get work done out of the office?

Do you need a road map and a plan of attack for 2015?

Is something going to give if you don’t make changes to the way you run your business?

Work with the world’s fastest growing Infusionsoft Partner to transform your business in 2015.

Come to Automation Summer Camp.

In the first example, our goal is to get you to come to one of our training workshops. However, without any kind of visual hierarchy it’s very hard for you to realise. You’d have to work quite hard to read the whole excerpt.

Imagine what it’d be like in a long email, or a full page of copy!

In the second example, there is a clear separation between the title and the body of content.

The body of content is separated into short, punchy sentences that are easy to read (a-la Hemingway).

It allows your brain to easily isolate the information that is key to you (if any), and disregard that which isn’t important to you.

The link at the end is a different colour to the body of text, and while much less obvious than a button, still provides a visual cue for your brain.

Visual Hierarchy

We can use html tags to easily create a visual hierarchy that pulls our readers step-by-step down the path we’ve laid out for them.

Think of yourself as the woodcutter leaving trails of pebbles and breadcrumbs, so that Hansel and Gretel may return safely home.

Styling Basics

Basic visual hierarchy (and believe me, basic is all you need) is very easy to accomplish. In order of importance:

  • Size
  • Weight (i.e. Normal vs Bold)
  • Position
  • Colour

 

Size

Size is the most important, easiest, and most obvious way for your readers to distinguish between sections of content.

It applies as much to email copy as it does to web copy.

Weight

Font weight is the next way to help your readers distinguish between a body of text, and the really key parts of text. It’s as useful as italics for highlighting, but much more reliable across multiple devices and different kinds of screen.

Position

You can use text alignment to highlight especially key parts – whether or not they’re a sub-section, a main section or a call to action.

Think about it.
Doesn’t this centred text jump out at you?

Use positioning as much as size and weight to really get your point across.

Colour

The final tool is the judicious use of colour.

While buttons have become the norm for CTAs, you can also use stand out colours that contrast with your colour scheme to make important lines stand out.

Particularly links.

For a long time the internet standard has been blue, and underlined. It was originally blue for no other reason than the first web developers who were creating something called “html” liked the colour, and it stuck.

But really, use whatever colour you like. Combine it with weight or size. Just don’t over do it…

Hierarchy and Email

The fact that our copy will be read on the web means that, unlike print, it has a requirement beyond readability: interaction.

As we’ve already seen, the goal of an email is to elicit an action – we want, at the very least, for our subscribers to click on some kind of link so that they leave their inbox and enter our distraction-free world.

Remember, you’re the woodcutter, and you want your readers to follow the trail.

We’ve already seen how some companies have used visual hierarchy to direct readers to the desired outcome in an incredibly subtle, but incredibly effective way:

sqspace2

 

In closing…

We can use visual hierarchy to make our emails easier for our readers to follow, and therefore, easier to act on.

With the simple addition of typographic hierarchy, we can turn this email:

Hi ~Contact.FirstName~, thanks for joining the Automation Academy. We’ve got some really exciting things planned that we think you’ll love. In the meantime, we want you to get started as quickly as possible, so just click this link and get running! All the best, Jake.

Into this:

Hi ~Contact.FirstName~,

Thanks for joining the Automation Academy!

We’ve got some really exciting things planned that we think you’ll love.

In the meantime, we want you to get started as quickly as possible, so just click this link and get running!

GET STARTED RIGHT NOW

All the best,

Jake

The next time you’re constructing your lifecycle and broadcast emails, ask yourself the following:
  • Is my copy divided up into short, easy to digest sections?
  • Are my headlines in a heavier, larger font than the main copy?
  • Are my CTAs:
    a) a different colour to the main copy,
    and b) would aligning the CTA in the centre make it easier to click on?
  • Is my body copy big enough to read?

That should be enough to get you started!

Before I let you go, there are a few more things to consider:

Don’t use too many fonts.

The current trend is to use sans-serif fonts for headlines, and serif fonts for body copy, but honestly, it’s not that big a deal.

Just pick one and roll with it.

For whatever reason I prefer sans-serif fonts like Helvetica for emails, even though I love serif fonts on websites.

Keep the main colour dark.

Low-contrast font-to-background ratios are a spam flag, and make it hard to read for those with bad eyes.

Keep the font colour #333 or darker.

There’s a lot of research that shows pure black is the best to go with for readability – #000000 all the way!

BLOCK CAPITALS ARE HARD TO READ.

So is bad spelling.

So is bad grammar.

While nobody is perfect it can be extremely difficult to read long paragraphs if theres no punctuation to ease the readers eye and getting simple grammer rules wrong not to mention spelling mistakes is and instant credibility killer.

Now, how hard to read was that?

Fortnightly Q&A – Notes or Tasks

We are often asked about the Notes and Tasks tools within Infusionsoft. Its common to hear that people are unsure when is the right time to use them and how to best use them to get the most from them. Not to mention we hear a lot that people aren’t using them at all....

Bespoke Equals Broke: 3 Reasons Why Productisation is the Path to Growth

One the main reasons people want to start their own business is the freedom it offers. You get to be your own boss. You can pursue your dreams, your interests. You don't have to deal with the bureaucracy that comes with slaving away inside a corporate structure and...

R.I.P Mailbox

Today, the earth stood still. Dropbox announced the death of Mailbox, one of the best email productivity tools around. If you haven’t heard of Mailbox you likely won’t care. But hey, keep reading anyway, because all is not lost.