← Customize 330+ templates for your next newsletter

Design Inspiration

The Ultimate Guide to Email Design Best Practices

The Ultimate Guide to Email Design Best Practices

As a marketer, you already know that email marketing is an essential ingredient for the health of your business — and that you need to use email design best practices to thrive.

Email marketing isn’t going anywhere. But how do you get people to actually read your messages — and, ideally, convert? The answer: email design. Read on for the lowdown on email layout, design and optimization so you can leverage the email design best practices of 2020 to wow your customers and get more conversions.

Step #1: Email layout and structure

The way you structure your email will depend on what type of message you’re sending. A transactional email, an email newsletter and a DEM email (direct email marketing) are all very different types of emails, and your layout needs to reflect that. Here are a few types of emails you might be sending to your customers:

 

  • Welcome emails. A welcome email should be concise, offering the basic information about your company.
  • Birthday emails. Send your customers an email on their special day that clearly explains your offer.
  • Feedback emails. An email asking for feedback from your customers should have one CTA that’s highly visible.
  • Re-engagement emails. A re-engagement email needs to grab the recipient’s attention. Accomplish this by putting your product photos — what they’re missing out on — front and center.
  • Upselling and cross-selling. Upsell emails (encouraging customers to upgrade) need to be highly personalized, while cross-selling emails (marketing a product that complements one already purchased) are most effective when they utilize a visuals-based layout without too much copy.

 

Here are a few tips to keep in mind as you begin to structure your message:

Email Layout

Your email layout is important when it comes to email design best practices. The layout of a message has a big impact on whether people will actually read it. Keep the following in mind as you consider your email layout options:

 

  • Modular structure. An email with a modular structure is mobile responsive, ensuring that recipients can view the message on any device. This email structure allows the message to be responsive and adaptable. Your email should also be no more than 600 pixels wide so people don’t have to scroll horizontally.
  • Orientation. The orientation of your email needs to cater to peoples’ reading habits. Most people skim an email instead of reading carefully. To make your email scannable, try using an inverted pyramid layout, Gutenberg diagram, F-pattern or Z-pattern (see detailed descriptions below). Clear subheadings and bulleted lists can help, too.
  • Rule of threes. Another way to keep your email layout simple and skimmable is to make the three elements of the message — headline, body copy and CTA — visible and clear.

Inverted pyramid email layout

An inverted pyramid email uses an upside-down triangle as its guide: It grabs your attention with a broad headline, explains more with a few lines of copy and then narrows in on the main CTA. This MealPal email showcases an inverted pyramid layout.

An inverted pyramid email uses an upside-down triangle as its guide: It grabs your attention with a broad headline, explains more with a few lines of copy and then narrows in on the main CTA. Click To Tweet

Subject line: STOP waiting in line and get 40% off

inverted pyramid email layout

Gutenberg diagram email layout

The Gutenberg diagram divides your email layout into a grid with four sections — primary optical (top left), strong fallow area (top right), weak fallow area (bottom left) and terminal area (bottom right). People’s eyes generally move in this pattern as they read, so using the Gutenberg diagram can ensure your email is easy to skim.

Gutenberg diagram

Source image

Z-pattern email layout

The Z-pattern email layout is effective because the zigzag pattern follows the path most readers’ eyes will take. Z-pattern messages are a great option for simple emails without much copy, where you’d like to highlight the CTA. Here’s an example of a Z-pattern:

Subject line: Load up on all your grooming essentials

z-pattern email layout

F-pattern email layout

Another common scanning pattern is the F-pattern, in which readers’ eyes move across the page in the shape of an F. With this pattern, people tend to catch the top headline, any bullet points on the left side of the page and subheadlines across the page.

Subject line: New arrivals | Sets to love

f-pattern email layout

Email layout is an essential step in email design best practices. Choosing the right layout can make an enormous difference in how likely your customers are to convert.

Header

A good email header gives the recipient important information about the sender, including the subject line, sender name and send date. Your preheader text is also a great place to include information that entices the reader to click. We loved the preheader text from this Pai Skincare email: “Bye dryness, hi hydration.”

Subject line: NEW hydration minis are here 

email design header

Body

The body text of your email should be engaging and personal, accurately representing your company’s personality and making a connection with the reader. Be clear about what you’re asking the reader to do and stay focused on your main message. Consider using a P.S. line, too — many readers tend to skip to the end of your email first, so a P.S. is actually highly visible. This message from Harry’s establishes the point of the email in the subject line and keeps the body copy along the same theme. The copy is clever and fun to read, getting the point across without being too promotional.

Subject line: Save some 💰, try a new look

email design best practices

CTA

The header and body of your email should lead the reader straight to the CTA button. Create a sense of urgency if you’re having a sale, and prep a specific landing page for this CTA. When you design your CTA button, make sure it’s bulletproof so it will render correctly in any inbox. And keep in mind that using descriptive CTA text instead of a generic phrase (“click here”) can encourage readers to opt in. Moleskine uses the words “Personalize now,” which helps the reader envision themselves purchasing the customized product.

Subject line: Unique notes 

email cta example

Footer

For brands, an email footer usually includes social media links and the business’ physical address, as Skillshare does here. Solopreneurs or CEO’s might craft their footer as more of an email signature with personal contact information. The footer of your email is also required by law to include a visible unsubscribe link.

email design footer

Learn more helpful footer tips in our blog post outlining best practices for email footer design.

Step #2: Visual design elements

When the structure of your email is ready to go, it’s time to consider what design elements to include.

Typography

Typography is an important part of your company’s visual branding. For the body of your email, use a font that’s easy to read. Header text can be in a stronger font. You’ll also want to consider font color, spacing and size. Don’t use more than two fonts — this makes the email unnecessarily complicated. And if you decide to use a custom font, preview the email on multiple devices. We love the simple but effective typography in this Tuft & Needle email:

Subject line: Save 10% on new sheet covers 

email font design idea

The best email design, directly in your inbox.

Color

Color is essential when it comes to how your customers view your brand. Use a non-white background color to make your email look like one cohesive image. Then choose accent colors (such as the shade of your header or CTA button) based on your brand colors and the email’s overall color scheme. For example, MealPal uses a pale blue background and adds a pop of color with the orange CTAs (which match the company logo at the top).

Subject line: NEW: groceries for 40% off with MealPal Market!

email cta design

Animated content

GIFs and videos are popular when it comes to email design best practices in 2020: 56.6% of email marketers use animated GIFs in their emails, and marketers can see 66% more quality leads each year when they use video. Animated GIFs can grab a reader’s attention; use them for humor or to demonstrate how to use your product. And if you choose to include video in your emails, create educational content and post it on your website or YouTube. Many ESPs don’t allow videos to play in messages, so sharing the video link is best.

Subject line: We’ve got Mother’s Day all wrapped up

email with gif example

email gif

Step #3. Optimize your email

Your job doesn’t end once your email is structured and designed. You must also optimize the message to make sure anybody and everybody can read it.

Responsive template

A responsive email template ensures that your message will change size to be viewed on any device. Since nearly half of all email opens take place on a mobile device like a smartphone, creating responsive emails is essential! Here at BEE, we have hundreds of responsive email templates that you can use to make sure your email design is mobile-first. Other ways you can make your email responsive: Utilize a single-column layout, include your primary CTA above the fold (like Petco does here) and preview or test the email before sending.

Subject line: Local pickup in 1-2 hours with new Petco curbside

responsive email design

Accessibility

Many people consume online information in different ways due to varying physical, mental or developmental abilities. For example, someone might use a screen reader that verbally reads them the text on the screen. To make your emails accessible to everyone, use real text instead of images and structure the layout of your message so it’s simple and easy to read.

All text should be sized 14px or larger. And make sure to add alt tags to your images to accommodate anyone who might not be able to see the photos or graphics; this text describes your images and is visible when the image cannot be shown (as shown in the image below). And keep your contrast high so it’s easy for readers to distinguish the elements of the messages. Who Can Use, a tool that shows you how people with visual impairments view different colors, can be a huge help in making your emails accessible.

One other email accessibility best practice is to keep your image size small (around 600px). You don’t want your email to be too “heavy,” with large images that might not load on all devices and ESPs. Small images are best.

Subject line: “Super steel” breakthrough makes for stronger and tougher alloy

alternate text example

Inclusiveness

An inclusive email is one that takes into account the many ways in which your audience is diverse — from gender and race to ability, culture, age and more. Your customer base isn’t made up of just one type of person, so your marketing emails shouldn’t be, either! Do your photos show people of different races, genders and abilities? Does your language reflect the reader’s location and any potential cultural differences? If you’re not sure, find someone who can look over the emails and let you know. Your company can also focus on hiring people with diverse backgrounds to help create content that’s truly made for everybody.

Subject line: Your practice, made softer-than-soft

diverse email marketing

Test your email

Don’t send your email without testing it first to make sure you catch any mistakes! Testing your email can confirm whether your message is mobile responsive. It also gives you a final chance to take in your color choices, images and text all together. When you design with the BEE editor, you can easily test your email when you’re through designing by sending it to yourself or previewing it on mobile (both found under the “Actions” tab in the upper left-hand corner of the editor). Most ESPs have built-in testing options too.

email preview

In addition to testing your email with an internal review, consider running A/B tests where two groups of subscribers receive slightly different emails. By doing this, you can see which variations of the message get the most opens.

Single CTA

As much as possible, stay focused on the message you want to send. Multiple CTAs in an email can actually hurt your conversion rate — having too many choices is overwhelming. Think about your primary goal for conversion (is it most important to you that people visit your website or social media?) and add that link to a single CTA. Then use CTA button design best practices to make your call to action as effective as possible.

Subject line: Hello, holidays! From our FreshFarm to yours 

email marketing best practices

Wrap-Up: How to use email design templates

Ready to create some effective emails? Use the BEE editor to help. Our hundreds of drag-and-drop, customizable email templates can give you a launchpad. Or opt for a blank template to design your own email from the ground up — no coding knowledge required. Put the email design best practices you’ve learned into action and start designing today!

Take a look at our Template Catalog!

Choose from hundreds of beautiful mobile-ready templates.

Create your next stunning campaign with just a few clicks.

Start Designing!

 


Share this post with your friends! Pin it on Pinterest 📌

The Ultimate Guide to Email Design best Practices

Our Reader Score:

Total: 3 - Average: 5

Hailey Hudson

Hailey Hudson is a full-time freelance writer based out of Atlanta, Georgia.