16-email-header-design-best-practices
17 August

16 email header design best practices

Olena Zinkovska
Olena Zinkovska Blog editor
Table of contents
  1. The importance of email headers and key elements 
  2. 1. Sender info: the technical part of the email header design
  3. 2. The subject line and preheader
  4. 3. Email header: load-bearing wall of the newsletter header design
  5. Email header design best practices
  6. How to make an email header with Stripo: your ultimate guide
  7. Wrapping up
1.
The importance of email headers and key elements 

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. 

Let’s see how to make the most out of email header design based on the tried and tested best practices from our team. 

The importance of email headers and key elements 

From a marketing perspective, the banner, opening an email, is a critical part of the newsletter format for these reasons:

1. Grab users’ attention by the horns with a catchy email header design

If you use an appealing image, highlight your discounts, or provide the user with the menu they are likely to click due to the high resonance of categories, — the top part of the email can definitely make readers pay attention.

Email header design example

(Source: Stripo template)

2. Move users further down the conversion funnel — one email banner at a time

Rome wasn’t built in a day, and marketing funnels are often stretched over a long series of multiple brand touches. If there is any idea that you want your potential clients to be familiar with, one of the ways to plant this idea is by incorporating it into the email header design. Even if the user bounces off quickly — they will have already read the key message.

In the laconic example below, a domain company Dan aims to raise awareness about its acquisition by the market leader, GoDaddy. Not only as the change brings along several technical updates but also to bask in the light of a much stronger parent brand. Will this message bring immediate commercial results? Not quite. Will it have a positive commercial impact on how users treat the brand and platform in the long term? Indeed.

Email header design from Dan.com

(Source: Email from Dan.com)

3. Strengthen your brand awareness and move your brand into the commercial comfort zone

The use of brand colors, logos, slogans, fonts, and imagery all help users recognize your brand better each time. Being familiar with the brand and what to expect from it moves your product into a comfort zone for your potential client, as they feel safer and educated. This way, brand consistency in newsletter header design helps move your potential clients closer to the purchasing decision through increased trust and familiarity.

4. Get those sales selling — take advantage of impulse buying for smaller-check items

Not many people can afford to impulse buy a car or as much as a Dyson hair dryer, but lower-priced items exposed at the right moment in the right light can certainly trigger an emotional purchase. Email header image with just the right product and CTA has the power to be that impulsive purchase stimulus.

Email header design for your newsletters

(Source: Stripo template)

Key newsletter email header design elements

We know a thing or two about making your newsletters bring more bang for the buck. That’s why we give you a broader perspective on things when vivisecting the email header components, viewing them through the prism of commercial newsletter design.

In email marketing, newsletter header elements are split into 3 subsections:

  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.

Responsive HTML Header for Your Emails

(Source: Stripo template)

1. Sender info: the technical part of the email header design

  • This header piece normally has:
  • sender name;
  • recipient name;
  • "from" address;
  • "reply-to" address;
  • date;
  • brand logo (optional).

How to Create an Email Header _ Sender Info

(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.

Subject Lines for Marketing Emails _ Examples in Inboxes

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:

Email Headers _ Setting Subject Line in Stripo

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

Stripo also keeps things fresh and on the cutting edge of technological evolution. Now our users can generate higher-converting subject lines quicker with our new AI tool for subject lines and preheaders. It just takes a few clicks to enable.

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.

Header Ideas for Your Email Message _ Preheaders

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.

Email Header Examples _ Entering 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.

Email Header _ Filling Preheader with WhiteSpaces

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

Disabled Preheaders _ Stripo

Set subject lines and preview texts for your emails
Join Stripo

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.

Email Header Image _ Gmail Promotions Annotation

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.

How to build promo annotations for your newsletters with Stripo

Utilize annotations to stand out in users' inboxes
Join Stripo

For the requirements for annotation badges, please refer to our "Gmail new promotions tab guide" blog post. The article also explains how to use Stripo to create annotations in Gmail with a single image, a product carousel, or a deal annotation (which includes elements like discount, code, and offer expiration date).

3. Email header: load-bearing wall of the newsletter header design

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.

Header with Company Name to Express Your Brand Personality _ Stripo

(Source: Stripo template)

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

Logo with No Company Name _ Stripo

(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.

Responsive Header for Your Email Marketing Campaign _ Design Menu Tabs

(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 to your email header

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.

Email Header _ The View in Browser Inbox Link

(Source: Email from Banana Republic)

2. Adding the store finder to the email banner

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!

Store Finder in Menu _ Stripo

(Source: Email from Adidas)

3. Placing info on discount to the email header

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.

Email Header Design _ Placing Important Info in Headers

(Source: Email from Brighton)

4. Promoting products in email headers

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.

Informative Preheader _ Stripo

(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.

Email Header Design Examples _ Putting Logo And My Account Links in Header

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 in email header design

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.

Email Header _ Social Media Icons in Email Headers

(Souce: Email from Ukrainian Hub)

7. Using GIFs or animated logos in newsletter headers

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.

Using Brand Colors In Email Marketing Design

Header Merry Christmas Design _ Stripo

(Source: Email from Scuderia Ferrari Online Store)

9. Decorating newsletter 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 Header Design Examples _ Decorative Fonts for Your Brand Identity

(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.

You might also like

How to Add and Use Custom Fonts with Stripo

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 in email headers

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.

Email Marketing Campaigns _ Putting Date in Email Headers

(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.

Header with Logo to Express Brand Identity _ Stripo

(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 to your newsletter headers

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.

Header Update Preferences _ Stripo

(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;

Email Design _ Disabling Certain Menu Tabs on Mobile Devices

  • do the same to all other elements that you want to disable for mobile devices;
  • done.
Make the menus for email headers fully responsive with 1 click
Join Stripo

14. Specifying membership ID in the email header

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.

Header Membership ID _ Stripo

(Source: Email from Decathlon)

15. Adding a sender photo to personalize email header design

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.

Header With a Photo Best Example _ Stripo

(Source: Email from CNN Reliable Sources)

16. Adding the "Do it now" option to your email headers

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.

Email Header Examples _ Registering for Event

(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.

Email Header example _ Call to Action

(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.

Promo
Among our email header template designs, you will find the one that meets your current campaign's needs
Browse

 

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:

Email Header with Menu Tabs _ Stripo

It is easy and will take just a few steps:

Building Email Headers with Stripo from Scratch

So, here's what I need to do:

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

Header Adding a New Structure _ Stripo

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;

Header Inserting Logo _ Stripo

  • set the size of my logo;

Header Setting Logo Size _ Stripo

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

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

Header Dragging Menu Block _ Stripo

  • 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”;

Header Email Menu _ Stripo

  • 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;

Header Menu Appearance _ Stripo

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;

Email Header Best Practices _ Making Them Responsive

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

Header Padding _ Stripo

  • 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.

Build your HTML email header just once and use it across all future campaigns
Join Stripo

Wrapping up

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!

Build effective email headers for your emails once to reuse them across all campaigns
Was this article helpful?
Tell us your thoughts
Thanks for your feedback!
2 comments
Дмитрий Головцов 2 years ago
Почему в письме вы пишите в анонсе статьи про геймификацию, а сама статья совершенно о другом? Заманить для перехода на сайт? Но вы же должны понимать, что это вызывает негатив, когда ожидания не совпадают с реальностью. Грустно.
Hanna Kuznietsova 2 years ago
Дмитрий, Добрый день. Спасибо большое, что обратили наше внимание на это. Мы в рассылку по ошибке вставили неверную ссылку. Приносим свои извинения за это. Статья про геймификацию у нас есть. Ее писал наш СЕО. Вот ссылка: https://stripo.email/blog/gamification-in-email-marketing/ И именно этой статьей мы хотели поделиться в письме. В следующий раз будем тщательнее проверять все ссылки, которыми делимся в письмах.
Type
Industry
Seasons
Integrations