Design Inspiration

Design Tips for Holiday Shopping Emails

Design Tips for Holiday Shopping Emails

With shopping season in full swing, our overflowing inboxes serve up a great opportunity to check out design trends in holiday shopping emails. In today’s Design Inspiration post, we’ll review three types of effective holiday emails to send and how to design them, taking cues from top brands’ emails.

Tip #1: Build a shopping guide

Shopping guides are a popular way to showcase products and inspire shoppers. Guides can provide ideas for specific people on shoppers’ lists (an uncle, daughter, neighbor), suggest bestselling items, tempt shoppers to treat themselves, or provide gift grouping ideas. Whatever the approach, an effective gift guide should be 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.

 

Mac use

Notice there’s ample padding between each item and very little descriptive text, making it easy for readers to focus on the products themselves. The streamlined photos have no background, a style that lends itself to quick viewing, allowing multiple images to be displayed without a sense of clutter or distraction. Overall, it’s a clean, efficient strategy to showcase a lot in a single email. A grid layout like this can also 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:

MAC mobile

 

A “View Mobile-Friendly” link is available at the email’s header, but it leads to a text-only version. It’s easy to scan and gets the job done, but it’s much less appealing than the photographic version.

mac view on mobile

 

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:

Design Public

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:

Design public mobile 1

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:

Topo new

Though the email consists primarily of a single image, it avoids the pitfalls of an image-only email with 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.

topo mobile

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:

suitsupply use

And here’s the GIF:

Suit supply

GIFs are an effective way to not only catch readers’ eyes and appeal to design-savvy subscribers, but also to show multiple products without taking up too much real estate in an email. This message is short and snappy, with no product description whatsoever. The products themselves rotate really quickly, too. The point isn’t to describe everything in email; the point is to get readers inspired, and clicking. It looks sharp on mobile, too:

suit supply mobile

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 peel back the curtain on the special 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 three sentences:

danner zoom

And here’s the full email, complete with more stunning photography:

danner

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.”

patagonia zoom

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 components like photos or videos.

In a different form of storytelling, Bumble & Bumble takes an infographic-like approach to guide readers through suggested products:

bumble and bumble

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 out the 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 (up to 43% of Gmail users view emails this way); image-only emails end up in spam folders; they aren’t mobile-optimized; and they may not get fully downloaded. (Read our full post on how 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:

jcrew use

Many retailers like J. Crew commonly send image-only emails. West Elm is another brand to often take this approach:

west elm

Similarly, Casper, the mattress retailer, sent a fully illustrated email:

Casper deal

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:

bloom

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 still keeping a creative spin to their messaging, like this one from Toby’s Estate Coffee:

tobys

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…

Moma email use

…and part animated GIF:

Moma 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.

MOO email

Here it is without images:

MOO email

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!

Our Reader Score:

Total: 0 - Average: 0

Kelly Shetron