How C.R.A.P. leads to better newsletter design

speed limit 10 mph sign

Jared Spool says, “Design is the rendering of intent.” Design isn’t decoration. It’s how something works, how it solves problems, how it encourages behaviors — both good and bad. This is especially true for newsletter design.

Spool goes on to say, “Anyone who influences what the design becomes is the designer.” You don’t have to know CSS, HTML or what a JPG is to be a designer.

King of the Hill gif

If you’re building a newsletter to get people to share their stories on a topic you’re covering, then you’re a designer.

If you work on the business side, and need a button to get people to hand over some money to keep the lights on — you’re a designer.

Things work the way they are designed. If your newsletter isn’t getting the results and behaviors you want, you need to change the design.


You don’t need a favorite font to be a designer

For this post, “designers” are pretty much whom you expect: the people doing the visual work. Layouts, coding, wireframes, building templates, etc. Most have designer in their title. Non-designers are everyone else.

But that doesn’t change this fact: We are all designers. Especially those without “designer” in our title or have no idea what Dribbble is.

A little secret about me: I’m a retired designer. I was a graphic designer for 15 years, but these days I only do personal side projects. I’ve hired, managed and mentored designers. A good designer is a tremendous asset. A great designer focused on outcomes and communication is a game changer.


Better communication leads to better newsletter design

Underperforming newsletter designs are often the result of miscommunication. Designers and non-designers speak different languages, making it hard to create shared understanding.

This leads to both sides being unhappy and unsatisfied. The designer feels like everyone else’s fingerprints are ruining their grand vision, and non-designers feel like they can’t get help to meet their goals.

I want to bridge that communication gap so that we can do better work together.

This guide is for the non-designers. Design often goes off the rails when people get tangled up in their own tastes and preferences. This absolutely applies to designers, too.

When this happens, designers get frustrated and defensive. Feedback takes one of two forms:

  1. The design isn’t resonating with the non-designer, but they can’t explain why in a way the designer can act on. (“I know when I see it” or “Can we make it look warmer?”)
  2. Non-designers suggest changing little things they feel they understand enough to control. (“Can we change all the buttons to red and center all the headlines?” and the dreaded “Can you make the logo bigger?”)

What the designer often feels is the work and energy that went into the design isn’t respected. There’s a ton of work and research that goes into simple layouts. Newsletter design is a collection of trade-offs and decisions. A good designer thinks about how they all work together.

But — the designer isn’t always right. The design may not be resonating because it needs work. I want to give you a quick design course, so you can communicate effectively with designers.

These tips for giving actionable newsletter design feedback benefits you and your designer.


Focus newsletter design goals on outcomes

Rather than think about an overall design as “good” or “bad”, try to think more in terms of your goals. When you sit down to kick off a newsletter redesign (or any project), start by defining what you want to happen as a result.

Do you want to increase clicks through to stories on your site? What about donations or subscribers? Knowing what you want from your efforts and defining them upfront will save you many headaches later.

Focusing on outcomes won’t make design conflicts magically disappear. However, if the team agrees on a set of objectives at the start of the project, your discussions will be more productive than who has better taste.


Four principles to boost your non-designer design chops

When I was a rookie designer in the advertising department at a newspaper, one of the veteran designers left her copy of The Non-Designer’s Design Book by Robin Williams on my chair.

I gobbled it right up.

Robin breaks down design fundamentals using the acronym C.R.A.P.

  1. Contrast
  2. Repetition
  3. Alignment
  4. Proximity

C.R.A.P. immediately improved my designs, but the bigger value is how it changed my perspective. Now I could look at designs by more accomplished designers — and see the strategy behind them.

My eye for design evolved from “This is why this looks good” to “This drives you to take action because…” overnight.

Let’s see C.R.A.P. in action! (I’m not sorry.)


Contrast

Contrast creates distinction between different parts of a newsletter design. Without contrast, it’s hard to pick up on cues to navigate web pages, our phones, even a physical newspaper.

I like to think of contrast as guideposts or visual anchors that lead someone through the newsletter.

Size contrast

Headlines are bigger than bylines, right? That’s an easy example of size contrast. When evaluating a newsletter design, I often look at size contrast first. Are the most important elements the most prominent?

New York Today newsletter

The (1) headline is the most prominent object after the header of the email. Not surprising. The next most prominent object as you scroll is the (2) photo, which leads you to the primary story.

The blurb about (3) lemonade stands and the weather is out of place to me. Even though it’s out of place, the tiny weather type contrasts with the headline and photo. The weather is less important than the story.

Type style contrast

Let’s look at another section of that same New York Times newsletter.

New York Today newsletter

We have size contrast for the section heads From The Times (1) and What we’re reading (3).

Each entry in those sections also kick off each entry with bold type. This makes this section skimmable. If you live in NYC and wish there were a Nordstrom, that name in bold is more likely to be of interest.

Each section also clearly identifies the links: blue and underlined, like people expect on the web.

However, here’s a neat little detail. Check out the links in each section. What’s different?

Right! Links to The Times are (2) styled text within the sentence. Links outside The Times are in (4) brackets at the end of each section, like [Daily News]. It’s a subtle difference, but it does two things:

  1. It signals to the reader the story is from another source.
  2. It tells the reader where you are sending them.

This quick bit gives the reader information to help them decide to click or not. For example, if I don’t like reading crime stories in the New York Post, I can skip over it.

Color Contrast

Color contrast is a key part of making newsletter design accessible to all users, including those with low vision or color blindness.

But working with color is tricky. It can get subjective quickly, which leads to hurt feelings about personal preferences. There’s also color theory and brand standards and way too many things to bog a discussion down.

Here’s my advice to avoid those terrible meetings:

  1. When applying brand colors to your newsletter design, think of it like picking what to wear. Pick colors that go with each other, rather than trying to exactly match your website.
  2. Prioritize outcomes, not design inputs. When you evaluate based on desired outcomes, decisions flow toward what is working versus what someone likes.

Repetition

Repetition is when you design things based on what your users expect. What do they expect? Jakob Nielsen, usability consultant and human-computer interaction expert puts it this way:

“Users spend most of their time on other sites. This means that users prefer your site to work the same way as all the other sites they already know. Design for patterns for which users are accustomed.”

Jakob Nielsen

Make links look like links. Use buttons that look like buttons. Don’t get fancy and creative trying to recreate the wheel. It will confuse people, and they won’t do what you need them to do.

Here’s the Charleston, South Carolina Post and Courier. It’s clear what text links, and what doesn’t, because links look like links we’ve seen for the last 20 years.


Post and Courier newsletter (Columbia, SC)

On the other hand, here’s a section of a newsletter that needs work from from ecoRI, covering environmental news for southern New England. How many links do you see?

ecoRI newsletter (southern New England)

How many did you find? Guess what…there are four different link styles, and this isn’t even the whole email. Yowza.

ecoRI newsletter (southern New England)

Up top, we have (1) a nice big clickable headline. That’s good.

Next, we have the (2) full calendar link and (4) Environment America link. It’s not the end of the world, but better repetition would underline the calendar link and remove italics. But there’s a bigger problem.

I cropped the email, so you can’t see that most non-headline links in the email are red.

When do you most frequently see red text on a screen? When something is wrong, like an error message. I’d advise ecoRI to avoid red for links, because people associate red with errors and other negative feedback.

In the calendar section, we have the (3) event titles linked in blue . These aren’t obvious as links, because most of the links are red and underlined.

Here’s where it gets more confusing. There are two buttons that are the same color blue. People expect to click on buttons. But these blue buttons go nowhere. They aren’t links.

I’ll bet you lunch ecoRI would get more clicks if they:

  1. Changed links throughout to match the blue event titles.
  2. Made the buttons regular text like the Did You Know on the right.

Up at the very top we have another button. It’s black: From the Archives. That sounds interesting. What else is in the archives? I have no idea. It’s a button without a link.

People expect buttons to be links. If you don’t meet those expectations, you are training them not to click in your emails.

When working with repetition or consistency, make sure your newsletter design is consistent with what users expect, not your other designs.


Alignment

Alignment keeps things ordered in the design. Most newsletters are single column layouts, so a large majority of the 99 Newsletters do a good job with alignment.

A few struggle because they don’t use a single column layout. More than one column in a newsletter design is tough to execute well. Richland Source from Ohio has a alignment problems.

Richland Source (OH) newsletter

The way the top stories go from one column to two columns to three columns is cluttered and harder to follow than a single column layout. Unfortunately, it continues down the page.

Richland Source (OH) newsletter

There are times when boxes make things more prominent. However, these boxes all look the same. No contrast makes it hard to distinguish what is most important.

Furthermore, the boxes have the same problem as the top stories. The first section is one column moving into two columns. The next section is one column transitioning to three columns.

These boxes make it harder for a reader to get information. Readers would benefit more from a list of text links, like the New York Times example above.


Proximity

The proximity rule says that similar things should group together.

The 99 Newsletters do a pretty good job of grouping things together. Top stories, recommended links, event listings. There were lots of good examples of section breaks.

Proximity also means there should be space between unlike objects. Without space to breathe, newsletter designs get cluttered and frustrating. This is even worse on mobile. If the links and buttons are jumbled, it’s easy to tap the wrong spot.

Here are two examples of how a little space can make a world of difference.

The MinnPost newsletter has too much stuff crammed in small spaces. The contrast between headline and excerpt are nice, but it’s all squeezed to the left, with wasted space to the right. The tightness from headline to button makes it hard to read.

Compare to the Long Beach Post. It has the same elements, minus a byline: Headline, excerpt, a larger photo, and a smaller read more button. But the space between elements makes it much easier to read.


All this C.R.A.P. builds visual hierarchy

These four principles alone can turn around a lackluster newsletter design. Now that you know the C.R.A.P. method, you will start to see how contrast, repetition, alignment and proximity work to create visual hierarchy.

One of my favorite examples of using C.R.A.P. to create a meaningful visual hierarchy is the Philadelphia Inquirer’s Morning Headlines Newsletter. (Full, uncropped image is here if you’re curious)

Philadelphia Inquirer Morning Headlines newsletter

What’s pleasant is how each of the sections looks on a phone. Each one is just slightly longer than my screen. So as I scroll to see the last bit of a section, the next section is introduced. It pulls me through a newsletter with a lot of content.

Are you ready to put your newsletter design knowledge to the test?

Below is a newsletter from the Idaho Press in Nampa, Idaho. What design changes would you suggest?

Idaho Press newsletter (before)

Open this section to see some suggestions for Idaho Press, plus a surprise!

Here’s what sticks out to me more than anything: there’s no hierarchy here. Everything looks too similar. Because this design isn’t guiding me to what they think is important, I am left to figure it out. Do I have time for that? Probably not.

How we can suggest design changes

We want to give our newsletter designer feedback they can use, with reasons they understand. Here are a few:

  • “I think we should increase the contrast, so people can scan the headlines more easily. Can we see how it looks with black headlines on a white background?”
  • “The Read More buttons are a good idea. Can we fill the button with one color so they are more consistent? We should test to see if that encourages more people to click them” (Protip: Designers tend to think consistency rather than repetition. Unfortunately, CCAP is not a good acronym.)
  • “The green box isn’t getting the attention we expected for the top story. Can we increase the contrast by making the headline more prominent?
  • “We should also experiment with adding a photo to contrast the top story with the other stories”
  • “Can we see a version with the Read More buttons on the left? I’d like to see if aligning them with the headlines increase click rates.”

Here’s your surprise!

I’ve seen some minor changes to newsletters over the past few months, but Idaho Press started sending this one recently. It looks much better, and I hope they keep experimenting to find those big newsletter design ideas. Did they incorporate any of your suggestions?

Idaho Press newsletter, after a redesign

Featured photo by twinsfisch on Unsplash

Share on facebook
Share on twitter
Share on linkedin

Get 99 Newsletter Project updates when they are posted:

Not quite sure? The 99 Newsletter Project page has more details.

Cory Brown

Cory Brown

I help newsrooms develop email and subscriber strategies so they can reduce churn, grow revenue and build a sustainable future.

I don’t growth hack. I build.

I don’t want to disrupt. I want to have impact.

Previous 99 Newsletter Posts »

Follow Impact TK

Get in touch

Impact TK Logo

Copyright 2018 © All rights Reserved.