16 Email Header Design Best Practices

Email header is the element you regularly use in your email newsletters. But quite often we forget that it’s more complex than just a logo and menu.

The full newsletter header consists of three essential parts:

• info about sender;
• the subject line, and preheader;
• email header itself.

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

(Source: Stripo template)

Info about sender

This header piece normally has:

• sender name;
• recipient name;
• "from" address;
• "reply-to" address;
• date;
• brand logo (optional).

If you use an ESP for sending bulk emails, then you will need to set the following data there: The sender name, company logo, the "reply-to" address. It normally remains unchanged from campaign to campaign, so you set it just once. While the subject line and a preheader text always change. So you will need to set it every time when starting a new campaign.

The subject line, and preheader

Subject line

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

We won't say how to write a catchy and effective subject line, as we've shown the best examples in our "100+ Best Catchy Email Subject Lines" post. We will just remind 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 one 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, 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.

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

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

One of the best email preheader best 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:

• above the template, click the “settings” button;
• 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", "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 Google Promotion Annotations

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

This info goes right after the 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" bog post.

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.

Prior to diving into creative ideas, let us say a few sentences about the traditional email header elements, which are a company name, logo, and menu.

Company name and logo

As a rule, 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. As the company name is the thing the clients recognize you by. Insert it in all emails, no matter if it is a trigger 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 name of the company 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 all 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)

Please, 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 which may not load fast or just not load at all, if your email contains elements of interactivity or gamification which 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 it.

(Source: Email from Banana Republic)

2. Adding the store finder

Along with the logo and menu, Adidas added a Store Finder to the header. 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 out. Great service. Thank you!

(Source: Email from Adidas)

3. Placing info on discount

This is one of the best email header examples as the cosmetics company Anabel placed their value proposition in the header. Interesting decision. I could not have missed it. For more detailed information I had to click the link.

(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 clickmap of the eSputnik’s reports (our ESP) on newsletter campaigns shows that many recipients click 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

Why not go against the system? If you want to stand out — place the links to your social networks’ accounts in the header. Pretty unusual, but quite noticeable. 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? Do it. 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 just close it.

(Souce: Email from Banana Republic)

8. Working on the email header backgrounds

If you don’t want to make significant changes to your email marketing headers, then you may play with colors.

(Source: Email from Scuderia Ferrari Online Store)

9. Decorating headers for holidays

When holidays come, we try our best to make the email festive. Some time ago, most companies would leave the email header design unchanged. But it was kinda boring. Enliven your header with snowflakes, decorative balls, etc.

(Source: Email from GrowthHackers)

At first glance, recipients were well aware of the goal of the entire campaign. To my mind, this is a great example of 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, get creative.
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 custom fonts in your HTML email header design.

Important to note:

If a selected fon 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 Apple News, one can easily say what day he or she 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 Apple News)

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 4 menu tabs on screen. 5+ tabs on 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 may 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 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, author’s name, and photo.

Always good to know who’s the author, especially when it comes to the latest news in the economy and politics.

(Source: Email from CNN Reliable Sources)

16. Putting the "Do it now" option

You may, if you please, 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, webinars, to be exact.

(Source: Email from Maybelline New York)

Promoting a new event and want customers to support you or to 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 — 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 on building email headers from scratch.

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

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 in detail, 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;

• in order 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 devices;

• just 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, 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 logo is just 30;

If you want to set a background image, you will have to click 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 copy in email templates.

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

• set paddings. You may need to do this to align all containers. Click 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 for 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 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". Feel free to be creative.

Our email templates already contain various professionally coded headers — select any of them, customize
I sincerely wish you the best of luck in all your future endeavors!