Email Header Design Dos and Don’ts: A Step-by-Step Guide

First impression counts. And so does the email header. It is the first thing recipients see after they open your email.

The subject line and email header give a headstart to your email, affecting whether your recipient will continue reading your message.

The email header (also called email banner) consists of basic information about your company and what the email will be about.

The email footer at the bottom of the email cumulates an overview of the most important information supporting the brand identity.

What is the purpose of the header? Catch the reader's attention and associate the message with your branding.

Familiarize the audience with your brand by adding a logo and using your branding colors. To make the email header outstanding, you may add an appealing and high-quality image that catches your reader's attention.

You can add a menu, company motto, or other ideas to break the monotony, but you should stick to the minimalism concept. Too much information and elements in the header can drive the reader away.

Use the space effectively. But don't be afraid of an empty space. It ensures a better readability.

The email header should tell the reader who the email is from. At first sight, without reading a text. Your branding colors and logo will speak for themselves.

Of course, the email header doesn't need to look the same every time. However, you should stick to a certain style and branding colors, as it is the key aspect of an email header.

Emails are displayed on different devices and they should always have high quality. You need to balance the design and functionality. Here are the most universal rules you should stick to:

• Width: 600 px - 800 px

• Height: 100 px - 200 px

• File size: less than 100 KB

• Format: JPG or PNG (compressed)

And what should be the email header image size? There is only one rule. Fit into the email header dimensions mentioned above.

Logo and branding colors are a must-have. What are the other design header ideas you may, but don't need to include?

• Attach a navigation menu. A clear and concise menu allows the reader to get straight to the point, preventing the reader from leaving. 

• Highlight a special sale such as a one-time or limited-time offer and draw attention. 

• Insert a countdown and communicate visually how much time is left of your special offer. 

• Use high-quality graphics related to your product. You can also include product screenshots.

• Add a company motto. A few additional words will emphasize your company mission. 

• Display your mascot in the header. If you have a mascot that is part of your brand, you should not miss the opportunity to put it into action. 

• Highlight a reward you achieved and strengthen your credibility.

• Use animation in the header and footer. If you stick to minimalism, animated graphics in the header might be a great way how to catch reader's attention. 

• Include social media icons - either in the header or in the footer. This way, you will redirect people to other sources of information or platforms where they can easily engage. 

Choose the colors of your email carefully. Colors have a huge psychological impact. First of all, stick to your branding visual identity. The rest of the colors are up to the goal of your email. Remember that every color has a specific meaning and evokes certain emotions -  the role of colors in marketing is an important factor.

Consistency and customization aren't contradictory. They can go hand in hand.

Not all email headers need to be the same, but they still can keep the same brand identity. Create a few versions, all branded and all with one main point, such as e.g., company mascot. Make some changes according to the email message and target audience, and customize the email as you wish.

It's always good to know what to do. Similarly, it's good to know what not to do.

• Don't go off-brand. Keep your header branded. 

• Don't overdo it. Don't overwhelm the reader with information. Choose 2-3 elements you will incorporate into your header, but don't try to fit all possible elements into one email header. 

• Don't keep changing. Customize and experiment. But not too often. Otherwise, your brand wouldn't be recognizable at first glance. 

• Don't make the header too big. Make the header look good on every device. Email header size around 600-800 px will ensure you that. 

• Don't use more than 3 to 4 elements in your navigation menu. Minimalism is a key here.

Let's have a look at a few examples showing various email header styles.

The first example is showing a company mascot, welcoming the reader in the header. If the mascot is a part of company branding, the reader will know in a second who is sending the email.

Example number two shows an email header with a high-quality image, representing the company product. Additionally, it supports the message with a company quote.

The third example shows a big sales email. The branding colors familiarize the reader with the company, while the sales catch the attention of the reader right away. To encourage them to click on the CTA (or explore via the navigation menu), there is a countdown showing how much time is left till the end of the sale.

For tips on how to write a header for a business-to-business (B2B) newsletter, see our complete guide on how to write a B2B newsletter.

The email header is originally created using HTML. Luckily, you don't need to have technical knowledge to design an email header anymore. There are HTML email editors available, offering a drag-and-drop no-code environment, where you can build professional headers independently.

Most of the tools offer pre-built templates. You can choose any template you like and customize the email header design (and the whole email) to your needs. You can replace the logo, change the colors, insert a different background, or do anything you like.

You can also create your own email header as a part of your customized email template from scratch. Upload your logo, image, and any specific element, such as a motto, or sale announcement. Choose your colors and fit the header to your branding.

When ready, you can send a testing email to make sure your email works as desired. If you are happy, the email is ready to get to go out to your readers!

Email design is a complex task, and has a significant impact on your email marketing performance. To learn how to design a professional email, check out our article Email Graphics and UX: Crafting Professional Emails.

Topol platform is a fully flexible and customizable email editor that provides beautiful and responsive emails. You can embed it directly into your app. If you want to learn more about how to use templates in the Topol App, check out our video “Get To Know Topol App” or try a free trial and see for yourself!