timer ~ 17 min read
113536 views
rate it
03 August

16 Email Header Design Best Practices

Stripo / Blog / 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.

Responsive HTML Header for Your Emails

(Source: Stripo template)

1. Sender info

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.

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

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

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.

Header with Company Name to Express Your Brand Personality _ Stripo

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

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

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

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

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

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

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

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

8 min read

87313 views 4.1

How to Add and Use Custom Fonts with Stripo Read on

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.

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

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

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.

Header Membership ID _ Stripo

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

Header With a Photo Best Example _ Stripo

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

Email Header Best Practices _ 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 Best Design Practices _ 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.

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

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!

Build effective email headers for your emails once to reuse them across all campaigns

Дмитрий Головцов 1 year ago

Почему в письме вы пишите в анонсе статьи про геймификацию, а сама статья совершенно о другом? Заманить для перехода на сайт? Но вы же должны понимать, что это вызывает негатив, когда ожидания не совпадают с реальностью. Грустно.

Hanna Kuznietsova commented to Дмитрий Головцов 1 year ago

Дмитрий, Добрый день. Спасибо большое, что обратили наше внимание на это. Мы в рассылку по ошибке вставили неверную ссылку. Приносим свои извинения за это. Статья про геймификацию у нас есть. Ее писал наш СЕО. Вот ссылка: https://stripo.email/blog/gamification-in-email-marketing/ И именно этой статьей мы хотели поделиться в письме. В следующий раз будем тщательнее проверять все ссылки, которыми делимся в письмах.

You might be interested in

previous next
banner9
06 June · 15 min read
10 Best Email Template Builders for 2022

Do all email template builders seem alike? You are now confused about which one to choose for your email campaigns, aren’t you? No wonder, as there are so many of them.  We will survey the most popular builders to find their distinguishing features to help you find the best HTML email builder for your current needs. I will try to create one template in all these editors with the same media files to see if the builders differ. The best...

Design Marketing Templates
24 May · 18 min read
Best Fonts for Email: Usage Tips and Tricks

One of the most striking concerns in the email production process is choosing the right font. Weight, height, width, color, shape, spacing… Does everything matter? Yes, it does, but also one of the most crucial things is to choose legible typography. In this post, we're going to show you how to choose the best professional font for email. Design beautiful emails with Stripo by using prebuilt templates Browse   HTML email fonts: General rules to follow There are three ground...

Design Templates
Greatest Examples of GIF animations in Emails_Cover Image
27 October 2021 · 10 min read
16 Great Examples of Animated GIFs in Emails

GIFs in emails will be of great use if you want to showcase your product, draw users’ attention to certain elements, or just slightly decorate your text. In this article, we have provided some of the best email gif animation examples. Examples of animated GIFs in emails Here’s a compilation of the best examples with GIFs in emails. Each GIF fulfills its mission. 1. Adidas (Source: Email from Adidas) Adidas used email animations to show what color options they have....

Design Marketing
08 April 2021 · 17 min read
14 Best Email Signature Design Examples

Good email signatures help us build our business and make a lasting impression on potential clients. Since email signature is the last thing people see in emails, we should make them creative and memorable. Let's examine useful tips and real-life examples of email signatures from famous companies and their appropriate use in personal emails and newsletters. Please be advised that all types of businesses require different professional email signatures with detailed contact information, job title, and much more. Use this...

Design Marketing Templates
Be always wide awake in recent email marketing news, guides, articles and how-to’s