The previous lesson, on email design fundamentals, covered the major building blocks of your marketing emails: headlines, text, images, and calls-to-action. This section is all about how to best organize and design them to maximize their impact.
While this lesson is on advanced email design techniques, it is not intended to be prohibitively complicated for people just starting out with email marketing. There are two reasons: One, some of the techniques discussed in this lesson should primarily be handled by your email service provider (Jilt, for example, handles responsive design and our pre-built templates take visual hierarchy into account). And two, you may find a lot of the techniques here are things you do instinctively as you design an email.
In this lesson, we’ll cover using responsive design that looks good on any screen size, break down the different types of email layouts you can use to present information in an optimal visual hierarchy, and discuss some color theory to help guide the color choices you make in your emails.
Your marketing emails need to look good on screens of all different sizes. And while you’ll probably create your design on a desktop, that’s not how the majority of your subscribers will see it. The majority of emails are now opened on mobile devices first, and smartphones now account for almost half of email-driven orders. And those numbers are both climbing, as people gravitate more and more toward their phones.
A responsive design is one that automatically adjusts to the screen size it’s being viewed on and looks good no matter the size or shape of the screen. To accomplish that, designs might do any or all of the following:
- Adjust the layout, from columns side-by-side on desktop to stacked on mobile.
- Change the navigation, sometimes shrinking it down to a hamburger menu.
- Grow or shrink text.
- Grow or shrink images.
- Add or remove padding and margins.
- Change or hide content.
Fortunately, responsive design is common these days, baked into the default templates on most email marketing platforms. (At Jilt, for example, all our default templates are fully responsive.)
Mobile first design
There are two design methodologies for creating a marketing email (or website, app, or any other online product): Progressive advancement and graceful degradation. Progressive advancement is “mobile first” design—you start by designing for the smallest screen on the least sophisticated platform, then design “up” for the larger screens and more advanced features of tablets and computers. Graceful degradation is the opposite—design for the biggest, best platform first, then restructure and reduce as you move down toward smaller and smaller screens.
It’s easier to make an email look good, function well, and effectively serve its purpose (sell, promote, or inform) on a larger screen. The real challenge is achieving all of those things on a small screen without lots of screen real estate or bells and whistles to play with. So design your emails for mobile user who isn’t up on the latest technology—the person on, say, an iPhone from four years ago—and after you know the email will look good for them, advance to bigger screens.
Here’s an email from Herschel Supply Co. that appears to have been designed for mobile first. (The screenshot is from the desktop version—although it could be from mobile, as that looks identical.) The email is minimalist—notice the very stripped down nav bar on top featuring just two choices and a small logo, limited text, big pictures, and prominent calls-to-action. The images are sized so they’re full width on a mobile screen and spaced such that on most current smartphone screens, each “section” of the email fits nicely on the screen. Herschel’s demographic is younger, which certainly steered the decision to optimize for mobile first and desktop second.
One top-loaded column
On the desktop version of your email, you may have products side-by-side. On the smallest mobile version, those will probably stack into one column.
That means two things for your design strategy. One, you need to make sure your email still functions effectively when it’s one long column rather than multiple columns side-by-side. Two, it’s going to take someone longer to scroll through your email—so make sure to top load the key information. Aim to keep the most important elements in the top half of your email so they aren’t wasted if someone gives up on scrolling.
White space and breathing room
There’s a delicate balance with mobile-friendly emails—you want to use white space to keep things from looking too cluttered, to add a sense of importance to your call-to-action button, and to fit the modern, sophisticated design styles people expect. Plus, since people on mobile devices are tapping links rather than clicking them with a mouse, you can’t have your links too clustered together—they need breathing room to avoid accidental taps.
In this example, the email isn’t mobile-optimized (the screenshot below is of just one screen on my phone). So while those small, clustered call-to-action buttons and links might be fine on desktop, they require quite a bit of precision to tap on mobile—and that’s if you even notice them—they’re pretty tiny on the screen and not set apart from the content with any white space.
But white space on mobile has its downside, too—you’re dealing with limited real estate. You don’t want so much white space that your email looks too sparse and takes three minutes to scroll through on a phone.
Unfortunately, there’s no real magic bullet here other than testing your email on different platforms and trusting your eyes that the white space looks right and will function correctly. Make sure, however, not to neglect it entirely—the negative space in the email can be just as important as the content.
Hide non-essential elements on mobile
The goal of a marketing email is to drive a subscriber toward taking an action. It’s best never to muddle that focus too much—especially not on mobile. On a smaller screen, minimalism is better; extra buttons and clutter are more distracting and get in the way.
So with your mobile design, consider whether you really need a navigation bar at the top. Or social sharing buttons. Or an Instagram feed with a bunch of photos halfway through the copy.
Non-essential elements can also include fonts. As mobile email clients become more sophisticated, they’re becoming better and better at accommodating custom fonts—but make sure the areas where you use custom fonts look passable if the email client defaults to a web-safe font.
This email from Leader Bag Co. is using the most basic web fonts possible: Arial, Times New Roman, and Courier New. But by playing with font sizing and letter spacing and giving the copy plenty of breathing space, the email still looks highly stylized.
Visual hierarchy is the way design influences what material we choose to look at, read, or absorb—and how we perceive its relative importance. When you’re designing your emails, you need to keep the visual hierarchy in mind—it’s how you take the person reading your emails on a journey through what you’re presenting and, ultimately, guide them toward taking the desired action.
There are four prominent design layouts you can use to convey a visual hierarchy in your emails. Here are the basics on all four, as well as the scenarios in which they’re best.
The reverse pyramid design method puts key information at the top of a, well, reverse pyramid, then guides the eye down toward the call-to-action. We’ve added the pink triangle in to the email below to show the reverse pyramid in action.
The reverse pyramid has three levels main levels, each of which has a specific purpose.
Level 1: Grab their attention. Usually this means a large picture and/or headline at the top, taking up the full width of your email. This is often referred to as the “hero” section and is designed to grab the eye.
Level 2: Build anticipation. On the next level down, you’ll have a sub-headline or a short piece of copy, usually not quite taking up the full width (it’s the “middle” of the upside-down pyramid). It reinforces what was displayed in the picture or stated in the headline, succinctly elaborating on the value proposition offered by this email.
Level 3: Close the deal. On the final level of the pyramid, you’ll have a call-to-action button, centered, ready to be clicked.
The reverse pyramid keeps your email focused and direct. It gives the elements in the pyramid an importance, quickly leading the reader, both visually and intellectually, from curious to intrigued to informed to ready-to-act. And it’s very responsive design-friendly—it follows a basic, single-column design pattern which should replicate well for different subscribers across all platforms and clients.
The reverse pyramid is ideal when you want someone to take one specific action. While it might not work for an email promoting lots of products, it’s excellent for cart abandonment, win-back, review requests, or promoting one product, category, or sale.
Here’s how Will Leather Goods uses a textbook reverse pyramid design on a pre-Valentine’s Day email designed to accomplish one goal: Induce a click (and make a sale) by creating a sense of urgency. They use a bold, eye-catching, urgency-oriented headline that spans the width of the email. The calendar graphic below it is just slightly smaller. The copy below that is a bit narrower and both elaborate on the headline with additional info. Finally, the “bottom” of the reverse pyramid is the call-to-action button set apart by plenty of white (well, maroon) space.
The Z-pattern is built around the path our eyes instinctively take as we read through something. At least for languages read left to right, we start at the top left, scan across, then go down and back to the left. As we read through an email, then, our eyes are instinctively following a path of repeating Zs.
The Z-pattern is best when you have multiple things to present in an email—mainly pictures, with some (but minimal) copy. Ideally, you want to follow the same principles behind the reverse pyramid. The beginning of the Z grabs the reader’s attention… the middle of the Z presents more information to get them intrigued… and the end of the Z is a call-to-action.
Here’s how Torrid uses a stack of Z patterns to sell different outfits. Each “Z” takes a person through a picture, short description, and call-to-action button. By alternating whether the picture is on the left or right, they’re making sure their customers don’t wind up ignoring any piece of the email.
The F-pattern is a cousin to the Z-pattern, but while the Z is good for an email with minimal copy, the F is good for an email with maximum copy. That means it’s going to work best for your newsletters, heartfelt personal-style messages, plain or limited text emails, and other copy-heavy emails.
The F-pattern is based on how our eyes move when we’re presented with a dense amount of text. We read across the top of the page (generally a headline), then skim down the left side a bit, and read across again when something catches our eyes (often at a sub-headline). Then, finally, we’re back to skimming down the left. It’s human nature to skim—when we see a dense brick of text, we naturally weigh the interaction cost and want to quickly get the highlights without committing the time or effort to reading every word.
There are a few implications from F-pattern-style information absorption. One, people are going to read the first few lines of text in your email more than any others. Two, everything on the left of your page is going to get more attention than everything on the right of your page.
So if you do have a text-heavy email that naturally takes the form of the F-pattern…
- Put the most important message at the top and in the first few lines.
- Use headlines and subheadings to keep people’s eyes going horizontally.
- Don’t expect every line of text will be read.
- Have your call-to-action aligned at the left of the page.
The Gutenberg Diagram divides information into four quadrants, again based on how we’re instinctively inclined to read things.
If we’re presented with a square divided into fourths, all of which look relatively similar, we look at the top left square first… then the bottom right. We give much less attention to the top right square and the least attention to the bottom left.
That makes the Gutenberg Diagram useful when you have a lot of dense content to pack into an email; it’ll help you decide which items to place where, based on their importance.
Since Target always has a ton of stuff to promote, it leans heavily on Gutenberg Diagrams for its marketing emails. You can gauge what they think is most important by how they position items in the email. Below, the Apple Watch is clearly the most important item based on the size of the picture and its location. The next priority is “taste testing,” as the blue-backgrounded image is in the bottom right and stands out from the pink tones that dominate the rest of the emails. The other products are less prioritized.
Even if you don’t want to use the Gutenberg Design for your entire email, you can employ it as an effective technique to hard sell a single product. Look at how Unbound Merino promotes a shirt in this top section of one of their marketing emails. You look at the top left quadrant first, which shows the shirt—and the model’s eyes literally follow an imaginary Gutenberg Diagram arrow pointing to where you’re supposed to look next: the call-to-action in the bottom right. From there, your eyes might glance up and see the text in the top left—but everything about this email design is oriented toward making sure you don’t miss what’s most important and wind up on the call-to-action button.
Other visual hierarchy techniques
While those four are the main design hierarchy patterns for your marketing emails, there are other little things you can do, regardless of design pattern, to help the right content and elements stand out. Here are some ways to indicate the importance of an element:
- Size. Larger items are viewed as more important than smaller ones.
- Prominence. Things at the top of your email come off more important than things at the bottom.
- Color. Bright colors and contrasting colors draw the eye.
- White space. White space around an element implies it is more important than the things around it, which is why white space is especially crucial around call-to-action buttons.
- Font style. Bigger text is more important than smaller text. Bold text is more important than italicized text which is more important than un-decorated text.
- Shape. Text that’s on a curve or diagonal stands out from text on a straight line.
Color really serves a twofold purpose in your marketing emails. One, to make them look good, match your brand aesthetic, and help different aspects stand out. Two, the colors you send signals about your brand, who you’re targeting, and what emotions your products are meant to convey. In other words, color choices should be thought out and intentional. They do matter, too; 85 percent of people say color is the most important factor for choosing products.
The first place to start as you build your color palette is your brand’s logo. Color increases brand recognition by up to 80 percent; there’s a reason that Target’s emails are filled with red, Best Buy’s are filled with yellow, and Home Depot’s are filled with orange.
But you shouldn’t just go with your brand’s signature color. You can pick other colors to work in tandem with your logo, colors that will help your emails look good while also subtly broadcasting a vibe to your customers.
There are five main rules of color theory which you can use to decide on the colors for your email.
Complementary. Colors at opposite positions on the color wheel. These colors contrast well and are good to help elements stand out.
Analogous. Three colors next to each other on the color wheel. They work together harmoniously and look great together, but it can be hard to create contrast between them.
Triad. Colors that are all equidistant from each other on the color wheel in a triangle pattern. The triad generally produces interesting combinations of colors that don’t seem like they’d work well together, but do.
Split complementary. Pick one main color, than look for its complementary color on the opposite side of the color wheel—but instead of choosing that color, choose the two surrounding it. Then use your main color as the primary color in your email, and use its split complements for accents and contrast.
Rectangle and square. Pick four colors on the color wheel using a rectangular or square pattern. This volume of colors can get a little overwhelming, so these color theory techniques are best for more advanced designers.
Regardless of which you choose, you’ll find yourself needing to designate one color as your primary color and use the other or others for contrasting elements (links, headlines, and, especially, calls-to-action). Contrasting colors are how you attract someone’s eye to something important, so use them judiciously and wisely.
Color preferences by gender
You want to pick colors that appeal to your primary audience. If your eCommerce store leans heavily toward women or toward men, your color choices should reflect that. And one study found there are some notable differences in the color preferences between men and women.
There are also some important differences in the least favorite color for men and women.
What do those results tell us?
- If your customers are primarily women, your best bets for color are blue, purple, green, and red.
- If your customers are primarily men, your best bets are blue, green, black, and red.
- If your customers are a mix of men and women, your best bets are green, blue, black, and red—and avoid purple and silver/gray.
- You should probably stay away from brown and orange.
The emotions of color
We buy products based on emotion. There are plenty of different ways to convey emotion through your copy and photos, but the colors you pick can play a role as well. Here are the feelings we get when we see different colors (based on the results of studies you can read here, here, and here). Use this information to aim for the correct tone in your marketing.
While your email service platform may handle some of the advanced email design techniques for you, like responsive design and visual hierarchy, it’s still good to be aware of the techniques to make sure they’re working correctly in your emails.
Responsive design is more or less non-negotiable in this era, as people check emails on phones, tablets, laptops, small monitors, large monitors, and everything in between.
- Design mobile-first. Make your email look great on a small screen and it’ll be simple to make it look good on a bigger one. It’s tougher to go the opposite direction and make an email designed for a big screen look great on a small one.
- Load up the top. On small screens, your columns will most likely go away and everything will be stacked in one big column. That means a lot of scrolling to get through the whole email—so put the best stuff up top.
- Keep it simple. Consider hiding non-essential items on smaller screens as to not distract your customers.
You’ll also want to pick the right visual hierarchy pattern based on what type of email you’re sending.
- Reverse pyramid. Good for simpler emails focused on guiding a subscriber toward taking exactly one specific action.
- Z-pattern. Good when you have multiple things to present in an email; mostly pictures, less copy.
- F-pattern. Good for newsletters and other text-heavy emails.
- Gutenberg Diagram. Good when you have a lot of dense content to pack into your email and you want to prioritize what your customers focus on.
Regardless of which one you pick, you can give a sense of prominence to different elements in your design by making them larger and placing them higher up in the email, using bright colors, surrounding them with ample white space, and using larger, bolder fonts.
Finally, you’ll want to select colors that work well together and convey the proper emotion for your brand and your message.
- Complementary colors. Colors that are opposite from each other on the color wheel contrast well and help make elements stand out.
- Analogous colors. Colors that sit next to each other on the color wheel and work together harmoniously.
- Triad of colors. Three colors, equidistant from each other in a triangle shape, that produce interesting combinations.
- Split complementary. A good way to pick a primary color and two secondary colors across the wheel for accents and contrast.
- Rectangle and square. Four colors that sit on the wheel in a rectangular or square configuration. Good if you need a lot of color choices, but can be tricky to properly employ.
When it comes to picking the colors to convey emotions, there are also a number of factors to consider.
- Both women and men like blue, green, and red. Women like purple a lot more than men, and dislike silver and gray a lot more than men.
- Neither gender seems to love brown or orange.
- Each color has different connotations that can work for your message, for example, red for energy, green for harmony, blue for trust, and black for authority.
Step 1: Make sure your email is responsive
- Check to see if the templates provided by your email marketing platform are responsive (Jilt’s are)
- If you are writing the code on your own email, make sure to keep it responsive by designing mobile-first then scaling up
Step 2: Pick the right visual hierarchy style and design for your email
- Check the visual hierarchy guide to determine what will work best.
- Find a design template (or make your own) that matches that style and is responsive.
- Choose the colors you’re going to use for the message based on color theory and psychology.