16 Email Header Design Best Practices

The email header is the element you regularly use in your email newsletters. It creates a first impression for the entire email, but quite often, we forget that it’s more complex than just a logo and a menu. 

The full newsletter header section consists of three essential parts:

1. Sender info.

2. The subject line and preheader.

3. Email header itself.

In this post, we'll show you how to set the subject line and preheader. We will also share 16 email header ideas that to make your messages more effective.

(Source: Stripo template)

1. Sender info

This header piece normally has:

• sender name;

• recipient name;

• "from" address;

• "reply-to" address;

• date;

• brand logo (optional).

(Source: Email from Pinterest)

If you use an ESP for sending bulk emails, then you will need to set the following data there: the sender name, the company logo, and the "reply-to" address. It normally remains unchanged from campaign to campaign, so you set it just once. Your subject lines and preheader text always change, so you will need to set them whenever starting a new marketing email campaign.

2. The subject line and preheader

Subject line

A subject line, along with your brand name, is the reason why recipients open your emails.

We won't say how to write catchy and effective subject lines, as we've shown the best examples in our "100+ Best Catchy Email Subject Lines" post. We will just remind you that 47% of your recipients decide whether to open an email judging by the subject line alone, and about 69% of them mark emails as spam for the same reason.

So, working on your subject line is an utterly important thing to do.

You normally set one in your ESP, but you can also set it in Stripo:

You may also use emojis in your subject line to make it more noticeable in users' inboxes.

Preheader

A preheader, also known as a preview text, some even call it a snippet, is the smallest yet highly essential element of the email.

An informative preheader notifies recipients about the purpose of the email. On desktops, it goes after the dash “-” in the subject line, while on mobiles, it is located on the line below the subject. When receiving the email, according to the study by Litmus, 24% of the recipients judge by the preheader whether to open the message.

Whenever I receive an email from Mailchimp, SimilarWeb, or Netflix, I know what it will be about without opening it.

Some companies insert their sale offers into the pre-header, which brings them clicks.

One of the best email preheader practices is making stories — when the preheader text is a continuation of the subject line.

Chubbies: “I’ve changed — Ok, I was all stingy, but now I’ve changed due to the holiday sale.”

Brighton: “She loves RED for Holidays — And So Do You.”

D’Artagnan: “Send Them Steak! 15% OFF All Steaks & Chops — Sale Ends Sunday”.

How to set a preheader text with Stripo:

• click the “settings” button above the template;

• enter a subject line and a preheader text.

Important to note:

When there is no pre-header in your email, the recipients will see the very first part of the email text. It won't be finished and complete. It may be something like "View online" or "My Account".

So, if you do not want your recipients to see it, you may always choose not to show anything as the preheader.

In Stripo, you just need to enable the "Fill in with white space" option.

Once you do it, your email preview will look like this in users' inboxes:

Utilize Gmail Promotion Annotations

As the name suggests, you can annotate the duration of your sale and the amount of the discount and accompany it all with the deal badge in users’ inboxes without having them open your emails. 

This info goes right after an email subject line and a preheader text.

It works on mobile devices in Gmail but does not distort your email appearance in other email clients. 

Watch our short video to learn how to build promo annotations for your newsletters with Stripo.

For the requirements for annotation badges, please refer to our "Gmail New Promotions Tab Guide" blog post.

3. Email header

There is no single rule regarding what a professional email header must look like. It all depends… But we will provide you with a number of ideas and examples.

Before diving into creative ideas, let us say a few sentences about the traditional email header elements: a company name, a logo, and a menu.

Company name and logo

As a rule, the logo includes the company’s name.

If your company is way new to the market and people are just getting acquainted with your brand and your products, then do not forget to add your company name. Remember that the company name is the thing your clients recognize you by. Insert it in all emails, no matter if it is a trigger message or a promotional one.

(Source: Stripo template)

But when your company is world-famous, and you are sure that everyone is familiar with your logo, then you may omit the company name and insert just the logo.

(Source: Email from Airbnb)

Note: the logo’s background should be transparent in order to match the message color theme.

The logo is inserted as an image, so you do not have to worry about the fonts. It will be correctly displayed in all email clients and on different devices.

Menu

The menu is another traditional element of emails because it helps you navigate customers and lead them to your website. The menu is functional.

You can select a regular or interactive menu.

All regular email menus you add with Stripo are totally responsive.

(Source: Email from Gap)

For more detailed information on how to add menus, please refer to our "Add Menu in Email with Stripo" blog post.

Email header design best practices

We’ve selected the best examples from real brands.

1. Adding the "View in browser"/"Web version" option

Of course, you may put this link in an email footer, which is ok. But if your email contains GIFs that may not load fast or just not load or contains elements of interactivity or gamification that may not render correctly in some email clients, then you had better add the "View online" option in the header of your emails. It increases the chances users will notice and click on it.

(Source: Email from Banana Republic)

2. Adding the store finder

Adidas added a Store Finder to their simple header along with the logo and menu. Brilliant idea. I choose the shoes I need right in the emails, and then in the Store Finder, they provide me with an address of an offline store nearby to try the shoes on. Great service. Thank you!

(Source: Email from Adidas)

3. Placing info on discount

This is one of the best email header examples as the jewelry company Brighton placed their notification about free shipping in the header. Interesting decision. It is just impossible to miss this notification.

(Source: Email from Brighton)

4. Promoting products

The Filmmaker company promotes a paid subscription for their live journal right in the header. 

A good way to advertise your product if the newsletter is only informative.

(Source: Email from Filmmaker)

5. Adding the "My Account" option to an email header

The click map of the eSputnik’s reports (our ESP) on newsletter campaigns shows that many recipients click on the logo or the log-in button to enter their accounts.

Once some recipients finish reading the entire digest, they might want to continue working with Stripo/your tool by clicking the "My account" button.

As we can see, 12.8% of our recipients used this option.

6. Social media icons

What about going against the system? If you want to stand out, place the links to your social networks’ accounts in the header. Pretty unusual, but it's still quite noticeable at first glance. Especially if your main goal is to drive subscribers to your social media accounts where you share all the details on an upcoming event. It is great if the social media icons match the entire design.

(Souce: Email from Ukrainian Hub)

7. Using GIFs or animated logos

Want to make your header animated? Go for it! But make sure to keep the email header image size under 1 Mb because at least half of your customers read their emails on mobile devices. In case it takes an email long to load, people will just close it.

(Souce: Email from Banana Republic)

8. Working on the email header backgrounds

You may play with colors if you don’t want to make significant changes to your email marketing headers.

(Source: Email from Scuderia Ferrari Online Store)

9. Decorating headers for holidays

We try our best to make email marketing campaigns festive when the holidays come. Some time ago, most companies would leave the email header design unchanged. But it was kinda boring. Enliven your header with snowflakes, candy canes, garlands, etc. If you have a brand mascot, you can also align its appearance with particular holidays.

(Source: Email from GrowthHackers)

As a result, you will make the festive period even more special for your subscribers. To my mind, this is a great example of an email header design for holidays.

10. Applying custom fonts to menu tabs

A good decorative font will enrich your email header design. Use your imagination and get creative.

It’s important to make all the fonts legible — cursive fonts require a bigger size.

(Email opened in Gmail, macOS, and Windows 10)

We want to remind you that Stripo allows adding and using decorative fonts in your HTML email header design.

Important to note:

If a selected font is not supported by an email client, it will be replaced by the email client's default one.

11. Specifying the issue date

By looking at the email from The New York Times, one can easily say what day they received it. How? This company adds a date to the email header. In my opinion, this is one of the greatest email header design ideas.

(Source: Email from The New York Times)

12. Using no header at all

All famous brands have something in common — they have their own style. Thus, Nike’s emails are seamless. You will never notice it when a header ends and a banner starts.

(Source: Email from Nike)

In fact, Nike does not use any header at all — they always put their logo over banners.

An interesting decision if you do not intend to add a menu to the header.

13. Adding the “Update preferences” link

We all want our newsletters to be highly effective. Thus, we need to deliver only relevant information. Customers’ preferences change quite often. Recipients need to have the opportunity to update their information whenever they want to.

The restaurant D’Artagnan places the “Update preferences” button right in the header.

(Source: Email from D'Artagnan)

Important to note:

Normally, mobile devices show just four menu tabs on the screen. More than five tabs in a menu can cause horizontal scrolling. To avoid it, you might need to disable some tabs for mobile devices.

If you are building your email header with Stripo, you need to:

• click on a menu tab that you are going to disable;

• in the settings panel, click the "Hide on mobile devices" button next to the chosen element;

• do the same to all other elements that you want to disable for mobile devices;

• done.

14. Specifying membership ID

If you offer membership to your customers, their ID is supposed to be at hand. Certainly, you can place this essential information somewhere in their account settings. But Decathlon specifies the ID number right in the header. It’s pretty noticeable. This way, recipients will always know where to look for the membership number.

(Source: Email from Decathlon)

15. Adding a sender photo

This is one of the most informative headers ever. It contains the “share” buttons, social media icons, dates, the author’s name, and his photo.

It’s always good to know who the author is, especially regarding the latest politics and economics news.

(Source: Email from CNN Reliable Sources)

16. Putting the "Do it now" option

You may add the "Show now" links to your headers. Some brands put them above the logo, some put these links right next to their logo. It is totally at your discretion.

Maybelline, for instance, adds the "Register Now" links in their HTML email headers when they are promoting their upcoming events and webinars, to be exact.

(Source: Email from Maybelline New York)

Promoting a new event and want customers to support you or vote for you?

Put the Call-to-Action in the email header.

(Source: Email from Adidas)

Now that you are hopefully inspired by the email header design examples above, you are ready to build a new header for your future campaigns.

How to make an email header with Stripo: your ultimate guide

There are two ways to design email headers with our editor:

1. Customizing headers in templates

This option best suits those who have no time to build email headers from scratch.

All Stripo HTML email templates already contain headers. You just choose the one you like, replace our links with yours, and substitute the existing logo with your own.

2. Creating a new email header from scratch

I want to create a header with my logo located in between the menu tabs. Like this one:

It is easy and will take just a few steps:

So, here's what I need to do:

• drag a 3-column structure into the HTML email template;

If you want your email header to contain a few stripes, then you will need to drag a respective number of structures in your template;

• to add a logo, I click on the “image” icon;

• set the size of my logo;

Make sure to click the “Responsive image” button for mobile;

• drag the menu block in the first column of the template;

• remove the third menu tab as I need only 2 in each column (by default, the menu block has three tabs);

• give them names — “templates” and “release notes”;

• select the font color — in our editor, it’s called “Links color”;

• do the same to the third column;

• for the entire stripe, I set White as the background color;

• equalize containers — in my case, they are 250/250 and the one with the logo is just 30;

If you want to set a background image, you will have to click on the “Background image” button;

• I recommend setting the font size when the header is complete and has all containers in it — then you see a general picture of it.

I set Tahoma, 18.

Note: we want to remind you that Stripo allows adding custom fonts and applying them to menus and all other copies in email templates.

• toggle the “Responsive structure” button — make your menu display correctly on mobile, too;

• set paddings. You may need to do this to align all containers. Click on the “more” button;

• prior to saving this block to my library, I decided to preview it.

Important to note:

Normally, an email header is something you create once and use across many campaigns. So don’t be afraid to spend some time on the newsletter header design.

Save it to your personal Module Storage, and drag it in when creating a new email campaign.

Final thoughts

As you can see by the number of various examples of email header design provided here, there's no such thing as "best email header design". Whether you want to use your own custom HTML code for a header or go for one of the prebuilt templates, everything is possible with Stripo. Feel free to be creative and think outside the box.

Our email templates already contain various professionally coded headers — select your favorite ones and customize them per your own needs. 

I sincerely wish you the best of luck in all your future endeavors!