Email design: Fundamentals

Estimated reading time: 15 minutes

Humans are visual animals—our brains are actually wired to learn information visually. So in order to sell to humans (which, you know, should be your target market), you want your emails to look like masterpieces. Or, at the very least, hit enough of the correct visual notes to be effective.

It’s why marketers widely and consistently cite visuals as the most important aspect of everything they create in their jobs. (PDF) They’re that important.

In this section, we’ll cover the main design elements of marketing email. These are the ones you absolutely need to get right to maximize the effectiveness of your emails: headlines, copy, images, and calls-to-action.

Headline and copy

Your subscribers won’t look at your emails for very long. People look at the overwhelming majority of emails for less than eight seconds per email—in most of those cases, less than two seconds. (PDF)  The U.S. has the longest attention span for emails in the world based on the numbers—but only slightly.

Read (8 or more seconds)

Skimmed (2-8 seconds)

Glanced (less than 2 seconds)

Global

17.1%

20.5%

62.4%

U.S.

18.5%

21.7%

59.7%

Four out of five people will look at your email for less than eight seconds.

With those odds suggesting your emails will only get a glance or a skim, an eye-catching headline becomes critically important. And an eye-tracking study found that the first text people look at in an email is the headline—which makes it, basically, the most read piece of copy, and your best chance to hook someone and keep them from clicking away.

Make the headline big and bold

The trend in email marketing is bigger and bolder headlines—and there’s a reason. You want a headline that really grabs people’s attention. That means it’s concise, the text is large, and it entices people to keep reading more. (Check out our lesson on email content for advice on what to put in your headline.) You don’t necessarily have to take it to the extreme like this Urban Outfitters email (it was the biggest headline we could find), but at least you know if it’s this big, those glancers and skimmers won’t miss it.

Huge headlines are the trend in email marketing.

Use a different font for your headline and body

You want your headline to stand out not just in size, but in appearance. Using a different font than you use for the body copy in your email can accomplish that. While you don’t want to pack your email with too many different fonts (too many or mismatched fonts can often come across haphazard and even unsettling), a bolder display font for the headline will pair well with a more readable, traditional font for the body copy.

Here’s an example from Banana Republic where they use a typewriter-style font for headlines to give a vibe like these are vintage “letters” from customers. Then they use a less-stylized font for copy that’s easier to read at smaller sizes and in longer chunks. That typewriter font would lose its effectiveness if it were also used for the body copy; it also might be difficult to read well at a much smaller size. But for headlines, it stands out and catches the eye.

Mixing multiple fonts in one email.

Say what you need to say—and not more

Fully recognizing the hypocritical nature of telling you to limit your text in the middle of several thousand-word lesson—you should try to keep it brief.

One study found the ideal length of an email is about 20 total lines of text (which is roughly 200 words); that’s where click-through rates peaked. Interestingly, emails with very little text performed equally as poorly as emails with tons of text. That means there’s a sweet spot for how long emails should be where you can get your message across, clearly and succinctly—but not overwhelm some readers with too many bricks of text or underwhelm them with too few.

Here’s an example of an “almost plain text” email from Guitar Zoom. I count 19 lines of text on this desktop version of the email and 167 words—right around the sweet spots from the studies cited above.

Around 20 lines is the sweet spot.

The principles of 20 lines/200 words still apply in a graphics-heavy email, too. Here an email from Tattly that still has approximately 20 lines (though that varies based on screen size) and 164 words—they’re just spread out among lots of pictures.

A 20-line email that's graphics heavy.

As you’re writing your email copy, don’t forget the mobile experience. (Expect to see phrases akin to “don’t forget the mobile experience” a lot in this lesson.) With smaller screens, more text means more scrolling—so put your best and most important information up top, and don’t go on too long.

Images

Images are an indispensable part of pretty much all forms of marketing, and email marketing isn’t an exception. Studies have found that people’s eyes gravitate to images. Visuals increase the likelihood of someone reading an email by 80 percent, and 65 percent of people prefer emails with mostly images versus 35 percent who want mostly text. 

Use a limited number of images

As valuable as images are and “a picture is worth 1,000 words” is a universally-recognized cliche—you don’t want to use so many images in your email that they lose their effectiveness. One study analyzed more than two million emails and found the click-through rates were highest when emails used three or fewer images.

And that makes sense. You need to give people something to focus on, rather than bombarding them with too many things fighting and pulling their attention in different directions. Plus, as more people check their emails on smartphones, limiting the number of images translates better to smaller screens. With responsive designs, often, images that appear side-by-side on a desktop will shift into a stacked single column on mobile. When that happens, it takes a person a lot of scrolling to get past all of those images to the rest of the email, including, in many cases, the call-to-action.

A big consideration, especially on mobile, is the load time for your email. The average email has more than two megabytes worth of images. Those will usually load instantly, or at least quickly, for a computer on a home or office network—but could be much slower for someone on mobile, depending on their network speed.

As studies have repeatedly shown—and your personal experience will certainly tell you—people have no problem quickly clicking away from something that’s loading slowly. For emails, conversion rates begin to plummet after an email takes more than 2.1 seconds to load.

Optimize your email images or your load times will increase—and conversion rates will drop.

Using a limited number of images and optimizing them to reduce file size could pay off with more clicks and conversions on your emails. 

Use images that are complementary to your text

While people’s eyes are drawn to images and they serve an important purpose in grabbing attention and converting, they shouldn’t totally dominate your text. The recommended ratio is 80 percent text, 20 percent images—and the ratio should never skew past 60:40 text-to-image.

Emails that are all images can go directly to spam. Emails that are nothing but images are a hallmark of spammers, and email clients have been trained to, by and large, redirect those emails into the spam folder.

Images could be turned off. Some people and email clients keep images turned off by default. You don’t want your email to look like a bunch of empty spaces with only a handful of words when those people look at them. Your ideal goal is an email that still looks alright and, more importantly, makes sense when the images aren’t present.

Here’s an email from a major national brand. When I turned images off, the email was completely empty.

An email with no alt text.

As a contrast to that, here’s an email from Jetsetter with the images off. While it doesn’t look fantastic—it’s hard to make an email that has images look fantastic when they’re stripped out—at least it still gets the intended point across. I don’t get the image of the destination, but I see the headline, description, discount price, countdown clock, and call-to-action button. Will it sell? Doubtful. But unlike the email above, it seems more likely that this email would inspire some people to click the option to turn its images on—and then it might sell.

Good alts make an email understandable without images.

One good way to keep your emails at least somewhat viable when images are turned off is by making sure all of your images have ALT tags. Those will display on email clients where the images are blocked, and give a quick description of what the person would be seeing if images were allowed. They’re also very important for blind or disabled people using screen readers

Make sure your ALT tags are descriptive to avoid a situation like this. In this email there are ALT tags, but they’re not really any better than no ALT tags as they don’t describe the pictures or products.

Use descriptive alt tags.

NBA Shop does a thorough job with its ALT tags, using them to ensure you know exactly what the items are when images are off. These ALT tags, as we said, would also be very helpful to a visually-impaired person using a screen reader. (Everything in blue below is an ALT tag.)

Thorough alt tags help an image-less email.

While these ALT tags from the NBA Shop are certainly far better than the ones in the previous example, they could still be better. By using plain, descriptive language that describes the image in an actual sentence, someone using a screen reader would have an even easier time navigating the email. 

Make your images enticing

You want your photos to resonate with your customers; to catch their eye, elicit a response, motivate an action. Not every image will do that.

Beware of stock photos. It’s tempting to use stock photos, especially now that you can get tons of really nice, professional stock photos for free. But watch out. A study found that stock photos are actually a turn-off to a lot of people. Customers crave authenticity from brands—and stock photos are pretty much the polar opposite of authentic. And while marketers lean on stock photography more heavily than any other type of image, only 7.6 percent say stock photos get the most engagement compared to other types of visuals.

Although it requires extra effort and expense, the numbers show that original photography and graphics will serve you well. 

Look at how effective this custom image is from Yeti. They could’ve used a stock photo of a mom with kids at a beach (and maybe even Photoshopped in one of their products) but, instead, every aspect of this original photo enhances the exact marketing message they want. They show a mom who’s young and hip (foot tattoo!) but not too young and hip (hair up, realistically a little frazzled). She’s multitasking like every mom—the baby on her back while she tends to her older kid is a nice, accurate touch. But her Yeti cooler bag looks convenient, comfortable, and extra functional—it even kept that drink cold for her son. And he’s so happy he’s giving her a kiss. Even the beach they chose her isn’t an exotic, tropical setting—it’s nice, but it’s a realistic-looking local beach. This custom picture celebrates the exact mom (and target customer) they want to celebrate, connects with her, and sells a product to use in her regular life.

Using a custom photo can sell your products better than stock photos.

But if original photography is an expense and endeavor that you can’t currently handle and you have to use a stock photograph, search long and hard to find one that feels as close to authentic as possible for your brand.

Use the best possible photos of your products. If you’re showcasing your products in your marketing emails—and, odds are, you are with at least some of your emails—you need the pictures of your products to look amazing. Two-thirds of customers say the quality of product photos affects their decision on whether to buy. It’s not an area to cut corners. (For some help, here’s our guide to product photography.) 

And one other little thing you shouldn’t overlook: If you put a picture of your product in an email, make sure that picture is clickable. After all, if someone is enticed enough by one of your product images that they want to click on it, they should be able to, and it should take that person to directly to the product page where they can buy it.

The pros and cons of GIFs

As GIFs continue to become more popular online—I’m not sure anyone even remembers how to communicate without them—they’ve also become more popular in email marketing. As of a 2018 study, only 21.2 percent of brands said they never use animated GIFs in their marketing emails—and 20.5 percent use them “often or always.”

Are GIFs right for you? Here are the pros of using GIFs in marketing emails.

They get results. Studies have found emails with GIFs see click-through rates increase by up to 26 percent and revenue go up 12 percent.

They’re eye-catching. Motion catches the eye. When you use a GIF, you know where your customer is going to look. This GIF from a Forever 21 email for March 14th (“Pi Day”) is definitely attention grabbing—it’s hard to look anywhere but at the headline and sale price. This GIF is also just three frames looping, making it a very lean 80 kilobytes (GIFs are often 10 or 20 times larger than that), meaning it isn’t going to affect load times like bigger GIFs. (See “They’re heavy files” below for more on the weight of GIFs.)

An attention-grabbing GIF.

They’re a good replacement for video. Video support across email clients and platforms is inconsistent at best. GIF support isn’t perfect (although, as of right now, the only common clients that don’t support GIFs are Microsoft Outlook 2007-2013), but it’s much better than video support. So if you want to use a motion in your email to showcase a product or demonstrate a feature, a GIF could be a more universal method.

Here’s an email from Speks that uses a GIF to show a preview of a longer instructional video on building a pyramid with their magnetic toys. It’s enough to give a taste of what’s in the video—maybe even enough for someone to think, “Yeah, I get it, no need to watch the video, I’ll just buy the product and do it.”

A GIF gives a short preview of a longer video.

They’re current. People, especially younger people, communicate in GIFs. By using them in your emails, you’re speaking to your customers in a familiar language and subtly bonding with them by demonstrating how you’re on the same wavelength.

Now… as good as all that sounds, here are the cons of using GIFs.

They’re heavy files. GIFs are generally big files, especially GIFs that look photo realistic. If you want to use them, you’ll need to optimize the files by using a tool to reduce the dimensions, number of colors, number of frames, and more. All of those things affect the visual quality of the GIF, and it may no longer look as good as you want once all the optimization is done.

They won’t work for everyone. We said GIFs work in most of the common email clients today—but they don’t work in all of them. Microsoft Outlook 2013, for example, only shows the first frame. So first, make sure the first frame of your GIF looks good for the people on non-GIF-friendly clients. And second, test your emails with GIFs on different platforms yourself to make sure they’re working like you want them too.

You don’t want to come off like you’re trying too hard. The “How do you do, fellow kids?” meme mocks brands that blatantly try to appeal to younger customers by using modern slang, trends, and images. If you use GIFs without a genuine understanding of how those younger generations actually communicate with them, you could fall into “Fellow kids” territory—which isn’t where you want to be.

For the sake of full circle irony here, we’ll include a GIF of the scene from 30 Rock that inspired the meme.

Pros

Cons

They get results.

They're heavy files.

They're eye-catching.

They won't work for every email client.

They're a good replacement for video.

You don't want to come off like you're trying too hard.

They're current.

Call-to-action

Every marketing email needs a call-to-action (CTA)—a message directing subscribers toward an action you want them to take after they’ve read the email. The design of your call-to-action goes a long way toward earning that click.

Call-to-action buttons versus links

A call-to-action text link can work—in an email that’s plain text or mostly text. But, by and large, a call-to-action in the form of a button is going to work better—click-through rates are 28 percent higher with buttons over text links.

According to a study by Really Good Emails, 56 percent of emails only have one call-to-action button. 24 percent contain two. So, added up, four out of five emails have only one or two calls-to-action. It’s smart to limit the number of CTAs in your email because you want your call-to-action to really stand out (as we’ll dig into next), and too many buttons obfuscate that intention.

Here’s a Valentine’s Day email from Macy’s that has… well… more than a couple of call-to-action buttons. They likely did that because their product line is so huge, but the result is pretty overwhelming—and also inhibits their use of enticing text on the call-to-action buttons, as they only have room for the most basic descriptions.

Lots of CTA buttons in one email.

As for where your call-to-action button should appear in your email… well, that varies based on the content, your business, and what you’re promoting in that specific email. 38 percent of emails have a CTA in the top third, 27 percent have one in the middle third, and 35 percent have one in the bottom third.

Top third

Middle third

Bottom third

The CTA is at the top. While the products underneath are all individually clickable, the main call-to-action is the button directing people to “shop now” and goes to the main page of the site.

Old Navy has a lot of products to offer and, as a result, a lot of calls-to-action. The first, however, isn’t featured until the midpoint of the email, when the most important deal has been presented fully.

The main CTA (“SHOP EVERYTHING”) as well as the smaller buy buttons don’t come until the bottom third of this email. It’s from a smaller brand and features lots of information and a personal message—they don’t make the ask and try to sell until after that message is delivered.

Make your button stand out visually

Your call-to-action button needs to stand out visually, because it’s where you want a reader’s eyes to eventually settle. There’s a principle called the Von Restorff effect that says when there are multiple, similar objects, the one that’s different from the rest is most likely to stand out and be remembered. In other words: If your call-to-action looks different than the rest of your email, it’s likely to be seen and hit its peak effectiveness.

Here are some ways to make it stand out.

Color. A study found the most common colors for call-to-action buttons are orange, blue, red, and green but, really, any color works—as long as it contrasts with the colors in the rest of the email. Here, Sperry uses a strong orange CTA to stand out from the more neutral tones in both its products and its color palette.

A CTA that's a contrasting color really stands out.

But if your email is heavy on bright colors, maybe you use black or white to provide contrast. For instance, the black call-to-action button in this abandoned cart email email from the sunglasses brand Knockaround stands out prominently against the bright-colored gradient of the background.

Use a black CTA to contrast with bright colors.

And these two white call-to-action buttons pop in Godiva’s holiday-themed email.

White CTA buttons can also work against bright but darker colors.

If you’re having trouble figuring out where to get started with your CTA button color—look to your brand’s palette. Almost half of brands use a color from their logo as their CTA button, as they know it works well with the other colors they use in the email and helps reinforce their visual identity. As long as you aren’t overusing that color elsewhere in the email, which would prevent your call-to-action from standing out, incorporating a logo color can be a good way to delicately tie the call-to-action back to the brand. That could resonate with a connected, engaged customer. 

Here’s an example from Staples that uses the red from its logo to add emphasis to its two calls-to-action (and to two mentions of free delivery).

Using a CTA that's the same color as the brand logo.

White is the most popular text color on CTA buttons, which makes sense—since the buttons are often bold, bright colors, white provides a nice contrast and shows up well.

White space. When you set your CTA button off with white space, it helps give it a visual importance and keeps it from getting lost or muddled among the other content on the page. The more white space, the more significance something feels—so give your button enough of a halo to really help it stand out.

In this email, Campmor has two CTA buttons both surrounded by quite a bit of white space. In both cases it makes the buttons feel important and draws the eye so they’re hard to miss.

CTAs surrounded by white space have more importance.

Arrows and other visual guides. Another way to make a CTA button stand out is by literally having an arrow pointing at it.

Does it work? One study found a button performed 12.3 percent worse without an arrow. This seems like a particularly good chance for an A/B test—try a button with and without an arrow and see if it makes a statistically significant difference with your audience. (It’s important to note that tricks like this rarely work forever. While you may see an initial burst in clicks by adding arrows to your CTA buttons, that effect will likely wane as you deploy your arrow-filled buttons for months on end.)

Here’s a subtle example where an animated arrow in the CTA button draws the eye to make it more enticing to click.

An animated CTA button draws the eye.

Button size and style

Your buttons should look like buttons. There’s a psychological principle called pattern matching that describes how our brains are always looking for things we recognize. We know buttons, and online, we’ve been conditioned to click on buttons to make things happen (and offline, say, to go up on an elevator or change the station on a radio). It’s why your buttons need to look like buttons—that will make them feel subconsciously familiar, and more clickable.

Shape. For your button shape, rounded corners are the most popular—possible because it looks the most “button-like.” According to the Really Good Emails study, 54 percent of emails have rectangular buttons with rounded corners, 28 percent use completely square corners, and 18 percent use a pill shape.

Rectangular with round corners

Square corners

Pill shape

Size. When it comes to size, the average is around 48 pixels tall. That falls in line with a popular modern axiom which is: Make the button around the size of the average fingertip. Apple recommends that buttons be at least 44 pixels high to accommodate adult finders, and Google recommends 48 pixels. 

The ideal CTA is the size of the average fingertip.

You can make your button larger than that, but be careful. As it gets bigger, it stops looking like the buttons we’re familiar with—and might look spammy as well. One A/B test found that roughly doubling the height of a button led to a 10 percent decrease in clicks. And only four percent of brands make their buttons extra-wide, which also makes them look less like buttons.

We’ll cover how to approach the text that goes on your buttons in our section on email content.

Summary and implementation

Summary

Smart, strategic design can help you achieve maximum effectiveness from your marketing emails. That means every choice in your design should be intentional and serve a specific purpose.

The main building blocks of your emails are:

  • Headline. A big, bold headline grabs your subscriber’s attention and makes them excited about reading on.
  • Copy. Your copy should say what it needs to—and not more. The ideal length for marketing emails is around 20 total lines or around 200 words.
  • Images. Make every image count and don’t overload your email with them. Make sure they’re complementary to your text, don’t slow down your load time, and do an amazing job showcasing your products.
  • Call-to-action. Use a call-to-action button that looks like a real button and stands out from the rest of your email.

Implementations

Step 1: Design your email

  • Use a big, bold headline.
  • Use a limited number of images that look great, properly complement your text, and showcase your products in an ideal way.
  • Keep your copy to-the-point.

Step 2: Emphasize your call-to-action

  • Have a prominent, enticing call-to-action that stands out visually through color, white space, and design.

Subscribe to the Jilt email list

For more tips on design and everything else related to email marketing and eCommerce