Design
How Glossier Built a Beautiful New Product Email Campaign
For any brand, introducing a new product is a big task. There's a lot you need to communicate: what the productis, how it works, why you care about it, andwhy youmade it. Coming up with a click-worthynew product email campaign is a critical step. So we were impressed with beauty company Glossier's new product email campaign around its latest product, "The Supers." Ina series of emails, Glossierbuilds suspense while introducing and promoting the product in a smart and strategic way. Let's take a closer look at how Glossier excels at branding, and how its step-by-step process of sending enticing emails.
A fastidious focus on design
Before we look at the campaign, it's worth mentioning that Glossier isincredibly intentional and savvy when it comes to branding. "Brand is really, really important," Glossier's founder Emily Weiss told Business Insider earlier this yearin anarticle titled, "This beauty startup has become so popular that it has 10,000 people on a waitlist for lipstick." As you can tell from the headline, Glossier's intense focus on brand is paying off.
Imagery from a Glossier welcome email
The company's visual identity—geared toward its "generation Instagram" audience—is simple and sleek. It features a central soft pink color, a modern sans-serif called Apercu, and a cheeky, playful tone of voice. Each of these elements comes together in emails that consistently communicate well and look stunning. That's what makes this brand definitely worth paying attention to.
Step #1: Build suspense
Glossier's first mention of its new product, a set of face serums called "The Supers," isn't actually a mention at all. Take a look at this email, and tell me if you see anything missing.
At number4 in the guide, there's a missing product. With the eyeball emoji and playful tone (*coughs*),Glossier subtly alludes to the idea that something might be coming soon. But what makes it work is that nothing else is said.The whole point is to be mysterious and prime the audience to keep a close watch on forthcoming emails for more info. Since there's no new product yet, the call-to-action is simply to shop the other items featured in its new product email campaign.
Step #2: Generate excitement with teaser content
If readers missed the subtle hint from the previous email, this one says it outright: Something's coming.
There's still no product on displayyet, but it's obvious there will be one soon (on Monday, perthe email's conclusion). This time, eager readers can find out more—if they click through to Glossier's blog, Into the Gloss. The email works because it's startlingly simple. There's barely anytext except for in the subject, header, and CTA button. With just a quick glance, readers get a hint of what's coming, but with so little information provided, curious audience members have a strong incentive to click through to the website if they want to learn more.
Step #3: Introduce the product
And here it is! Glossier's subject for this email is straightforward: "New Glossier serums are here!"
The email is short and sweet, letting readers get a taste of The Supers in one central image and a very short description. This isn't easy for brands rolling out new products. It's tempting to tell readers why the new product is so great, how it's different from competitors, what it will do, why the price is right, and lots more. However, Glossier wisely treats this email like a teaser (not a website), and provides just the most important information.Want to know more, or purchase? What you want is just a click away with that bulletproof CTA button.
Step #4: Roll out a mini problem/solution campaign
Glossier's new product email campaign actually features more than one product: there are three. As a result, the brand created a mini-campaign to feature each serum one by one.
We're calling this a "problem/solution" campaign because each email introduces a problem—like feeling stressed—then positions the product as the solution. Eachproblem is carefully presented in a relatable, relevantway specifically forGlossier's audience. Each email also follows the same format, remains short and direct, and uses a classic inverted pyramid layout to direct readers to the CTA. And, the buttons themselves feature great text (specific to the product) and an eye-catching pop of color.
Step #5: Tie it all together
After shining the spotlight on each serum in the mini-campaign, Glossier re-introduces the set of three serums in a roundup of new product email campaign. It maintains the playful tone and concept from the mini-campaign witha simple, highly visual message.
The text is large enough that the email looks goodon mobile, but the layout could also easily be turned into a responsive infographic optimized for small screens (learn how to do that here!)
Step #6: Show how to use with other products
Glossier circlesback to the concept of itsfirst teaser email—a guide for how to use its products—in an email showing readers how to use the new product in their routine. As the emails build, we can see that Glossier is presenting readers with small doses of information one at a time. Instead of a long email that dumps product information all in one go, Glossier's email campaign sends targeted, simple messages one at a time.
Step #7: Feature user-generated Instagram content
The last messagein Glossier's new product email campaign features hand-picked Instagram posts. It's the perfect content to show readers how their peers are already enjoying the product.
The curated photos fit within Glossier's visual brand identity. They're likely collectedby hashtag or @-tag, and each photo gives the user credit.By sourcing content from its own audience, Glossier strengthens a connection with its community, gets access togreat content without creating it from scratch, and sends the effective message that the product is popular. It's a smart, easy tactic that almost any brand can try.Want to see how another brand sends out a great email campaign? Check out our post about how Fitbit is dominating email stream design.
Wrap-Up: How to Send a New Product Email Campaign
Take a page from Glossier's book and try out these email campaign approaches:
- Start slow. Tease your new product announcement in a few emails before making the big reveal.
- Keep emails short. Intrigue readers enough so that they'll click through the email to find out more.
- Create a mini-campaign within the bigger campaign. Does your product have a special feature or solve a particular problem? Come up with a unique angle and develop content around it.
- Show people how to use the product. Let readers see your product in action. Inspire them.
- Feature user-generated content. This tactic is a great way to involve your community—just remember to always give credit.
SaveSaveSaveSave
5 Design Tips for Cart Abandonment Emails
It's easy to leave an onlineorder. We've all been there. In fact, 68% of online shopping carts are abandoned, according to research from the Baymard Institute. As a result, email marketers are presented with the challenge—and opportunity—of saving sales via email. Enter cart abandonment emails.Cart abandonment emails are messages sent to customers who have recently put items in a cart without completing the purchase. The email reminds them their product is waiting for them, and some even offer an incentive to complete the purchase (like free shipping). When done well, these emails aresuper effective. According to other research by BI Intelligence and Listrak, emailssent three hours after a consumer deserts a cartaverages a 40% open rate and a 20% click-through rate. These emails are critical for any online retailer. To determine when to send yours, test the response rate and conversion rate you receive with your customers at various intervals—either a few hours later, or a day or two later. Some brands send a series of emails in a cart abandonment email sequence (though be careful not to flood inboxes). Today, we'll offer our top design tips to optimize your cart abandonment emails.
Tip #1: Start with an attention-getting subject line
Write a short, on-topic subject line that conveys urgency. Here are somecart abandonment email subject line examples from our inbox:
- You Left Something in Your Shopping Cart at Walmart.com
- There's still time to finish your booking for Seattle.
- ✔ Nobody likes to miss out. Are you still interested in Ancestry?
- Did you forget to finish your order?
- Complete Your Purchase!
- Your shopping cart misses you!
- Oops, you forgot something
- Your shopping cart is so needy...
- Shopping alert! See what's in your bag...
- One less lonely bag in the world
Most are short and direct, which means they're optimized for phone screens (where most of us check email). Some ask questions (Did you forget to finish your order?) or make exclamations (Your cart misses you!). As you design and test your own subject lines, here are some considerations to make:
- Grab attention: Can you personalize or customize it?
- Check it out on a mobile screen: Should it be shorter?
- Know your audience: Is the voice and tone on-brand?
- Stand out: Try asking a question, being silly, or using an emoji.
- Create urgency: Mention timing or, like Ancestry does above, imply "FOMO" (fear of missing out).
Tip #2: Show the actual products
We all know the old adage: show, don't tell. Cart abandonment emails provide the perfect opportunity to put that oft-heard advice into practice. When you show a shopper what's still in her or his cart, it works as a visual reminder that's easy to scan and absorb. Thrive Market, the healthy grocery startup, asks readers if they're still interested in the items in their cart, then shows themwhat's there.
The "Buy Now" call-to-action buttons that bookend the messagestand out against the white background. Plus, the email adds a coupon code to amplify the discount and encourage readers to take action. The email is clear, simple, and visual. As a result, the message is optimized for readers who are on the go and reading on mobile screens.
Tip #3: Add customized, targeted content
Whenever a marketing email feels like it's from a person and not a robot, that's a win. With increasing amounts of subscriber data at their fingertips, email marketers are wisely designingemails that feel individually-tailored to readers. Cart abandonment emails provide a perfect opportunity to use the data you have to customize content and take advantage of industry best practices.Take this cart abandonment email from Starwood, the hotel company, for example. Its subject line reads:There's still time to finish your booking for Seattle. Mentioning the reader's specific destination in the subjectimmediatelyindicates the message isn't generic. Here's the full email:
The intro of the email is all about reminding the reader about the benefits of completing the order. Exclusive rates. Wi-Fi. Starpoints. But in case that isn't convincing enough, Starwood follows up with events and offers available at the specific hotel for the specific dates of interest. By putting its data to use, Starwood is able to offer relevant, customized content to encourage the sale.Similarly, Ann Taylor, the women's fashion retailer, provides "upsell" content in its cart abandonment email, below.
The key call to action to "View my bag" is still prioritized at the top, but Ann Taylor also presents customized images of additional possibilities. In other words, this email says, Keep shopping! The retailer may beplaying off the idea that the cart was abandoned because the shopperwasn't satisfied with what she'd picked out. So, why not offer something new to catch the eye?
Tip #4: De-emphasize prices
When you look at the data forwhen carts are abandoned, it helps revealthe reasons whycarts areleft behind. According to BI Intelligence, here are the reasons why consumers leave their carts:
- 46% occur at the payment stage
- 37% occur at checkout login
- 36% occur once the shoppers see shipping costs
- 21% occur when the user needs to enter their billing address
- 20% occur when the user needs to enter their shipping or delivery address
It's a lot about hassle factor. The easier checkout is, the better for shoppers.What's also interesting is that only one reason has to do with price(shipping costs). Still, retailers often strip product pricing out of cart abandonment emails. That way, brands can focus onreminding readers about the things they want while de-emphasizing the costs associated with them. While the Thrive email does list prices (and discounts), the emails below from Amazon and Snapfish are product-focused and leave pricing out:
Emails from both Thrive Market and Amazon focus on presenting readers with item images in their carts. But sending cart abandonment emails with and without pricing is an easy thing to test. Try it, and trackhow readers respond.
Tip #5: Make the CTA obvious and inviting
Just like with any email, the call-to-action should be front and center: easy to spot, easy to tap, easy to act. Ancestry.com does a great job of making its CTA button the central component of its cart abandonment email.The orange pops against the black-and-white image, and the CTA language used is much more action-orientedthan "Click here" or "Learn more."
Think abouthow easy it is to act upon the Ancestry email compared to one that omits a button altogether, like the one below from Walmart:
With three hyperlinked phrases—"shopping cart," "Free shipping," and "Help"—in all the same color, size, and style, the reader can be overwhelmed about where to click. A bulletproof button would makethe email so much more effective!
Bonus tip: Get cheeky with cart abandonment emails
Many brands also get cheerful and playful with cart abandonment emails. And there's good reason: they don't want to be annoying! It's easy for these emails to seempesky or even slightly intrusive. To combat that, email marketers often keep the messages very simple withcheeky copy. Take the message from makeup retailer Glossier, which is a play on the "If a tree falls in the woods..." joke:
Similarly, Thrive opens up one of its cart abandonment emails by personifying its products to coyly ask: Did you miss me?
If being silly is within your brand voice, try getting clever with your email copy to lighten the mood and appeal to readers.Do you need to improve your cart abandonment emails in a snap?Check out our BEE editor—it's a free-to-use drag-and-drop tool that will get your beautifully designed email up and running in no time! Plus, BEE comes with free email templates that you can customize and send in minutes. Try a template and get your abandoned cart email up and running in no time.
6 Great Examples of Simple Email Design
We encourage our lovely EDWreaders often to "keep it simple" with their email design. Don't make your email look like a website. Make it easy to scan.Don't get clipped. We're not the only ones extolling this simple email design advice. Simplicitywas a hottopic earlier this year at the Email Evolution Conference and again at#LitmusLive.
"A designer’s job: cut through the crap." -Matt Caldwell. Love it! #LitmusLive
— Analisa Capote (@AnalisaCapote) August 17, 2016
Simple email design is important because it improves readers' experience. It means your messages don't waste anyone's time. They're easy to understand, thekey messageis obvious, and it's a no-brainer for readers to seewhere to click and why.So if you're among the many brands that can affordto de-clutter youremails, we've rounded up an inspiring collection of emails that achieve simple email design, plus the tips we learned for the best kind of simple design.
Pare down your color scheme
This invitation email from AIGA NY, the design association, is a beauty to behold. It's big, bold, blocky—and yes, a simple email design. Take a look and see how quickly your eyes scan the information provided.
I bet you didn't miss that big red RSVP button, either. With everything else black and white, it's hard to miss. AIGA knows it's not always easyto get people to RSVP to an event. By employing design simplicity with a basic color scheme, theymake the informationeasy to read and the call to action easy to engage with.
Use headers and labels
This prettyroundup email from Typeform is so easy to scanthat you might miss all the subtle design elements that make it work.
With a large font size, our eyes can't help but land on themain header ("Don't you just love manual data entry?"). And because it's a funny, sarcastic question, it's immediately engaging. The first module is also the full width of the email, so there aren't any sidebars competing for our attention.Then, the email splits into two columns (using a hybrid layout).To maintain organization and hierarchy of content, Typeform continues to use headers in a large, bold font, along with a numbered list and color coding. None of this clutters the design; it enhances it.
Establish a visual hierarchy
The main content in this email from the beauty company Glossier is an "order of operations" product flowchart.
The numbered items and connecting lines make the content seamless to follow. And it leads right to that easy-to-spot call-to-action button, too. While Glossier should be cautious about their text-to-image ratio, the hierarchy of this simple email design makes it fun to read and easy to follow. An email hierarchy can also be established using amobile-friendly single-column modular approach.
Include only the text you need
With text in email, sometimes less is more. Particularly if you're a visually-driven brand, like Maple Kitchen food delivery.
With Maple, users order food through amobile app—or by simply tapping on the meal images in these daily emails. Maple focuses on what's most important to readers: the food. As a result, the message is comprised of hi-res photos with the name and ingredients of each item.Maple could just as easily describe each item in a more long-winded manner: This mouth watering lamb kofta is a crowd favorite! Our yogurt sauce and cucumber salad keep it light and fresh while delicious lentils pack in the protein... you get the idea. But guess what? That would overcomplicate things and make the email more time-consuming to sift through. By using a list format and cutting down on text, this email is super reader friendly. (Also note there's nowastedon an elaborateheader, navigation menu, or even social media buttons).
Remove extraneous design elements
White space! When done well, it's a thing of beauty. Just take this email from the curated shop Canopy.
Canopy uses uniform image sizes to neatly arrange products in a grid. With text along the bottom and bright color labels in the upper right corner, each item is contained in its own space. As a result, Canopy skips lines, borders, or background colors to separate each one. The approach—with all that lovely white space—makes the simple email design feel clean and light. Canopy shows us you don't need a bunch of lines or design elements to create order and organization.
Limit calls to action
Holstee's emails are meant to inspire reflection. In this case, simplicity evokes a realcalming effect.
Holstee's call-to-action buttons are great: they're bulletproof, compelling, and descriptive, and they pop (perfect size and color). Importantly, though, there are only two! By limiting what readers are asked to do in email, the chances of engagement are improved. Too many options placethe onus on the reader to decide what's most important or urgent. When there are only one or two choices, on the other hand, the decision-making process is simplified for the reader.Holstee also uses a traditional inverted pyramid scheme to create contentorganization. Like the other emails in this post, the text is short and sweet, and color is a tool that directs readers' attention. Plus, there's plenty of white space!
Wrap-Up: Tips for Simple Email Design
- Simplify your color scheme. Color is a huge design tool: when you stick to a black-and-white scheme, for instance, adding a pop of color will immediately grab readers' attention.
- Use headers. Use a font size that's roughly 2x your body text to make your key message prominent.
- Create hierarchy. Make it obvious for readers what they should see first, then next, then next. Your content should lead directly to a CTA.
- Pare down text. Say what you mean simply, clearly. Revise until you have only what you need.
- Embrace white space. When your content is organized well with buffer space, you don't need extra dividers, lines, and shapes.
- Use only one or two calls to action. It should be obvious to readers what you're inviting them to take action on.
What are your tricks for keeping emails simple? Let us know in the comments! And remember that our BEE editor has built-in templates for elegant, simple email design (and it's free).SaveSaveSaveSave
Top 10 Tips from the Litmus Email Design Conference
The Litmus Email Design Conference took place earlierthis week in Boston, bringing together some of the smartest designers, marketers, and thinkers in email. Wefollowed along onTwitterto pick up on all the juiciest design tips. (And we caught a big announcement, too, that Litmus and Microsoft are partnering). Update and upgrade your email design with these toptipsfrom the best in email.
Tip #1: First: Think big picture.
We're email geeks. We love to talk about the nitty-gritty: colors, pixels, code. But sometimes we need a reminderto take a step back and remember that sending email is a privilege. Through email, we get to communicate with our very own audience, and that's an amazing thing. We have to prioritize them first.
Email is a privilege, not a right. We don't *have* to send email. Customer trust comes 1st, money comes 2nd. @vickymakesstuff #LitmusLive
— Justine Jordan (@meladorri) August 16, 2016
Good design requires a time investment—and it's worth it to build trust and loyalty with your customers.
Do you intend to treat your customers like humans or cash machines? Build trust through good design + good intent #LitmusLive @pnts
— Justine Jordan (@meladorri) August 16, 2016
After all, each of our businesses is based on our customers, so our relationship with them is paramount.
Key takeaways from @matty_caldwell 'Good design takes time' & 'Creative is about relationships' #LitmusLive #design
— Uwa Oduwa (@uwaohh) August 17, 2016
Walk a mile in your user's shoes. Stop thinking like a marketer and be a human again. It's the secret to success. @asoehnlen #LitmusLive
— Justine Jordan (@meladorri) August 17, 2016
Tip #2: Simplify.
We say this all the time, but it bears repeating: good email design is simple. Readers should be able to easily understand your message quickly, without effort. No clutter, extra columns, or overabundance of calls-to-action. As Eric Lepetit points out, it should be intuitive.
Every user matters. @ericlepetitsf #LitmusLive pic.twitter.com/u5wKCTwcSA
— Litmus (@litmusapp) August 16, 2016
Part of making an email intuitive means leading a reader to your main CTA, not asking them to "choose their own adventure."
Having two buttons next to each other = "I can't decide what my main CTA is. You choose." @Ultra_K ???????? Bad. #LitmusLive
— email snarketing (@EmailSnarketing) August 17, 2016
As email designers, it's our job to simplify and clarify.
"A designer’s job: cut through the crap." -Matt Caldwell. Love it! #LitmusLive
— Analisa Capote (@AnalisaCapote) August 17, 2016
Tip #3: Sharpen your storytelling skills.
What's going to get readers to open an email? What'll get them to scroll, to click? Good storytelling. When you engage readers on a universal, emotional level, that's powerful.
Wrapping it up #LitmusLive with @thecrafty on creating emotion in email. pic.twitter.com/lxEtQAlxa9
— Litmus (@litmusapp) August 17, 2016
Good storytelling also strengthens your relationship with readers, building brand loyalty. When readers are inspired by you, that's big.
"Storytelling gives you a superpower, allows you to build a vision, inspire the future." - @pnts #LitmusLive Crushing hard. @HearsaySocial
— Xin Wang (@xinisterlayer) August 16, 2016
Tip #4: Get your templates ready.
If you missed our post on the five email templates you need to have on hand, take time to check it out. Working from templates improves your workflow and design consistency. Chad White suggests always working off a master template.
"You need an email template master just like you have a webmaster." Create new messages from the master. @matty_caldwell #LitmusLive
— Chad White (@chadswhite) August 17, 2016
Tip #5: Go modular.
We rarely talk about any good email without mentioning modular design. As Emma Goodman points out, it's a huge time saver. Working with blocks of content allows you to quickly copy, rearrange, and fine-tune your design without a threat to structure or clarity. It's how we build all our emails in the BEE editor.
Thinking about how to save time and still build amazing emails with Emma Goodman #LitmusLive pic.twitter.com/tVerOxodSG
— Litmus (@litmusapp) August 17, 2016
Tip #6: Know how to optimize CTA buttons.
Mike Nelson of Really Good Emails did some serious number-crunching and came up with the cold, hard facts about CTA button design. In terms of color, there's a clear winner: blue is by far the most popular.
It's the last day of #LitmusLive. Here's one of our fave new facts: Blue is the most popular CTA color. #emailtips pic.twitter.com/SisxWUbSsv
— BSTRO (@creativebstro) August 17, 2016
Wondering what to say with your CTA button? We have a lot of tips, and we couldn't agree more with this one: DON'T sayclick here!
Thank you for denouncing "click here." It's the worst. #judgejordan #LitmusLive @meladorri
— email snarketing (@EmailSnarketing) August 16, 2016
Know what a ghost button is? It's one where the background color is transparent, just like the Twitter "Follow" buttons on these tweets (if you're not already following these folks). Sometimes, these buttons blend in too much with the background, and readers miss them or don't even know they're a button. Use sparingly.
Be wary of using ghost buttons, especially for main calls-to-action. They don't stand out very well, creating a weaker CTA. #LitmusLive
— Chad White (@chadswhite) August 17, 2016
When it comes to shape, rounded buttons are the post popular, but the pill shape might bemaking a comeback.
Pill shape CTA making a comeback >26% this yr v @reallygoodemail #LitmusLive pic.twitter.com/fE8E6VH3dC
— Anna Yeaman (@stylecampaign) August 17, 2016
And adding arrows to CTAs? It's a go! They might actually improve your click through rate.
Arrows on CTAs improve CTR ➡️>> #LitmusLive
— Tatiana Mac (@tatianatmac) August 17, 2016
Tip #7: Don't underline text.
It's outdated, inefficient, and confusing to underline text that isn't a link. If you want to underline, do it for links only.
If you wanna be friends with @RodriguezCommaJ (and trust us, you definitely do)...#LitmusLive pic.twitter.com/h9hWiwXBjE
— Litmus (@litmusapp) August 15, 2016
Tip #8: Avoid trouble.
Don't kick off your email with the "Having trouble viewing this email?" disclaimer leading viewers to the web version. Move "trouble" to the footer.
Move "have trouble viewing this email" to footer. No one wants preview text to include "trouble" next to your brand name. #LitmusLive
— Tatiana Mac (@tatianatmac) August 17, 2016
Tip #9: Pay attention to plain text.
It's all about balance. Avoid falling into a spam folder by upping your word count, and make sure readerswith image-viewing turned off will see your key messages!
Form vs. Function: balance images + live text to maintain strongest messaging w/ images off, while keeping design on-brand. #LitmusLive
— Pete Biolsi (@pbiolsi) August 17, 2016
Tip #10: Think ahead to the next step.
You designed a great email. You told a story, used modular design, optimized your CTAs, and balanced your text and images. Readers are clicking through—amazing! But now what? Is your site or landing page optimized for good design and messaging the same way email is? Just like Tip #1: we all need to remember the big picture.
"It doesn't matter if your emails look great if your end experience on the site isn't good." - Rebecca Lewis #LitmusLive
— Analisa Capote (@AnalisaCapote) August 17, 2016
Did you attend #LitmusLive in Boston? Let us know what you learned in the comments!
Olympic Email Design: 5 Ways Brands Are Leveraging the Games
The world is abuzz with all things Olympics—our inboxes included!Brands are incorporatingOlympic email design—from the simple to the ornate—to get in the sporty spirit. Here are five of the methods we have seen marketers use to reference the Rio festivities in theiremail campaigns.
1. Channeling gold champion products
The Olympics have us all wishing we were gold medal winners. Some brands offered to give readers a piece of the glory byputting their products on the podium. Sephora and Origins both went gold recently with these Olympic-inspired product promotions. (We trimmed the emails for easier viewing).Sephora's subject line: Ready, set, GOLD: These picks are winning beauty
Origins' subject line:FREE trio of Mega-Mushroom skin soothers | A gold medal value!
Both companies use a simple approach: Olympic-themed copy coupled with a touch of gold throughout the email design.This Olympic email designonly takes a little foresight and planning andis easy to implement. Paired with awinning subject line, and theseemail campaigns areready to compete.
2. Adding athletic action with animation
Other brandspreparedfor the Olympic debut with more detailedemail design. Loft, for instance, sent a series of swimming-inspired emails with illustrated GIFs. Like Sephora and Origins, Loft showcased playful text but in their header:If sales were a competition, we'd take home the gold, followed by a swimmingly sweet GIF.
Leesa, the mattress company, includes animation that invitesreaders to "sleep like an olympian." (Subject:$100 Olympic Offer - Sleep like an Olympian)
As forDelivery.com, the food delivery service did something we don't often see: instead of having a GIF as the hero image, a small GIF was added as part of its logo.
Positioned at the very top of the email, the gymnast effectively snagged our attention.
From small to large, the animated GIFs accomplish a few things simultaneously: (1) they capture our attention and (2) they make a statement. Brands using themed GIFs in their Olympic email design might be perceived as being current, approachable, and generally lighthearted and fun. And that makes a difference in connecting with anaudience.
3. Sustaining event excitement with a drip campaign
Before the Olympics even began, Orchard Supply Hardware senta five-day promotional drip campaign to drum up excitement for opening day. Called 5 Days of Winning Deals, each day had a theme and a one-day offer. The first email kicked off the event with a boxing-themed message (trimmed here for easier viewing):
The USA-themed color scheme and simple boxing glove illustration is a break from Orchard's usual email aesthetic, so readers will notice right away the changes signify a special event. The second email followed the same structure but with agymnastics focus instead of boxing.
Together, thefive messages build upreaders' anticipation foropening day. Orchard is able to play off that anticipation with product promotions. Plus, Orchard'sOlympic email designalso followsbest practices for drip campaigns:
- There's a central design theme (repeating the same colors, fonts, and/or images).
- The same call-to-actions are used throughout the campaign ("Buy now").
- A consistent first module format unifies the messages into a cohesive group.
4. Creating content connection through competition
Many of us are inspired by the Olympians wesee on TV. They're incredibly poised, strong, and talented. When wehear about their livesand see them compete, we feel like a part of their stories. Publishersare playing off that connection withcontent that lets us feel like we can be Olympians in our own lives.InsideHook Chicago, for instance, sent an email with the subject line, Wanna train like an Olympian?Readers were offered a promotion for a gym membership atChicago Athletic Association Hotel.
How about looking like an Olympian? Well+Good had astory on workout hairstyles:
Eating like an Olympianwas a popular topic, too. Time Magazine featured it as a top story in a daily email:
Tasting Table wrotetheir own version, using the subject line,How to eat like an Olympic athlete:
Even Extra Crispy wanted to tell readers about the breakfasts eaten by champions:
Meanwhile,PopSugar got silly and wondered how toddlers would fare as Olympians:
But if you just want to live like an Olympian, The Musefeatured a story (and email subject line) about 10 Olympic Athletes' Daily Habits You Should Steal (That Don't Involve the Gym):
Marketers and content strategists tie content to relevant news all the time. The Olympics is no exception. With great stories, headlines, and subject lines, brands hope to tap into readers' admiration of accomplished athletes and increase email clicks with eye-catching Olympic email design. Email designers canboostattention to stories by:
- Using the story headline in the subject line (like Tasting Table)
- Positioning the story at the top of the email (like Time)
- Pairing the story with a great CTA button (like the Muse)
- Pairing the story with a high-quality stock photo—or animated GIF)
5. Showing spirit with header illustrations
The e-commerce site Steals.com has a simple and effective approach to Olympic email design: an Olympic header illustration coupledwith an Olympic-focused headline. Here's an example:
This is an especially flexible design approach because it doesn't require Steals to create specific content or update the entire email design. The brandcan simply applyOlympic imagery with a header at the top, then design the email as usual. Here's a second example:
As you can see, a little creativity can goa long way!
Wrap up: Olympic Email Design
Want toconnecta current event to your brand's email design? Try these approaches:
- Take one prominent symbol or color (like GOLD!) and infuse it in your email design (and copy).
- Use animated GIFs to show readers you're all-in on the fun and festivities.
- Plan a drip campaign to coincide with the event (or build up to it).
- Create content connected to the event and feature it prominently in your design.
- Build a universal email header that can be used throughout the event.
Have you seen other gold medal-worthy design trends? Let us know!SaveSave
How Fitbit Dominates Email Stream Design
Curious about how a single brand tackles its email stream design? We'll explore and analyzeFitbit, which sends a variety of emails—like product announcements, shipping alerts, and user notifications—to its subscribers.When it comes to products, the fitness brand often focuses on its activity trackers (like the wristbandpicturedbelow), so we'll take a closer look at the messages to see which elements stay the same or change, and how style and voice are maintained across different designs andemail types.So let's review Fitbit's brand identity and then its emails to see what we can learn from the company's email design philosophy.
A strong visual brand is always maintained
With its bold colors and smooth, roundedshapes, Fitbit's visual brand identity is modern, fun, and friendly. Fitbit's primary brand colors are teal and gray, but it also uses bright colors like orange, pink, and lime green. To prevent colors from being overwhelming, ample white space breaks them up and provides a fresh, airy aesthetic. Here's a look at some of the colors in action in an app screenshot (Alta version):
Iconography is also simple and clean. Its logo recently underwent an update, making the newer version even simpler and bolder. Plus, Fitbit'sweb font is the popular, easy-to-read Proxima Nova.
Fun illustrations help user alert emails stand out
Alert emails are automatically sent when usersreach certain milestones. The email stream design copy is encouraging and cheerful, with subject lines exclaiming: "Congrats on earning your Marathon badge!" and "Congrats on earning your first Urban Boot badge!"The intention of these feel-good messagesis to acknowledge the user's accomplishments, without asking the user to do anything more. There's no bigcall-to-action button, though Fitbit does include some social sharing buttons.
You can also see the key aesthetic of these emails is simplicity. They're short and sweet, with a classic inverted pyramid structure to make for easy reading.Theflat, geometric spot illustrations (the badges)are also easy to understand at a glance, and the high contrast of white font against a teal background makes the text pop. Using the email-safe Arial font for the header and support textmeans the message still shows up even with image-viewing turned off.
Takeaway: Communicate a single, clear message to readers by keeping a simple email structure! Large text,brightcolors, and simple illustrationscan help communicate cheer.
Simple info makes shipping notifications easy to read
According to Litmus, 64% of consumers consider transaction confirmation emails the most valuable messages in their inbox. But the messages can get frustrating real fast if they're cluttered or time-consuming to read. Confirmation emails, like the ones from Fitbit's email stream design, should include an easy-to-spot tracking number, plus some key information (like what you ordered and where it's being shipped from).Not only does the brand provide the necessary info, but it does a great job of building excitement with playful messages ("Are you smiling?") and equally playful product images. No doubt the reader will get excited that a Fitbit order is being processed.
The main message is also clear and easily scanned because Fitbit uses a white background, readable font, line breaks, and three font colors (red, gray, teal) to organize information.Although the same header from other emails is used, social sharing buttons have been replaced with store icons. These "passive" CTAs (in the upper right) correspond wellwith the type of email sent, while the footer is almost completely eliminated. By removing extra CTAs, theseemails are really user-focused, especially since Fitbit knows the only thing a reader wants to click is the tracking code.Takeaway: Make transaction emails easy to read by contrasting a white background against a primary brand color (the repeating teal) and using high-contrast text. Focus on the tracking number and order details, and exclude extras (like social sharing buttons or footers).A fun image and clear message convey an engaging brand voice.
Playful GIFs boosts product promotion
We recently pointed out that usingGIFs in special announcement emailscan signal an out-of-the-ordinary message. Fitbit follows this animation trend by incorporating simple GIFs to highlight its products and features. In a Fitbit Flex welcome email, the lights in the Fitbit GIF flicker:
Here's the full message:
In a promotion email for colorful accessory packs, Fitbit's hero image rotates between color schemes:
Here's the full message:
Fitbit knows it's better to show than to tell, so product featurespop on thescreen to help readers see features in action. Both animations are also positioned at the top of the email to grab readers' attention right away. Plus, the GIFs are simple; with only a few frames, they won't be slow to download or eat up data plans.Takeaway: Put your animated GIFs to work—make them show off your product's features and quickly demonstrate a product's capabilities or features. Readers will be more engaged!
Fresh photos upgrade product announcements
Beautifulphotography used in an email stream design also makes a statement, and the photos in the recent email below enhances Fitbit's modern and friendly brand identity.Layering text over the hero image is also a simple design trick that levels-up the email's look. The photos below are bright and fresh. The goofy selfie face isplayful and placing the image within the iPhone really shows readers how the feature works.
Here, Fitbit unveilsaproduct again with beautiful hi-res images. And what better way to show updates to the app dashboard than with screen shots? It's the quickest, most effective way to convey the redesign.
For a product-focused email, we see that Fitbit chose a two column layout with alternating image and text sections. The result is an email that's easy to digest in a step-by-step fashion. The screenshots are further highlighted by pink circles thatpoint to product updates, which help readers see specific features right away. (Hot tip: you can easily create circles like this in Skitch, and screen grabs can be placed on iPhone stock images through platforms like Placeit. See all our recommended email design tools here.)Takeaway: Use photos of your product in action for update or announcement emails. Let readers seeexactly what you're talking about withdevice mockups and image markups (like those pink circles).
Wrap-Up: Tips from Fitbit's email stream design
From all the emails above, it's easy to see Fitbit's brand style in action. Here are some points to follow:
- Messages need to be simple, short, and clear
- Minimize text and use web-safe font for easy scanning
- Don't be afraid to use a primary brand color more heavily
- Include bright and fun illustrations and photography
- Use GIFs and screenshots to show products in action
- Have simple logos and headers to establish branding
- Vary the CTAs but make sure they fit the email's message
- Keep footers the same (except in transactional emails)
Save
8 Celebrity Email Newsletters: Dos and Don'ts
Curious about the lifestyle emails of the rich and famous? Today we're assessing celebrity email newsletters, including ones from Gwyneth Paltrow, Lena Dunham, and even, yes, Oprah. Thoughyou might consider some emails as "glorified shopping portals," there's still plenty to learn when it comes todesign dos and don'ts.
Goop (Gwyneth Paltrow)
One of the first celebrity brands was started byactress Gwyneth Paltrow in 2008. Called "Goop," Paltrow started sending a weekly series of celebrity email newslettersto serve as "a place to organize her unbiased travel recommendations, health-centric recipes, and shopping discoveries for friends." Eight years later, the newsletter has expanded significantly to include a shop section, a skincare line, and tons more content about maintaining a holistic, natural, yet glamorous life. Check out a partial view of a recent newsletter:
Design Dos: Goop uses a hybrid layout, shifting from one column to two. The one-column setup at the topfocuses the readers' attention on the two most importantcalls to action: shop the collection and read the feature story. High-res photographyis prominent in the email, though the brand also incorporates plain text (the web-safe font Arial)—along with a bulletproof "Read More" CTA button—to improveits image-to-text ratio and avoid spam filters. The Container Store advertisement in the middle of the email almost isn't noticeable at first glance because the content fits with the topics of the email and, presumably, the interests of its readers.Design Don'ts: Despite being well-organized and mobile optimized, Goop newsletters are usually pretty long! And Gmail can "cut" extra-long newsletters, though there are ways toprevent emails from getting clipped.Also, while it's great to highlight a robust amount of content, there's a lot going on in each newsletter, which canoverwhelm readers. Short(er) newsletters that spotlight just a few focused and curated items may be best...but, as long as readers are willing to keep scrolling, long newsletters may not be so bad after all.
TYRA Beauty (Tyra Banks)
Get ready to "smize." TYRA Beauty is a "cosmetics experience" business started by former Top Model host Tyra Banks. To prepare for the debut of her self-funded startup, Banks even attendeda three-year Harvard Business School program. The company's own celebrity email newsletters, called Tyra Mail, are a great reflection of the brand's energy, which is obvious in the welcome message:
Design Dos: The introduction letter from Tyra reelsreaders in with a compelling message. It'spersonal and engaging, and the e-signature enforces that intimacy with the reader. And like most emails in the beauty and fashion industries, the message is full of bold, bright, and beautiful product photos. While the visual elements certainly make the email attractive and highly clickable, readers with image-viewing turned off will miss out.Design Don'ts:TYRA Mail could work on incorporating bold HTML background colors and sections of plain text for headers and descriptions. The header navigation is simple and elegant, but it could also be recreated easily with bulletproof CTA buttons. The addition of more plain text and colors can also help break up all the imagery.
Draper James (Reese Witherspoon)
Reese Witherspoon channeled Elle Woods' love for clothes by promoting her own clothing line, named Draper James after her grandparents, Dorothea Draper and William James. The line drawsinspiration fromWitherspoon's own Southern roots to create colorful, easy-breezy everyday wear. To show that Witherspoon doesn't take herself too seriously, her daily celebrity email newsletters draw upon the light blue brand color and often use illustrations. This recent message even incorporated a playful animated GIF of a mason jar with lemonade, to add some fun motion:
Design Dos:Background colorsreally make this email pop, and selecting only a few colors (pink, shades of blue, white) allows them to work well together without being too overwhelming. Also, like Tyra's message, we love the simple navigation menu and the personalized sign-off!Design Don'ts: The email's entire middle section of the email is an image, which is a problem for readers with image viewing turned off. Isolating the animated GIF (which will make it quicker to download on mobile) and using email-safe text for headers on top of the bold background color can go a long way. Using a matching HTML background coloralongside photos or illustrations would allow designersto create the illusion of a single image while optimizing the message for all inboxes.
Lenny Letter (Lena Dunham)
Amidst all the lifestyle, beauty, and fashion tips, theLenny Letter, created by actor/director Lena Dunham and her best friend/director Jenni Konner, is a different type of send in a sea of celebrity email newsletters. Lenny focuses primarily on long-formcontent,like thoughtful letters and thought-provoking essays, and provides that content within the email itself, instead of sending readers to the Lenny website. Eachemail features five stories per week. Here's a recent one (which we also trimmed):
Design Dos: Each email begins with a notefrom an editor (usually Lena or Jenni) introducing the week's five featured stories. Since the emails are so text-heavy, a number of design tactics improve navigation and legibility.The navigation menu at the top takes readers to anchor links for each story,making it easy to skip ahead to astory without having to scroll too much. The text is also constrained to 640px wide, so it's easy for readers to keep their placein the text. Plus, the web-safe Arial font is easy to read. The streamlined design approach is effective at allowingthe focus to fall on the content itself.Design Don'ts: Design-wise, this email looks great! But it's worth noting that, similar to Goop, long emails can still get clipped by Gmail. So long email senders, like Lenny, should adhere to best practices to prevent clipping.
The Honest Company (Jessica Alba)
When Jessica Alba founded The Honest Company in 2011, she had one goal: to providesafe products for your family and home. "I created The Honest Company to help moms and to give all children a better, safer start," Alba writes. As part of the brand, the company sends daily emails that directreaders to its blog (as well as some promotional product messages), like this one:
Design Dos: The single-column modular designis a great content organizer.The email flows well and iseasy to skim. Positioning the header, descriptive text, and CTA buttons outside of the image alsoensurethat the bulk of the message will appear even if images are blocked. And, the inverted pyramid design for each module is an email design best practice to improveorganization and readability. The playful text overlay on some images is a nice touch!Design Don'ts: The Honest Company cancreate more compelling calls to action. A CTA button that reads "Learn more" doesn't really get readers excited to click. "Get the gummy goods" mightbe more playful and fun. CTAs that include personal pronouns (get my discount, reserve my seat), active verbs, and just a few words are usually the most effective.
Oprah's Book Club (Oprah)
Oprah has over a dozen newsletters, each covering separate topics from money to relationships to food and more. For this post, we focused on the newsletter for her popular book club, which announces her latest readingselection along with other content that would interest readers. Here's her latest:
Design Dos: Using a neutral beige background color makes the white content blocks pop in this email, and including email-safe font makes the text display reliably and easy to read.Design Don'ts: Readers have short attention spans, so brief, easy-to-scan emails are more effective. But the Oprah Book Club email feels too much like a cluttered website, with multiple columns, font sizes, and colors. There's also a distracting "Hot Topics" bar at the top and a jam-packed footer at the bottom. The spacing between elements is also inconsistent. Switching to a single-column design, simplifying the header, and incorporating bulletproof CTA buttons can improve readability and mobile-friendliness, Read more tips in our tutorial:How to avoid making your email look like a website.
The Tig (Meghan Markle)
Suits actress Meghan Markle launched The Tig as "a hub for the discerning palate," a place to explore topics liketravel, food, fashion, and beauty. The site includes city guides, trend posts, and recipes, and its weekly newsletter points readers' attention to the latest content:
Design Dos: The white-and-gray color scheme of the site is reflected well in the brand's simple newsletters. Plus, the splash of color in the links is a nice way to reinforce the brand and add a subtle customization.Design Don'ts:Even though a photo grid is included in each message as a single image, but the brand could try creating a responsive photo gallery to better suit mobile screens. Even though the email isshort and sweet, it could be even more skim-friendly with shorter headlines that immediately catch readers' eyes.
Hello Giggles (Zooey Deschanel)
Co-founded by New Girl's Zooey Deschanel in 2011,Hello Giggleswas developed as a positive community for women. When compared to other celebrity email newsletters, this particular daily newsletter provides a playful mix of motivational and inspirational stories and quotes:
Design Dos: Hello Giggles really strives to use brand colors to organize and unify its message. The all-caps headers in red guidereaders' eyesthrough the emailand the turquoisecontent separatorsalso organize the content. The structure of the message feels cohesive and balanced. Starting each email with a quote box is also a great way to warm up readers and get them interested in the content.Design Don'ts:Although the use of a two-column layout keeps the newsletter well-organized, there's no intuitive reading order because the content is divided vertically into different sections. Some readers might skip content, especially in the more narrow right column. A single-column layout might be more effective and make it easier for readers to digest information all in ordered sequence.
5 Email Design Trends From Hot Startups
Most hot startups entering a crowded marketplace have oneopportunity to stand out, and they all have one thing in common: noticeable email design trends. Design excellence is a valuable—and critical—way to communicate, connect with an audience, and establish anedge over the competition. We took a look at some email designs from hot startups, and here are five big things we discovered.
1. Neon brand colors pop against white backgrounds
Startups are choosing bright, bold brand colors for logos and design. As the Undullify blog recently pointed out,there have been more than a few"neonified" logo updates this year:
One of the email design trends is reflectedin how brands are choosing candy colors to accentuate messages. We recently saw it in thewelcome email from the shipping/moving company Shyp, which employs the brand's neon green to bookend their email:
Hearst's promo email for Hello Fresh, the food delivery company, also uses a brighter version of the brand's spring green throughout their email for noticeable pops of color:
Usingbright colorsis also anexcellent way to focus a reader's attention on calls to action (especially when the colors are used for buttons or linked text). Colors are also useful ascontent dividers and simple design accents, where they evoke a fresh, modern feel that unifies an email's aesthetic.For example, Lyft, the ride service company, uses neon pink fordesign accents and CTA buttons:
And InVision, the free web prototyping app, uses its brand color to drive readers' eyes to bold call-to-action buttons, too.
2. Animated GIFs call attention to special announcements
Animated GIFs are also popping up as part of email design trends. Often, GIFs are used in special announcement emails as a way to draw readers attention and signal an out-of-the-ordinary message.Seamless, for instance, created this animated GIF for an announcement email inviting users to a film festival it sponsored:
Here's the full body of theemail for context:
As forLeesa, the mattress company, when it sponsored a contest to help readers win a trip to San Francisco, a simple but eye-catching GIF marked the occasion:
Even promotional emails are getting fun makeovers, like this one from Casper, another mattress company. "We're blowing up boring summer mattress sales with the hottest BOGO deal of all time," the clever email copy announces. And toget readers in the spirit of the sale, Casper included a playful GIF that incorporated an air mattress:
When used selectively, GIFs are moreeffective in grabbing attention. So when a company sends an email with an animated GIF, readers implicitly understand: this is something different to notice. (Want to learn more about GIFs? Check out our video tutorial on how to add animated GIFs to emails.)
3. Modular, single-column layouts with minimal text are scan-friendly
Modular layouts—emails comprised of stacked blocks or sections of content—are another one of startups' email design trends. The layout is easy to read and scan and we've already seen it used in the InVision, Lyft, Hearst, and Shyp emails above. Even this other newsletter (or "snoozeletter") from Casper uses the layout, with sections of color here and there.
Often, each module should include elements such asan image or some type of visual element, a short header or text, and a call to action. The brevity of content in each modulemakes it easy to read quickly before scrolling to the next piece of content. The layout's simplicity further enforces a clean, organized design that helps readers absorb information in alinear way.
4. Images are enhanced with simple text overlay treatment
Adding catchy text to images isa quick and easy way to customize stock photosandlevel-up email design. The simple process adds a degree of sophistication to any emaildesign without requiring a significant investment of time or resources.VRBO, the vacation rental site, uses this tongue-in-cheek approach in the hero image space of an email, which invites readers to plan a winter getaway with the copy, "Book now, chill later."
Even the Lyft email we saw above uses the same technique, with succinct copy promising a luxurious card ride:
What both brands have in common is their use of simple statements (3 or 4 words max) that stand out and add value to the images. The large, easy-to-read text is also clean, clear, and concise. If the text was placed underneath the image, the message wouldn't have the same impact.Learn how to add text to images in BEE in our tutorial (it's free and can be done in minutes).
5. Simple spot illustrations convey friendliness and modernity
Spot illustrations are small drawings—usually without borders or backgrounds—that appear alongsidetext to liven up a message. As far as email design trends go, illustrations make any message more meaningful. They also help readers pay attention to directions or instructions, which is what happens in thisUbermessage about how to use a sign-up code:
Imagine the message without illustrations—it would be pretty dry, and probably more difficult to draw readers' eyes to the screen. Likewise, in the sweepstakes email from Leesa (full message above), spot illustrations communicate the prizes being offered:
Lyft (full email above) also uses illustrations effectively to showcase qualities of the brand:
Wrap-up: Email design trends from popular startups
- "Neonified" colors are in. Just use them sparingly, and opt for one bright, bold color per email. Colors that pop are a great way to tie email designs together and draw readers' attention to CTA buttons and content dividers.
- Animated GIFs are effective for one-off announcements. When GIFs are used selectively, readers will often take note. So save GIFs for emails that need extra special attention.
- Modular, single-column layouts are easiest to read. The simple layouts have a fresh, modern look. A white background makes reading easiest, but don't be afraid to use a bold background color in one email section.
- Text overlay on images adds design sophistication. Plus, it's incredibly easy to do. Improving stock photos with text is a quick and beautiful way to improve your email designs.
- Spot illustrations punch up a message. Small, simple illustrations can add purposeful design features to any email without creating clutter.
SaveSaveSave
21 Email Design Tools to Transform Your Emails
Summer is the perfect time to think of ways to refresh your email marketingstrategy and gear up for a busy fall. So, set aside some time to regroup and recharge your emails with these email design tools.We've rounded up 21 design tools and resources (organized by categories) as a guide to strengthen your visualsand make your email campaigns more interesting. You're sure to find something that will make your emails pop!
Font, Icon, and Stock Photo Tools | Photo Editing and Design Tools | GIF and Meme ToolsPrototyping and Video Tools | Chart, Graph, and Survey Tools
Font, Icon, and Stock Photo Tools
1. WhatFont
WhatFont is one of the email design tools that we use all the time on the blog. It's a Chrome extension that allows users to hover a cursor over a web font to see the name that pops up. This is a great way to see the fonts that brands are using, and it only takes seconds to find out the name when you stumble upon great text on a page.
2. The Noun Project
Browse an enormous library of icons on The Noun Project.Just like a photo library, the site is searchable by keyword and contains thousands of images. Most areavailable as a free download if you give credit—or you can bypass giving credit by paying a small royalty fee, typically $1.99. Unlimited memberships are also available for $9.99/month.
3. Pexels
For an extensive library of free stock photos, try Pexels. Images are searchable by keyword, popular images, and top photographers. And, they're sortable by color, helping you stay on-brand and within an email's aesthetic.
4. Unsplash
Here's another great resource for "do-whatever-you-want" hi-res photos. Search by collection or keyword to sort through beautiful, large images that can be downloaded in just a couple clicks.
Photo Editing and Design Tools
5. BeFunky
This free, simple, and easy-to-use tool is part web-based photo editor, part collage-maker, and part designer. Upload an image (or use one of theirs), and add effects, graphics, text overlays, and more. When you're finished, just download the .JPG or .PNG, and you're ready to roll.
6. Canva
Canva is at the top of nearly everyone's list of email design tools for creating beautiful visual content online. The drag-and-drop tool, which is free to use, allows you to search stock images (most cost $1 for one-timeuse), add text and illustrations, and create charts and lines, all on a blank canvas. The final product can be exported as an image file.
7. VSCOcam
If you're on the go and need to format and polish your photos quickly, try this iPhone and Android app, which that lets you add filters and edit images in nearly endless ways. Use it for free or pay a few bucks for special filters.
8. Placeit
Need to see a rendering of your product on a mobile or tablet screen? PlaceIt lets you insert ascreenshot into iPhone and iPad mockup templates for free. It's especially useful for app developers, or for any brand with a web-based product that needs to be shown in action.
9. Skitch (for Mac only)
As an Evernote product, Skitch is a super speedy screenshot tool that's great for annotatingimages with shapes, arrows, and text. We happen to use it for editing screenshots in this blog. The app is free for Mac users only and is handyfor email design inspiration, revisions, and mockups, as well as finished products.
10. TinyPNG
TinyPNG uses "smart lossy compression techniques to reduce the file size of your PNG and JPEG image files." As a result, your images will load much, much faster on mobile devices.
11. Google Drawings
Simpler than Google Charts, Google Drawings harkens to thegood ol' days of the original Paint application. The tool allows you to choose images, add text, create shapes, or make free-form drawings. Think of it as a PowerPoint or Keynote slide—a blank canvas ready for your vision.
12. Pinterest
Okay, so as far as email design tools go, Pinterest isn't a tool per se, but it is one of our favorite places to go for email design inspiration. With great boards cropping up all the time, it's a perfect one-stop-shop forchecking out fonts, colors, images, and great designs. You can also check out the Email Design Workshop's own Pinterest board.
GIF and Meme Tools
13. Giphy
Animation in email is a great way to boost interest and engagement. Giphy lets users create fun animated GIFs and search an extensive database of pre-made GIFs in different categories.
14. Imgflip
Who doesn't love memes? Imgflip is a meme generator tool that takes seconds to use. Upload your own image or browse from their collection to create a meme that will make your subscribers giggle. Templates are searchable, and you can also make simple GIFs or charts on the site.
Prototyping and Video Tools
15. InVision
This prototyping, collaboration, and workflow platform can be used for tasks like wireframing email journeys for automated email series. It's free to use and gives users access to impressive capabilities like real-time design meetings and whiteboarding, project management, and user testing.
16. PowerInbox
Bring static emails to life with PowerInbox's DynamicMail tool. Create real-time content, add video to email, and include dynamic animations using the platform's tools. Contact the company for information about pricing.
Chart, Graph, and Survey Tools
17. Typeform
Just by visiting the Typeform site, it's obvious the brand knows good design—we've even featured them on the Email Design Workshop blog in the past. Without the need tosign up, users can use the free web-based tool to make elegant forms and surveys.
18. Google Charts
If you have a Gmail account, you have access to a multitude of free tools from Google. While many of them—spreadsheets, task lists, calendars—are great for personal use, there are plenty that can make their way into your email campaigns, too. With Google Charts, you can create interactive charts and graphsin customizable colors and styles—but, you will need anunderstanding of how to code to optimize the tool.
19. Google Forms
Another great tool from Google is Forms, which allows you to "collect votes from your friends, survey your co-workers, or gather poll data into a sheet." It's easy and intuitive to create a new form, and you'll have theoption to send it via email, copy and paste the link of the form or embed it. Keep in mind that the embedded HTML as an iframe isn't supported by email clients. Feel free to check out our best practices on survey invitation emails.
20. Infogr.am
Among the free email design tools available, Infogr.am lets users create and publish data visualizations. Upload your own data and choose between line graphs, word clouds, area charts, scatter plots, and plentyof other options.
21. The BEE Editor
We had to save the best for last! Our own Best Email Editor or BEE in short.With drag-and-drop functionality and beautiful templates, assembling one-of-a-kind emails is straightforward and fast. Plus, emails are always 100% responsive, so they look great across multiple devices and screens. Give it a try bysigning up for a BEE Pro account (with a 15-day free trial and only $15/month) and access our templates and additional features not found in the free version. To learn more about BEE Pro visit: http://beefree.io/pro/
By the way, some of the great tools mentioned above are now built into BEE: you can now search free stock photography from Pexels, Unsplash and Pixabay directly in the BEE editor. Learn more.
Which tools do you use?
What are your favorite email design tools? Which ones does your business use and rely on? Share in the comments section below!SaveSaveSaveSaveSaveSaveSaveSave
How to Optimize Images for Your Mobile Emails
Originally published on June 30, 2016. Last updated July 30, 2021.The rate of email opens on mobile is consistently increasing, with almost half of all emails opened on smart phones in 2021.
As webmail and desktop environments become less popular, it’s important for marketers and designers alike to keep up with best practices for mobile design. Factors like accessibility, image size, quality, and format not only affect how the design renders, but also impact important email marketing metrics like deliverability and conversion rates.If you’re new to optimizing for mobile design, you might be wondering: why do images in emails sometimes look pixelated on smartphones? What's the best size for an image in email? Why does my email show up differently depending on the ESP of the user?Let’s answer each question by running through best practices for mobile email image optimization. Add these tips to your design toolbox for future email campaigns.
Best practices for mobile design
In order to create the best user experience, it’s essential to implement responsive email images for mobile. Smaller screens on mobile call for more accomodating design components, which could be intimidating or confusing at first. But keep in mind that optimizing for mobile should be user focused. Consider your users needs and then bring these best practices into every email you design.
Choose the highest quality photo
High-quality images are one of the most important aspects of image optimization. To ensure your images are showing up correctly in your email, you first need to evaluate their quality.Expert designers use DPI or dots per inch to measure the quality of an image. For guaranteed high-quality images, set your resolution to 72 DPI while also increasing the dimensions of the image. This will give high-DPI displays, which have increased pixel densities and more image data to utilize. This means that setting the DPI to this optimal resolution gives enough space for images to appear crisp.Implementing these changes will prevent blurriness and assure that your images are always looking sharp. When you don’t account for high-DPI displays your image will appear pixelated as it stretches across the screen. This means that you will typically want images to be twice as large for the best image optimization.It’s also important to think about your image’s color values. Avoid CMYK (cyan, magenta, yellow & black (key)) color values since they are solely meant for print and won’t work well on a digital screen. Keep images in RGB (red, green, blue) color values, which allows you to adjust for saturation and vibrancy. This is the best way to create the highest quality image.
Optimize image size
Always consider the dimensions of your images when inputting them into your emails. If images have larger-than-normal dimensions, they may not render well. It’s concerning and makes you question if subscribers will have issues upon opening the email and viewing the images?In short, the file size does play a role when the images are downloaded. The image size impacts the total time it takes for the content of the email to fully render once it's opened. On a mobile device, when the reader might have a slow Internet connection speed, the time lag could be substantial.Avoid this issue by optimizing your image size. We recommend adjusting your content area width to around 600px for the highest quality image. While images will adjust according to the device the email is open on, hit this size to make sure they render correctly on all devices. Leaving the size to chance will lead rendering to chance, especially with so many different file formats as well.
Select the best image format
There are so many file formats, it is often confusing to figure out which one will result in the highest quality images. PNGs, JPEGs and SVGs tend to be the most well-known and widely accepted file formats.While there are pros and cons to each format, you can use the guidelines below to choose the right file type for your needs. Also note, some formats may increase your image size, so use the EZGIF program to compress your image to keep in line with the quality you have adjusted for. So, which image format is best:
- PNG: These are lossless, meaning they won’t falter in quality when you compress the image which allows you to export with transparency. There are PNG-8, 24, and 32 files, so the standard practice here would be to decide on a proper balance of file size and color to suit your email best.
- JPEG: These won’t allow transparency and are quite lossy. Use when your images are loaded with color.
- SVG: These are a vector format which allows you to resize your image to fit your needs without losing the quality of your image.
There is no correct answer as to which format is best, but think about which one would fit your needs. If you are looking for something to easily export with transparency go with PNG format. Or use JPEG when you are using images with tons of color. Utilize the format that will give you the highest quality image.
Make your images accessible
The quality, size and file format of your images are set for success, but you have one last crucial factor to consider: Is your email accessible to everyone?Visually impaired individuals will not be able to decipher image-heavy emails that aren’t intentionally made accessible. It’s important to include accessibility concerns to avoid isolating users with disabilities.The two accessibility components that you shouldn’t go without are Alt text and color contrast.
- Alt Text. This Alternative Text attribute is an image description that gives those using screen readers the opportunity to visualize what your picture is portraying. Consider what purpose your image serves inside your email to allow for proper alt text functioning.
- Color Contrast. Be mindful of your color choices in regards to your images and other email components. Distinguishing between colors is difficult for many, so try to increase the contrast between the email text, image and background. Refer to this color oracle for more on this. Especially think about this when trying to utilize background images, since older emails like Outlook don’t render those. If you choose to use a background image be sure to set a safe fallback color.
Also be mindful of flashing graphics, color patterns or other special effects that may be dangerous to some image-sensitive subscribers. Seizures can be caused by bright, strobing images, so make sure to avoid those at all costs. Be sure to account for these image accessibility factors along with other email design elements including copy spacing, font size and other design elements.
Mobile Design Mode
We’ve gone through all of the best practices for optimizing your mobile design, including:
- Choose the highest quality photo
- Optimize size
- Select the best image format
- Make your images accessible
But the best way to make sure that your emails render correctly every time is to use the right tools. BEE Pro includes a mobile design mode, where you can design for mobile-only communications. Visualize exactly what your design will look like on a mobile device while you are designing.Sign up for a BEE Pro free trial to test this out, and access more templates and features to make designing with these best practices in mind even easier.Save
Patriotic Ideas for 4th of July Email Designs
The 4th of July means barbecues, fireworks, parades, and, yes, patriotic email campaigns. But when it comes to sending 4th of July email designs, there's more to a successful campaign than a red-white-and-blue color scheme.Here are some excellent email examples that go beyond the colors of the flag, plus tips for making your 4th of July email designs stand out from the rest.
Dress up your header design
Step one in email design best practices is optimizing your subject line and pre-header text, and step two is grabbing readers' attention immediately with an effective header. It's a simple rule of thumb, but it's an important one, and holidays are a perfect time to experiment with your header. Hipmunk, the travel company, uses an illustrated chipmunk as its cute and fuzzy brand ambassador, and he's ready to "fire up the barbie" in the brand's kitschy header.The email body is incredibly succinct, factual, and well-organized in two clear columns, without illustration or design elements. Plus, the unique CTA ("Get Crackin'") serves as a reminder of barbecues and as prompt for readers to get started on their vacation search. But the main visual is what makes the Hipmunk have one of the more effective 4th of July email designs.
What works:
- On-brand, festive header illustration
- Simple two-column design optimized to deliver information
- Easy-to-spot CTA button with unique text
Get animated with a GIF
Tattlysells temporary tattoos designed by professional artists and designers. Even though theyaren't marketing any tattoos specially designed for the holiday—no fireworks, hot dogs, or flags in sight—they highlighted all available red, white, and blue tattoos. Tattly demonstrates that with a little creativity, any brand can get in the Independence spirit with their 4th of July email designs.By creating a cleveranimated GIFof red, white, and blue tattoos becoming an American flag and adding clever copy ("We've got you covered this 4th of July"), the brand sends a message that stands out.The email is carefullycomposed, and it definitely works to promote products (in fact, some of the tattoos are already selling out on the site). The email is great inspiration for other brands with inventory that may not correspond directly with the holiday.
What works:
- Optimized pre-header text ("Stock up on Red, White, and Blue!")
- Eye-catching and festive animated GIF
- High-contrast CTA button (the red color and "Made in the USA!" slogan reinforces the patriotism)
- Short and clear body text
- On-brand design and messaging
Simplify your color scheme
With so manybrandsincorporating a red-white-and-blue color scheme for the holiday, it might seem appealing toavoid creating 4th of July email designs that look like all the others. But DC Shoes provesthat with smart design, the red-white-blue look can be subtle but still stand out.To make the colors pop, DC Shoes kept the email mainly in black and white. This is a really nice touch that emphasizes the thin, horizontal red and blue lines that frame the main image and evokes a sophistication for the bold colors. Plus, like Tattly, the brand chooses red, white, and blue products to showcase in a simple and organized way, with language that reminds readers of patriotism ("Celebrate July 4th in Red, White & Blue") and relaxation ("Ready to Grill & Chill"). Plus, the hybrid layout design, which starts out with one column and then showcases products in three columns, is a good example of howyou can establish a clear hierarchy while presenting multiple products.
What works:
- Black and white color scheme makes the red, white, and blue stand out
- On-point copy that acknowledges aspects of Independence Day
- CTA buttons in contrasting colors
- Hybrid layout to organize a product showcase
Offer meaning and inspiration
Sometimes, seeing a product and reading its product story can make it seem more unique.This email from Martha Stewart highlights products only made in America and digs deeper than a typical product marketing campaign to give some background about what makes each item patriotic. So along with a photo of a banner-shaped cutting board, the email copy reveals it's ideal to use forchopping and decorating, since the pattern is meant to be displayed. By adding small details about each product (in just a few words!), subscribers can connect better with the each "American Made" design.Similar to DC Shoes, this email design also utilizes a hybrid layout designwith four modules that fill out the width of the email, and then a fifth module that's vertical (to accommodate the vertical straws and the ad space). Selecting just five items that are highlighted in a simple way against a subtle background also helps the products to seem curated and focused.
What works:
- Images are paired with short descriptions of inspirational text
- Curated selection of five images
- No complicated header navigation
- Link color is on-brand and stands out
- Gray background color makes white modules more obvious
Give away relevant content
What's your audience likely to be doing over the 4th of July holiday weekend? Going to the beach, spending time with family, or firing up the grill? You know your audience better than anyone. Consider how they'll be spending the holiday weekend and offer content that will add value to your readers' lives. That's what Oh Joy!,the lifestyle blog, did with their Independence Day email.There are no over-the-top July 4th motifs and colors; just bright colors that evoke patriotism and Independence Day fun. Oh Joy! also stays true to its brand and provides readers with a how-to video on making a bean bag toss game that works for any family gathering. This also lets subscribersknow the games will be playful (literally) for the holiday, or any weekend.
What works:
- Free content (how-to video) relevant to the holiday, audience, and brand
- Cute and simple email design
- No complicated header navigation
- Link color that's on-brand and visually striking against the white and black
Wrap Up: Tips for your 4th of July email designs
- Add visual interest right away, with an eye-grabbing illustrated header or animated GIF.
- Simplify or remove your navigation menu and focus readers' attention on your primary CTA at the top.
- Consider content that would be valuable for your audience and send it in a straightforward way.
- When using red and blue are bold colors, consider keeping the other email colors in simple black and white.
- Don't be afraid of text! But keep it short (two sentences) when including fun copy of your products.
Want to create a stellar 4th of July email for free? Try the BEE editor—its online and requires no registration and all emails are mobile responsive.Happy 4th of July emailing!SaveSaveSave
Tutorial: How to Begin A/B Testing Email Designs
Want to know which email campaigns catch your readers' eyes? Try this easy solution: A/B testing.A/B testing compares two versions of the same thing (subject headlines, email design layouts, CTA buttons, etc.) until you narrow down results for comparison. Not surprisingly, the data that results from the A/B testing is powerful, from open rates to click-through rates to conversions, and reveals howyour audience responds to changing variables. It's a great testing and optimization method to understand your audience's reaction to changes in calls-to-action, layout, and background color.Today, we'll be using Beefree to walk you through how to conduct A/B testing on your email design. If you're not already using Beefree, sign-up for our free plan!
How to decide what to test
Before designing your A/B campaign, determine what you want to test. To start, choose just one variable so your results are clear. Here are some examples of commonly tested variables:Design
- CTA size and style. Full-width button or smaller? Green or red? Tall or short?
- Layout. Single column or multiple?
- Color scheme. White or gray background? Blue or green header text?
- Image size or variety. Two product images or four? Still image or animated GIF?
- Information amount. Include secondary content or not? Social media buttons or not? Nav menu or not?
- Information placement. Social buttons at the top or bottom? CTA button mid-way through or at the end?
Content and Time
- From line. Your business name or the name of an individual?
- Subject line. Shorter or longer? Emoji or no emoji? Include "" language or not?
- CTA language. "Claim your ebook now" or "Claim your free ebook"?
- Body text. "Pushy" language or more subtle? Six sentences or three?
- Send time. Will there be more opens at 8:00 AM or at 4:00 PM?
Best practices for A/B testing
As you prepare your campaign, do your research and be sure to follow some best practices, including:
- Determine your success metric first. Open rates will make sense if you're testing subject lines; click-through or conversion rates for design changes. Know what you're evaluating in advance.
- Test only one thing at a time. If you change more than one variable, you won't be able to tell what caused the change in response.
- Test a big sample size. Understand how many responses you need to show statistical significance.
- Send A and B versions at the same time. Time is a variable, so be consistent by having both campaigns be sent at the same time (to different groups)—unless send time IS your variable.
Today's Workshop: How to A/B test email design changes
Let's walk through how to A/B testing related to design by using this email example fromVerywell, a site that provides health advice and resources.
A/B Design Test 1: CTA button
Verywell'scurrent version of the email has no call-to-action button. What if we added one in the first module to see how it changed the click-through rate?For the "A" version: Let's first recreate the Verywell email as-is in the Beefree editor. Using the drag-and-drop functionality, the basic email outline from the Structure menu can be pulled, followed by the appropriate content blocks and content. Here's the first half of the email, i.e. our part "A" of the test:
For the"B" version,simply drag a CTA from the Content menu and format it.We chose a button that matches the header color, is nearly the width of the email, and uses some urgency in the text, "Check out the recipe now." So will this CTA increase clicks? Well, we'll just need to send our A/B test emails to find out!
Just a note: In Beefree, it's easy to save your email and edit it later. Look for the blue "Save Message" button in the upper right corner. This way, you can create one version—like your "A" version—and save it to edit later.
But the important thing to know about A/B testing is: you can also copy an entire email in Beefree to make modifications to your "B" version and save it. Look for the "Create a copy" command in the "Edit Message" drop-down menu. Creating a copy means you won't have to start from scratch to create a second version.
A/B Design Test 2: Layout
Without multiple columns, but how would Verywell's email perform if a version included the first module as a single column?Instead of arranging the header text and image side-by-side, let's update the layoutso the image appears above the text.Using Beefree's drag-and-drop functionality, changing the layout is super simple. Starting with the "A" version, we'll drag in a single-column structure as a destination for our content:
Then, grab the existing header text, and drag it down:
Finally,grab the image and drag that underneath the text:
That's it! The text re-flows and image resizes, so our email is automatically formatted nicely. Now, we can delete the empty two-column structure, and the new email is ready to go:
A/B Design Test 3: Background color
Even thoughVerywell's email has a nice, clean look with an all-white background, how would readers react if the first module has a bight background color that matches the brand's teal color?To change the background color, let'sselect the top row, then navigate to the Structure menu and update Content background.
After that, let's update the text from black to white to make it readable, and our new module is ready to be tested:
Running any A/B tests? Go Pro!
It's easy to create different versions of an email and test which one performs best. Just remember to stick to one variable at a time in order to understand what your subscribers are reacting to at specific moments. Feel free to try our tips out and sign-up for our free plan!
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.