Back to Blog

Email Design 101: How to Put Together Emails That Work

Jonathan Powell

Chances are, if you have an email address, you’ve probably received at least one cringeworthy email.

Even in the age of accessibility, convenience, and widespread knowledge of best practices, plenty of folks still seem to make bad design choices when it comes to email—and if you’ve ever received one with a broken personalization token like “Hey [FNAME]!”, had to scroll for days, or wondered why there are 600 images of generic, way-too-happy people staring at you, you know exactly what I’m talking about.

To be fair, not every business has someone in-house with enough knowledge or ability to design, code, and compose a sparkling series of emails. Fortunately, there are a handful of handy drag-and-drop email editors that minimize the technical aspects while providing you the ability to quickly and easily assemble just about any style you need—but you still need to understand the basics of design to execute them effectively.

The purpose of this blog post is to provide you exactly that—actionable advice that you can directly apply to your future efforts—so you can stop making those all-too-common mistakes and start leveraging good design to create better, more beautiful, and more effective emails.

Email design 101

Paper emails fly off of a keyboard as a writer touches the keypad and ideas flow.

Design for all devices

According to Statista, there are now 3.9 billion global email users—literally half of the world’s population. Given the variety of manufacturers and models on the market worldwide, that also means people are accessing their email from a variety of different devices, each with their own display dimensions.

While there’s no true one-size-fits-all solution for this very reason, working with responsive email templates—those that dynamically accommodate for the screen they’re viewed on—can go a long way in helping you to compensate for those differences.

In fact, plenty of email marketing platforms offer the ability to preview email drafts across various types of displays from smartphones and tablets to desktops, and it’s vital that you keep this front of mind when designing. After all, alienating a large part of your audience with a design that showcases a lack of consideration for them won’t likely reflect well in your engagement metrics.

To make the most of your email sends, make sure you preview them on every device your platform allows. If you’re limited in that arena, try sending test emails to coworkers with different devices to see how they display, make note of any changes that need to be made, then test again. While it might add a bit of extra work, you’ll at least gain some assurance that they’ll arrive in the same shape you intended them.

For even more granular tips on how to make your responsive emails shine, those at Invision take it one step further, such as sticking to 13-14pt type for body copy, no less than 20pt for titles, and keeping your CTAs above the fold.

Two women work together on a UX mobile design on a whiteboard with paper cutouts of articles and graphics.

Create an intuitive layout

Even someone without a design background usually knows when an email looks off or clunky—it’s apparent when something clearly lacks balance or is awkwardly weighted.

While there’s nothing wrong with putting messaging first, it’s important to remember that how you present information is often just as important as the information itself. Building walls of text or plastering photos in your emails like a bad yearbook collage will take away from what you’re trying to deliver.

That’s not to say there isn’t room for creativity, but like most creative endeavors, it’s important to know the rules before you break them and have a good reason for doing so. Should you decide to stick to a more traditional layout, there are three simple methods you can try.

A desktop compute with a single column of content displayed on the monitor.

The one-column

This is the simplest and most common email layout. It focuses on keeping both text and images uniformly justified and of similar or consistent width to ensure easy digestibility and therefore, scrolling and engagement.

This is also a great layout when you want to keep your mobile users top of mind. Having a single column makes it easy and fast to scroll through and skim—which is all most readers do these days.

A monitor displays cascading content in a single column.

The inverted pyramid

For emails with a singular focus or limited information to deliver, this is often the most effective—though it can also be effectively deployed sectionally. The inverted pyramid usually starts with a full-width image followed by a trim, centered copy block and finally a CTA, thus forming its namesake. It’s visually stimulating, easily incorporates both aesthetics and function, and makes for a nice, clean look.

“Ideally, your email should have a logical flow that catches readers’ attention and helps them understand what you want them to do. The inverted pyramid method is a design technique meant to do exactly this—grab attention, excite readers, and then guide them to take action. It’s a framework that gives emails focus and flow to give you higher conversion rates..” - Walter Chen, Stencil

An ipad displays alternating content in two columns.

The zig zag

Although employed in the other layouts as well, the zig zag most strongly plays to a classic element of design: eye movement. By alternating the way you present text and imagery, you guide the reader’s eyes naturally from left to right, then down to the left and back to the right, which is purposely very similar to the way we read and most commonly digest information. It can be a bit tricky to execute because it still has to look and feel intuitive while ensuring no information is overlooked, but a little testing should tell you all you need to know about its effectiveness.

This is a great layout for ecommerce, in particular. According to graphic designer Mary Stribley, “[An] angular layout is both enticing to look at as well as functional to order lots of information and imagery.”

A designer points to colors printed on a sheet of paper. He is surrounded by color samples and a color wheel on a laptop.

Calibrate your color palette

As simple as it seems, color is actually an immensely influential aspect of design when it comes to both surface aesthetic and psychology. To make an obvious example, imagine how you would feel if the company from which you normally buy your all-natural stress reducing vitamins hit you with an email chock full of neon colors. Not only are those colors not relaxing, but they’re not particularly natural either, at least not in the same way we consider earthy colors like pastel greens, blues, and browns. It would probably feel like you’re getting mixed messages.

While there’s a lot to consider, here are some quick tips on how to best use color:

A rainbow is crossed out as it has too many colors.

Stick to your brand colors and those that are complementary when possible. It’s easy, reinforces the image you’ve already established, and maintains consistency. That’s not to say you can’t reach into other palettes, but it’s important to know what will work for your brand and what won’t.

“Stick with 3-4 colors at the most, which is called a small palette principle. People generally like to combine colors that are relatively close or exactly match, with the exception of highlighting an element of contrast. Many people would like to see visual cohesiveness rather than a blast of color.” Lillian De Jesus, Stencil

Thee boxes of content that are hard to read due to a lack of contrast are crossed out. A simple box with black text on a white background is checked positively.

Keep things easy to read. Dark text on a dark background is hard to read and the same holds true in reverse for light colors. Don’t try to get too cute and change font colors too much. Not everything has to be black and white but make sure the colors you choose aren’t hard on the eyes and keeping recipients from reading further and engaging with the material.

“Don’t place red text over green buttons, don’t use white over grey. It may seem festive enough for people who have good eyesight. However, color blind people may not find our text legible.” Oksana Zhylka, Stripo

Create contrast. Proper contrast keeps things clear and easy, so no part of your messaging—or the motivation to read it—is lost. Make sure the most important elements clearly stand out from the background and provide clear direction, especially when it comes to CTAs.

This helpful article from ConvertKit shows how different colored buttons affect feelings and choice when browsing online. For example, blue stands for trustworthiness, loyalty and sincerity. It’s seen as an intellectual color that also has associations with communication, logic and coolness. Each color carries its own connotations and strengths you can play to, so keep this in mind when creating visual CTAs.

Create an image with your images

Outside of layout, images are usually the first thing people notice when they open an email. Why? Because most people are visual learners—images are attention-grabbing and easy to digest.

But that doesn’t mean all images are winners. After all, if a picture is worth a thousand words, imagine what those words are when you choose the wrong one.

Unlike words, where the language has to be original and on-point to appropriately deliver your branding and message, images are more challenging because they take more than the simple thought + word processor combination to create, they can sometimes be a pain to source depending on your niche, and they’re also more likely to be interpreted in a wider variety of ways.

Because images are less direct than words, they do—and should—take a bit more consideration.

To get the most out of your image usage, consider these helpful tips:

A popular meme with an old man making a fake smile, holding a coffee mug, using a computer, implies that he is dead inside but still able to get out of bed. On the right, a thirty-something types away at a laptop near an urban center, presumably while inside a cafe. He is calm, relaxed, concentrating, and likely not dead inside.

Be original. Believe it or not, people can spot stock images from a mile away. That doesn’t mean there’s always a negative connotation associated with them, but spending the time and energy on custom images communicates your care and dedication to serving your audience something tailored specifically to them.

Should you not have the option to go all-original, the folks at Copyblogger have outlined some tasteful ways you can still leverage stock photos without losing authenticity.

A grid of boxes, yellow, blue, black, and white, are in a grid and imply cohesion in a color scheme as they go well together.

Stay on-brand and know your audience. Consider images an extension of your branding. They communicate messages just as effectively, if not more so, than the words themselves. Stick to colors, motifs, and styles that accurately represent your business and message.

“Think of your perfect customer: what is important to her? What does her day look like? If you can visualize that person and what they want, you can source better visuals that your audience will respond to. Understand and acknowledge your competitors and work to set yourself apart from them.” Meg Reid, 99Designs

Leverage images as supplements and complements—not focus. While visuals are good at grabbing attention, they shouldn’t be the only element that receives any. Images are too interpretive to stand alone as your messaging and can even create distractions, so make sure you only select those that reinforce, supplement, or complement what you’ve already put in text.

"!?" is hand drawn next to a loading screen on a phone, implying frustration as the page slowly loads.

Size matters. Super high-res photos look fantastic, but their render times can also turn your email into molasses. To get the best of both, use a universal file format made for mobility like PNG, keep the image resolution high but use CSS to display it at half size, especially for mobile. Aim to keep your images under 1MB and only use what’s necessary to deliver your message if you want to keep the total weight and load times down. There are also free image optimization and compression services online to help you quickly make unwieldy images more render-friendly.

“If you drop a huge image into your email campaign and fire it off to your readers, it can cause way more harm than good. The email will be slow to open, slow to load, and you could lose your readers’ interest before they’ve even had a chance to read the content. Not to mention clogging up your own media library with unnecessary file space.” Hannah Moss, Wildheart Media

Alt is key. For whatever reason, whether it’s platform, image source, connection, or anything else, not all images load. So when they don’t, having good alt text in place to describe what the image should be will save a lot of confusion, curiosity, and even possibly frustration, especially if it helps contextualize the text—and it’s a WCAG standard for accessibility to boot. Include it to ensure you’re reaching all of your audience.

To showcase the impact of a lack of alt text, the team at Uplers has even designed some clever A/B image comparisons to show you just how useful alt text is—and how ugly emails can be without it.

Two phones stand next to eachother. On the left, the phone displays a variety of awkwardly formatted photos with a "X" over the phone implying that it's wrong. On the right, a phone with even images that are wide-format pleasently fill the screen with symmetry.

Keep good ratios. While different experts have different opinions, a majority find the most effective ratio of text to image somewhere between 60:40 and 80:20. Good ratios improve readability, generally make for nice aesthetic balance, and leave more than enough room to properly deliver the message in whatever form it takes.

Find a reliable source. Even if you have plenty of time to plan your emails ahead of time, timeliness and efficiency are still important—and scrambling for the right photo every time you’re preparing to send something out is no fun. Save yourself time by building an on-brand library of good images or better yet, if you have the resources, create them yourself. Even if there’s something specific you need down the road, you’ll likely have already identified a reliable source online or created enough of your own images to make the process quick and intuitive, should you need to generate something new.

A popular meme of a certain Canadian rapper shrugs away from a message that reads, "Yo Drizzle! Sup. Join my MaKeTing, YO". Below that message the same certain Canadian rapper leans in approvingly and points to another message that reads, "13 Email marketing trends you must know".

Know your lines

It may not be the most glamorous element of your emails, but subject and preview lines are an integral part of good design. After all, if you don’t reel them in with a good first impression, what does it matter how gorgeous and amazing your emails are?

While your audience largely dictates what kind of tone you’ll want to approach with—serious, relaxed, funny, cute, straight-laced professional or somewhere in between—there are a few universals that regularly generate high open rates, such as using personalization, keeping things short and sweet, and creating a sense of curiosity, urgency, or importance.

In addition, here are a few more tips to help:

•Avoid using ALL CAPS

•Set expectations on what’s inside

•Employ action words/verbs

•Ask an engaging question

•Don’t overdo punctuation

Rounding it all out

Sending a well-designed email goes far beyond simply making it aesthetically pleasing. Creating something that’s simultaneously effective, meaningful, and well put-together takes a lot of consideration across the board. To round out all of the efforts we’ve outlined above, here are a few final notes to keep in mind when putting together your emails.

On a left column, three exotic texts are displayed ex.laiming "No, No, No." On the right column, three more simple fonts are discplayed, reading "Yes! Yes! Yes!"

•Waste not, font not. Not all fonts are supported universally, so if you’re using something niche, you may be at the mercy of having the email platform it’s displayed on change it to something else—which could potentially affect spacing, layout, and the overall look. To save yourself the hassle, try to stick to web fonts that most, if not all, email clients support.

A hand waves a sign saying "Get Yours!"

•Know the ABCs of CTAs. Akin to blog posts, the design and placement of CTAs in email is massively important to creating clear direction for readers. Make sure to place them where they’ll be seen, where they fit into context—whether that’s a text link or a visual CTA—and use compelling language to generate clicks. Better yet, A/B test multiple CTAs as well as different placements, colors, and language to see what’s most effective for your audience.

Two hands high-five.

•Voice value. If you want your audience to be engaged, deliver them value. Be genuine to yourself and your brand and use language that speaks directly to them so they feel both informed and part of the greater community. While it may not feel like a design element, having everything else in place and falling short here could compromise everything else you’ve built.

Need some help thinking of ways to add value? Here are some great options.

A phone on the left has "A" written on the screen. The phone on the right has "B" written on the screen.

•Testing, testing. Much like subject lines, there are plenty of facets of your email campaigns that you can A/B test and glean some serious insight from—so why not try? You might be surprised which small tweaks can create big results. At worst, even if you haven’t refined to the point of perfection, you should at least see what is more or less effective. Consider testing the following: Subject line, preview line, length, personalization, visuals, layout, style, and, as mentioned above, the placement, color, style, and language of your CTAs.

But don’t go overboard with your testing. According to Neil Patel: “The first step in setting up an effective A/B test is to decide what you’ll test. While you may want to test more than one thing, it’s important to only test one thing at a time to get accurate results.”

Each element is going to have a different effect on your open rate and conversion rate, so testing them separately is key to finding which is going to work best.

Three social media icons are displayed: facebook, twitter, and linkedin.

•Get social. Many businesses assume that since most of their emails are based on forms, opt-ins, sign-ups, or anything else of the like, that folks always know where to find them. But why not just make it as easy as possible? Include social links or better yet, buttons, so every recipient knows where to find you on the most applicable social channels.

Wrapping up

Good email design isn’t just about hitting a handful of marks, it’s about understanding how and why each element influences your end results—then optimizing accordingly. By carefully considering every aspect of how you put your messages together, from the subject lines, language, and imagery to ratios, layout, and sizing, you’ll drastically improve your ability to effectively communicate with your audience and create a lasting impact.


More from the Blog

Email Marketing Cost: What to Expect?

Want to start email marketing but don't know its cost? We've got you. This article uncovers the email marketing cost you should be expecting.

Read Story

Fashion Email Marketing That Outstands? Here’s How to Do It

Do you wish to create jaw-dropping fashion emails? Read this article to know the best practices for creating and sending fashion emails.

Read Story

Promotional Emails - Types, Steps, and Examples

Promotional emails - a budget-friendly marketing strategy to boost sales and build loyal customers. Read this article to learn more about them.

Read Story

Never miss a post.

Stay up to date with recent email marketing news, guides, articles and how-to’s on email design.
We will never share your email address with third parties.