With shopping season in full swing, our overflowing inboxes serve upa great opportunity to check out design trends in holiday shopping emails. In today's Design Inspiration post, we'll review threetypes of effective holiday emailsto sendand how to design them, taking cues from top brands' emails.
Tip #1: Build a shopping guide
Shopping guides are a popularway to showcase products and inspireshoppers. Guides can provide ideas for specific people on shoppers'lists (an uncle, daughter, neighbor), suggestbestselling items, temptshoppers to treat themselves, or provide gift groupingideas. Whatever the approach, an effective gift guide shouldbe highly visual and easy to navigate.No need for lots of text here;viewers want to be able to check out the products quickly. Here are four effective design approaches for presenting your shopping guide in email.
Display top rated products in a grid layout
Here's a shopping guide from MAC cosmetics, showing top-rated products in a three-column grid layout.
Notice there's ample padding between each item and very little descriptive text, making it easy forreaders to focus onthe products themselves. The streamlined photoshave no background, a style that lends itself to quick viewing, allowing multiple images to be displayed without a sense of clutter ordistraction. Overall, it'sa clean, efficient strategy to showcasea lot in a single email. Agrid layout like thiscanalso easily convert to a single-column design on mobile, so we were disappointed to see that the email was not responsive. Here's how it appeared on an iPhone:
A "View Mobile-Friendly" link is available at the email's header, but it leads toa text-only version. It's easy to scan and gets the job done, but it's much less appealing than the photographic version.
Design Takeaway: Use a grid layout with high-quality no-background images, ample white space, and short descriptive text to display a lot of products in a single email—but make sure your design is responsive for optimal viewing on mobile.
List select picks with modular design
What better way to show a list than in list format? That's exactly what Design Public—a company that features products from emerging designers—did. Here's an email of 15 favorite gifts from their staff, using a single-column modular design:
The format allows Design Public to add a bit more description, so this is a good option if you'd like to include a paragraph of text for each item on display. The horizontal green lines provide nice markers between sections, and the design is responsive, too:
This layout requires lots of scrolling on mobile, but we know that mobile readers do scroll.Design Takeaway: Responsive, single-column, modular design is perfect for a gift list, but be cognizant of how much you'll be asking readers to scroll, especially on mobile (i.e., consider capping your list at 5 to 10 items).
Create an all-in-one-photo
Topo Designs, a seller of made-in-the-US backpacks, bags, and apparel, gives subscribers a peek at nine gift ideas in this well-designed photo collage:
Though the email consists primarily of a single image, it avoids the pitfalls of an image-only emailwith a plain text message and ALT text for the image. The photo succeeds because the items are arranged neatly; it's simple and elegant.While there's no way to make a single image responsive, the email still looks good on mobile because the header—"FREE HOLIDAY SHIPPING"—is in a large font size, and the items in the photo are all pretty easy to make out. The concluding text is small and would have benefited from responsive design to bump up the font size, though.
Design Takeaway: Plan ahead to show your complete gift guide in one (or a few) neatly-organized photo that will resonate with your audience, but be cautious of how it will render on smaller screens, and be sure to have a good image-to-text ratio.
Show your shortlist with an animated GIF
Suit Supply, online retailer of men's suits and apparel, sent their "greedy" gift guide in email, rotating through a collection of five photos in an animated GIF. Here's the email:
And here's the GIF:
GIFs arean effective way to not only catch readers' eyes and appeal to design-savvy subscribers, but also to show multiple productswithout taking up too much real estate inan email. This message is short and snappy, with no product description whatsoever. The products themselves rotate really quickly, too. The point isn't to describeeverything in email; the point is to get readers inspired, and clicking. It looks sharp on mobile, too:
Design Takeaway: Create an animated GIF to inspire readers, cycle through multiple products without requiring scrolling, and communicate quickly and visually.
Tip #2: Tell a story that's true to your brand
Another way to design an effective holiday shopping email is to engage readers through a simple narrative. When you peelback the curtain on thespecial products, people, or process behind your business through storytelling, you open up an opportunity to connect with readers on a deeper level. Like the gift guides, storytelling campaigns are equally as visual. Look at how Danner, an outdoor gear retailer, tells a story in threesentences:
And here's the full email, complete with more stunning photography:
Telling the story of an individual tree farmer, Danner hopes to make a case for how effective and useful their gear is for actual people, inspiring readers to make a purchase. The text portion of the story is quick (just a few sentences), while the photos show readers the rest of the story. Neither the text nor the images are overly product-focused.Patagonia takes a similar approach in a recent email about "The New Localism," which they say, "engages our community to protect threatened places that are home to the sports that inspire our adventures and the products our company makes."
Similar to the Danner email, this message doesn't put Patagonia products front and center (in fact, there's no blatant product advertising at all), but it seeks to inspire readers by revealing something authentic and inspiring about the brand itself.Design Takeaway: Appeal to readers with a story that connects them to your brand identity without making your email overtly product-focused. Any story you tell should be well thought-out in advance, including original multimedia componentslike photos or videos.In a different form of storytelling, Bumble & Bumble takes an infographic-like approach to guide readers through suggested products:
It's kind of like one of those choose-your-own-adventure stories that invites readers to participate. It's cute and fun and a good tactic for engaging your audience—plus, it's more interesting than simply laying outthe products in a grid or list.Design Takeaway: Get creative with how you interpret "storytelling" and come up with a design that engages readers, inviting them to follow along and ultimately make a purchase.
Tip #3: Highlight deals and savings
One of the most common and popular holiday shopping emails is one promoting a special sale or deal. These emails are straightforward, focused, and should have a very clear call to action. By and large, these emails fall into the category of "image-only" emails, which is not an email design best practice. Image-only emails are problematic for a number of reasons: some people won’t be able to see an image-only email at all because of their email client settings; image-only emailsend up in spam folders; they aren’t mobile-optimized; and they may notgetfully downloaded. (Read our full post onhow to avoid the pitfalls of image only-email).Nonetheless, many major brands opt to take these risks in favor of designing a highly visual,image-heavy email announcing the seasons's sales and discounts. Here's an example from J. Crew, complete with an animated GIF countdown clock at the top and a tall image that makes up the full body of the email:
Many retailers like J. Crew commonly send image-only emails. West Elm is another brand to often take this approach:
Similarly, Casper, the mattress retailer, sent a fully illustrated email:
This one from Bloomingdale's is an image-only email, but it could have easily been designed with HTML background colors and bulletproof buttons in the BEE editor, as we've shown with previous examples:
Design Takeaway: It's true the image-only approach allows your design team maximum flexibility in customizing the look of your email, and the results can pay off. If you decide to go this route, make sure you have good reason: know your subscriber list and have a sense of the risk of how many readers may miss your message entirely. Test how the email appears across email clients. Be sure to have at least 500 characters of plain text, and use descriptive ALT text for all images.While many, many sale announcement emails are fully comprised of images, we found a few brands breaking up their emails with a better image-to-text ratio, while stillkeeping a creative spin to their messaging, like this one from Toby's Estate Coffee:
This is a great list-building tactic and a unique way to build excitement and anticipation.Similarly, the Museum of Modern Art sent this beautiful email that is part plain text message...
...and part animated GIF:
Likewise, this email from MOO has a GIF header, but the text below, including the CTA button, are outside of the image and appear with image-viewing turned off.
Here it is without images:
Design Takeaway: Keep sale promotion emails short and sweet,avoiding the pitfalls of image-only emails by striking a balance between text and great design, whether it be an image or GIF. (And make sure CTA buttons are bulletproof).It's not too late to implement these design tactics in your own holiday shopping email.Use the BEE editor to create a fully responsive, beautiful HTML-colored email. The drag-and-drop platform is easy to use, and it's free!
