Design

3 Tips to Improve Your Tablet Email Design

Mobile doesn't just mean optimizing your emails for smartphones; tablet email design is just as important! Learn how to improve your design for tablet users.
Beefree team
Beefree team
Mar 25, 2017

You know how important it is to design emails for mobile devices.But "mobile" doesn't just mean optimizing email design for smartphones; tablet email design is just as important.A recent report from MediaPost Mobile-First? Don't Write Off The Tablet reminds us that, indeed, there is a distinction to be made between the two devices. The fact is, we don't use tablets the same way we use smartphones. And, it'slikely that a sizable portion of your subscriber list reads email on their tablets, so it's time to brushup on how to design emails better fortable view.

tablet email design

Tablet vs. Smartphone: What's the difference?

While tablets are mobile devices, they aren't the same as smartphones. MediaPostpoints out two important distinctions between tablets and other devices:

  • Tablets are not actually used in a very "mobile" capacity—they're typically used at home, where people are more task-oriented.
  • Tablet screens are more like desktops—content is consumed on a wider, larger landscape screen.

In other words, tablets act as smaller, slimmerlaptops, and they're used on the couch, at the dining room table, or in the kitchen. The takeaway? "If you can point mobile email marketing campaigns to very clear, easy-to-follow prompts to allow simple tasks to be completed, you will have more success," MediaPost says. "If you can tell somebody is on a tablet, they are more open to content consumption and research and getting slightly more complex tasks completed. There is a subtle difference there, but it's one that's worth exploring."We did a little more digging to understand how tablets are used. Here are a few important takeaways.

Conversion rates on tablets are higher than on smartphones

According to Appticles, conversion rates are still the highest offline, with 82% of customers choosing to purchase in-store, with45% on home desktop or tablet and 17% on mobile phone. In other words:readers usingtablet may be more likely to make a purchase via email than those using a smartphone.

tablet email design - conversion rates by device type

Search Engine Watch also citedsimilar findings via areport by xAd, Telmetrics, and Nielsen. Twenty-eight percent of mobile purchases are made via tablet, vs. 16% via smartphone.

tablet email design - method of mobile purchase

Users engage in more reading and watching on tablets

Not surprisingly, tablet users are more likely to be found reading or watching content on their devices, according to research by ExactTarget. The data suggeststhat tablet owners may "view their devices more as entertainment hubs, while smartphone owners are more likely to use them as information sources."

What does all this mean for email design? Read on.

An important note: the value of segmentatio

Before we go further, it's important to note that UK readers are much more likely to read email on tablets than their US counterparts. Mediapost reports that a massive 25% of emails are opened on tablets in the UK, compared to15% in the US.In other words, if you're thinking: all this information about tablet use is great, but does it apply to my list? The answer maydepend on the location of your reader base. It's so important to be strategic when collecting information about your readers so that you can segment send lists. That way, if you know a high portion of your readers are UK-based, you can design a tablet-optimized email versions for that group and test the results. Read more about segmentation here.

So what does all this mean for tablet email design?

Given what we know about tablet usage, we can make some inferences about how to best tailor email design for tablet reading. While thereisn't a magic formula, here are some valuable considerations to make in your tablet email design.

Tip #1: Make purchases easy (with live shopping carts and/or great CTA buttons)

We know that tablet users may be more likely to make a purchase on their device compared to smartphone users. So, as email designers, we can make sure an email's add-to-cart or purchase process is seamless.As we noted in our guide to email interactivity post, image carousels and product tours in emails allow readers to tap on images and buttons to get more information. Instead of waiting for a landing page to load, readers have exploratory power at their fingertips. This kind of in-email browsing may have the potential togo a lot further on tablets than on smart devices.Here’s an example of in-email photo browsing from Rebelmail:

Rebelmail tablet email design

Even though tablet screens are bigger than smartphone screens, buttons must still be designed to be tapped with a finger. So to get those conversions rolling, make sure your CTA buttons are bulletproof, pass the squint test, and have action-oriented text! Oh, and optimize the color, too.

Tip #2: Get interactive with your content

Because tablet users seem more likely to spend time with your content than smartphone readers, you have an opportunity to get interactive. This may mean making email browsing easier with a hamburger menu, which Nordstrom offers in an email:

Nordstrom tablet email design

Or, it may mean offering different types of content, like anin-email video. With Apple’s launch of iOS 10 last fall, HTML5 video can be viewed on iPad and iOS Mail, playing within the email.For brands with blogs or newsletters, you could also consider providing more content directly in email. For content-rich emails, you can improve navigability by includinganchor linksand by following newsletter design best practices. And, your content doesn't have to be strictly text-based. Longer emails could also include responsive photo galleriesor in-email surveys. Get creative!

Tip #3: Apply mobile-optimization best practices

While readers may treat tablets more like laptops than smartphones, emails still perform best on tablets when they're mobile-optimized. This means you should still be mindful of the best practices for mobile email design:

  • Single column layout
  • Large-sized, easy-to-read content
  • Minimalistic design (no complex headers, no clutter)
  • Tap-friendly navigation and bulletproof buttons (with appropriate padding)
  • Smaller image file sizes (allowing for quicker load times)
  • High-contrast design for mobile screens set to low brightness
  • A mix of text and images (avoid using only images in emails, and make sure to use great ALT text description)

Design your tablet-ready email and go Pro!

Have you ever designed an email campaign specifically for tablet readers? Let us know the considerations you made. Lucky for us, all emails created in the BEE editor are always 100% responsive, making it a greatplatform for tablet-focused design. You don't even need to know HTML! Learn more and sign up for a BEE Pro free trial.

How to Design A Full-Bleed Vs Limited-Width Email Layout Design

See how easy it is to achieve a full-bleed email layout design in the Beefree editor from our email design workshop. Practical tips and examples included!
Beefree team
Beefree team
Mar 13, 2017

How do you achieve a full-bleed email layout design? How about if I want to instead limit the width of my layout for a more boxed appearance? These are two questions we get asked a ton from users of Beefree.

In today's workshop, we'll be showing you how easy it is to change the layout of your email design with a simple adjustment to the background and content color settings, but first let's take a look at a few examples. Our inbox is full of emails with both types of designs!

Full-bleed versus Limited-width layout explained

A full-bleed layout of your email has an edge-to-edge appearance and it extends to the full width of your screen, typically more noticeable on desktop and tablets. A full-bleed layout is sometimes also referred as full-width or edge-to-edge.On the other hand, a limited-width layout has your content boxed in within your email message. Intuitively, we sometimes call this a boxed layout, since the width of your email remains fixed in and doesn't stretch out.Here are a few examples of these two different layout designs from our templates available on Beefree. Notice that the American Pie and Fantastic Journey templates have a full-bleed layout design whilethe others, such as Pure Morning have a limited-width layout design.

BEE Pro templates

Our inbox is full of emails with both the full-bleed layout as well as the limited-width one! Here are a few more examples of real email campaigns from brands.

Full-bleed email layout examples

Check out these three recent examples of full-width email designs from Aperture, Holstee, and LitHub. Feel free to click on each image to zoom into the full email.

Aperture

Holstee

LitHub

Limited-width email layout examples

By comparison, boxed emails usetwo contrasting colors, one color behind the content and one around the content. As we'll see, light gray is a popular choice for background color. The boxed look narrows readers' eyes on the column of content, potentially improving focus and legibility.Here are three examples with emails from Crate & Barrel, Maple, and Moo. Again, feel free to click on the images to zoom in to see the full email.

Crate & Barrel

Maple

MOO

Which email layout is better?

So, which layoutis better? That's a trick question. Both can be effective, and the best way to find out if your audience responds more or less to a particular style is to run A/B tests on your email design. Whichever method you choose, your design should always be mobile responsive. And, if you're already using Beefree, all emails you create will automatically be responsive to mobile devices.Keep reading to learn how to quickly and easily change your email design layout!

Today's workshop

In today's workshop, we're going to recreate a recent email from Litmus, shown below. This email currently has an edge-to-edge full-bleed design. Let's walk through how to create this look with the Beefree editor by using HTML background colors.If you're not already using Beefree, get started with our free plan!

How to create a full-bleed email design

In the Beefree editor, we started with a simple single-column design. The header and body are comprised of live text, and we also added the logo, hero image, and the bulletproof button.Here's how the email looks before we include any background colors:

To create the full-bleed header from Litmus's original email, we simply need to edit the row and content background color settings.First, we'll simply click on the rowwe want to edit so that it's highlighted with a blue border as such:

Now, in the Structure menu to the right, we can edit the row background color and content background color.

The row background color is the color of the content structure from edge to edge, while the content background color is the background colorbehind the center column of email content. For the full-bleed look, we need only to select the row background color of our choice and leave the content background set to transparent.

After updating the header font color to white, here's how our email looks with the new row background color:

In BEE, whenever you wantto create a full-bleed design, choose the row background color(s) of your choice, then set the content background color to transparent.The row background color can also be changed from one part of your emailto the next. In this email, for instance, we could select the second rowof content and choose a new color, like pale gray:

In BEE, you have a lot of flexibility when it comes to customizing color.Bonus tip:In theBody menu on the right, you can also adjust your content area width as well as the background color for the entire email at any point as you design.

How to create a boxed email design

Changing our email from a full-bleed layout to a boxed one is simple. First, select the header row once again. Go back to the Structure menu on the right, and this time, change the content background from transparent to white.Here's our updated email, before we make any other adjustments:

To complete the boxed look, we need to update the header font color...

...then update the background color in the second row to match the first:

One last trick: if we want to position the white Litmus logo against the dark gray background, we can create a new content row for just the logo, making the row background dark.Just drag in a new row acrossthe top:

Then add the logo as an image and update the background. The new lookadds to the box-effect on the body of the content.

Design your next email design layout with Beefree!

So, what do you think? Do you prefer one layout to the other? The good news is that switching one layout to the other couldn't be easier with Beefree!

Design Report Card: The Best Valentine's Day Email GIFs

This year's Valentine's Day email campaigns had one thing in common: animated GIFs! Check out how we reviewed and graded their email design.
Beefree team
Beefree team
Feb 22, 2017

In the world of email design, special occasions have come to mean one thing: Getting animated!As in, including ananimated GIF in your email design. The big takeaway: email marketers increasingly see animated GIFs as a must-havefor volume-heavy email days.This Valentine's Day wasno exception.In fact, we saw so many Valentine's Day themed animated GIFs in emails that they're going to be our primary focus today. Check out how brands are using animations, and consider these email design GIF tips for thenext big campaign on your calendar.

Dior Valentine's Day Email GIFs

GIF from Dior's 2017 Valentine's Day email

Why use an animated GIF in email?

As we've written about previously, GIFs and email go together like peanut butter and jelly. Here's why:

Still, email marketers generally agree that too much of a good thing isn't always positive.As a result, animated GIFs are still used sparingly in emails.Brands don't typically animate a promotion email or a newsletter. Instead, animated GIFs are used for special occasion emails—like Valentine's Day—when they'll add the most value.

The Valentine GIF-scape

Here's how brands used animated GIFs in emails this Valentine's Day.

GIF Method 1: Hook your audience with an animated hero image

Adding a little animation to your email's hero image is one way to level-up a simple email design. Hipmunk, the travel company, animated itscute chipmunk mascot for V-Day.

Hipmunk Valentine's Day Email GIFs

The full email uses great design simplicity: no clutter from a navigation menu or secondary CTAs, minimal text, and an easy-to-spot CTA button.

Hipmunk Valentine's Day Email GIFs

The e-commerce site Uncommon Goods took a similar approach, using llamas to show the "llove."

Uncommon Goods Valentine's Day Email GIFs

We appreciate thebreak from cliché pink-and-red—and how the brand isolated the animated portion of the image to decrease the size of the GIF image file.

Uncommon Goods Valentine's Day Email GIFs

Our GIF Grade: BThe simplicity of the hero-image GIFworks: without clutter,your GIF gets the attention it deserves—and will hopefully driveclicks. But, this method is also a basic approach, and as brandsincreasingly use GIFs for holiday campaigns, we expect to see GIFs used more cleverly.

GIF Method 2: Create a curiosity gap

We often talk about how the best emails are made up ofteaser content. You don't have to say everything in anemail—just enough to intrigue your audience to click through the message. This Valentine's Day email design from MOO is a perfect example of that technique. Here's the animated GIF:

MOO Valentine's Day Email GIFs

And here's the full email:

MOO Valentine's Day Email GIFs

Can you tell what's in the box? Or what the promotion is? Nope! The only way to do that is to click. Plus, the header and CTA button work together to help encourage you to do just that.Our GIF Grade: A+Used sparingly, this GIF method is one of the best ways to engage your audience members. The email, promotion, and message are all more interactive—and fun!

Method 3: Show off your products

Animated GIFs are useful for featuringproducts in a way that can be more engaging, effective, and space-efficient than a series of static images. To promote last-minute gift card purchases, Bliss creates a simple rotation GIF as its hero image.

Bliss Valentine's Day Email GIFs

Here's the full email:

Bliss Valentine's Day Email GIFs

As for Estée Lauder, its Valentine's GIF flashes between images of lipstick and the lipstick in use.

Estee Lauder Valentine's Day Email GIFs

See the full email here:

Estee Lauder Valentine's Day Email GIFs

Of course, showing your product in a rotating series of images isn't the only way to use GIFs. Grovemade, which makes wooden tech accessories, thought outside the box by using its products to create this beating-heart animation.

Grovemade Valentine's Day Email GIFs

Check out the full email:

Grovemade Valentine's Day Email GIFs

Our GIF Grade: A-GIFs are great for showing off products, but they're even better when you show them off in an unexpected way (like Grovemade) or in a way that demonstratesthe product. Image carousels and product tours in emails also allow readers to get more information without navigating away to a landing page. When customers can quickly and easily see how your product works, that transparency can help lead to a purchase.

GIF Method 4: Drive attention to a video

With Apple’s launch of iOS 10 last fall, we were excited to see the return of HTML5 video to email. Still, video in email support remains limited and technically challenging. In the meantime, brands are turning to animated GIFs to help readers preview a full video. Here's a recent example in Sephora's V-Day email:

Sephora Valentine's Day Email GIFs

And here's the video GIF in the full email:

Sephora Valentine's Day Email GIFs

The message has a lot going on, so it's easy to see how the GIF mightget lost in the shuffle. Still, we like how the video GIF is supplemented with products used to achieve the look, giving readers a chance to browse within the email.Our GIF Grade: AAnimated GIFs are a great alternative to including video in email. Think of a video GIF like a mini trailer for the full-length piece. If you can show a little bit of teaser content—and create a curiosity gap—you can encourage readers to click through to the main site.

GIF Method 5: Focus on the numbers

Brands offering a special holiday promotion can use a GIF to keep the email focused on the discount. That's the technique Paper Source uses to promote their 50% off sale:

Paper Source Valentine's Day Email GIFs

And here's the full email:

Paper Source Valentine's Day Email GIFs

Similarly,Petsmart has a rolling discount GIF, showing the amount you can potentially save:

Petsmart Valentine's Day Email GIFs

See the full email here:

Petsmart Valentine's Day Email GIFs

This approach also creates a curiosity gap because readers won't know how much they might save until they click through to the site to shop. If something is intriguing enough, readers will want to satisfy theirinterest.Our GIF Grade: BSome numbers-based GIFs don't serve much of a purpose but others, like the one from Petsmart, do more to get readers excited. If you're doing to go with a simple animation centered on your discount, see if there's a way to add a layer of curiosity or meaning.

GIF Method 6: Keep it sweetly subtle

Plenty of animated GIFsadd a simple flourish to emails without being the center of attention. That's the approach Loft takes in their V-Day email design:

LOFT Valentine's Day Email GIFs

Our GIF Grade: B-Sinceoversized GIFs can be slow to animate and eat up data plans onmobile, we like that these GIFs don'ttake up a lot of space. Still, it's hard to measure their value, since they don't serve a direct purpose in the email. To checkif a simple GIF like this makes a difference for your audience, make sure to do an A/B test!

GIF Method 7: Need a GIF in a jiff? Try user-generated content

Not every email you createneeds to go through painstaking rounds of design and development.With a trusty template and some creative thinking, a good email campaigncan be assembled quickly—even with animation. One way to do that? Simply source user-generated content from aggregation sites like Giphy. This is most likely the approach Subscription Addiction took for their simple Valentine's Day email design, which features a popularmeme from Parks and Recreation:

Subscription Addiction Valentine's Day Email GIFs

Here's the entire email:

Subscription Addiction Valentine's Day Email GIFs

Our GIF Grade: COf course, everyone enjoys a good meme now and then. While using one isn't the most creative or unique approach, it will still do when in a pinch!

Design your next email with an animated GIF and go Pro!

Will you be adding an animated GIF to your email marketing campaigns in an upcoming holiday or special occasion? Design your email message in our easy-to-use, drag-n-drop BEE editor. No HTML knowledge is required, plus your email will be mobile responsive. Sign-up for a BEE Pro free trial!

What We Can Learn From 3 Pet-Friendly Email Designs

Are you a cat or dog lover? Check out these pet industry emails that offer strong visual designs and copy suggestions that can inspire your next pet-friendly email campaign!
Beefree team
Beefree team
Feb 9, 2017

The pet services industry is huge. Sixty-five percent of U.S. households own at least one pet. And it's no secret that pet owners are pet lovers. But caring for—and spoiling— our furry friends isn't cheap—in 2015, Americans collectively spent more than $60 billion on their pets. In such a booming industry, it's also not surprising that there's plenty of inspiration in email marketing geared toward cat and dog lovers and beyond.Let's take a look at how pet industry emails stack up and what design cues we can draw inspiration from and apply to our own email campaign design.

DogVacay dominates email design best practices

DogVacay is a home boarding service that helps dog owners connect with localpet sitters. The brand'svisualidentity is modern, friendly, and polished. Often, emails employa clever combination of illustration, photography, and handwritten font features. Here's a recent email from DogVacay:

dog vacay pet industry emails

First, the hero image couldn't be sweeter. Email marketers in the pet industry certainly have an advantage when it comes to cute material! DogVacay does a great job of making asimple image aww-worthywith on-brand text and illustration overlay.We also love the clean, simple single-column design that bypasses potential clutter from a navigation menu or multiplecalls to action. The body of the email is live text against an HTML background color, so it will reliably render across email clients and devices. Plus, the CTA button is bulletproof, passes the squint test, and uses compelling copy (no boring "Click here" messages).Here's another example of how DogVacay's template is streamlined and effective:

dog vacay pet industry emails

The longer version is well organized. Even though this second email is much longer, it's easy to read and navigate, thanks to themodular layout and repeatedinverted pyramid format for each section. The secondary CTAs are also visually distinguished from the primary CTA, and the text for each section is kept to just a few sentences.Bottom line: DogVacay checks just about all the boxes when it comes to great email design. Brava!

Rover reels in responses with in-email surveys

Similar to DogVacay, Rover is a dog boarding and walking service helping pet owners find caretakers for their fur babies. Rover's visual style is approachable and warm. Emails include stock and user-generated photographs, illustrations, and live text.Notably, Rover uses an ongoing email marketing strategy to engage its subscriber base: in-email one-question surveys.Surveys area smart, fun way to engage readers. Sending a single-question surveymeans readers can respond via email without having to go to a landing page. Here's an email example (look at the poll, about two-thirds of the way down):

rover pet industry emails

After each survey, Rover shares results in a subsequentemail campaign, giving readers a fun, ongoing way to participate and connect with the pup community. What else is there to like about Rover'semail design? Lots! It's super easy to read and navigate, with the gray HTML background colorappearing between modules todelineate the sections. The color tags on each blog category make the content easy to scan, too. The colorful, illustratedicons at the bottom of the email are perfect, branded secondary CTAs. Plus, this email has a section of cute dog photos, just for the heck of it—a definite crowd pleaser!Here's another Rover email, this time with an illustration as the hero image. You can also see how poll results look midway through the message.

rover pet industry emails

If you're deciding between a single or two column design, comparing DogVacay's blog content layout to Rover's is a nice way see the difference. Rover also chooses text links for its secondary CTAs instead of buttons. See how your audience responds through testing.

BarkBox buries the competition with belly laughs

BarkBox is a monthly subscription service that allows memberstosign up to receive ongoing goodie boxes for theirpets. Goodies can include toys, treats, and chews. A pretty sweet deal for the pups, isn't it? BarkBox'svisual brand style (and brand voice) is playful, fun, and—importantly—funny. BarkBox loves to be lighthearted. A recent email started off with this animated GIF:

barkbox pet industry emails

You can't avoid smiling! :) Here's the rest of theemail:

barkbox pet industry emails

In most emails, BarkBox relies heavily on photos and on their brand font to convey messages. Often, this means they break a few email design best practices by bypassing plain text and neglecting a healthy text-to-email ratio. However, we have to assume they know their audience best. If their click-through rates are high, more power to them. (Though, please BarkBox, try to go with a bulletproof CTA button!)BarkBox occasionallybreaks away from the image-heavy design approach to have a little fun, too. Here's a message sent last year from "your dog."

barkbox pet industry emails

Using only a logo header and live text, the email is fullyresponsive. The subject line is smart, and the letter-style approach is super clever and laugh-out-loud funny. With an email like this, it goes to show that, occasionally, turning email design on its head can totally work for your brand. Content should come first, after all.

Wrap-up: Takeaways from pet lovers

It's not all about dog memes and puppy puns. Email marketers in the pet services space know their stuff. Try a few techniques from these brands:

  1. Make stock photos your own with text and illustration overlay.
  2. Try a pale HTML background color to reinforce your brand ID (and help content organization) in email.
  3. Pair illustrations with photos to achieve a lighthearted, approachable aesthetic.
  4. Don't forget to use compelling copy for every CTA button (never tell readers to "click here").
  5. Improve navigability with modular design (and inverted pyramid layouts).
  6. Engage readers with in-email one-question surveys.
  7. Send more animated GIFs! Even if they're user-generated.
  8. Be true to your brand voice.
  9. Have fun! If there's one thing we've learned from these pet-friendly brands—and our canine friends—it's to embrace being silly sometimes.

Design your next pet-friendly email and go Pro!

Feeling inspired? Design your next pet-friendly email campaign in our easy-to-use, drag-n-drop BEE editor. No HTML knowledge is required, plus your email will be mobile responsive. Sign-up for a BEE Pro free trial!

Your Guide to Email Interactivity: 5 Trends to Consider

Keep your readers engaged with email interactivity! Check out these 5 trends marketers can expect to see in 2017.
Beefree team
Beefree team
Jan 13, 2017

It's the time of year when email expertslook into their crystal balls and think of what new email design techniques will be adopted. One 2017 forecastwe keep seeing everywhere?More email interactivity!"Email interactivity" refers toan action taken in anemail that triggers an event within the same email. So with the expansion of interactive email design, our inboxes will continue to become more like our website and app experiences, with tappable pop-ups, drop-downs, and videos. This is an exciting time for email designers, marketers, and brands alike—and for readers who can expect to get more value (and fun) from emails. Here's a guide to email interactivity design trends that can be expected in the year ahead.

1. Hamburger Menu in Headers

We're used to seeing collapsible hamburger menus on responsive sites. They stow away navigation menus, offering a simplified, cleaner header design.Now, the hamburger is showing up in emails, too. Check out this recent shipping confirmation email from Nordstrom, with a hamburger menu in the upper right (pink arrow added by us):

Once tapped, a drop-down menu appears right within the email.

Nordstrom Email Interactivity

What makes this great: Hamburger menus are a boon to email marketers because the extra navigation provides customers with aclutter-freepathway to purchase(which is perfect for retailers who want to promote additional products or business areas). More content and options (like categories, pages, and up-sell content) can be offered to readers while also maintaining an elegant email design.For more resources:Check out example codefromFreshInboxand a community discussion via Litmus.

2. Single-Question Surveys and Reviews

Sending a single-question survey, quiz, or review invitation means readers can directly respond in an email. The immediate reaction makes receiving/collecting feedback and giving input easier than ever. Here's one of the most effective & quick single-question surveys from Expedia:

one question survey

Source: via Jordie van Rijn on Email Newsletter Examples

You can directly submit your feedback inside the email by clicking either the green or red face. Depending on what you click, you'll be redirected to a landing page that already knows if you had a pleasant experience or had any issues. This is what we call a smarter, more personalized survey email that is connected with your overall multi-channel customer journey.What makes this great: A focused email with a single CTA is a smart way to engage readers. Readers can tap anything from a bulletproof CTA buttons to images to links to record their answers. From the subject line to the email body, the messages can be short and direct, which also optimizes your chances for reader participation and makes data collection easy for everyone. Plus, the"micro-survey" approach can be simpleto design.For more resources: Check outour post,4 Ways to Send Better Survey Invitation Emails.

3. In-Email Video (for mostly Apple clients)

With Apple's launch of iOS 10 last fall, HTML5 video made its return to email! In-email videos can be viewed on iPad and iOS Mail, which play directly in the email. For iPhone, however, videos don't play in-line and need to be clicked and watched in full-screen mode.What makes this great:Videos are a powerful way to communicate. In-email videos are a great medium for brands to connect with readers in one place, optimizing the user experience.Having said this, video in email support remains limited and technically challenging. Be sure to know the email clients of your subscriber base and plan for having a fallback image or animated GIF in place for those email clients that don't support HTML5 video.For more resources: A how-to guide on implementing HTML5 video in email.

4. Photo Browsing, Product Tours, and Live Shopping Carts

Image carousels and product tours in emails allow readers to tap on images and buttons to get more information. No more waiting for a landing page to load! Readers now have exploratory power at their fingertips. Here's an example of in-email photo browsing from Rebelmail:

Rebelmail Email Interactivity

It's easy to see the potential for this kindofinteractivity. With a few additions (like color and size selection) readers can now have access to a live shopping cart.They can learn more about products, make selections, and make a purchase—all without leaving their inbox.For an example of a playful interactive email, here's one from Pret.Tapping on a flavor button activates a corresponding animation of a cup filling up.

Pret Email Interactivity

The animations aren't GIFs—they're actually built withCSS animated sprites(with fallback content, of course!).

Pret Email Interactivity

Source: FreshInbox

What makes this great: Dynamic visual content can boost engagement and bring readers closer to the point of purchase without exiting an email. Impatient mobile users can also learn about products quickly andmake on-the-go decisions.For more resources: Check out Email On Acid's article on coding interactive hotspots in emails, and Campaign Monitor's poston the Pret email design.

5. Add-to-Calendar Feature

It's no easy task to collect RSVPs by email. That's why we were impressed by this add-to-calendar functionality from Live Nation. Tapping on any ADD EVENT CTAs starts an instant download of a calendar event file.

Live Nation Email Interactivity

Secondary calls-to-action can be tricky, but for event-driven brands like Live Nation, an add-to-calendar option is the perfect way to get readers closer to making a purchase decision.What makes this great: While the add-to-calendar action doesn't solely happen within the inbox, it doesn't take readers to a landing page, either. Instead, the direct download connectionwith a reader's personal calendar is a powerful step toward event attendance.For more resources: Hubspot hasa great write-up on adding calendar events to email.

Your thoughts on email interactivity

While dynamic content like GIFs and countdown timers continue to be valuable assets for email design, email interactivity brings user engagementto a new level. As with all design techniques in email, though, be sure to check each function's capability and compatibility with the email clients of your core user base.Share with us: what email interactivity techniques do you plan to use this year?

10 Email Design Resolutions for 2017

What are YOUR email design resolutions for 2017? We asked a few industry experts on how they'll be improving their email marketing in the new year.
Beefree team
Beefree team
Jan 3, 2017

Have you thought about your email design resolutions for 2017?As 2016 is now past us, we reached out to email marketing experts to get their resolutions for the new year. So here's our round-up of what emailgurus from across the industry shared. They weighed in on everything from improving design techniques for headers, GIFs, CTA buttons, and more.Read what they had to say, and then share your own resolutions!

email design resolutions

Increase Interactivity With Engaging Photography and Bold CTAs

"My email design resolution is to introduce more B2C design and interactive trends into B2B emails.Working exclusively in the B2B sector, design can sometimes fall by the wayside. Content definitely comes first in this industry, but design can aid in that! I want to encourage my fellow B2B designers (and myself!) to explore more by using interactivity, engaging photography, and bolder CTAs in 2017 designs."— Melanie Kinney, Digital Design Director at G3 Communications

Make Sure to A/B Test More Design Elements

"I am a fan of animated GIFs, so I would love to see more of that in 2017. I only see a few big brands using them now, but I think anyone can benefit if the content is relevant and there is agood fallback. Along those lines, I miss a good ol' well-designed and thought-out email—one that blends imagery, live text, illustrations, knowledge of current recipients, etc., to create a good user experience that translates well from email to other digital properties. In 2017, my resolution is to A/B test more design elements to see what performs best with the user."— Shannon Crabill, Email Developer at T Rowe Price

Include Fun Animation (No Matter How Small)

"In 2017, I’m resolving to include more animation in my email design. Working in pharma, it can be difficult to embrace new trends because of the rigorous testing standards, and the degree to which all emails must be identical across browsers, devices, etc. GIFs are a great way for progressive enhancement in animationsince they stay in the first frame when they’re not supported! Even a small animation—like a bouncing element or a changing color—could add some life and visual interest to emails without taking away any information. I’ve been looking into some of Val Head’s writings on web animation since I saw her speak at a conference earlier this year, and I’d like to try adapting and implementing some of those ideas in email."— Kathryn Grayson, Web Developer and Designer at Everyday Health

Rely on More Data-Driven Design Decisions

"I will design whatever makes themost sense for the clients' subscribers. This means relying on data-driven design decisions, on-brand assets, and fallbacks for better accessibility."— Annett Forcier, Email Designer & Developer at Hootsuite

Experiment With GIFs for an Animated Email

"My email design resolution is to work more with GIFs. I was absolutely blown away by this infographic email from Litmus. I like how seamless the GIFs are integrated with the rest of the emailso that it really feels like a live infographic. I'm inspired to create something similar in 2017!"— Leo Thom, Freelance email/web designer and developer

Grab Attention With CTA buttons and Avoid Gimmicky GIFs

"As a multimedia designer, I actually have two resolutions: 1) I want to design more eye-popping and relative CTA buttons like this one from Birchbox; 2) Since I love to work with video, I want to create GIFs that really grab readers' attention and aren't gimmicky, like this GIF from J.Crew."

— Kiandra Plummer, Freelance multimedia designer

Use Emoji to Encourage Emotional Impulses

“I believe true engagement comes when email designs inspire emotional impulses to drive customer actions and decisions. My goal for 2017 is to integrate what CMO.com calls 'emotional insights' into email design. Emotional insights are derived from strong reactions which come from descriptive copy, provocative images, or even emojis. By using more fun, memorable emojis in subject lines, I can inject life into emails. Positive emojis can excite readers and convey a positive brand image, allowing readers to associate fun with a specific brand!"— Nick Haby, Digital Marketing Manager at RevSquare

Via Wikimedia Commons

Add Cinemagraphs and Dive Deeper Into Geo-Targeting

"In the new year, I would love to see more cinematography in email designs. It brings the whole email to life on another level. Whether it's water rippling slightly or steam coming from a cup of coffee/tea, [cinemagraphs] just add something extra to the whole email.

Cinemagraph Fireworks email design resolutions

Via the Flickr Group: Cinemagraph--More Than a Photo

"I'd also like to optimize mobile versions more to display images that are location-appropriate and different from the desktop version. I haven't seen this being done anywhere on a deeper targeting level. For example, a desktop version might show general women's clothes, but the mobile version would show specific women's clothes that are targeted to location-specific weather conditions. In 2017, I will definitely be a more holistic venture for me and the emails that I create: that not only are they segmented and targeted for each individual, but they are also geo-targeted along with social media inputs; that the emails are aligned across all digital channels; and that analyzing all channel metrics will ensure a better user experience and journey."

— Priya Bransfield, Email Consultant

Improve Rendering Across Gmail, Outlook, and iPhone

"I will make every effort to have my emails look as good in Gmail and Outlook as they do on the iPhone! I'll be using some tactics that I learned at the Litmus Email Design Conference, especially the techniques from Brian Dellaterra. I also hope that Outlook will improve their rendering through their partnership with Litmus."

— Belinda Blakley, Web Designer at DeVry Medical International

Focus on Content-First Strategy Principles

"My design resolution is to build more content-first strategy principles into my existing design and development processes…and to spend less time responding to emails so I can spend more time designing them!"

— Courtney Prebble, Digital Designer at Bronto

What's Your Resolution for 2017?

Let us know in the comments! Let's strive for email design greatness!And if you're looking for more insights into email marketing overall, check outThe Future of email marketing – 2017 edition, a great resource from email expert and friend Jordie van Rijn.

7 Fresh Design Ideas for Your New Year's Email Marketing

Hang in there designer! Finish the year on a strong note with our 7 design tips for a memorable New Year's email campaign. Cheers!
Beefree team
Beefree team
Dec 21, 2016
This article was originally written in 2016: if you are working on a "Year in Review" email or landing page for this year, you will still find plenty of good inspiration. Plus you can find many A Year in Review email and landing page templates in our template catalog.

'Tis the season of sending holiday emails! From last-minute sales and promotions to warm greetings and thank yous, we know you're hard at work this time of year. Just hang in there, email marketers—this is the final stretch. To help you finish 2016 on a strong note, follow ourdesigntips for creating a memorable New Year's email campaign. Ring in 2017 with a final send—then take a minute (or two) to relax. Cheers!

Idea #1: Offer a $20.17 or 20.17% discount

Last year, we caught a few emails in our inbox offering a 2016-themed discount for $20.16 or 20.16% off a purchase. This is a cute and clever approach that many brands aren't using yet. Lord & Taylor, for example, was the first to send a two-email campaignthat started with the subject line, "Special Email Exclusive Offer Only for You — Happy New Year!"

Lord and Taylor new year email

The day-long promotionoccurred on New Year's Eve and ended at midnight. The first email was sent around lunchtime, followed by another one sent around dinnertime, with this GIF:

Lord and Taylor new year email

We love how the retailer put a personal touch on the second email by sending a happy 2016 wish, thanking readers, and signing off with "Love, Lord & Taylor." Even if your New Year email is promotion-focused, the holiday is a good time to add a more individual touch.

Design Tip: Use plain text over your background image

  • Simple image-based modules like these from Lord & Taylor offer a great opportunity to optimize your email by adding plain text. Instead of sending a single-image email, a design no-no, use the free BEE tool to add any background image, text, and bulletproof call-to-action button to the top. This all helps give your message a better chance of rendering across inboxes and avoiding spam folders.

Idea #2: Keep it simple with an e-Card

If you haven'tsent a holiday e-Card to your customersyet, New Year's Eve is a great time to do it. Holiday e-Cards show good will, connect you with your audience, and offer a nice break from the usual emails readers receive. Plus, e-Cards can be really simple and heartfelt. Here's a sweet example from the Whitney Museum:

Whitney Museum new year email

This kind of email can also be assembled quickly; an image and a line of text are all the elements that you need.

Design Tip: Find the right stock image and customize

  • Need an image for your e-Card? Find one quickly and easily on free stock photo sites, then customize it to make it your own. The BEE editor is connected to three gorgeous stock photo libraries—Pexels, Pixabay, and Unsplash—so you can find the perfect image for your card when you design it. You can also customize the image with text right in BEE, and make edits with the built-in photo editor. Make sure to check out our top tips for making sure your stock photos look fresh and on-brand.

Idea #3: Give your e-Card a CTA button

When it comes to adding a subtle CTA button, the business card company MOO did a great job ofsimply adding oneto their New Year email, which was sent on January 1.

MOO started with the subject line "Feeling fresh?" and included this fun animated GIF (which also kept the same theme as their happy holidays e-card):

By customizing the CTA button text, MOO invitesreaders to shop without it being the message'scentral focus. This friendly designis a funway to ease readers into the new year while alsoentertaining them.

Design Tip #1: Make sure your GIF doesn't overload inboxes

  • For any email that includes an animated GIF, make sure it will be received the way you planned. Optimize your GIF—by reducing the number of frames and by being conscientious of size—to make it inbox-friendly. Check out our step-by-step tutorial on adding GIFs.

Watchmakers Daniel Wellington also included a CTA in their email.Even though DW ispromoting itswatches, the language used is decidedly not sales-y. Instead, the focus is on celebrating the New Year, while also suggesting (gently) that there's no better time to buy a watch.

So if you haven't already inundated readers with holiday promos and emails all month, this type of New Year email/e-Card might be a good option for you.

Design Tip #2: Don't use images for CTA buttons

Idea #4: Kick off a (really big) sale

By the time January 1 rolls around, there's a good chance your customers are going to be all shopped out. Toreinvigorate readers, some brands offer big sales events. A shipping incentive or a small discount might not be enough, sogo big—likeBlack Fridaybig. That's what Madewell did, by offering a huge 40% off sale styles campaign.

The design of the email is simple and festive. And the subject line, "Long night?," followed by the pre-header text "This may help," is a playful way to connect with how most readers feel when they wake up on New Year's Day.

Design Tip: Give some thought to your subject line (and pre-header text)

  • Have you tested how your subject lines are performing lately? We don't need to tell you it's a valuable practice. Most brands benefit from having short subject lines and asking a question to engage readers quickly. Just make sure your pre-header text doesn't show up as "View on a web browser." Take the time to customize it; make sure the first text to appear in your email body is an extension of your subject line.

Idea #5: Round up the 2016 bestsellers

Another way to motivate shopping-fatigued readers? Curate this year's list of bestsellers. That's what MAC Cosmeticsdid in this very simple three-column email.

We love MAC's clean, white layout, plus the inclusion of a 5-star rating system (something that definitely influences purchase decisions). There's also no extraneous text; the images speak for themselves.

Design Tip: Make sure your photo galleries are responsive

  • If you're using a photo collage or gallery to showcase products, make sure those images look great on phones, too. Make sure the photos are mobile responsive, and that each image fills the screen as readers scroll through.

Idea #6: Send a collection of fresh content

If you regularly send content in your email campaigns (i.e. newsletters), you've probably prepared a New Year theme. A popular way to look back at the new year is to have a round-up of the past year's best content, which is what Vimeo does. Here are the first few modules of their recent email (subject: The year's best videos + milestones):

Adding company milestones is also a great touch. You get to pull back the curtain on what the brand is proud of, which helps readers connect with your vision and values.

Design Tip: Use consistent module formatting

  • Make sure your newsletter modules follow the same structure. Vimeo uses the common inverse pyramid (header image, text, CTA button), which adds simple horizontal lines to break up sections. These techniques are subtle but really improve readability. Plus, once you design a module in the BEE editor, you can simply copy it to maintain the formatting in subsequent modules; this is a time-saving workflow hack and design best practice.

Idea #7: Say thank you

Sometimes, at the end of the year, the most important thing left to say is thank you. We've featured this note from J.Crew a few times now because we really appreciate the sentiment. A thank you email is a simple gesture, and just four or fivesentences can go a long way.

Design Tip: Use borders and HTML background colors to complete your plain text email

  • Even plain-text emails need a touch of good design to look professional and elegant. Add a border to your email, try centering your text, or include a personal signature to level-up your design—and turn your email into a holiday card!

What's your New Year's email going to be?

Let us know if you found our design tips helpful for designing your upcoming New Year's email and feel free to add your own design tips in the comments below!SaveSaveSave

Holiday Ecards for Your Clients: 4 Festive Design Tips

Holiday e-Cards are a festive way to send some good cheer over to your clients and show that you appreciate their business. Follow our four festive design tips.
Beefree team
Beefree team
Dec 16, 2016

The end of the yearis a time to reflect and show gratitude forclients, partners, vendors, and customers. The best way to do so? Showing you care with a corporate ecard for your clients.A well-designed ecard isinstantly received (mobile-friendly of course!), efficient to send, and beautiful to see. So make sure your clients feel appreciated with your holiday sends by using thesetop fourdesign tips.

shisheido holiday ecard for clients

A 2015 holiday card email from Shiseido

First things first

Before you begin assembling holiday ecards for clients, take into account:

  • Your recipients. Will all your clients, vendors, and customers receive the same message? Consider customizing your email for different segments. Think about sending your most valued clients an individual, personalized "thank you" email in addition to the ecard.
  • Your reason for sending it. Some holiday card emails have a call-to-action; others don't. Some have a note from the CEO; others offer a last-minute promotion. As you begin to assemble an email, consider why you're sending it and what your objective is. Your reason will inform the message and the design.
  • Your brand identity. As with any email you send, it's important to stay true to your brand mission and values. In a lot of ways, a holiday ecard is one of the easiest emails you'll send all year. It can be really simple, and you aren't really asking recipients to do anything. But, in order for the message to be effective, readers need to feel that the message is sincere and that it's reflective of your brand. Use the holiday email as an opportunity to build more trust and boost the relationship with your network.
  • Your timing. Last year, most holiday card emails landed in our inbox on December 24th or 25th. Because these emails don't usually include a CTA, many brands focused on sending a timely message (assuming most recipients celebrate Christmas) vs. being strategic about when most readers would be online and shopping. According to GoDaddy, Christmas Day might have one of the lowest email open rates of the season (but this doesn't mean your message won't get read later—which, in this case, is perfectly fine). Once you determine the reason for sending the email, you can choose the right date to send it.

Tip #1: Keep the message short

Most of the holiday ecard designs we've received have one majorthing in common: they're short and sweet! By and large, these emails use a basicsingle-module design. The key ingredients include easy-to-read text paired with a central image.This email from Klean Kanteen, for example, uses largeheader text and one image to convey its message. No calls-to-action, navigation menu, or fine print.

klean kanteen holiday ecard for clients

Similarly, the Museum of Arts and Design sent the most pared-down email we could find: the entire message was thisfestive GIF. (Can you see their logo hidden in the illustration?)

museum of arts and design holiday ecard for clients

Tip #2: Use inclusive language

For most brands, the language used in holiday ecards for clients should be as inclusive as possible. Manyemailsuse the phrases "Season's Greetings" or "Happy Holidays" instead of calling out a particularholiday or using holiday-specific design. Get creative with colors and themes, too. You might not expect a pineapple in a holiday email, for example, but business card company MOO pulls it off with this clever wintry design.

moo holiday ecard for clients

Another clever card comes from brand consultancy Wolff Ollins; they took an innovative approach by creating a themed campaign about relaxation. Their email introduced a social media campaign that will offerrelaxation tipsthroughout theholiday season. The concept (holiday-induced stress) issomething everyone can relate to, and the tips can be appreciated by anyone.

wolff ollins holiday ecard for clients

Tip #3: Add a personal (branded) touch

We spotted quite a few holiday cards thatused wordplay to show personality. Again, keeping it simple was still the way to go. Most messages only had a header statement in a single-module design, like this one from Fender.

fender holiday ecard for clients

Who needs season's greetings when you can have season's shreddings? The phrase is perfect for Fender's audience. Likewise, ShopBazaar wished readers a cleverly-wordedhaute and happy holiday.

shopbazaar holiday eCard for clients

And Bumble and bumble went with happy hairdays. 

Bumble and bumble holiday e-Card for clients

These brands prove that there's no need to overthink it. A holiday ecard can be about sending good wishes—with a dash offun and cheer.

Tip #4: Skip or de-emphasize promotions

One thing you don't need in your holiday email? A nudge about your latest sale or deal. Most of the emails we've seen—as pictured above—avoid a call-to-action altogether. However, what you send to customers might still include a promotion that isn't the center of attention. For example, this "Happy Holidays" email from Patagonia includes a second module with a gift card offer.

patagonia holiday e-Card for clients

Of course, if you do include an offer, it doesn't have to appear in the second module. This holiday card from retailer Century 21, for example, includes a shipping promotion across the top. While the promotion is a little distracting from the "Happy Holidays" message, it takes up very little space.

century 21 holiday e-Card for customers

Terrain takes a more traditional approach—similar to Patagonia—by including a menu of shopping options after its "Happy Christmas" module.

terrain holiday e-Card for customers

Wrap-up: Design an awesome holiday ecard for your clients!

As you assemble your holiday ecard, always remember:

  1. Keep it simple! Focus on making one module beautiful and interesting. No extra text needed.
  2. Be inclusive with your language. Think "Happy Holidays" instead of "Merry Christmas."
  3. Stay on-brand. Using brand-specific language is like a wink to your readers.
  4. Don't sell anything. If you do, minimize it.

Tutorial: How to Add Christmas Countdown Timers to Emails

Adding a Christmas countdown timer to your holiday emails is a perfect way to show urgency and festivity! This step-by-step tutorial will teach you how.
Beefree team
Beefree team
Dec 10, 2016

Have you received any emails with Christmas countdown timers and thought, I wonder how they did that? You’re in luck—today, we’ll show you how. Countdown timers in emails are a fun tool for adding dynamic, attention-grabbing motion – see our video tutorial at the above link! Here’s how to create a festive timer for all of your Christmas email marketing needs:

WHY ADD A CHRISTMAS COUNTDOWN TIMER?

Honestly, we’re surprised we haven’t seen more December timers in emails this season. More brands should consider using them! Here’s why:

  1. Adding Christmas countdown tickers is easy! Seriously. It’s just a matter of copying-and-pasting a few lines of code.
  2. Timers captivate readers’ attention better than static images.
  3. A countdown creates urgency. Seeing a ticking clock gives readers an incentive to act now—resulting in a conversion rate that increases by as much as 400 percent for some brands. 
  4. Including a timer demonstrates that your brand is visually sophisticated, innovative, and thoughtful.

Plus, the festive holiday season is the perfect time to use a timer. With time-sensitive promotions and shipping deadlines—not to mention a flood of competing emails—seasonal timers are a smart way to send a clear message, add visual interest, and help your message stand out. And you don’t have to save these timers just for Christmas—they’re an awesome way to jazz up your emails when New Year’s rolls around, too. Before we jump into the how-to, let’s take a look at a few emails that do a great job incorporating Christmas countdown timers.

CHRISTMAS COUNTDOWN DESIGN INSPIRATION

Society6

You don’t have to set your countdown timer for December 25 — you can also use it to count down to when a sale will end, or notify a customer when their free trial is almost over. Here, Society6 used a timer with a countdown to the shipping deadline day to receive orders by December 24.

simple christmas email

Function of Beauty

This hair care company used a mid-December email with a countdown timer to notify readers that it’s time to get moving: Order by this Sunday, the email said, and we’ll get your gift under the tree in plenty of time.

christmas countdown timer

Timberland

Timberland got creative—instead of creating a ticker with the numbers running, the company added a calendar strip at the top of the email with an X on the day the message was sent.

christmas email idea

The sky’s the limit with countdown timers, and remember, they’re easy to create and insert into a message. Plus, 99 percent of email providers display countdown timers correctly, meaning almost all of your email list can enjoy. So, let’s get started on the tutorial!

TOOLS YOU’LL NEED

Here are some tools to help you build an email with a merry countdown:

  1. Use the BEE editor to build and design our email message.
  2. Use a free email countdown timer generator. We like Sendtric because it’s simple to use (and, yes, free!) Plus, the timer it creates is an animated GIF, so it will render well in email. A number of online platforms (listed below) also offer easy-to-use countdown timers to add to any email campaign:
  3. FreshRelevance
  4. PowerInbox
  5. MotionMail
  6. Promofeatures

You can also use looped GIFs as your countdown timer by choosing a timer GIF from Tumblr or Giphy and inserting it into the email. HTML timers load more quickly, though; they also look professional, and aren’t that difficult to make.

YOUR HOW-TO GUIDE

To show how easy it is to add Christmas countdown timers to emails, let’s recreate this email from Paper Culture, the online card shop.

paper culture christmas countdown timers

This email actually doesn't have a timer in its original design. Instead, the message (a static image) simply says there are Xhours left in the sale. But wouldn't the email be more compelling if it showedhow many hours are left in a countdown timer?

Video overview: How to build a Christmas countdown email

How easy is it to add one in your email message? As easy as watching our two-minute video tutorial! Be sure to check out our steps below for all the details.

STEP 1: DESIGN THE EMAIL IN BEE

Open up the BEE editor and start with a basic single-column template. Trim Paper Culture’s image and add it to the template. You don’t need the “HOURS LEFT” text at the top because that’s where the timer will be placed, and plain text (the fine print) will also be added to the bottom of the email. Doing this will balance the text-image ratio better, which is an email design best practice.

christmas countdown timer email

Here's our message with the remaining text and header:

christmas countdown timer sample

To create a placeholder for the countdown timer, add an HTML block. This is where the timer code will be dropped once it's created.Here's how the HTML block looks in the Content menu. Just grab and drag it into the template.

email design content menu for christmas countdown timer

Place it above the 50% off image, as seen below.

sale email with a christmas countdown timer

Now, the message is ready for the timer.

christmas countdown timer email in progress

STEP 2: MAKE THE COUNTDOWN TIMER WITH SENDTRIC

Creating a free email countdown timer withSendtric is a pretty straightforward process.

email countdown timer

After entering an email address, add the campaign end date. You can set a date that’s up to a month out. Paper Culture’s sale already ended, so let’s choose a future date just to illustrate how the timer works. (Remember to keep time zones in mind as you choose your end date and time; Sendtric can help you with this step.)Next, update the background and numbercolors. Use an online HTML match tool to find the exact colors (with hex codes) that you want. Click Generateand you have the HTML code for the timer:Then, copy the code from the text box and paste it into the HTML content block.

christmas countdown timer html block

And...voilá! Here is the result:

christmas countdown timer sample email

To give some context, drag in a text box either above or below it. Finally, add a short line of copy. And for an extra personal touch this holiday season, you could even consider using a similar approach to create a Christmas countdown email signature.

finished christmas countdown timer email sample

USING A COUNTDOWN TIMER IN EMAIL? GO PRO!

There’s no excuse not to try countdown timers in your next holiday email campaign! If you’re not already using BEE, sign up for a BEE Pro free trial to enjoy access to additional templates and design features—including templates specifically made for Christmas email design. Now, how many days until Christmas?

free holiday email templates

10 Strategies for Your Holiday Email Design

Want to catch your readers' eyes and attention this season? Check out these 10 tactics for perfecting your holiday email design.
Beefree team
Beefree team
Nov 30, 2016

'Tis the season for stunningholiday email design! Email marketers are pulling out all the stops for the notoriously busy time of year. That's because inboxes are crowded—email volume rose 25% during the 2015 holiday season—and it's time to stand out.Are your campaigns wow-worthy? We made a list of 10 design tactics every email marketer should use to optimize holiday email design and bump up those opens and click-throughs.

1. Use text over background images (vs. text built into the image)

Almost every promotional email we receive has some variation of gorgeous photos or illustrations overlaidwith text. Here's an example from an emailwe just received from clothing brand Everlane:

However, when text is part of animage in a single .JPG or .PNG, the design isn'toptimized for email. Why? If the image doesn’t show up because of image-blocking, the text doesn’t appear either, so your message is lost. Don't take that gamble this holiday season! The solution is to have plain text on top of a background image, and it's a new capability we're now offering for free with the BEE editor. Here's an example email we built (inspired by a message from Litmus) that has a truebackground imagewith plain text on top (illustrated by highlighting part of the text):

Pretty neat, isn't it? If the image doesn't show up, your text still will. Plus, you can add a custom HTML background color to replace the blocked photo. Check out our tutorialHow to Add Background Images in Email to start using this technique in your emails now.

2. Prep images for mobile and retina displays

The percent of emailopened on a mobile device is often higher than 50% (as shown in this monthly report by Litmus). So it's no surprise that image rendering on smartphones isa key concern for email marketers. And it's especially frustrating to find that images on mobile devices can sometimes look blurry. What's the deal?

When images scale and shift to smaller screens, the change in display size can result in a fuzzy image. To prevent this from happening, you need to prepare holiday email design images for mobile and retina displays. Here's what to do:

  • Don't use thumbnails. Use bigger images.
  • Compress images to reduce file size.
  • Allow your images to adjust to width.

Following these design best practices means you'll avoid the blurry-image problem. Read more about exactly what to do with your images in our tutorial:How to Optimize Images for Mobile Emails.

3. Include simple animation

This season is a great time to add a little extra sparkle to your holiday email design. Simple animated GIFs can make a big difference, and they don't have to be complicated. Here's an example fromMinted:

Holiday email design should be fun and festive, and incorporating a GIF can quickly add asense of levity, delight, and playfulnessthat’s eye-catching and entertaining. Be sure to check out our Top 4 Tips for Using Animated GIFs in Email to make sure your sends are optimized!

4. Optimize CTA buttons

Call to action buttons: there's so much to talk about! Size, shape, color, text, position... there's a lot to consider. If we had to summarize our top recommendations, we'd say this:

  • Pick a color that contrasts or “pops” against the background.
  • Write a compelling CTA using an action verb in your brand voice. (Never say “Click here.” Be more creative than “Learn more.”)
  • Size the button so it’s easy to spot—but not overpowering—within the context of the email.
  • Make sure the font is large and easy to read.
  • Keep the button simple and modern: avoid gradients, borders, and drop shadows.
  • Make the CTA bulletproof so it always appears.

Glossier's CTA button design always checks off the boxes on our list. Here's a recent email from the makeup brand:

They also employ a technique called the "isolation effect,"which helps that royal blue button stand out.Read a breakdown of how to think critically about CTA button color in our recent post:What’s the Best CTA Button Color for Emails?

5. Feature user-generated content

Strengthen a relationship with your community; show readers how their peers are using your product with user-generated content. Here's a recent example from the shoe company Allbirds. They've pulled on-brand photos from Instagram to show their shoes in action.

Photos likethe ones collected by Allbirds are likely found through a brand-specific hashtag or @-tag, and each photo gives the user credit.By sourcing content from its own audience, Allbirdsgets access togreat photos without creating them from scratch, and they also send the effective message that the product is popular—even with puppies! This tactic is smart and easy, and almost any brand can try it.

6. Tell a story

Good design means good communication. Your holiday email design should lend itself to good storytelling—an email that has a clear, simple, relevant message. When inboxes are as crowded as they are at this time of year, it's particularly important toengage readers on a universal, emotional level. One of our favorite quotes from the #LitmusLive conference this year has to do with creating emotion in emails:

Wrapping it up #LitmusLive with @thecrafty on creating emotion in email. pic.twitter.com/lxEtQAlxa9

— Litmus (@litmusapp) August 17, 2016

A story can take different forms. In just a few lines, J.Crewuses a recent email to tella story (in just one line) that many of us canrelate to: holiday-induced family tension. The story makes us feel like J.Crew "gets it," and it makes us smile. That's great brownie points for any brand.

7. Add suspense with a countdown timer

If you've never used a countdown timer in emails, the holiday season is the perfect opportunity. There's plenty to count down to right now: the final days of a sale, the last day for holiday shipping to arrive on time, or another festivepromotion you're offering. Here's another J.Crew example we like:

If you're intimidated by countdown timers, don't be! They're actually super easy to add to any email. See our quick tutorial on how to add a timer to your email!

8. Choose the right stock images

If you're short on time or on photo resources, stock images can bea great option. Gone are the days of ugly clip art; today, there are fantastic resources for beautiful stock photos that fit any brand. Fortunately, you can now search for and findfree photos directly in the BEE editor. But it’s still important to use any stockimages properly. One best practice is to customize stock images to make it your own (as much as your image license permits). This hero image from a Skillcrush email is a great example of how a simple desktop photo is more interesting and brand-relevant with a clean design that has text over it.

Check out more tutorial tips on how best to use stock photography in your holiday email design:Tips for Using Stock Photos in Email.

9. Make photo collages responsive

Photo collages or galleries are a common sight during the holiday season asbrands showcase products. But it's important to make sure those galleries are mobile responsive, so mobile phone users can get a good look at your product on smaller screens. This email from clothing brand Lunya includes a beautiful example of a clutter-free photo collage that looks great on desktop and mobile. Here's the desktop version:

Here's the mobile-responsive version:

Need a step-by-step tutorial? Here's a guide on how to make all your image galleries mobile-responsive.

10. Think about the next step in holiday email design

Our final tip is a friendly reminder that your stunning holiday email isjust one step in a longer customer path to purchase. Make sure those who click through are greeted with a seamless transition to your site or landing page, where they're presentedwith relevant materialthat matches the email's visual content We love this #LitmusLive quote from Rebecca Lewis: "It doesn't matter if your emails look great if your end experience on the site isn't good."We hope you'll take the suggestions we've gifted to you to put together a spectacular holiday email design.

SaveSave

Tutorial: How to Add Background Images in Email

Email background images are a simple and easy way to add an extra special element to your emails. Learn how to add them in the Beefree editor!
Beefree team
Beefree team
Oct 27, 2016

For today's exciting workshop, we have a new feature introduced in the BEE editor: you can now add background images to your emails. We promise this is going to be your new favorite email design trick, so let's dive in!

Background images in action

Start looking for them, and you'll find images with text overlay in most emails in your inbox. Here's an example from Skillshare:

skillshare email background images

Anotherfrom Huckberry:

huckberry email background images

And one from Brit + Co.:

brit+co email background images

One from Everlane:

everlane email background images

And on andon. Adding text to images is a great way to:

  • Customize stock photos to make them your own
  • Encourage readers to click on an image
  • Bring text "above the fold" in your email (instead of positioning text beneath an image)

However, these "email background images" aren't really background images at all. That's because the text and the image are part of a single JPG, PNG, or other image file. The text isn't plain text; it's part of the image, added in Photoshop or with another tool. As a result, if the image doesn't show up because of image-blocking, the text doesn't appear either. And changing the text requires editing the image.Today, we're going to show you how to create true email background images with plain text on top.This means that even if your images don't load, your text will be preserved, and changing the text does not require editing the image.We'll also show you how you can repeat an image across an entire row to create pattern or texture.This new capability in the BEE email editor is one thatdesigners have been asking for.It doesn't require any coding and is much easier to implement than in other design tools, or even in an ESP like Outlook. Let's take a look athow it works!

Using email background images

Let's use this module from a Litmus email as today's inspiration.We'll recreate it in BEE.

litmus-header email background images

Video tutorial

Want to see how to add a background image in your email quickly? Watch our video tutorial and follow along step-by-step below:

Choose an email template

Open the BEE editor at beefree.io.Choose a template to get started. We typically choose the basic one-column template. (Tip: If you need a ready-to-goprofessional email template for business, BEE has those, too!)

Enable the row background image

Simply click on any row of content, and you'll see there's now a Row background image option in the Structure menu in the right panel.Enable it, then click "Change image" to browse for a photo.

BEE tool email background images

Browse for an image

You can find free, high-resolution stock photos in BEE, so let's look forone. (You could also upload your own image or paste in animage URL).On the next screen, tap the "myfiles" folder or open one of your folders from the file manager.

BEE tool email background images

Then, press "Search free photos" CTA at the top.

BEE tool email background images

Drawing inspiration from the Litmus email, let's search "stars" or "night sky" to see what turns up.

BEE tool email background images

Choose an image to import, then insert it in the email. Here is the result:

BEE tool email background images

Drag-and-drop content

Using the image placeholder that's already in the template, add the calendar image by dragging it in. Continue adding content placeholders for the Litmus logo, text, and CTA button. After dragging and dropping each module, take a look at how the email is shaping up:

BEE tool email background images

Notice how the text, images, and even the CTA button sit on top of the background image. This allows for plain text and a bulletproof CTA—email design best practices—to build the entire email all within BEE.To finish up, add other necessary images and text, then format the styles, colors, and padding. Here's howthe finished product looks:

BEE tool email background images

Pretty awesome, right? Email background images are simple and straightforward to use in BEE. With background images, youremails won't just look beautiful—they'll be more functional and effective than ever before.

Background image settings

Once you selectyour background image, you can also adjust how it appears in your email. There are three key settings: Full width, Repeat, and Center.

BEE tool email background images

Use them to findthe best fit for your background image. Select "repeat," for example, to create a pattern. This is especially useful if your image doesn't span the entire width of the email but you want it to.As with any image in BEE, you can also edit it using the built-in photo editor. You can alwayscrop, filter, add in specialeffects,etc.

BEE tool email background images

Email client compatibility & setting up a fallback background color

Just like with any advanced email design, you need to keep an eye if any mobile and email clients support background images. According to our recent tests, the only email clients that did not show email background images were:

  • Outlook 2016 on MAC OS X 10.10
  • Lotus Notes 7
  • Xfinity / Comcast email client

For those email clients (and for best results when images are blocked) make sure that you set a background color in the necessary row as a fallback background color in those cases when your background image doesn't render.To set a background color, simply select the row, then use your Structure menu to choose a Row background color or Content background color.

BEE tool email background images

Tip: Add background images to Gmail emails with BEE Pro Connector

Did you knowany email designed in the BEE editor can be exported to Gmail?The BEE Gmail connector lets you design any email in BEE, then move the fully-designed email over to your Gmail drafts folder—ready to be sent—in a matter of clicks. Check out our quick tutorial to learn how.

Using background images in your emails? Go Pro!

We hope you enjoy this new email background images feature, as we're striving to build the Best Email Editor or BEE in short! If you're not already usingBEE, sign-up for a BEE Pro free trial and have access to additional templates and design features.SaveSave

Halloween Email Campaigns: 6 Design Tricks and Treats

When it comes to Halloween email campaigns, there are spook-tacular ways to design effective content that catches your readers' attention.
Beefree team
Beefree team
Oct 21, 2016

Halloween is on the horizon, and spine-tingling sends have beenmaking their way into our inbox. Fromghosts toghouls, it's clear that brands are having fun getting into the spirit with Halloween email campaigns.But, should everyone send Halloween email campaigns? Yes! If you're not sure what to sendor you're still putting finishing touches on your campaign, considerthese six tricks and tips to putyour Halloween email design above the rest. As usual, we've rounded up some spook-tacular examples from real brands to help you get inspired!

1. Create a clever product arrangement

We love when things are arranged neatly. Fortunately, drag-and-drop email design platforms (like the free BEE tool!) make it easy.Here's a great example—from lighting and furniture company ATG—of how a well-structured layout can allow you to feature a lot of products without creating clutter:

ATG halloween email campaigns

All items areorganized by color (which readers have been primed for with this subject line: "These 4 colors ARE Halloween."). Playing with a color schemeis a smart and simple way to build a holiday email without feeling like you're straying too much from your brand identity.If it's not your thing to drape your email in spider webs, ATG shows you how to take asubtler approach.To displaya lot of products without clutter, ATG is careful to simplifyits design with these tactics:

  • Using the same layout and same number of products (4) for each module
  • Being consistent with the shapes of the items and size of the images
  • Deciding products aren't accompanied by extraneous text (like name, price, or description)
  • Making sure CTA buttons are all the same size and style
  • Having consistent padding between items

With cleandesign,ATG is able to pull off its clever product arrangement and get in the Halloween spirit.

2. Keep it simple

Some of the most effective Halloween email campaigns we see are the simplest ones. That's because emails aren't websites—they shouldonly contain enough content to get your audience intrigued and interested to click for more. This Halloween message from Grammarly is a perfect example of great simple design:

Grammarly halloween email campaigns

The email is effective because you can read and understand it in a matter of seconds. There's just one of everything: hero image, header, section of body text, and main CTA. Often, that's all an email needs!Grammarly, a proofreading tool, also doesn't have an obvious tie to the holiday. Like ATG, Grammarly isn't selling Halloween decor, candy, or witch costumes. Yet Grammarly celebrates the holiday with a sale by using thoughtful illustration and playful copy—which ishopefullyenough to draw in readers.

3. Use eye-catching images

The visual elements in your email can make or break how well it performs. This means that instead of including the same standard product images again and again, getting creative will keep your readers' attention. In its Halloween email, Paperless Post shows us how clever prop staging and out-of-the-box thinking can make a digital product (an e-invitation) a lot more exciting to look at in your inbox.

paperless post halloween email campaigns

Like Grammarly and ATG, the Paperless Post email is spare on text. In fact, there's pretty much just a header, a line of copy, and a call-to-action. As long as you have a distinctive image, that's all you may need.If you're short on time or budget,there are still plentyof digital tools (many of them free) to help you find or level-up your photography in a hurry. Take a peek at our post,21 Email Design Tools to Transform Your Emails, for a list of ideas, and make sure also to readtips for using stock photos in email!Whichever method you use, remember these image-in-emailbest practices for your Halloween email campaigns:

4. Establish a clear hierarchy

The first image in your email might be all that readers see, so grab their interest with it. In this spooky email from Food52, the hero image is actually an animated GIF.

food52 halloween email campaigns

Here's the full email:

food52 halloween email campaigns

We love the spooky nature of the GIF and how the dark colors are repeated throughout the email for a monochromatic look. As the most important piece of content, it makes sense that the GIF appears at the top. In fact, when it comes toestablishing hierarchy, a large image that stretches the width of theemail is the strongest option—it tells readers what's most important. After that, secondary content is often divided into multiple columns, just like Food52 does with its "Paint it Black" section. The email hierarchy allows readers to see the most valuable information first and it makes the full message quick to scan, too.

5. Clear the clutter

At first glance, this Halloween email from Tattly, the fake tattoo company, looks super bright, modern, and simple. Why? It'sa matter ofwhite space.

tattly halloween email campaigns

Pumpkins tend to evoke a sort of traditional, country vibe. To avoid that, Tattly not only shows tattooed pumpkins, but it also leverages white space in its Halloween email, which takes the aesthetic from traditional to sleek. Doing this reinforces how powerful white space is, and how smart planning can help thatspace showcase well-lit and thoughtfully-executed photos, too. The result will yield an email that looks fresh and uncluttered.

6. Optimize your CTAs

Of the Halloween email campaigns seen so far, this festive email from The Honest Company gets a lot of things right.

honest company halloween email campaigns

The email employs a single columnmodular design, so readers can take in individual bite-sized pieces of content, one at a time. Each section follows an inverted pyramid layout: image, header, text, CTA. And the CTA buttons are just right—they contrast clearly against the white background, leverage the "isolation effect," and use action verbs. The buttons also pass the squint test: if you step back and squint your eyes, the buttons can still be clearly identified. Like the remaining emails in this post, The Honest Company's message is another great example of simple design, minimal text, effective layout, and—most importantly—clear calls-to-action.

Wrap Up: Tips for your Halloween email campaigns

Even ifyouaren't offeringpumpkin tattoos or recipes, you can still build a Halloween email campaign that converts. Spend a little time on distinctive design and well-curated content, and usethesetips:

  1. Arrange and display products by holiday-relevant color.
  2. Keep it simple: having one festive hero image can go a long way.
  3. Break the monotony of your images with a creative photo shoot.
  4. Establish a clear hierarchy that puts the best content first (try an animated GIF!).
  5. Incorporate white space to make your email look fresh and modern—and easy to read.
  6. Use a holiday-relevant color for your call-to-action buttons, and optimize them.

Save

Stay informed on all email trends

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

By clicking Subscribe you're agreeing with our Privacy Policy