Skip to content

16 Email Header Design Best Practices [with Examples] — Stripo.email

    The email header is the element you regularly use in your https://stripo.email/templates/” rel=”noopener” target=”_blank”>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.

    (Source: https://stripo.email/templates/promo-email-template-made-love-books-presents-stationery-industry/” rel=”noopener” target=”_blank”>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 https://www.emailvendorselection.com/email-service-provider-list/” rel=”noopener” target=”_blank”>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 “https://stripo.email/blog/best-catchy-email-subject-lines/” rel=”noopener” target=”_blank”>100+ Best Catchy Email Subject Lines” post. We will just remind you that https://stripo.email/blog/best-catchy-email-subject-lines/” rel=”noopener” target=”_blank”>47% of your recipients decide whether to open an email judging by the subject line alone, and about https://stripo.email/blog/best-catchy-email-subject-lines/” rel=”noopener” target=”_blank”>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 https://stripo.email/blog/use-emojis-emails/” rel=”noopener” target=”_blank”>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 https://litmus.com/blog/the-ultimate-guide-to-preview-text-support” rel=”nofollow noopener” target=”_blank”>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:

    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.

    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:

    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;

    Header Inserting Logo _ Stripo

    Header Setting Logo Size _ Stripo

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

    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 set Tahoma, 18.

    Note: we want to remind you that Stripo allows https://stripo.email/blog/add-use-custom-fonts-stripo/” rel=”noopener” target=”_blank”>adding custom fonts and applying them to menus and all other copies in email templates.

    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

    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 https://stripo.email/templates/” rel=”noopener” target=”_blank”>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


    https://stripo.email/blog/email-header-best-practices/”>