Industry insights

In our Design Inspiration post this weekon design tips for end-of-year fundraising campaigns,we identified six key ways to increase donations through email: tell a story, make your first headline count, create structure with a modular layout, use typography and good design to make a statement, strategically place your calls-to-action, and get personal. As we wrap up 2015, fundraising is going to be a huge focus for many organizations, and the need to stand out is greater than ever.

Today's workshop

Our workshop this week will lead you through the steps to follow to create your own successful fundraising emails, guaranteed to increase donations to your organization.One email we included in the post, from Memorial Sloan Kettering Cancer Center, had an interesting layout that caught our eye:

The email is simple: it's a letter from the senior vice president of development that tells a story, gets personal, and speaks directly and candidly to potential funders. Though it'sa long, text-heavy email, smart text formatting maximizes readability andcreates a sense of organization:

• The text is black on a white background
• Paragraphs are kept short
• Bold font makes key takeaways stand out
• Linked text is obvious in blue and because long strings of text are linked (vs just linking one word)

There aren't any elaborate design elements, but the email is focused andcommunicates a clear message that leads to a clear call-to-action. That wide, blue "Give now" CTA is well-placed, as research has shown that placing a CTA button below the fold canincrease clicks by 304%.That's because it's critical to let readers know why they should take action—with great copy and visuals—before actuallyinviting them to act.But Memorial Sloan Kettering can't count on each subscriberto read or even skim the entire thing. It's essential to communicate the key message quickly at the top of an email, so that even with a cursory glance, readers can get the gist.MSKcovers their bases by leaving their key CTA button at the close of the email but by also includinga succinct summary version of their email in acallout box in the upper right corner.With this cleverlayout design, MSK simultaneously keeps its main message above the fold withaCTA button, whilea second CTA closes the message for those with the time and interest to read the full email. It’s a great tactic for reaching as many readers as possible.

Let's get started!

The text formatting in the body of the MSK fundraising email is straightforward, but how do you create a callout box in a single-column email that isn't the full width of the email,formatting it so it has a border and a CTA button, and make sure that the entire email is responsive and looks great on mobile devices? That complex layout design is exactly what we'll cover in today's workshop. We'll use the BEE editor—it's free, online, and requires no registration, so feel free to give it a try and follow along with us.

Getting the structure right

First, let's break down the anatomy of the email,orthe structure of the modules that make up the message.

The email has three rows: the first one is split into two equal-width columns, each one containing an image that makes up the header. The second row also has two columns, but the left column is wider than the right. And the final row is one column, containing most of the body of the email.To get started, we'll recreate this structure in BEE, stacking these three containersatop one another from the Structure menu. This is the most important part of setting up our email—including the callout box—for success.

So our email layout looks like this:

Already, we have our complex layout set to go! The BEE editor allows us to customizecontent arrangementat a granular level, so positioning that special callout box isa piece of cake. Keep reading for instructions on how to bring it to life.

Arranging the content

Now that thestructure of our email is in place, we can drag in the appropriate content blocks.The header will have two images side-by-side, one for the MSK logo and one for the horizontal blue line.The second section will havetext on the left for the body copy, as well as text and a button on the right where we'll build our callout box.The third section will be text, followed by the final CTA at the bottom.Here's how it looks:

Before we drop in the actual content, let's go to the Body menu and set up our content properties. We'll want to increase the width of the email to 600px to match Memorial Sloan Kettering's. The font used is Georgia, and the link color is a boldblue.

Now let's drop in the actual content. We saved the images from MSK's email, so we can easily drag those in for the header. Then we'll simply copy and paste the rest of the text.Here's the email with all content in place, before makingany formatting changes or adjustments.

Formatting the header

There are some obvious changes needed to be made to the header so that it better matches MSK's.Here's ours:

And here's MSK's:

Starting on the left, if we select the MSK logo, we can left-align it in the Content Properties menu on the right.

Then we need to bring the blue line down so that it's center-aligned with the logo.The easiest way to do this is to adjust the top padding on the image, increasing the white space between the line and the container's upper border. To do this, we'll select the line image, then navigate to the Spacing section of the Content Properties menu. We'll make sure we can see More Options, then increase the top padding to 20.

Now we're in business!

Formatting the callout box

The text in the callout box is Georgia size 14, with the second paragraph bolded, and the last sentence linked. All the content is centered. We'll mimic all of that in BEE with text editing menu that appearswhen we select text:

Next, we'll format the button so that it's the full width of the callout box (adjusting the width to 100% in the Content Properties menu) and so it's the same blue color as the links (we'll copy and paste that HTML color code from the color we chose in the Body menu). We'll also use Arial for itsfont. For step-by-step instructions on all the ways to format CTA buttons in BEE, check out our postHow to design bulletproof CTA buttons in email.

Now our button looks more like Memorial Sloan Kettering's:

Lastly, and most importantly, we need to set this callout section apart from the email with a blue border. If we click the row that holds the first part of the body text on the left and the callout box on the right, we're shown a Column Properties menu that allows us to customize individually each column. This is an exciting feature of BEE. Each column we create can have its own custom background color, border color and width, and padding.

In this case, we'll format Column 2 so that it looks like MSK's callout box. Select the Column 2, and scroll down to the Border menu. Increase the border from 0 to 1. Then paste in the same blue color code to change the border from transparent to the color we want. Check it out!

Just like that, we have our callout box! When you make your own, you could also try adjusting the background color and border width and color. Let us know how it goes!

Final adjustments

To complete our email, there are a few final tweaks to make:

• Add bold emphasis and links to appropriate sentences in the body text
• Adjust the padding between content structures so all the pieces of the email are spaced equally
• Format the final CTA button to be the full width of the email and the same blue color
• Preview the email to see how it looks on mobile

In preview mode, we can check out our responsive design in action. It's really coolto see how the header design and callout box respond beautifully to the smaller screen size:

It's clear Memorial Sloan Kettering put some time and thought into this email design to optimize readers' experience and, hopefully, bring in donations.Fortunately, in an email editor like BEE, it's simple to put together complex layoutsthat look great on all screen sizes and accommodate the reading preferences of your subscribers. Try the BEE email editor and maximize the impact of fundraising emailsthis season, and let us know how it goes!

Advertising revenue continues to be the bread and butter for many publishers. Over the last years, advertising revenue has changed its form, moving from traditional media to digital, mobile and beyond.Following this digital shift, many publishers are using advertising in their email newsletter publications to generate a steady revenue source. In some cases, email advertising accounts for over 20% of total ad revenue!In this blog post we'll shine a light into how ads in email are used by a number of publishers and provide you with a snapshot of how they're incorporating ads in their email newsletter publications — including which email ad types are being used and what's the technology behind.

Email advertising commonly accounts for over 20% of total ad revenue.

In This Guide

• Email Ad Types
• How Top Publishers Use Ads in Emails
• How Top Tech Publications Use Ads in Emails
• How Newsletter-Only Companies Use Ads in Emails
• How Mid-sized Publishers Use Ads in Emails
• Ad Technology Providers & Ad Networks
• Best Practices for Email Ad Design

Email Ad Types

The way ads appear in emails differs from brand to brand and publisher to publisher, but they tend to fall into three main categories: display ads, native ads and sponsored emails.

1. Display/Banner Ads

Display advertisements, also known as banner ads, are a form of ads embedded into a website — or in this case, into an email — that typically include static or animated images, a video and/or text that communicates a marketing message.You’ve seen them before. Check out this example from PureWow, a digital publication featuring women’s lifestyle content. The newsletter included a Forever21 display ad at the bottom of the message:

Display ads have been around pretty much since the internet has existed, and that means they’re in our email inboxes, too. But these days, banner ads are often considered outdated eyesores that people have learned to tune out. Click-through rates on banner ads have reportedly fallen to a meager 0.06% (way down from 78% on the first banner ad ever in 1994).However, despite fears of “banner blindness,” brands still use them. As you’ll see in our section on Display Ads in detail, advertisers and designers strive to be increasingly creative and clever with banner ads — so you can count on continuing to see banner ads in emails.Many display ads you see in your browser while surfing the web are targeted, interest-based ads that are displayed based on your browsing history. These ads can be based on the content of the page you’re visiting or the registration information you provide. They could also be shown based on predictions about your interests generated from your visits to other websites (via cookies).You’ve probably seen the AdChoices logo in the corner of a display ad. AdChoices gives readers some control over the content of these targeted ads:

The AdChoices program has been around since 2011 and is managed by the Digital Advertising Alliance (DAA). Its stated goal is to provide consumers with information about how online advertising works and the choices you have. Click on an ad with the AdChoices logo, and you can control whether you receive interest-based advertising and from which companies.This type of display ads exist in email, too. Some publishers use a separate platform (like LiveIntent, which we'll revisit in the Ad Networks & Tech Providers section) designed to place real-time advertising in email. The moment an email newsletter is opened, a user-interest ad populates via HTML code.Here’s an example from email newsletter Cut. See the “Recommended by PowerInbox” text? PowerInbox helps publishers and brands provide personalized ads that subscribers are more likely to engage with.

2. Native Ads

Native advertising — we’re sure you’ve heard the term. But if you’ve wondered what exactly it means, you’re not alone. Native ads can look different for different publishers. Essentially, native ads are ad content that fits seamlessly into the existing content of the brand or publisher.The IAB describes it this way: “Native advertising is paid ads that are so cohesive with the page content, assimilated into the design, and consistent with the platform behavior that the viewer simply feels that they belong.” It’s emerged more prominently in the last few years as a way for marketers to engage with consumers on a new level — a way to connect with a built-in audience by providing quality content that could already be there, making it feel like a “native” or natural experience.Because there is no “standard” in native advertising, the approach has faced a lot of controversy. Readers have, at times, felt fooled by native ads that appeared to be “pure” journalism or regular site content only to find out what they’re reading is a paid advertisement.That’s why it’s become critical for native ads to be easily distinguished if brands want to maintain readership and consumer trust and loyalty.The Interactive Advertising Bureau advocates that, for paid native ad units, clarity and prominence of the disclosure is paramount. The disclosure must:

1. Use language that conveys that the advertising has been paid for, thus making it an advertising unit, even if that unit does not contain traditional promotional advertising messages.
2. Be large and visible enough for a consumer to notice it in the context of a given page and/or relative to the device that the ad is being viewed on.

Simply put: Regardless of context, a reader should be able to distinguish between what’s paid advertising and what’s publisher editorial content.Here’s what a native ad looks like in the OZY Weekender (see: “Reap the benefits of a sustainable closet”). OZY let you know at the beginning of the message that the email was sponsored by Cariuma.

An oft-cited benefit of native ads — when they're transparent and not “sneaky” — is that they're way more relevant for a target audience than traditional ads. The same holds true for interest-based display ads. The more an advertiser understands a person's interests and behaviors, the more targeted the ads can be. In theory, this benefits both parties.Plus, native ads are less in-your-face than typical banner ads. The approach forces brands to create content that many readers perceive as higher quality than traditional ads, making native advertising a particularly exciting and appealing advertising method for many publishers right now.

3. Sponsored Content and Sponsored Emails

Sponsorships through email can take multiple forms. One common approach is to allow a third party to sponsor your content in exchange for an advertisement or endorsement in your email. Here’s that approach in practice from Product Hunt Daily. Check out the section at the bottom from Zendesk Suite:

The sponsorship approach allows Product Hunt Daily to make money through advertising while maintaining control and trust with their readership. They accomplish this by keeping the ad on-brand (see how the ad looks similar to the “Yesterday’s Top Hunts” section?). Like a native ad, this sponsorship fits in with Product Hunt’s content.Another sponsorship approach is to send out an entire email to your audience from a third-party sponsor. It’s kind of like you’ve rented out your email list in that you’re accepting payment from another organization in exchange for sending a promo email to your list. It’s a common practice among publishers.Below is an example from Listings Project, a weekly curated email of real estate and opportunities listings for artists and creative communities. In this case, to maintain that trust and transparency with readers, Listings Project does two things: 1) They’re upfront about what they’re doing. At the close of each sponsored email, they include this statement: “In addition to our regular weekly newsletters, we send out occasional dedicated email offers and promotions from our sponsors.”And 2) They clearly label sponsored emails in the subject line, so readers understand what they’re getting even before they click to open.

How Top Publishers Use Ads in Emails

With the decline in print media advertising thanks to the internet, the publishing industry has faced a sink-or-swim environment in which publishers have had to reinvent how they reach their audiences, create content and sustain themselves, with effective advertising playing a critical part. Let’s take a look at how some of the top publishers use ads in emails.

New York Times

Leading header display ad followed by two larger ads

Let’s take a look at this email from the New York Times. This newsletter includes three ads total: one display ad at the top (Cariuma), another large ad (Gilt) in the middle and a second Gilt ad near the bottom. The ads are spaced out throughout the email so you can browse through the headlines without being interrupted too often.

Lit Hub Daily

Display ad

In this newsletter from Lit Hub Daily, a display ad for Castro is featured near the bottom. Take a look:

Right away, we noticed there’s no banner ad at the top. It’s easy to get straight to the meat of the content, which is what readers are looking for.

Key takeaways from how top publishers use ads in emails:

• Major publishers tend to use more interest-based display ads than other types. Depending on the publisher, it could be because certain ad slots were not sold to major sponsors, and interest-based ads provide more revenue than typical remnant ads.
• Ads are evenly distributed throughout an email with at least three stories or headlines between ads. Some are placed in breaks between sections.

Remember to consider:

• First impressions. Think about how readers might feel when they open your email to see an ad at the top, first thing.
• Space. Balance content with ads. Top publishers dedicate 60%+ of email real estate to content and the rest to ads.
• Placement. Are ads eyesores in the middle of your content, or are they well-integrated with the design of your newsletter?

How Top Tech Publishers Use Ads in Emails

The major technology publications treat advertising similarly to the top publications we reviewed above. They may be cutting edge when it comes to covering the latest technology news and innovations, but are very traditional when it comes to how they use ads in email. Let's look at a couple of them.

Techcrunch

Sponsored content done well

Techcrunch, the longstanding popular technology blog now owned by AOL, typically uses a combination of display and sponsored content in their email newsletters. In this email, we see just one ad — a sponsored ad cleverly disguised to look like just another news item. Can you spot the ad? Yep — it’s the “Find Keywords to Boost Your SEO” section.

CNET

Targeted ad

CNET packs a lot of content into its daily dose of technology news. Here, you’ll notice an ad for Capital One Shipping in the bottom right column of this message. See the AdChoices logo? That means this is a targeted, interest-based ad.

Key takeaways from how top tech publishers use ads in emails:

• Top tech publishers advertise in emails just like other publishers, using multiple approaches including sponsored content and interest-based display ads.
• Tech publishers tend to avoid placing banner ads at the top or header of an email, but aren't afraid to place multiple ads within an email.

Remember to consider:

• Transparency. Sponsored content and native ads need to be clearly distinguished with text and design elements like background color and/or labeling.
• Layout. Using multiple columns in an email, where ads distract and clutter along the side, is not a best practice. Use a single column layout that's easier to read, better for mobile viewing and doesn't make the email — including ads — feel cluttered.

How Newsletter-Only Companies Use Ads in Emails

The past few years have seen the emergence of a new kind of publisher: the email-only newsletter. The Skimm, Thrillist and the now-defunct Daily Candy are all examples of this type of publisher. Though they may republish their content online, the purpose of these publications is to reach people by email. That means doing in-email sponsorship right is even more important — these publishers don’t necessarily have a website to rely on for their “real” advertising revenue.These publishers tend to feature well-integrated advertising sponsorships with content and ad placements throughout the email to maximize revenue. Take a look at how two of these companies handle these sponsorships successfully.

Inside Deals

Inside Deals curates the best deals from around the web and delivers them straight to your inbox. The newsletter is presented by IBM Watson and there are two ads included throughout the email (clearly earmarked with text reading, “A message from IBM Watson”).(This image no longer exists)

The ads don’t include images or take up too much space. If you aren’t interested, it’s easy to just keep scrolling. But if you do want to check it out, it’s easy to do that, too.

Morning Brew

Morning Brew is a daily newsletter with a goal of helping you become smarter in just 5 minutes. This recent newsletter was presented by AthleticGreens and we see one sponsored ad that’s presented in the same format as the other news items in the email.(This image no longer exists)

Key takeaways from how newsletter-only publishers treat advertising:

• Sponsorships and advertising are even more important for email-only publishers, since they don’t have additional advertising revenue from a website to rely on.
• Email-only publishers can be especially innovative with their advertising campaigns, with integrated email headers, atypical banner sizes and color choices.

Remember to consider:

• Full sponsorships. Email takeovers and fully integrated sponsorships from one brand work best for this type of publisher.
• Labels. Label sponsored content appropriately, and use visual cues to demonstrate that it’s a different type of content, such as a different color background or a different color CTA button.

How Mid-sized Publishers Use Ads in Emails

The mid-sized publishers whose newsletters we pulled for this analysis use a variety of ad types. But in general, fewer ads appear in emails compared to the bigger, top-tier publishers we looked at earlier.

Practical Ecommerce

Sponsored ads throughoutPractical Ecommerce sends a daily roundup of down-to-earth articles and commentary for ecommerce businesses. In this recent example, we see two total ads, both sponsored: “A message from Wynter” at the beginning of the message and “A message from Zentail” in the middle.

Sidebar

No mid-email ads

This email from Sidebar is easily skimmable, without too many ads cluttering it up. There’s just one advertisement total — a sponsored ad at the bottom (that’s clearly marked as such).

Key Takeaways from How Mid-Sized Publishers Use Ads in emails:

• Unlike top publishers, mid-sized publishers tend to avoid interest-based display ads. Because the mid-sized publishers we featured here are more niche publications, they may have niche advertisers and rely less on ad networks to fill their ad inventory.
• Mid-sized publishers use fewer ads in emails than top publishers — typically about two — even if they’re sending just as much content as bigger publishers.

Remember to consider:

• Readers. With a smaller readership comes fewer ads. In order to build up your audience, it’s wise to focus on content first.
• Size. If an ad is the first thing readers see in your email, consider making it a narrower, less obtrusive ad.
• Format. Avoid putting a display ad right next to a story headline without a barrier between the two. Always be clear and transparent.

Email Ad Networks and Technology Providers

If you're looking to implement email advertising in your email newsletter publication, we've listed a few resources and providers to take a look at.First, check out an email ad network. Email ad networks connect publishers and advertisers so that publishers can easily monetize emails. For publishers without existing advertiser connections, it’s an opportunity to generate revenue through email. The advantage for advertisers is that emails provide a unique opportunity to get exposure to an audience through an established brand trusted by readers who have opted-in to receive content.

LiveIntent

LiveIntent is one of the most well-known companies operating in this space. LiveIntent targets well-established brands: They require three million monthly ad impressions (emails opened) to use their service. Publishers that do use LiveIntent simply place static HTML tags into their email templates, and the ads populate.

Gold Lasso

Gold Lasso specializes in native ad monetization. Like LiveIntent, the company provides code, but it’s customized to match the template and format of your newsletter.

PowerInbox

PowerInbox specializes in animated product displays and real-time tickers, helping to make ad content stand out. They also offer an option to use “personalized content” — in other words, interest-based ads that populate upon opens.

Wrap-up: Email ad design tips

Ready to start designing? First, take a look at these email ad design tips:

• Ads should never make up the bulk of your email. Use them sparingly, to properly balance the content and advertising space allotments.
• Consider your readers. If you’re going to include ads, strive to make them relevant. Don’t put an ad for kitchenware in your email newsletter for car mechanics.
• Be transparent. Native ads need to use language that conveys it’s been paid for (think: “advertisement,” “sponsored,” etc.) that’s large and easy to read. Use design tactics to make your native ad look different from the rest of your content, like a different background color or a special icon or label.
• Design still matters. Consider the size and format of ads you choose, if you have control over it.
• Remember placement. If an ad is the first thing readers see in your email, consider making it a narrower, less obtrusive ad.
• The current standard format for most interest-based or square display ads is bulky, with lots of padding surrounding each display. Consider the real estate they’ll take up in your email and use them sparingly.

Use the BEE email editor to build emails that incorporate ads in the best way possible to engage your readers and earn more revenue!