Electronic mail design lives or dies by the small print. One apparent element is the topic line. One other is the e-mail header. Each of those components present necessary first impressions. One comes earlier than an e mail is opened and the opposite instantly after.
As soon as your topic line entices your subscribers to open your e mail, your e mail’s header is the very first thing your readers will see. As such, your e mail header has to hook your subscriber, so that they’ll learn the remainder of your e mail.
We’ll focus on what an e mail header is and its components. We’ll additionally share 5 ideas for designing e mail headers.
What’s an e mail header?
 First, let’s clear up some doable confusion round related phrases. In HTML e mail templates, the header usually refers back to the chunk of code enclosed within the <head> earlier than the <physique> factor. The <head> or header contains particulars like your e mail authentication signature and CSS stylesheet. This code is often invisible to your readers.
However that’s not the form of e mail header we’re speaking about right here. As a substitute, we’re specializing in design components that seem on the high of your e mail.
Try this pattern e mail:
This e mail header instance consists of the Google brand and the Google Analytics brand. This provides the reader an concept of who the sender is and what to anticipate from the e-mail.
Under the header is the physique of the e-mail, which encapsulates the primary message and content material of the e-mail. On the backside, the e-mail footer rounds off the e-mail with hyperlinks to the Google Assist Heart and the Analytics discussion board.
The header is a superb place to incorporate necessary data in your subscriber. Point out to your readers what to anticipate out of your emails at a look.
What are you able to embody in e mail headers?
There are numerous components you’ll be able to embody in an e mail header. Try our record of 5 parts you should utilize to design your e mail headers:
- Emblem
- Menu
- Countdown
- Name-to-Motion (CTA)
- Social media icons
We’ll dig into these parts and a few of the well-designed e mail headers we’ve seen under. Within the following part, we’ll overview some finest practices when utilizing these e mail header components. Considered one of our high finest practices is simple: Don’t overdo it! One factor per header could also be a lot.
1. Emblem
Advertising is all about model recognition. Don’t miss the chance to get your organization brand on the market as quickly as your subscribers open your e mail. It’s good to determine your model’s authenticity as quickly as doable. Don’t let your readers have a shred of doubt concerning your e mail’s sender.
Nevertheless, this doesn’t imply you could embody a big, overpowering brand. As you noticed within the final instance, Google Analytics retains headers good and easy with the Google brand and Google Analytics brand.
Pay attention to readers utilizing darkish mode and the way it’ll have an effect on your e mail. For instance, the black from most logos might disappear when a subscriber views an e mail in a darker interface. Altering your header picture to work in each mild and darkish mode is one method to keep away from this situation. Discover out extra in our submit on darkish mode brand issues.
2. Menu
Menus are an effective way to drive visitors to your ecommerce internet web page. They complement your CTA by creating outlined subcategories in your subscribers to navigate. Try how Adidas does this:Â
They replicated the menu bar on their internet web page to concurrently create a sense of familiarity and funnel clicks to their web site. In case your e mail headers embody a menu or navigation bar, attempt to design them to look as very like your web site as doable. That means, you’ll present a extra constant expertise to subscribers who click on by means of.
3. Countdown
Countdown timers are a well-liked method to make e mail campaigns dynamic. They create a way of urgency that may encourage your subscribers to take motion earlier than time runs out. Improve your click-throughs and conversion charges with an simply seen countdown timer on the high of your marketing campaign.Â
Look how Casper pairs a easy menu with a countdown timer to assist subscribers navigate the trail to buy:
4. CTA
Don’t underestimate the facility of a CTA. In case your objective is to drive clicks to your web site, why not embody a CTA entrance and heart in your e mail header? Make it the very first thing your customers see, identical to Moschino did with their deserted cart e mail:
They convincingly used an e mail header picture with their CTA.
5. Social media icons
Use social media icons in your e mail header to encourage subscribers to grow to be followers as nicely. Let’s say you’ve all the time engaged together with your subscriber by way of e mail. How about redirecting them to your Instagram account? Discover new methods to start out conversations together with your subscribers. Since subscribers are already conversant in your model and your content material, many shall be pleased to grow to be a part of your social media viewers too.
5 ideas for designing efficient e mail headers
Moreover solely utilizing one factor in every e mail header, we have now a couple of different suggestions. Now that we’ve addressed the fundamentals, let’s have a look at 5 finest practices for e mail header design:
- Play with colours
- Use animations, GIFs, or photos
- Customise however be constant
- Maintain it readable and accessible
- Use email-safe fonts
Let’s dig into every of those under.
1. Play with colours
We’ve talked concerning the significance of growing a visible model id. Use colours in your header to border your e mail together with your visible model id. Maybe you’ll select contrasting colours to assist your message pop or select out of your trusty model palette.Â
Both means, colours inform a narrative and provide help to interact together with your subscriber base! Keep in mind to outline e mail header colours and different formatting in your e mail design system.Â
2. Use animations or photos
As we noticed within the Moschino instance, a well-chosen picture or GIF generally is a highly effective, eye-catching instrument to enhance your buyer engagement. We’ve talked about how photos can supercharge your emails. Why not put them within the header and set up your visible model id up entrance? After all, don’t go overboard with animations or photos. You wish to make a press release to have interaction your person – not create muddle that stops them from studying the remainder of your content material.
3. Customise however be constant
The e-mail header is an area so that you can play with the way you introduce your model. Every time subscribers open your e mail, they make one other connection together with your model. You would possibly wish to use a barely completely different header when concentrating on clients through the Halloween season versus New Yr’s. Nevertheless, whereas it’s good to maintain your content material related, you additionally wish to preserve your content material constant.Â
Make it simple in your customers to acknowledge your model at a look. Should you’re sending out a month-to-month e mail publication, you wish to preserve the publication header recent however recognizable as a part of a sequence of emails out of your model.
4. Maintain it readable and accessible
Whenever you select your colours and design your header, bear in mind to pick colours that make your textual content pop for each regular-vision and low-vision readers. Accessibility is vital to partaking your subscribers. In case your e mail header contains necessary data, add it as dwell textual content and never a graphic. That means, display screen readers will interpret and skim again textual content to subscribers with imaginative and prescient impairments.
5. Use email-safe fonts
The e-mail header is a spot to let your creativity shine. Nevertheless, don’t sacrifice accessibility or deliverability for creativity! Use email-safe fonts when coding your e mail header templates to make sure your readers can view your message precisely as you meant.Â
Wrapping up
Electronic mail header design is an effective way to create a constant and memorable inbox expertise in your subscribers to showcase your model.
Are you aware if each mailbox supplier shows your e mail header design as you meant? There’s one method to know for certain: Preview your emails on dozens of in style e mail purchasers and gadgets.
At Electronic mail on Acid by Sinch, we prefer to say that good mail isn’t nearly an excellent design – it’s about testing your emails to make sure they work for all of your subscribers throughout their numerous e mail purchasers and gadgets. Should you’re prepared to start out, head to Electronic mail on Acid and check out our e mail testing instruments for seven days without spending a dime.
Simplify the Electronic mail QA Course of and Ship Perfection
What’s one of the simplest ways to run by means of your pre-send guidelines? With Electronic mail on Acid’s Marketing campaign Precheck, we’ve simplified the method and set every thing up for you. Use it to double-check your content material, optimize for deliverability, guarantee accessibility, and preview how campaigns look on greater than 100 of the preferred purchasers and gadgets. All earlier than you hit ship!
Writer: The Electronic mail on Acid Workforce
The Electronic mail on Acid content material group is made up of digital entrepreneurs, content material creators, and straight-up e mail geeks.
Join with us on LinkedIn, comply with us on Fb, and tweet at @EmailonAcid on Twitter for extra candy stuff and nice convos on e mail advertising and marketing.
Writer: The Electronic mail on Acid Workforce
The Electronic mail on Acid content material group is made up of digital entrepreneurs, content material creators, and straight-up e mail geeks.
Join with us on LinkedIn, comply with us on Fb, and tweet at @EmailonAcid on Twitter for extra candy stuff and nice convos on e mail advertising and marketing.
