Beefree blog

How to build a complex email header design | Example from GOOD

Emily Santos
Emily Santos
Oct 2, 2015
How to build a complex email header design | Example from GOOD
How to build a complex email header design | Example from GOOD

Earlier this week, in our second Design Inspiration series blog post, we saw how GOOD magazine uses color, typography, and illustrations in email to create an effective daily newsletter. In today’s email design workshop, we’ll be recreating the GOOD email in the BEE email editor, step by step.Why? Because it contains some cool design ideas - especially in the header section - that we believe you can draw some inspiration from. Follow along and try these email design concepts yourself by using your favorite email editor, or by opening the BEE drag-&-drop email editor in a new browser tab.We've divided thisemail design workshop in three sections. We'll be showing you how to:

To start off, here's the email from GOOD magazine that we're going to focus on. You can find the original email here.

GOOD magazine email example

Getting started with an email layout

As we mentioned, we’ll be using the BEE email builderto recreate the GOOD email in this workshop. It's free, online, and requires no registration, so it's an easy option if you want to follow along!

Step #1: Choose your email template

The first step here is to match the general layout and template structure of the GOOD email. We can see that the GOOD email uses a single-column layout for the majority of the top portion of the email. So let'sstart out bychoosing the basic One column template in the BEE editor, and then drag-n-drop the remaining structures and content blocks.

one column, basic email template in the BEE editor

Step #2: Configure your email layout

It's important to dedicate the right amount of time in the initial layout. Think of the email layout as your canvas. Being organized and diligent in this step will help us speed through the next steps to come.Let's take our one-column basic template. We're going to:

  1. Set some general settings
  2. Add the structural elements we need

Set your general settings

The GOOD email is 675 px wide with a grey background color #f0f2f2 and a white content area background color. To clarify, since the GOOD email is responsive,the 675 px width is a max width setting used on larger screens, but the message needs toignore it on mobile devices that have smaller screens. The nice thing about the BEE editor is that you don't have to worry about mobile rendering issues: all emails created in the BEE editor are responsive and optimized for mobile. For us, this means that we can simply add the desired max width - which is 675 px in this case - and know that it will be properly adjusted on a mobile device.In the BEE editor, we can input these values in the right hand menu under Body > General Options:

General settings in the BEE editor

Add the remaining structures

To complete the email layout we'll need to add the following structures in order:

  • A two-column structure for the heading (as we see below)
  • A one-column image structure for the illustration
  • A two-column structure for the title (on the left) with social icons (on the right)
  • A text structure for the subtitle and text
  • Another one-column image structure for the advertisement
  • Followed by three two-column structures for the sponsored content, the content below that, and for the social footer

The nice thing about the BEE editor is that you can simply drag-n-drop structures in place, from the Structure tab in the right-hand side menu:

ScreenShot1361

The finished email layout should look something like this (below). Note that in this screenshot we've already added content blocks (e.g. image, text, and social blocks) in our structures, which is discussed next.

ScreenShot1362

Step #3: Customize your email message: add images, edit text, set padding, and more!

Now that we have our email layout in place, we can add content to it by dragging and droppingimages, text, and other content blocks from the Content tab, and bypersonalizingeach of them to meet our needs.Let's focus on a couple of the most important content elements in this email, and look at:

  • How to recreate the complex heading of the GOOD email with the use of granular padding and border settings
  • How to visually separate content blocks with the use of background color settings

Building a complex email header design

Recreating the email header design from the GOOD email is not a trivial task. It uses some cool design tricks that can appear hard to implement at first. It's challenging, but definitely doable!It took us about 10 minutes to rebuild in the BEE email editor, and allowed us to further appreciate the flexibility and granular customization the BEE editor provides (so a big "thank you" goes to our development team!). Let's see how we did it: maybe you can use some of these tricks in your next newsletter!

Here's a challenge: Try recreating this same email header design in the email editor that you're currently using. Can you do it? Let's compare!

ScreenShot1363

Before we start, notice that the email header is made up of 4 images:

  • "THE TUESDAY" is actually a resized image (77 x 14 px)
  • The GOOD logo (resized: 180 x 110 px)
  • The pink earmark (resized: 60 x 60 px)
  • The illustration below the black divider (675 x 404 px)

The only text is the date: Sep 15, 2015.In the BEE editor, the structure of the email header design translates to something like this:

ScreenShot1364

Let's upload the images. In this case, we'll upload the three images (logo, earmark, illustration) and have "THE TUESDAY" image as text.

ScreenShot1365

It's clear that we need to resize the images from the specs above. This is actually super easy to do in the BEE editor with the built-in Aviary image editing tool! Check out this quick video tutorial (2:42) on how to resize images for email with Aviary (with the crop tool).Let's use the Resize tool from Aviary under Edit image:

ScreenShot1367

...and this is how our images now look, correctly resized:

ScreenShot1368

The challenge here is getting the pink earmark correctly positioned on the top-right hand side of the email header. Let's see how to do this!Click on the pink earmark image. Under Content properties choose the right align option:

ScreenShot1369

We can see that the position of the earmark is where we want it: on the top, right corner of the email header!

ScreenShot1370

Similarly, we're going to left-align the GOOD logo, write the text above it, and add a bit of padding.

ScreenShot1371

Notice that the padding settings in the BEE editor allow you customize all four sides individually (or all equally). For the GOOD logo we've decided for a padding of 0px (top) 0px (right) 10 px (bottom) 10 px (left). Having granular control on padding is really handy.

ScreenShot1372

And, for completeness, the padding for the heading text is 5px top and bottom and 10px left. Our heading is looking good! Two more steps to go!

ScreenShot1373

The next design element we're going to focus on is the black divider between the heading and the illustration. The original GOOD email has the following border properties: 14px, solid, and black #070c0d. To accomplish this, we are going to editthe top border of the illustration image. Here too, luckily, we can count on granular border control provided by the BEE editor, which allows us to individuallytargetthe top border of the image. How cool is this? :)

ScreenShot1374

The last part of the email header design that we need to work on is the background color: we need to change it from transparent to white. To do so, we need to work with column settings. To access column settings, click to the right of the content area (i.e. where there are no content elements). Notice that the Row properties show up on the right hand-side menu. And, notice the column properties for both columns. The correct setting that we want is:

  • Column 1 (i.e. the column where the GOOD logo is): a white column background
  • Column 2 (i.e. the column where the pink earmark is): same thing, as shown here:
ScreenShot1375

And we're done! We've built a perfect replica of the email header design of the GOOD email.

Where you able to replicate it in the BEE editor or in your email editor? Let us know in the comments below if you had any trouble.

Here's a preview of how the re-created GOOD email looks on a desktop email client:

ScreenShot1376

Bonus tip: Visually separate sponsored content and ads in your emails

Additionalemail design inspiration from the GOOD email comes by paying attention tohow ads are handled: they are elegantly separated from the rest of the content.The key is to always be transparent with sponsored content and ads in your email campaigns. Don't let your subscribers second-guess what is sponsored content and ads versus your own, original content. Luckily, design-wise, it's rathersimple to visually separate sponsored content and ads in email. Let's take the GOOD email. They do two things right:

  1. Lead with their own content, followed by an ad (the ad doesn’t steal the show, but it’s still placed prominently in the email to ensure a good ROI for the advertiser) and...
  2. Maintain transparency by changing the background color of the ad to distinguish it from the rest of the email content.

The main design tactic here is to change the background color. This simple design tactic along with the text "Presented by..." reinforces the fact that it's sponsored content or an ad. Notice that the GOOD email is currently using more than one shade of grey to highlight its content. In detail, the greys in hexadecimal format are #f0f2f2 for the main background color and a lighter grey #f7f8f8 for the sponsored content block.

ScreenShot1378

In case you are wondering, this is very easy to do in the BEE email editor as we saw when building the GOOD heading from above:

  • Load the row properties for the row that contains that content
  • Change the background color of the content block from white to a light grey #f7f8f8, as shown below
ScreenShot1377

There you have it!In this workshop, we've really seen the power of the BEE email editor: from background color settings at multiple levels (think: structure vs. content block vs. row vs. column) to complete control over padding and borders, and image editing.We hope you enjoyed this article: it's part of our email workshops series. Let us know what you think in the comments below, and see you next week for a new workshop!

Related posts

Getting Started with Beefree: A Guide to Streamlined Email and Landing Page Creation

Whether you're designing a newsletter, promoting an event, or driving a marketing campaign, ensuring that your emails and landing pages are visually appealing, engaging, and efficient to produce is no small task. That’s where Beefree comes in.
Beefree team
Feb 26, 2025

8 Common Email Spam Triggers That Can Damage Your Sender Reputation

Whether you’re employing a lifecycle email marketing strategy or simply confirming an order, we’ve outlined the basics of how spam prevention works, why it matters, and how to avoid running afoul of some commonly used triggers.
Beefree team
Feb 14, 2025

Email strategies you’ve likely heard of but haven’t implemented yet

While email marketing has come a long way and is changing faster than ever, there’s only so much you can do within 600x1,500 pixels. However, there are no limits to where your creativity can take you. 
Kruti Shah
Feb 5, 2025

Getting Started with Beefree: A Guide to Streamlined Email and Landing Page Creation

Whether you're designing a newsletter, promoting an event, or driving a marketing campaign, ensuring that your emails and landing pages are visually appealing, engaging, and efficient to produce is no small task. That’s where Beefree comes in.
Beefree team
Beefree team
26 Feb
2025

Creating professional emails and landing pages can be challenging for businesses of all sizes. Whether you're designing a newsletter, promoting an event, or driving a marketing campaign, ensuring that your emails and landing pages are visually appealing, engaging, and efficient to produce is no small task. That’s where Beefree comes in.

Beefree is a robust tool for designing emails and landing pages with ease, offering templates, automation features, and seamless integrations. Regardless of your industry or goal, Beefree empowers you to craft high-quality communication and marketing materials quickly and effectively. By providing an intuitive and user-friendly experience, it helps businesses transform their creative ideas into polished campaigns without requiring extensive technical expertise.

source

Why use Beefree for professional email campaigns?

Before we jump into the nitty-gritty of using Beefree, let's quickly go over why this tool is worth your time. There are a lot of email marketing tools out there, but Beefree stands out from the crowd for a reason. Let’s break down the unique benefits that make it an invaluable asset for anyone serious about email marketing:

Design made easy:

According to HubSpot, well-designed emails can drive open rates as high as 30%. Maybe you’re following up with leads from a recent webinar or you want to reach potential clients after a product launch. But you're finding yourself stuck because crafting professional emails and landing pages that capture attention is no easy feat.

With Beefree’s intuitive design tools and a library of over 1,700 templates tailored for various industries and purposes, you can achieve professional results without the guesswork. The wide variety of pre-designed options ensures that you can find a solution that aligns perfectly consistent with your brand.

source

Time-saving features:

Speed is key, especially if you’re running time-sensitive campaigns. Beefree simplifies the design process with reusable content blocks, real-time collaboration tools, and the ability to transform emails into landing pages with a single click. These features enable you to produce high-quality materials in less time, allowing you to focus on strategy and content rather than struggling with technicalities.

According to a Beefree report, 82% of users report faster email creation. The ability to save and sync reusable content blocks means you can replicate what’s working without reinventing the wheel each time. Once you find a winning format, you can use it again and again with minor tweaks to fit the audience or campaign.

Maybe you’re following up with leads from a recent webinar or you want to reach potential clients after a product launch. With Beefree’s templates, you can get those messages out quickly and make sure your brand stays top-of-mind for your audience.
Using email cadence software like QuickMail ensures that outreach campaigns maintain a structured and effective flow, preventing overwhelming inboxes while keeping engagement high.

source

Increased engagement:

A significant 64% of Beefree users report an 11% or more increase in click-through rates after using the platform. By enhancing the visual appeal and personalization of your emails, Beefree helps you achieve better engagement with your audience. The ability to test and iterate your designs ensures continuous improvement in performance.

source

Getting started with Beefree templates

Alright, now that you know why Beefree is so powerful, let’s talk about how you can get started with their massive library of templates. This section will walk you through choosing and customizing a template that works for you.

1. Choose your template

The first thing you want to do is pick a template. Beefree’s catalog has templates for just about every sector—whether you're in retail, healthcare, SaaS, you name it. With a variety of options, you can find something that suits your goals perfectly, whether for a simple newsletter or detailed marketing report templates. Say you're promoting a webinar—just pick a template that’s built to highlight your CTAs, and you're off to the races.

The best part? You’re not starting from scratch. You save hours by picking a pre-designed template, and then it’s just a matter of customizing it to fit your brand. Beefree's templates are super flexible—add or remove elements, change colors, switch up the fonts, rearrange layouts—make each email uniquely yours without the hassle. This flexibility is especially beneficial for maintaining a low code architecture in website design.

2. Personalize

Consistency is key to building trust, and when your emails have a cohesive look, it helps recipients recognize your brand. It is also important to follow a brand style guide for your email campaigns so that the audiences can associate elements like your logo, colors, and fonts easily with your brand.

When using a template, customization is key to making your emails and landing pages feel unique and relevant. With Beefree’s drag-and-drop editor, you can easily tweak templates to align with your branding. Adjust colors, fonts, and layouts, or add personalized content such as recipient names and company details. The flexibility ensures that your final output is as distinctive as your brand’s voice.

Plus, with so many people opening emails or landing pages on mobile devices, Beefree’s mobile design builder guarantees that they look great no matter what device they’re on. When your emails look good, people trust your brand more, and that makes them more likely to click through and take action.

Personalization isn’t just a nice touch; it’s essential for engagement. According to Campaign Monitor, personalized subject lines can increase open rates by 26%. By tailoring your designs to speak directly to your audience, you can create a more impactful experience. Furthermore, the platform’s collaborative features allow team members to provide input and make edits in real-time, enhancing efficiency and creativity.

1. Export

So, you’ve picked and customized your template—now it’s time to send those emails.

One of the coolest things about Beefree is that it plays nice with just about every major email platform out there—Mailchimp, HubSpot, Outlook, Quickmail—you name it. This means you can create a killer email in Beefree, connect it to your favorite email platform, and schedule it all from one place. For more advanced needs, many businesses choose a CRM with email integration, to seamlessly combine customer management and automated outreach.

Start designing for free

Beefree simplifies the process of creating visually appealing, professional emails and landing pages, saving you time and boosting engagement. Whether you’re looking to streamline your workflow or enhance your marketing efforts, Beefree offers the tools and flexibility to meet your needs.

The best part? You’ll save time and see increased engagement, connecting with your audience in a meaningful way. In a world where everyone’s fighting for inbox space, Beefree helps you stay ahead of the game by simplifying the process while delivering professional results. So, why wait? Dive into Beefree today and see how it can transform your email campaigns.

8 Common Email Spam Triggers That Can Damage Your Sender Reputation

Whether you’re employing a lifecycle email marketing strategy or simply confirming an order, we’ve outlined the basics of how spam prevention works, why it matters, and how to avoid running afoul of some commonly used triggers.
Beefree team
Beefree team
14 Feb
2025

In 2024, roughly 361.6 billion emails were sent per day. Whether you're using email for business or to keep in contact with your long distance cousin (do people still do this?), it’s easy to picture just how clogged someone's email can get. That's where modern day Email Service Providers (ESPs) come to save the day with trigger-based spam filtration tools.

For user these spam filters help ensure a smooth email experience, free of spammy and fishy emails. However, as email marketers, these filters lead us to be overly cautious out of fear that our emails are not accidentally filtered out.

Whether you’re employing a lifecycle email marketing strategy or simply confirming an order, we’ve outlined the basics of how spam prevention works, why it matters, and how to avoid running afoul of some commonly used triggers.

Why you need to avoid email spam triggers

Whether you’re an ESG reporting software or a travel company email spam triggers can email marketing performance and in turn hurt your business. For one, there’s the obvious reason that if your emails get sent to the spam folder, they probably won’t be seen. That's time and effort wasted.

Beyond that, being sent to the spam folder too many times delegitimizes your email marketing, which damages what’s known as your sender reputation. When just starting out, this reputation is effectively neutral. But if it gets too low, it could damage your marketing performance and even result in being blocklisted.

How email spam filtering works

As mentioned above, spam filters are implemented as a form of quality assurance and protection for end-users. Here's how ESPs determine content to be spam:

  • Sender reputation analysis: ESPs check sender reputation based on authentication, user complaints, bounce rates and sending patterns. They’ll also check the reputations of your IP address and web domain.

  • Content analysis: Content filtering uses triggers like keywords, formatting and error detection to distinguish spam from legitimate email marketing.

  • Blacklists: Along with sender reputation metrics, ESPs also cross-reference email senders against any of several blacklist databases. Being on even one of these means you’ll struggle to climb out of the spam folder at all.

8 common email spam triggers and how to avoid them

Now let's get to the good stuff. Prevention is generally the best strategy when it comes to avoiding email spam triggers. Here are seven factors commonly used by ESPs to filter spam emails, and the simplest solutions for dealing with them.

1. Lack of authentication

Missing authentication is one of the first red flags an ESP will pick up on. Authentication shows you’ve taken certain steps to establish legitimacy. It’s also used to prevent fraudsters from impersonating your brand online. There are three commonly used forms of email authentication:

  • Sender Policy Framework (SPF): This means publishing a list of mail servers and IPs with permission to send messages using your domain. This is one reason it’s important to conduct email marketing through a branded business email, rather than a personal account.

  • Domain Keys Identified Mail (DKIM): A cryptographic signature which shows a message’s original content has not been altered during sending. Think of it like the tamper-proof seal on a bottle of milk.

  • Domain-based Message Authentication, Reporting and Conformance (DMARC): A way for you to establish how you want receiving platforms to handle authentication failures related to your domain.

2. Shady linking practices

Link placement and presentation play an important role in email marketing. Aside from engaging recipients and securing click-throughs, using links appropriately helps avoid your emails looking like spam.

Questionable linking practices include:

  • Links to domains with poor reputations
  • Excessive numbers of in-email links
  • Compressed, modified or obscured links, particularly when generic link shorteners are used

Only link to your own authenticated domain. Also, use an unlimited bandwidth VPS to help ensure your website access speed is always stable and fast. This will give visitors the assurance that your site is legitimate.

Don’t forget to make the purpose of any in-email link absolutely clear.  

3. Content

Although the reason for an email landing in a spam folder is often related to authentication, reputation, or poor formatting, content can at times be the culprit. Here are elements that you should look at if you suspect that your content is why your emails are not reaching their recipients:

  • Typos
  • Irrelevant content that doesn’t foster positive engagement
  • Poorly translated text
  • Partner content with poor reputation
  • Possibly offensive content
  • URLs or images with poor reputation

Another thing to note is language detection filters. Various words, phrases and tone choices have strong associations with scam emails. This includes certain buzzwords, vague or exaggerated claims, or excessive sales jargon. However, this is only really an issue when you already have a bad reputation.

Nevertheless, let’s say you’re beginning to build your reputation back up and are conducting Black Friday email marketing. While it’s important to use engaging language and strong CTAs, you should avoid terms like:

  • Limited time only
  • 100% free
  • Make money from home
  • Avoid bankruptcy
  • You have won

4. Bounce rates

A ‘bounce’ is when an email doesn’t arrive in the recipient’s inbox. This could be due to it being sent to a fake email address, an out-of-date email that is no longer in use, a full inbox, etc.

When a sender frequently experiences high bounce rates for their emails, this damages their reputation with ESPs.

But how do you improve bounce rates and, therefore, your reputation? The best way is to have good segmentation practices to ensure the right content goes out to the right people. You should also keep your list clean by regularly evaluating it and removing hard-bounce email addresses as well as inactive subscribers.

Moreover, ensure you send relevant messages that your audience actually wants to receive. Of course, always be mindful of the rest of the triggers on this list to make sure you’re protecting your sender reputation.

5. Misleading email subjects

Even if you’re not trying to do anything malicious, misleading subject lines can trigger email spam filters. For example, an email might claim to promote educational B2B content about internal audit controls. Then, instead, link the user to a landing page to sell them a product.

Always set clear topic sentences as email subject lines. Try to summarize the content and intent of the email. If you’re sending a welcome email for customer retention or promoting, say, a product or sale, make it obvious before the recipient clicks on it.

6. Poorly written and formatted emails

Poor formatting and low-quality writing are other important email spam triggers. Common writing triggers include:

  • Overly vague language lacking personal detail
  • Typos and spelling errors
  • Being too brief

A marketing email can trigger spam filters if it lacks formatting of any kind, or if there are inconsistencies. It’s also suspicious when marketing emails lack branded color schemes, imagery or the correct logo design.
Avoiding these email triggers is simply a matter of emphasizing professional communication standards in email marketing.

7. Poor engagement

Low engagement manifests itself through a lack of interaction with your emails from the recipients—low open rates, click-through rates, and conversion rates, as well as low subscriber count are all indications. 

Consistently low engagement will likely result in your emails being filtered into spam. To combat this, you should strive to deliver good and captivating content tailored to your audience. More specifically, you can:

  • Use segmentation to personalize your emails and craft the most compelling content for each segment.
  • Put together attractive subject lines
  • Make use of solid and clear CTAs

8. Getting blacklisted

Improving your sender reputation, also means you don’t run the risk of being blacklisted. Blacklists are a useful prevention tool, but if you end up on one of these lists, your email marketing is more or less guaranteed to end up in spam folders.

Aim for prevention with email security and compliance training, and don’t send unsolicited marketing emails. You can also use a blacklist checking tool to make sure your sender emails haven’t been compromised.

Maintaining your sender reputation is essential

Email spam triggers aren’t all bad, they ensure that your well crafted messages aren’t drowned out and that users are able to easily see the emails they’re interested in. 

To reap these benefits, you need to keep an eye on these triggers and protect your sender reputation. Don’t worry, though. It’s easy to deliver marketing copy that avoids email spam triggers once you know what they’re looking for.

Stay informed on all email trends

From the latest creative design strategies that inspire your next campaign to industry best practices and tech advancements, our newsletter is the go-to for all things creation.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
By clicking Subscribe you're agreeing with our Privacy Policy