15 Email Header Design Best Practices
December 10, 2018
|
3,138 views
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.
Full newsletter header includes a sender name, subject line, preheader, reply-to address, logo.
If you use an ESP for sending newsletters, then the sender name and the “reply-to” fields will be specified correctly, as they normally remain unchanged from campaign to campaign. This is why we are going to focus on the HTML email header design.
HTML email header consists of two stripes: a header itself with menu, logo and a preheader.
Pre-header
A pre-header, also known as a pretext, 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 Campaign Monitor or the Quora Team, I know without opening it, what it will be about.
“Guest post from Zembula” sounds great.
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”.
Note: when there is no pre-header in your email, the recipients will see the very first text of the email.
How to set a preheader text with Stripo:
➢ above the template, click the “settings” button;
➢ enter a subject line and a preheader text.
Header
Normally, 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.
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.
Save it to your personal library of blocks, and drag in when creating a new email campaign.
But prior to diving into creative ideas, let us say a few sentences about the traditional email header elements: name, logo and menu.
Company name and logo
As a rule, a company’s 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.
But when your company is world famous, and you are sure that everyone is familiar with your logo, then you may just omit the name of the company and insert just the logo.
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.
But if you decide to add an interactive menu, remember to set a fallback, too.
Please, for more detailed information read our blog post on this topic.
Email header design best practices
We’ve selected the best examples: some of them are provided by real brands, some are made up for your inspiration.
1. Adding the store finder
Sender: Adidas
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!
2. Placing info on discount
Sender: Anabel
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 follow the link.
3. Promoting products
Sender: Filmmaker
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.
4. Giving presents to recipients
Sender: EnglishDom
Not only did this online school place presents in a header, but also animated it. It’s an alternative to gamification. As it seems that recipients choose on their own which box to click.
Why would you place this in a header? The chances are — each recipient who opens this email undoubtedly sees this generous offer.
Great email header example.
4. Adding direct login into account to an email
Sender: Grammarly
The clickmap of the eSputnik’s reports on newsletter campaigns shows that many recipients click the logo or the login button to enter their accounts.
Once I’ve finished reading the entire report, I clicked on the “Visit My Editor” button to continue working with Grammarly.
5. Social media icons
Sender: The Emy Blog
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 gather subscribers.
6. Using GIFs or animated logos
Sender: Banana Republic
Want to make your header animated? Do it. Make sure the image size is less than 2 Mb, because most of your customers read their emails on mobile devices. In case it takes an email long to download, people just close it.
7. Working with the email header backgrounds
Sender: Ferrari
If you don’t want to make significant changes to your email marketing headers, then you may play with colors for entire menus.
8. Decorating headers for holidays
Sender: Chubbies
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.
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.
9. Applying custom fonts to menu tabs
Sender: Sunrise
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.
We want to remind you that you can add custom fonts to Stripo.
Note: if an email client does not support the selected font, it will replace it with a default one.
FYI: the screenshot of the menu custom font was taken in Gmail, OS – Windows 10.
10. Specifying the issue date
Sender: Dictionary
By looking at the email by Dictionary, 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.
11. Using frames
Sender: Hummingbird
Some brands come to using frames to design an email header that looks unique. It’s a good way to decorate email templates, yet it’s totally web safe — because frames, in fact, are just images.
Note: Stripo.email offers a wide range of various frames, located in the “Additional images” block.
12. Using no header at all
Sender: Nike
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.
But in fact, Nike does not use any header at all. They just place logo over banners. Nice trick 🙂 So does Airbnb, sometimes.
An interesting decision if you do not intend to add a menu to the header.
13. Placing the “Update preferences” link
Sender: D’Artagnan
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.
14. Specifying membership ID
Sender: Decathlon
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.
15. Adding a photo
Sender: Brian Stelter, CNN
This is one of the most informative headers ever. It contains the “share” buttons, social media icons, dates, author’s name, and his photo.
Always good to know who’s the author, especially when it comes to the latest news in the economy and politics.
How to create a great email header with Stripo — guide
There are two ways to design email headers with our editor:
1. Customizing an existing header
Among a number of email templates, choose the one with the header you like. Customize it down to every little detail: replace logo, add correct links to the menu tabs. Then save this block/stripe to your personal library of blocks. When designing a new email campaign, you will have just to drag the saved header in a new template.
The GIF shows how to save a block t the library and use it in future campaigns.
2. Creating a new one from scratch
I want to create a header with my logo located in between menu tabs. So, I need to:
➢ drag a new structure into the template
if you want your logo and menu to be located in one line, then drag a new structure in the template you are going to work with be it a new or your existing one. It depends on your preferences how many blocks to include in the structure. The Stripo editor offers 1-4-container-structures;
if you want your email header to contain a few stripes, then you will need to drag a respective number of structures in the 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 “realese notes”
➢ select the font color — it’s color “the links color”
➢ do the same to the third column
➢ for the entire stripe, I set the background color — white
➢ 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 and its 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.
➢ click the “Adaptive 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.
This is what we just designed:
Conclusion
As you can see by the number of various examples of email header design, you are absolutely free to do what you want to. Be creative.
Our email templates already contain various professionally coded headers — select any of them, customize
I sincerely wish you best of luck in all your future endeavors!
Be always wide awake in recent email marketing news, guides, articles and how-to’s
