Design

Countdown email timers are one of the most effective ways to add urgency to your message. And it's no wonder:whenreaders open an email with a timer, they instantly see a ticking clock with seconds slipping away in real time. It's a powerful tool. Countdown timers can be implemented in multiple ways in your email campaigns. Read on to get inspired by this roundup of great timers, and start planning your own.

Why use countdown timers in email?

High quality photography, illustration, GIFs, and other elements of good email design show readers the sophistication and cohesion of your visual brand identity.Countdown timers are anothertool in your visual storytelling toolbox that can delight readers and reinforce your brand.Countdown email timers:

• Create urgency
• Call readers to act (now!)
• Catch attention through movement

Like animated GIFs, we see countdown email timers pop up in email campaigns occasionally. Marketers understand their power.Overusecan lead todiminished engagement. But they're an incredible way to call attention to special emails when it's time to really compel readers to act. Here's how top brands are using countdown timers in email.

How to use countdown email timers

1. Encourage event registration

People notoriously wait until the last minute to RSVP. Including a countdown for the close of registration is a great way to motivate readers to finally make a move and sign up. That's what Skillcrush does in this class registration email:

The timer, by Motion Mail app, shows readers they only have a few hours left to sign up. Motion Mail allows you to customize the style of your timer. This one includes a data visualization: the circular graphs around each number correspond with the time left. It's clever and clean looking. Skillcrush also matched the timer to its brand pink color, so it fits in perfectly with its aesthetic and with this email.

We love that the rest of the email is plain text and includes a bulletproof CTA button.The timer does the visual legwork of catching attention and creating urgency, while the body of the email supports the CTA and leads to the button that prominently stands out. It's a great use of the timer at the top of the inverted pyramid structure of this email.

2. Promote the end of a sale

Ecommerce brands can capitalize on countdown timers to make a final push for the end of big sales. The tactic can beespecially useful around the holidays, whenthere are often in-time delivery deadlines andone-day special events like Black Friday. Here's an example from J. Crew:

The font and color of the timer matches the email perfectly, and the text following the timer completes the message. Readers don't even need to scroll to understand themessage—and its urgency.Recently, Macy's also sent a "last chance" timer email for a special sale. The email isn't as well designed as J. Crew's, but with a compellingsubject line (This is it: last chance for extra 25% off! Shop to it!) and attention-grabbing timer, we're sure this message got clicks.

3. Drum up donations

Email timers are a great wayto let readers know you're closing in on their last chance to support your event, campaign, or organization. Making a last call for donations might be the push some readers need to open their wallets.That's what presidential nominee candidate Ted Cruz is hoping with this flashy mid-email timer:

The timer is also accompanied by two flashing animated GIFs in the header before it, emphasizing the urgency and adding another element of movement to the email:

Here's the email in full:

4. Incite action

You may want to encourage readers to entera contest, sign a petition, register for a free offer, or nearly any other call to action with an impendingdeadline. Timers can be paired with these CTAs to underscore the limited window to act. The Environmental Working Group (ewg) recently sent this message with the subject line:URGENT: DARK Act vote TOMORROW.Tapping on aCTA button takesyou to a page where you can fill out a form to contact a government representative.

The design of the timer matches well with the nature of the email—it's a bit dark and ominous. It's a good choice for the serious nature of the message.

5. Remind readers to tune in

If you're hosting a Twitter chat, airing a program on TV or radio, holding a livestream, or otherwise counting down to a free digital event, using a timer lets you remind readers to tune in. That's what Nickelodeon sought to do with this Halo Awards reminder email:

And it's also what xfinity did in an email campaign leading up to the 2014 Olympics:

Even though readers don't need to take an action in the email itself (they don't have to tap a button to sign up, for example), the countdowns are a more engaging, dynamic reminder than a static email. Perhaps this caught the attention of more readers and caused them to look at the time, check their schedules, and make a mental note of when to tune in.

Wrap Up

Countdown email timers can be used in nearly any kind of marketing campaign. But they should be used sparingly. Most marketers reserve the timer for the final push (in the last24 hours)and don't use them for each promotion or campaign. Pack a punch with your timer by positioningit at the top of your email, giving it room to breathe with some padding, pairing it with a CTA button, and choosing a look and feel that aligns with your email and brand.Follow up with us on this Friday as we show you how to add a countdown timer to your email design in the BEE editorby using our new HTML block feature. It's easy!

Are you heading to SXSW this week? Whether you'll be on the ground at South by Southwest, or you're just following the going-on via Twitter, you're sure to get new tech insights and learn about exciting new technology and startups during the festival. The Austin-based event has become a seedbed for creativity and fresh ideas, from music to tech.There really is something for everyone at SXSW—and our inboxes reflect that. As the 2016 events kick off, email marketers have invited readers to join them in the festivities, live in person. Here's howsome of those brands use email to engage their audiences at SXSW, and what youcan learn about promoting your brand at tech conferences in the future.SXSW shares updates about the festival through it's own series of emails. Here's a look at their welcome email.

Tip #1: Get in the spirit of the event

General Assembly seizedthe opportunity to bringthe creative vibes of SXSW to New York City, where they're partnering with Alley to host a gathering in the Big Apple. Their email invitation includes this dancing clock GIF:

And tells readers to hop to it!

Even though the party is hundreds of miles away from the main event, it borrows the same celebratory culture of creativity and cocktails that guests will find at SXSW. And by celebrating in NYC, GA's creating an opportunity to meet with subscribers in what might be for most a more accessible venue. It's a great way to leverage the SXSW brand to bring people together.

Tip #2: Use inclusive language

Percolate, the marketing software company, recently invited readers to join them at their SXSW Interactive party. Their subject line reads: "Percolate’s going to SXSW. We’d love to see you there." And this is the email:

Between the subject line's earnestness—"We'd love to see you there"—and the warm language in the email about hosting "some of our dearest (and most creative) friends" for "great cocktails, company, and conversation," the tone of the emailmakes us feel like we've been invited by our closest buddy. Percolate goes on to tellsubscribers "We hope you'll stop by" and "Hope to see you soon." Without being hokey, they've created a simple, plain-text message that's inviting and inclusive. They're positioning themselves as part of the fun—this is a party at a tequila bar, after all—but they're also making it clear to readers that they should truly feel welcome to come, and that the event will also be about creativity, company, and conversation.Design-wise, Percolate also does a great job of using the inverted pyramid method, and their communication is concise and well-organized. That bulletproof button could use a little TLC—we'd extend the width so it's easy to spot and tap on mobile devices, and update the language to match the inviting tone: "Reserve my spot on Saturday."

Tip #3: Offer an ongoing invitation

Contently's Daily Digest newsletter has been getting us excited for SXSW for nearly two months now. Beginning January 14, Contently has included a special SXSWinvitation inthe last module in their newsletter. Here are two of the versions we spotted:

Contently understands that, as people, seeing something over and over again helps us absorb and act upon the information. They wisely started telling subscribers about their SXSW plans months before the festival. Even if readers didn't take note at first, or didn't always open or scroll down on each email, with repetition, the message is likelier to get through. And to make sure not to beat readers over the head with SXSW party talk, the invitation module was placed low in the email, just above the footer, and was kept simple and streamlined: a header line, subheader line, and CTA button (all in a playfultone of voice consistent with SXSW).

Tip #4: Focus on the CTA

An email invitation always includes a callfor readers to act: it's the time-honored RSVP! As a result, effective e-invitations should follow the rules of any other successfulmarketing email that's focused, hasa clear hierarchy, issimple, and leads readers right along to an obvious, well-placed, well-designed CTA button. eMarketer shows they know the drill in their SXSW email:

Including the SXSW logo at the top instantly gives reader a visual clue about the message of the email. From there, eMarketer includes a simple header—"Going to SXSW Interactive?—followed by two lines of text with additional detail, followed by a clever content break that looks like an arrow, pointing readers directly to the CTA. The CTA button itself is bulletproof, nearly the full width of the email (easy to spot, easy to tap), and is well-worded (it's descriptive, inclusive, and doesn't ask readers to "Click here"). In other words, the email is designed so that all the focus is on the CTA. It's an effective strategy, perfectly optimized for busy subscribers skimming quickly through emails.

Tip #5: Communicate visually

The OMMA Awards (Online Marketing, Media, and Advertising) honor agencies for exceptional digital advertising, and they're another brand attending the techy part of SXSW, SXSW Interactive. They recently sent this email invitation to subscribers inviting them to register for their SXSW event:

While we wouldn't award this email "Best in Design," we applaud OMMA for taking such a visual approach. They included a unique header design specifically to communicate about SWSX—a great way to get readers' attention and to show their commitment to the event—and they included the SXSW logo, an image of last year's event, and logos from featured speakers and brands. Such a visual email could benefit from a visual CTA, too, like a bulletproof button, but we dig OMMA's visual-forward thinking. Our brains process visuals elements at rapid speeds—much faster than we can read text—so visual communication is a great way to connect with on-the-go readers.

It's not too late to connect with readers over SXSW. Even if you won't be there, take a page from GA's book and host an event in your own city before or after the event, or send out relevant content this week that's connected to the festival.

Get started creating responsive, mobile-friendly emails in the BEE editor today!

In a recentDesign Inspiration post, we looked at how brands use email signatures to make a statement about their brand identity, build a connection with readers, and leave a lasting impression. An email signature isn'tjust for person-to-person business messages; creative signoffs areused in marketing emails to add a personal touch. In today's workshop, we'll show you how to create awesomeemail signatures in the BEE editor. Keep reading to learnhow!

Recap: Qualities of a great email signature

Check out our video recap:

These are the design best practices we'llkeep in mind as we create our email signature:

• Short. Just a few lines of text.
• Simple. A single font and a single accent color.
• Visual. With a headshot, signature, or logo.
• Organized. Hierarchy and structure matter.
• Linked. One or two calls-to-action.
• Personal. In our brand voice.
• Mobile-friendly. Responsive and simple; not a single image.

Version 1: Basic signature with plain text

Including an email signature is a statement in and of itself. Plenty of messages don't have them. But including a signature tells readers the email was sent by a real person and not by a robot. It makes the message a little more personal, and it says something about your brand (you're personal, friendly, thoughtful).So you can keep your email signature simple. Just having one already has a lot. Some examples of simple email signatures we spotted look like this:

Making a simple signature like this is easy in BEE. Let's open the editor and choose any templatewe'd like to get started.For either of these signatures, we can select a single-column container from our Structure menu...

...then drag in a Text box from the Content menu:

Now let's type in a nice signoff in our brand voice. We saw that Dropbox signs their emails "Happy Dropboxing!" and Mailcharts says, "Happy emailing." Above, Invoca signs off with a "Cheers." Instead of closing with “Thank you” or “Sincerely” or “Best,”we can use this opportunity to create a tailored signoff. Today, I'm going to go with this:

I like the font Georgia, so I'm going to choose it from our list of email-safe fonts, and increased the font size to 18px so it's easy to read.

Now, let's add some basic, linked details. Sticking to our "keep it simple" best practice, we'lladd two links: one to our Twitter account and one to the blog. A great opportunity to have fun with color and further brand the signature is to use a brand color for links. To change the color of links in our email, we'll go to the Body menu.

I'm selecting apale blue accent color we use onthe blog. When you add links, you can select if you want your linked text to be underlined or not in the pop-up menu.

Here's my signature:

On the blog, we talk a lot about the importance of calls-to-action in email. Your email needs to drive readers to a CTA button, and that CTA should be well-worded and well-designed. Anytime you link content, that's a CTA, too. One way to make linked content in a signature more compelling is by making it an active statement, and keeping it to just one link. Here's something to try:

It's more compelling than just adding a simple link, isn't it? Try it out and test the results with your subscribers.

Version 2: Add social buttons

We can keep our stellar simple design from Version 1, but instead of links, we can switch to icons, especially if we want to drive people to social media. I'll delete oursignoff one-liner and add a two-column structure beneath my name:

In the smaller column on the left, I'll add social media buttons from the Content menu. On the right, I'll have plain text.

Now, I'll edit my social media buttons. In this case, Iwant to includePinterest, since the Email Design Workshop recently started curating some awesome design boards on the site, and I want to drive readers there.

Then I'll add a line of text on the right.

To balance out the signature and create a stronger sense of organization and hierarchy, I'm going to drag in a divider line between the signoff and the Pinterest CTA. And voila!

To read more about customizing your social media buttons, check out our post on icon design here.

Verion 3: Include a headshot

It’s refreshing to see the person who’s sending an email—the personal touch might make readersmore likely to engage—so we really like these photographic signoffs from Hubspot and Apartment Therapy:

To create something similar in the BEE editor, we'll again start withthat two-column structure, but this time, we'll add an image placeholder on the left instead of one for social buttons.

Now it's as easy as dropping in my photo and updating the text, and we have a simple, personal signoff.

The BEE editor also has a built-in image editor from Aviary. You can crop, color-correct, add filters to an image, and more. Just select your image and press "Edit image" in the menu on the right. I'm going to use it to quickly update the photo to B&W.

To go with the new black and white theme, I can also add two social media buttons in the gray color scheme to round out the signature.

Or I can add a pop of color with a simple CTA:

There are plenty of possibilities! Have fun with your options and tools on BEE.

Version 4: Add a digital signature

Adding a hand-written signature to email is a greatway to add a personal touch to your email signature. To do it, scan your signature or create one in a program like Photoshop, then add it to your email as an image.To recreate Janel Laban's signature from Apartment Therapy, we'd start with this structure in BEE:

Then we can add in a headshot and signature image, and customize the text underneath for a title.

And thanks to BEE's built-in responsive design, the signature is optimized for mobile devices, too.

Creating an email signature is fun! Test out colors, CTAs, and images with yours, and let us know how they turn out!

Email signatures aren't just for person-to-person business emails. Manybrands use special, designed sign-offs tomake marketing messagesmorepersonal, seizing an opportunity to show readers what theirbrand is all aboutand to leave a lasting impression. After all, emails aren'twritten and designed by robots, but by a team of real people. If you're using email signatures in your messages, or if you're intrigued by the idea, check out how other companies use email signatures to make sure you're implementing best practices.

Dos and don'ts of email signatures

Let's begin with the basics. To create a stellar signature, here are some best practices to begin with:

DO

• Keep it short. Two or three lines of text is plenty.
• Keep it simple. Use one or two fonts and only one or two colors.
• Make it visual. Include an image of your headshot, signature, or logo.
• Consider layout and hierarchy. Give emphasis to your first line with a larger font size or bolded font. Use horizontal or vertical bars to separate content. Pay attention to alignment and spacing.
• Limit the links. You don't need to include every social media button and link to every project and site--you can save those for your email footer. Treat links in your signature like calls-to-action: limit links to the most important one (or two). Too many options will likely leave readers unsure of what to click (and then clicking nothing).
• Make it personal. Show your face with a headshot in your signature, or just make it a warm sign-off in your brand voice (avoid the overused "Sincerely" or "Thanks").
• Design for mobile. Any links or clickable content should be large enough to easily tap on a mobile device.

DON'T

• Include your email address. It's redundant and unnecessary!
• List every way to contact you. Include just one or two, like a link to your site and a phone number.
• Make it an image. Include a headshot, logo, or icon, but make the rest of your signature plain text so it appears when image viewing is turned off.

Email signature design inspiration

Signatures with a smile

Hubspot, the inbound marketing company, often emails subscribers witha personalized "from" line from a single person on their team, like these recent messages from marketing manager Juliana Nicholson.

Because Hubspot is making it clear these emails are coming from a person (not just some unknown voice or facelesscompany email address), Juliana also signs off her emails with a signature that includes her photo.

It's refreshing to see the person who's emailing us--the personal touch might make customers more likely to engage with the email. Her signature follows important design best practices: it's only two lines, uses one font, and has one link / call to action.

Simply linked

Links in your signature are calls to action. They're an opportunity to send readers to your website to learn more. But including too many links can makeyour signature long and cluttered, preventing subscribers from actually reading it, let alone clicking.The Mint Life Blog sends out content with free, simple personal finance advice. A recent email featured content from author Beth Kobliner, butinstead of a simple sign-off to close the email, her whole bio was included, which felt like too much information and way too many links to close the email with:

By contrast, Invoca, the software company, has a really simple two-line signature that includes three links:

It's well-organized, simple, and minimalistic. A Song A Day, the service that curates and sends songs to subscribers, has a similar signature with two links:

Giving readers a simplified list of links (CTAs) streamlines your signature and calls attention where you want it to be called.

Signed, sealed, delivered

A great way to add instant personality and intimacy to an email is to include good old fashioned handwriting. Or at least an image of a handwritten signature. Emails from Skillcrush, a company offering web design, marketing, and other online classes, often include the signature of Adda Birnir, the company's CEO:

The sign-off reminds readers that the content is coming from a real person, and it reinforces a connection between readers and the Skillcrush brand. Likewise, artist and designer James Victore "signs" all his newsletters, too:

Victore isn't afraid to take up a lot of real estate with his signature; it emphasizes to readers that he wrote the email to them and for them. Plus, it's memorable. It makes sense that Victore doesn't add a photo or other details. The signature speaks for itself.

Signing off above the fold

We've noticed somenewsletters that include a module at the top where the sender can address readers in a more personal, informal way, before presenting the remainder of the email's content. Chef Mario Batali recently employedthis approach in his weekly digest of recipes, videos, and foodie tips for readers.

It's a great way to catch readers' attention at the outset of the message and to peel back the curtain on the newsletter and remind readers of the person who's behind it. Sometimes we're so focused on providing readers with great content that we forget to remind them that there are real people working to come up with and create that content specifically for them. An email signature is a great reminder of that. And we love how Mario signs off "love & lentils"—it's authentic and playful and makes a statement about his brand.Apartment Therapy recently took a similar approach with a note from its executive editor, Janel Laban, at the top of its newsletter.

Like Mario's note, this one is only a few sentences, and it reminds readers in a short and sweet way that the newsletter is coming from an actual person. We really like that Janel's black-and-white headshot and autograph are included, too.

Stepping away from "sincerely"

Lots of brands keep their email signature design super simple but take the opportunity to demonstrate their brand voice and identity with a playful line in the signoff. In other words, instead of closing with "Thank you" or "Sincerely" or "Best," these brands mix it up.MailCharts, the email marketing software, often closes their emails with "Happy emailing":

DropBox says "Happy Dropboxing!"

Artist Austin Kleon gets cozy with readers and signs off "xoxo" (it's a long email, so we're just including the signature):

Even with plain text, these sendersshow how a simple email signature is an opportunity to show readers who theyare.

Wrap-up: Best practices for email signatures

If you're on the fence about including an email signature, try it out and test how recipients respond. The more we started paying attention toemail signatures in our inbox, the more we found. They're a great way to connect with your audience, even if they're a tiny part of your email, like in these sweet-and-simple signatures from Kickstarter...

...and from Vimeo:

Why not leave readers feeling better connected with your brand at the close of your emails? Try out a few options in the BEE editor—it's free, online, and requires no registration. And don't forget to tell us how your email signature experiment goes in the comments!Plus, check out Bee Pro, our new toolset that gives you all the advantages of BEE with even more flexibility, template offerings, and testing capabilities to create beautiful responsive emails.

As we roll into March, spring break is on our minds. Sandy beaches, sunshine, swimming. Mexico, Aruba, Jamaica. Even a staycation sounds good right about now. The point is, it's time for a break. And the tourism industry knows it. Our inboxes have been filling up with travel newsletters. Let's take a look athow their email designs stack up.

No vacation blues for American Airlines

American Airlines brings us something bright and blue with this inspiring photographicemail.

The imagesare stunning.All that sea-and-sky blue ties togetherwith the blue CTA buttons and links, evoking a sense of calm and cool that's bolstered by the gray type andample white space. The simple, streamlined header and grid-based layout make this email easy to read. We're in vacation mode already! If we had to make revisions to this email, the number one thing we'd recommend is making it mobile responsive! The grid design is a perfect foundation for a responsive email—it could easily be rearranged into a single column for easy reading—so we were bummed out to see it appear on our iPhone screen the same way it appears on desktop:

AirBNB keeps it simple and structured

Just like American Airlines' email, this message from AirBNB is photo-forward, inviting us to come along for the journey with beautiful images.

We love how the plain text in this email is short and to the point. Notice how the only full sentence is at the top of the email—Explore our collection of weekend destinations near you—while the rest of the photo descriptions simply list top reasons to visit each place. It's the perfect approach for on-the-go audiences skimming quickly through this email.The email's simplicity translates well on mobile, though having a responsive design would have been optimal for improving text legibility and image resolution on a smaller screen. And again, the grid-based design makes it easy to go responsive.

Hipmunk inspires with illustration

Hipmunk, the San Francisco-based online travel company, takes a break from the photo-intensive approach with this playful, illustrated email about booking flights:

Hipmunk's email is so well executed. It's well organized: it begins with a clutter-freeheader with a blue HTML background color, announces Flights as its topic, then sets up the email in two sentences. The message is brief: it sticks to four key points,each with a unique illustrated header and 1-sentence description, coupled with a cute illustration to visually represent the point. The call-to-action button is a bright, contrasting color and is placed below the fold—but it should be bulletproof! We also love the all-blue color scheme; itreally brings togetherthe email and offers a cohesive, contemporary look. And, the email is responsive. It's easy to read and looks great on an iPhone screen:

Sharp and polished Jetsetter

Jetsetter, a company that offers travel deals, creates a clean, sleek email spotlighting sales on hotel stays and other travel essentials:

The email is actually quite long, so we're showing only a portion of it here. Because of its size, the full email is also clipped by Gmail, whichclips messageslarger than 102KB.To avoid a clipped message, Jetsetter could minimize the email's HTML.

Aside from length,this grid-based email is well organized. The gray background color makes the modules stand out, and the orange arrows pop on the page. Plus, it looks really great on mobile. The header simplifies really cleanly, and the single-column design is optimal for scrolling through.

Travelocity follows the inverted pyramid

Travelocity takes a relatively traditional email design approach in this message about deal alerts:

The emailfollows the inverted pyramid modelby grabbing attention at the top of the email, providing detail in the middle, then calling readers to act.

Despite its structure, the email would be stronger with less text. With a quick scan, it's hard to determine what exactly the email is asking readers to sign up for. What is it? Travelocity calls it "our new tool" but doesn't name it. Plus, the middle section, with the header "Get only the deals you want, when you want them" feels repetitive of the header text in the lead image. If it were up to us, we'd simplify and clarify this email, and we'd make the call-to-action clearer. For instance, it might say, "Sign up to receive my deal alerts" or "Start scoring deal alerts now."

Colorful content goes with Gogobot

Gogobot, an app that helps you discover nearby events, restaurants, and hotels, sent us a stellar welcome email after signing up online:

Unlike most of the other travel newsletters in this post, Gogobot uses a combination of illustration and photography, and breaks away from the monochromatic color scheme approach. Even though there's a variety of color and content here,they pull it off. Take the color scheme, for example. Bright pink is used as an accent color in the header and then again at the close of the email, in this animated GIF, which establishes balance and cohesion in the email:

That allows them to get a little bit more playful with color in the body content, where each illustrated icon matches the color of itscorresponding call to action button. And, the photos and icons both take on a circular shape. Plus, it's all on a grid, which makes the email feel organized and elegant. And—you guessed it—that means it's mobile responsive too! Here's how the email looks on an iPhone screen:

Wrapping Up

Travel newsletters run the gamut when it comes to email design, but most of these emailsdo a great job at optimizing their messages for a distracted audience. Here are some design tips we can take away from the travel industry:

• Use color to evoke emotion. Blue is great for the travel industry—it makes us feel tranquil and reminds us of the sky and sea. Study up on color with this infographic and consider what emotions your email could incite based on the color scheme.
• Skip full sentences. Use quick words and phrases that get your point across. Your email content should be a teaser.
• Have a simple email header. Your email is not a website. A bold HTML background color is a great way to make your header stand out.
• Illustrate your headers. Well-executed illustrations can grab attention and improve your email's structure.
• Optimize your CTA buttons by making them bulletproof, well-worded, and a strong contrasting color.
• Design for a mobile-first audience. Your email must be responsive! Design on a grid in the BEE editor and you're email will look good on any mobile device.

We love taking a closer look at awesome email design on this blog. We're very much hands-on and write about how you too can apply great design to your email marketing in our workshop blog posts using our BEE email editor.Because our work is so visual, we're now also sharing the inspiration emails and tips from our posts on Pinterest, where it's fun and easy to scan through images. Check out the Email Design Workshop on Pinterest!It includes over 100 Pinterest boards on email design, with examples and inspiring ideas from lots of different topics and industries, from Election Day to Back-to-School, from the Travel industry to the Movie world.

Pinterest is such a great resource for designers and marketers. It's a visual feast for the eyes—you can get all kinds of out-of-the-box ideas for dozens of email campaigns in just a few clicks. To help guide and inspire you, we curated ten of our favorite email design boards. Enjoy these incredible collections and please share your own with us in the comments!

Canva

Canva is a drag-and-drop tool for graphic design and photo editing. With 21,000 followers, their Email Designs board with what they call "Some of the most awesome emails we've seen on the web" is a great place to go for email design inspiration. Their board is vibrant, colorful, and stocked with gorgeous emails.

Andrew King

King is an email marketing veteran, currently working at Campaign Monitor, the email service provider.He has several boards about email, but we're fans especially of his Responsive Email Design board, where he pins images that showcase both desktop and mobile versions of emails in one pin. It's a great way to see great-looking examples of responsive email design in one place, from industriesas diverse as fashion, technology, entertainment, and more.

Jessica Marak

Jessica Marak is a New York-based graphic designer whose board is "for all those designers who have to create countless fashion emails." Filled with creative emails from Tory Burch to J. Crew toLoeffler Randall, the board is a great resource for product promotion emails that break the mold with color, style, and design.

Creative Nerds

Creative Nerds is a resource for digital creatives. Their Email Design board is a dynamic collection of bright and colorful emails that really pop out on the page. Creative Nerds adds insightful comments on pins, too, pointing out how specific design techniques make the email successful.

Ionut Radulescu

Designer Ionut Radulescu's Email Design board is a stunning collection of elegant emails,many with muted colors and standouttypography. These emails are fresh, modern, and downright inspiring. With almost 600 pins, there's plenty here to see.

Mocca Design

Mocca is an Australian marketing and design company with a whopping 71 boards on Pinterest. "We just love design," they write. Their email design board, with hundreds of pins, has all kinds of emails, from the photographic to the typographic. It's a particularly good resource for e-commerce brands.

Natalia Bernard

Based on her pins, Natalia Bernard seemslike the kind of person you'd want on your brand's creative team. She has a terrific eye, and her Pinterest boards offers beautiful examples of email design, along with examples of typography, illustrations, color uses, and more,which can all provide inspiration for email design.

Email on Acid

Email on Acid, which providestools for email tracking, has a great blog that we've referenced before in the Email Design Workshop. They join the fun on Pinterest with this inspiration board that includes both example emails and visual design tips, like infographics and color charts. As always, Email on Acid is a helpfulgo-to resource for email design, planning, and marketing.

Email

Pinterest pinner "Email" has a robust collection of 75 email design boards broken up by industry and category. With examples as specific as Christmas emails to waiting lists, these boards have inspiring examples for nearly every type of campaign.

What Sophie Does

London-based digital designer Sophie has 1,600 examples of beautiful emails in her popular email design board. Listicles, product announcements, promotions and more—what all these emails have in common is that they're well designed and make a statement. Scroll through, and there's no doubt you'll be inspired.

Thesedesign boards offera quick, fun way to get inspired and give your email design a reboot. If you're stuck with how to make your campaign stand out or want to try something new, spend some time checkingwhat other brands are up to with these example emails on Pinterest. Then come over to the Email Design Workshop where we show you how to implement email design techniques, step by step!

Don't only use images in your email design! Chances are some of your subscribers will have image rendering related issues in their inbox. Watch this quick video on how using HTML colors alongside images can solve many of these image rendering issues in your email marketing. To learn more, check out workshop tutorial: How to use HTML colors along images in email…and try this out in the BEE email editor: http://beefree.io/

The upcomingAcademy Awards ceremony has us thinking about big screens, red carpets, buckets of buttery popcorn—and good design, of course. When it comes to visual content, moviesare arguably the most engaging, connective, and powerful. Nothing else moves us quite the way motion pictures do.So, how do companies in the movieand video industries take what they know about the powerful medium of film and use that tocommunicate inemail? Let's have a look at email design for movie promotions.

Where have all the videos gone?

We analyzed hundredsof emails from companies in the movie promotionand live-streaming industries. Emails from AMC to Netflix to Fandango to Amazon and beyond. And while it's possible to embed video directly in email, not one of these companies is doing it. Why? Probably because most email clients still can't display embedded video content.At present, HTML5 is probably the most popular language for embedding videos into emails.HTML5-embedded videos play directly in email messages on Apple email clients and mobile devices.(If you’re interested, here’s a how-to guide on how to implement HTML5 video in email). Years ago, video was actually more widely supported by email clients, but as spam became a bigger concern, security tightened and video support diminished. Right now,Apple Mail 4, 5, or 6, iPhone Mail, iPad Mail, and Outlook support HTML5 videos.That's pretty limited support. As a reference, here's a nice table from MailUp on which email client support for HTML5 video:

It's no wonder that even the movie industry is skipping movie content in email—at least for now.According to recent surveys, Kissmetrics reports that 75% of developers employHTML5 and about 35% of mobile traffic is due to HTML5 videos. So it's possible we'll see more video content in email in the future. But for now, most movie promotions companies are using alternatives in email design, like a thumbnail, image, or animated GIF that links to the video's URL.

Animated GIFs are mini movies

Just like movies, animated GIFs entertain. In email, where we're so used to static messaging, they're particularly eye-catching and engaging, bringing storiesto life. Because GIFs areimage files, they're also super simple and straightforward to use in email. And,importantly for marketers’ bottom lines, GIFs have been proven to increase conversions. In once instance, a GIF-based campaign from Dell increased email conversion by 103% and raised revenue 109%.Premium cable network Showtime recently kicked off an email with an animated GIF showing a teaser fora documentary:

Here it is in the context of the full email:

There's probably no better way to communicate the suspenseful and visually compelling features of the documentary than in this GIF. In just a few seconds, we see more than five different scenes of treacherous mountain scaling and magnificent landscapes.Used in this way, animated GIFs are like mini movie trailers, showing a preview of what's to come quickly and efficiently.The animated GIF, like the images below it, is designed with a play button symbol atop each frame, communicating to readers that by clicking, they can view the full video.One fair warning about animated GIFs: they can pretty quickly become huge files. Depending on the number of frames and their resolution, oversized GIFs can be slow to animate and eat up data plans onmobile. Showtime's GIF is a 7.4 MG file, which could be problematic, especially since some email clients like Gmail clip larger messages. For tips on how to reduce the size of an animated GIF for email, check out more in our post on Top 4 Tips for Using Animated GIFs in Email.Vimeo, the video-sharing website, uses a different style animated GIF in a recent email—one that shows still images from videos on their site:

Here's the full email, for context:

By comparison, Vimeo's GIF is 436 KB, but it's obviously a very different approach. Showtime's animated GIF lookscinematic, while it's clear Vimeo's is more like a slideshow. But it also seems like Vimeo's call-to-action isn't necessarily as focused as Showtime's—Showtime clearly encourages readers to click on the GIF to watch the documentary. It's a full-width CTA and the key component of their message, so it makes sense that it's larger and more complex. On the other hand, Vimeo isn't using a GIF as a CTA—instead, they're pointing readers to the CTA below the GIF. And the smaller file sizeallows them to send a longer email with added images. Both of these emails, by the way, do a great job of balancing text and image content, something we've admired about Vimeo's emails before. The animation approach just depends on the company's goals for a particular email.

Image grids offer visual previews

Emails for movie promotions are heavy onvisual content. After all, we watch movies, we don't read them; it makes sense that companies promoting movieswant to offer subscribers a preview of what theycan watch.For image-driven email with little-to-no text content, arrangingproducts on a grid is particularly effective. The layout allows you to showcase a lot of items in an organized, scannable way.This email fromAmazon uses a basic grid design to separate categories of suggested movies and showsto a prospective customer:

Whenimages don’t require much descriptive text, like the films in Amazon's email (just a title label is all that's needed), a grid layout is a good option. Note that the gridded content also comes below a top section with the primary CTA. This helps provide focus to the email while still including supplementary visual content.The Tribeca Film Festival uses a creative grid layout in a recent emailto showcase film content:

Again, there's a primary piece of content at the top that takes up the most real estate, followed by secondary content immediately beneath. The email is also nicely organized with clean section breaks and headers. But because they chose to use a branded font, the email is made up of onlyimages—each image's header is part of the image itself. A better option would have been to break up the images with plain text content.

Single column layouts are mobile-friendly

As we've written about on this blog before, we generally prefer a single column layout over a multiple-column one for email. Single column emails are generally easier to read (they have a clear hierarchy without sidebar distractions), are better optimized for mobile viewing (multiple columns do not render well on smaller screens, which is why multi-column emails should always be responsive), and they are more focused on a call-to-action (single columns areoptimal for storytelling, taking readers through each component of the message until there is a clear, obvious call-to-action).The Film Society of Lincoln Center uses a single-column layout to advertise film openings,events, and new releases, one module at a time.

The design is mobile-optimized, rendering beautifully on a small iPhone screen:

On a mobile device,our instinct is to scroll, and the intuitive, sequential layout of the emailleads readers directlyto through eachCTA (all bulletproof buttons).Moviefone takes a similar approach in their "Hot on Moviefone" email, showing readers three modules in a single-column layout.

The email is made up of all images and doesn't appear to be mobile-optimized, but the contentscales OK on mobile:

Old school design sticks around

Despite our frequently lamenting the pitfalls of single-image emails, and our wariness of multiple columns, and our insistence that an email is not a website, outdated design habits die hard for some movie promotion companies.Fandango hits some design road bumps in this busy-busy email:

The header is complex and takes up a lot of space, the "Buy Tickets" buttons are images, and the dual-column layout doesn't create any hierarchy or flow to their message. It also isn't mobile-responsive, and those buttons are tough to tap on mobile! We recommend they simplify, focus, and prioritize mobile viewing for on-the-go reading.

The single-image email can be tough to avoid. We see it all the time. The film industry is no exception! Fandango partnered with Esquire on this movie promotion:

And AMC takes a similar approach here:

These emails would be simple to break up into modules with a balance of well-formatted text (with HTML background colors) and images.

That's a wrap!

Email design for movie promotions runs from single-image promotions of a single film, to embedded GIFs in email that give subscribers a true sneak peek of a film, to simple grid layouts showing off lots of movie options. Here's what we can learn from film-focused:

• Don't embed video content in email--at least not yet. Most email clients don't support the technology, so it's better to use a screen grab, thumbnail, or animated GIF to link to your video's landing page. Add a play button to your visual to help readers understand they can click to see more.
• Animated GIFs can be like mini-movies! They're a great alternative to embedding actual movie files. But make sure to check your file size and test to see that most subscribers are receiving your email.
• A grid layout is a great option for displaying image-based content. Keep a focused CTA at the top, then provide options.
• Single-column layouts are great for mobile where readers are inclined to scroll. Break up images with plain text and bulletproof CTAs.
• Avoid the single-image email, even though it's tempting for a single movie promotion. HTML background colors provide a ton of flexibility in improving your design, and they always render.

Email marketers and designers know sending an email composedonly of imagesis a gamble. Tailoring your image-only design to be just-so in Photoshop, then dropping it into an email template is tempting, but it can also increase your spam score, and it means your message won't be viewable to subscribers with image-viewing turned off. The best way to get around this is to break up imageswith plain text and HTML design that will render no matter what. And you can do this without sacrificing the look of your email.We recently looked at three clever ways brands are using HTML background colors in email. In one example,Moo, the website that helps you design and print business cards, incorporatesthe purple color from aproduct image intothe background of a plain-text module in their email. This color blocking technique unifies the email's composition, reinforcing a single visual focus.Itlooks likeit's asingle image even though it isn't.

Tutorial: How to use HTML colors with images in email

Today, we'll recreate this email in the BEE editor to show you how usingHTML colors with images canimprove your email designwithout sacrificing looks.Here's our video recap:

Step 1: Set up the single-column structure

In BEE, we'll start designing in abasic one-column template.

The email has four modules: one at the top for the header, one for the plain text and CTA button, one for the main body image, and one for the footer. From our Structure menu on the right, we'll create this structure by dragging in four single-column modules.

Step 2: Arrange content blocks

Section 1: The first module will contain two images: the Moo header andthe sub-header in the Moo brand font ("It's Luxe all around!"). So we'll drag in two image containers from the Content menu.

Section 2: The following module contains text and the "Shop now" button. Text and button containers are pulled in.

Section 3: This middle section will contain the central business card image.

Section 4: The footer includes social media buttons, followed by text. We're all set!

Step 3: Add content and customize

Add images: With our image placeholders are set, we can drag and drop images from the original Moo file into the email.

Customize text: We'll update the content in the body of the email and in the footer.

Then, we can format the text. To match Moo, we'll choose Verdana size 16.

The footer font is smaller; we'll choose 12px. To make the link color greenforUnsubscribe and View Online, we'll navigate to the Body menu and choose green for all links in our email.

Then, when we link those lines of text, they become green!

Format buttons: Lastly, we'll update the CTA button and social media buttons.The CTA button needs just two simple changes: we'll make it orange in the Background color menu, and then we can also condense the height a bit by selecting a tighter option in the Line height menu. Read more about all the ways you can customize buttons in BEE in our post How to design bulletproof CTA buttons in email.

We'll also choose the same social buttons as Moo, and drag-and-drop them in the icon collection menu to reorder. Read more about how to customize your social media buttons in our post How to customize social media buttons in email with BEE.

The message is shaping up!

Adjust padding:The header images are clearly a bit condensed, so we need to create space between them. We can do this by selecting one or both images and increasing the padding above or below each one. Just made sure to move the More options slider to the right to make adjustments on particular sides of any type of content.

Our spacing now looks closer to Moo's.

Step 4: Select HTML background colors

Now it's time for the fun part! We need to update the background color behind the header and the plain text module to match seamlessly with the product photo beneath. To get the HTML code for the color we need, we went tohtml-color-codes.info, uploaded our image, and got the proper code.

Then, we can copy #502944 and drop it right into BEE. The easiest way to do this in one fell swoop is to go to the Body menu and paste the code into the Content area background color field.

We can also select a light gray for the background color, same as the original email.Just like that, our email background matches the central image exactly. Pretty cool, isn't it?

Just a few final updates: we'll change the text color to white, and update the footer background color to white, too.Here we are!

Put together, the matched modules makethe email appear to bea single, solid image. It's a simple way toimprove ourimage-to-text ratio with abold and bright email thatwon’t get caught in spam filters. Check out other ways to use HTML colors in email in our design inspiration post, and, if you're really feeling creative, see how to combine HTML colors with images to build unique content dividers. In the BEE editor, it's a cinch!

Political campaigning takes money. Alot of money. According to last year's estimate from The Hill, the 2016 presidential election could cost as much as $5 billion. Much of that amountwill go toward TV ads, but as campaign teams become savvier with onlinemarketing, spending on digital campaigning(everything appearing on computers, smartphones, or tablets) is increasingly important (accounting for up to$1 billionof spending by election day).While social media strategies are nowcritical for presidential candidates, email remains king.According to Michael Beach, co-founder of a digital campaign firm that works with Republicans,"nothing comes close" to an email list when it comes to fundraising.

Presidential email marketing is quickly evolving

In 2012, the Obama campaign changed the game when it leveragedemail marketing to drivedollars and votes like never before.By the time election day rolled around, the President's email list had 40 million names—a whopping 36 mil above Mitt Romney's 4 million. Email was responsible for 90 percent of the Obama team's online fundraising.This year's presidential candidates have taken note. Building those subscriber lists has becomeparamount as candidates strive toreach audiences. According to an October 2015 report from eDataSource,Hillary Clinton hada projected 5.1 million email subscribers. Jeb Bush had 2 million, and Bernie Sanders had 3.2 million. A more recent count put Ted Cruz's list at 3.6 million and Donald's Trump's at less than half a million.Millions of us, presumably, are receiving emails from one candidate or another. So, what do they look like? Let's check out the presidential campaign emails to see how their designs measure up.

Presidential campaign emails: a look at design

In the 2016 presidential campaign emailswe've seen, it's all about content—specifically plain text content imploring readersto donate. But is there more to it than meets the eye? Let's take a closer look.

Short subject lines

“The Obama playbook for subject lines was short, casual and provocative,”Arthur Sweetser, chief marketing officer of eDataSource reports. Many 2016 candidates seem to be following suit. Here's a look at subject lines from Hillary's campaign, for instance:

And here are some from Bernie's:

Interestingly, both camps seem tomiss an opportunity to optimize preheader text, the text that follows the subject line in an inbox. Much of what appearsare links. But as we've written about before, preheader text provides a valuable opportunity to show readers a preview of an email's content. Many subscribers use it as a screening tool when deciding whether or not to open an email. (Check out how to customize preheader text on the MailUp blog).

Emails from the Hillary campaign also alternatewho's sending them (we see Bill and Chelsea pop up in the "from" line from time to time). Other campaigners do this, too. But it's not an email best practice, and it actually goes against CAN-SPAM laws (but political ads are exempt).

Simple logo-based headers

You've probably already read a thing or two about those presidential campaign logos. The design world seized the opportunity to rank, rate, and gradeeach one. Some reviews weren't so good. But the logos are here to stay—at least for the upcoming months.

In many emails, these logos double as theemail's header.

It's a simple way to reinforce the brand and leave the emphasis of the email on the message itself.

The candidates' campaign teams understand a best practice of email design: emails are not websites. Successful emails arefocused and succinct—there’s no need to crowd the header with extraneous links, menus, and messages. Hillary Clinton's emails actually skip a header altogether, making her emails seem more like a personal letter, from a friend:

Multiple opportunities to click

It's no surprise that content in nearly all of these emails is dominated by a call to donate. Or, we should say, by many calls to donate. Here's an example from Marco Rubio's campaign with an email from Nikki Haley, governor of South Carolina:

We count three large, red call-to-action buttons and three linked CTAs. That's six opportunities to click to endorse, and probably four or five more than we'd recommend. Our recommendation is (almost) always tocommunicate a clear, single message that leads to a clear, single call-to-action.Research has shown that placing a CTA button below the fold actually increases clicks by 304%! In general, CTA buttons in email stand out—they’re prominent and take up significant space. Even if readers skim or skip your body copy, they’ll likely still notice that big, bright, colorful button. So you don't need to overdo it with more than one or two. Better to use them sparingly. Here's another email from the Marco Rubio campaign that gets it right:

Most of the presidential emails we've seen make great use of bulletproof CTA buttons, making sure those calls to donate render well across email clients and devices. But a couple emails skipped the CTA route altogether and went with links instead, like this email from the Kasich campaign:

The links are easy to spot, but they aren't as easy to distinguish from one another, and they're a bit of an eyesore. With the BEE editor, the Kasich group could use bulletproof CTA buttons without having to code a single line of HTML!From what we've observed, CTAs in these emails focus on donating. That means little-to-no call to take other actions, like follow a candidate on social media. Social media buttons are generally secondary calls to action, which is why they're oftenseen in the footers of emails. But like the minimalistic headers we've seen, most candidates skip having much of a footer. One exception we noticed was from the Trump campaign:

Looks like there are some distortion issues. Our advice would be to skip the social icons altogether, and add a bulletproof button instead of asking readers to "click here"!

Breaking the mold—a little bit

As you've seen, most of the presidential candidates' emails are straightforward: logo, plain text letter, call-to-action buttons. But a few emails tried something different—like an animated GIF! Here's one we spotted in a Kasichemail, with text above it reading, "If you have a moment, please watch our short video about our growing momentum in South Carolina!"

Sanderstried animation, too, with set-up text reading "Add your $3 contribution to theirs right now":

Here's the GIF in context:

And, just a few emails totally broke the letter-style mold and went a more artistic route. Here's one from the Hillary group:

And one from Bernie, too:

They're prettier, yes, butboth are single-image emails—a big no-no. At least each email includes a CTA link underneath the image, so that if the main image doesn't appear because of a reader's settings, there's still an opportunity to click.

Presidential Campaign Email Wrap-Up

While it's clear email has become a huge part of presidential campaigning, great email design isn't a big focus for these candidates. But there's still plenty to learn—

• Short, punchy subject lines get clicks (but be sure to optimize your pre-header text!)
• Always send emails from the sender subscribers signed up to hear from. It's CAN-SPAM law (for us email marketers, though not for presidential candidates).
• Emails aren't websites. A minimalistic header design gets readers focused on the main body content of your email.
• Optimize your calls-to-action with bulletproof buttons (but you only need 1 or 2!)
• Animated GIFs, like image files, are email-friendly. Use them! Follow our top four best practices.
• Skip the single-image email. Instead, balance images and text (and include at least 500 characters of text).

Did you spot a campaign email with an interesting design? Tell us about it in the comments!

We're excited to introduce a new series to the Email Design Workshop: Fix It with BEE. In Fix It with BEE posts, we'll take a look at a real email we've received, identify how the email's design can be improved to increase engagement, and show you how to redesign it with the BEE editor.These days, almost company, organization, or professional individualhas a mailing list and sends emails, from the corner coffee shop to your doctor's office to local artists.Email is a critical component of any business, big or small, but learning how to design for email is a learning process—one that we're studying all the time. We'll useFix It with BEE toshow you how to spot and avoid common design mistakes and make a beautiful, responsive email with our free editor.Ready for the first transformation?We're starting with this newsletterfrom a dermatology office in New York City:

What can be improved

There are a few significantemail design issues with this email. The Comic Sans font and busy snowflake background make the email look amateur and unprofessional, which is not the kind of branding a medical doctor (especially one focused on skin and aesthetics!) should want. Additionally, right away, we notice that this email is not mobile responsive. The small text is hard to read on an iPhone, and the blue background is taking up more space than the actual message.

The "Aglow Dermatology" header appearstwice. This is a common mistake and one that's easy to make; when you write and design an email outside of your template, you can overlook how the message will look once its nestled within the structure of your template. In this case, there's a duplicate header, so one should be removed.

The main body of the email is broken into two lopsided columns, a structure that looks awkward and makes the message hard to follow. There isno clear hierarchy or call to action. The first column is missing a call to action altogether, and the link in the second column doesn't work. It's also hard to spot because it's the same color as the body text. A bulletproof CTA button would be muchmore eye-catching and effective!

Lastly—another common mistake—there's pre-written instruction text from the email service provider at the close of the email that the business forgot to customize or remove. This email needs a footer that's effective and well-designed.

Themistakes in this email are easyfor email design beginners to make, but fortunately they're also easy to correct. Let's fix it with BEE.

Fix it with BEE

1. Build the structural layout of your email first

Think of your email as comprised of sections. The basic structure of the Aglow email is: Header image. Header text. Body text. Closing text. Footer.

Let's mimic the structure in BEE by dragging in the structures we need from the Structure menu on the right. Our layout looks like this:

We'll keep the two-column layout in the center of the email for now and check out how it looks with some design adjustments. If we don't like it, we can switch to a completely single column layout later.

2. Add placeholders for content

From the Content menu, we can populate the structure placeholders with content placeholders, further developing the layout of our email. The first section will just have an image placeholder for the logo.

The second section will have atwo text placeholders: one for a header ("Act before December 31st!") and one for the first paragraph of text.

The third section has two text boxes per section (header and body text, respectively). Let's also try adding CTA buttons in each section.

The final two sections will just need text. But let's also add social media icons for our footer! Here's our email, fully laid out, ready for content, customization, and fine-tuning:

3. Populate the email with content

We'll copy-and-paste the content from Aglow's original email, and drag in that header image, then reassess how it looks. Here's how the email is shaping up, before formatting:

4. Format the text to create clarity

We recommendArial, BEE's default and email-safe font, over the Comic Sans from the original Aglow email. We'll go in and adjust the font size and style so that headers and important text stand out. We'll also make some small copyedits, like removing the words "email" and "voice" from the contact info at the bottom—those words are not needed. Here's our email after some simple text formatting:

It looks pretty good! We also added a divider from the Content menu above the footer, and centered the footer content. By toggling over to the Preview menu in the upper left corner, we can take a peek at how the email will render on mobile, too:

5. Improved design approaches

Those side-by-side CTA buttons seem to be competing with each other, and they both essentially communicate the same thing: book an appointment. Let's see how the email wouldlook with a single, full-width CTA button instead. Also note how we're using personal pronouns and an active voice, best practices for highly clickable CTA buttons.

The focus of the entire email seems clearer now, doesn't it? Having a single call to action removes any confusion and better compels readers to act.Let's try removing the two-column part of the email to see how the message looks in a single column.

The single column feels better, don't you think? We also bolded the headers and added numbering to improve readability. If Aglow needs to further segment and target different patient populations with their calls to action, they could also go back to two CTA buttons, in a layout like this:

We feel good about parting ways with that snowflake background and going with an all-white email that feelseasy on the eye and business-like. But if a contrasting background color is preferred, we can choose a color in the Body menu. We'd recommend a lighter color, like gray...

Or pale blue:

Wrap Up

It was easy to improve this email with BEE! Withsome small adjustments, the email is much easier to read, and will hopefully get more conversions. Here are the best practices to keep in mind:

• Take a simple approach to design: don't add busy background patterns or multiple font styles unless they serve a purpose.
• Use CTA buttons to get readers' attention and call them to act. Links are easy to miss.
• Beware of how your email looks in its template before you send it out (look out for an accidental double header).
• Optimize for mobile with a single-column design, full-width CTA buttons that are easy to tap, and a responsive template (all BEE emails are automatically responsive!)
• Go with a subtle background color to make the central body of your message stand out. Otherwise, an all-white background provides for a simple, clean look.

We're always on the lookout for responsive email design tips to share with youin our collective effort tomake email design better. This week, we stopped by aDesigning Responsive Email seminar led by Noble Desktop, one of New York's top digital design training institutes, to connect with email marketers and get the lowdown on the latest design tips.

The seminar was a good reiteration of many of the basics we've covered here in our Email Design Workshop blog:how design impacts an email campaign’s success rates and how to turn responsive designlimitations into strengths. Thank you, Noble Desktop, for the important reminders and great inspiration, which shouldbe used for all types of emails, responsive or not (though, of course, by using our intuitive, drag-n-drop BEE email editor, all of your emails are automatically responsive!).Here are the top 10 responsive email design tips we took away from the seminar:

1. Make your responsive email a teaser.

We know there's a lot you want to communicate to readers on your mailing listabout your upcoming event, newest product, biggest sale, or company announcement. But your email is not the place to get into detail. Think of your email as a teaser for the main content of your message—which can be found on your website after readers tapyour call-to-action button. Here's a great example from Best Buy: themessage isshort, focused, and to-the-point, leading readers directly to the CTA.

2. Create a hierarchy within your responsive email.

Create focus and organization in your email bytelling yourstory in a hierarchical fashion. Envision how your message could be structuredusing the inverted pyramid model.

Campaign Monitor shows us a great example of this method in action in an email from InVision:

Each section begins with a compelling visual element, followed by a short, bold headline with supportive text that leads directly to a call-to-action buttonmakingit clear what to do next. It's an excellent way to communicate quickly and get click-throughs from readers with short attention spans (i.e., all of your readers).

3. Your CTA should never say "Click here."

Don't waste space by telling readers where to click, especially because on mobile devices, readers are tapping, not clicking. "Click here" isn't really a call to action. Skip it and tell readers directly what they should do.Use a clear, direct action verb—and be concise. Try using personal pronouns like “my” and “your” that make your message friendly and engaging. You could try: “Reserve my spot now” or “Get my free ticket.”Read more about how to optimize CTA buttons in our post How to Design Bulletproof CTA Buttons in Email. Here's a great action-oriented CTA button from Skillcrush:

4. Never use a single large image in a responsive email.

In other words, avoid the pitfalls of the image-only email.Using just one large image in your email will increase your spam score, so the email may not make it into readers' inboxes at all. It also means your email won't be fully responsive. And if your imagedoesn't load, readers will only see ALT text. The solution? Always use a balance of text and images in your email.

5. Design on a grid.

Grid-based designs are easier to make responsive. That's because HTML emails are built with tables comprised of rows and columns.Email editors that capitalize onmodular template design—like our BEE email editor—automatically help you arrange content in a grid while providing plenty offlexibility in arranging content. In a previous post, we checked out this infographic from an Aveda emailanddrew up lines to show how the content fell into four quadrants:

The original contentwas all one image, but by breaking it up into 4 separate images on a grid, we made it mobile responsive (see the full tutorial here).

6. Remember ALT text.

Be prepared for your images not to load. Some email clients don't automatically load images, and some subscribers don't enable auto-loading for security purposes. Here's how that original Aveda email above looks with images disabled:

ALT text allows these readers to understand your message, even without images. When writing your ALT text, remember to keep the text short. If it breaks onto 2 lines, some email clients will not display it. If you can, style your ALT text by adding styling to the image (your image won't look any different, but when your ALT text appears, it will be the font, color, and size you specified).

7. Your email is not a website.

If you follow Tips #1 and #2, then you're probably in good shape. A focused, succinct email should be designed for clarity and shouldcommunicate a single call to action. So there's no need to crowd the email, or the header, for example, with extraneous links, menus, and messages, like in this example from Target:

Go with simplicity. And, remember to use the data you have to make customizations.When someone comes to your company's website, you don't know much about that visitor. Your mailing list, on the other hand, is another story. You have data about your subscribers. Use it to tailorversions of your campaign for segmented, targeted portions of your audience to improve conversion rates.

8. Be selective with custom fonts.

Most email clientswill not support your brand's custom font. Use them sparingly to make a statement, like in the main header of your email, then incorporate email-safe fonts for the body of your message. Here's a great example from Mashable:the blue "Mashable / Alerts" header is in their brand font (and is displayed as an image) but the sub-header is plain text with a great HTML background color (and the following header under the images is plain text, too).

Your selection of email-safe fonts is somewhat limited, but when in doubt, go with a serif. Many brands use Arial, Helvetica, and Verdana.

9. Don't forget preheader text.

An email's preheader is a small amount of text that follows the subjectline in the inbox. Here's how to customize the preheader text from the MailUp blog.

Subscribers use preheader textas a screening tool, deciding whether or not the email is worth reading based on just a few words, so using compellingpreheader text can increase open rates. The first plain text that appears in your email will show up as preheader text.

But it needs to be short; Campaign Monitor adviseskeeping your preheader text to between 40-50 characters. Once the email is open, preheaders can be visible or hidden.

10. Use animated GIFs wisely.

Animated GIFs are powerful visualstorytelling tool that work seamlessly across most email clients. Outlook is the big exception—Outlook 2007 and newer will only display the first frame of your GIF (it won't animate), so plan for that when you're designing.Banana Republic uses a question mark as its first frame in the animated GIF below so that even without animation, the message makes sense:

And here's the GIF in motion:

Depending on the number of frames and their resolution, GIFs can turn into large files. Oversized GIFs can be slow to animate and eat up data plans onmobile. Minimize the size of your animated GIF by animating only what needs to be animated; as the frames rotate, the fewer pixels change, the smaller your file size will be. Read our Top 4 Tips for Using Animated GIFs in Emailpostfor more info.

Questions? Comments?

And now it's time to start designing some clear, compellingresponsive emails! Let us know if you have any tips or questions in the comments, and give the BEE email editor a try for your next campaign. It's free, requires no registration, and all emails designed with BEE are 100% mobile responsive (and you won't need to code a single line).Save