Bath & Body Works hero

An Email Worth Scrolling For

From: Bath & Body Works
Date: 2/01/20
Subject Line: 💘 your Valentine’s Day gift guide 💘
View it in a browser

Bath & Body Works Email

Every now and then I get an email that makes me jealous, as a designer. Today was one of those days.

According to a study done in 2019, the majority of emails are opened on a mobile device (roughly 42% mobile, 40% webmail clients and 18% desktop). Viewing on a smaller screen forces you to scroll more than on a desktop. Therefore, it’s important to create designs that entice you to reach the bottom.

Bath & Body Works Phone Scroll

When you look at this email as a single image, it really isn’t as impressive as seeing it scrolling. Bath & Body Works was able to create one long vertical image that SEAMLESSLY incorporates multiple products — while also creating flow, balance, and dimension. I find myself dissecting the image, looking for any seam or a misplaced shadow, but I can’t find one. It’s amazing work. They also add interest by including an animated gif in the header (the candle flickers).

Bath & Body Works animation

The only missed opportunity is the lack of call-to-actions. Bath & Body Works does include a link at the top and bottom of the “scroll area” to SHOP GIFTS. (I appreciate the CTA at the bottom, BTW!) However, the products within the scroll are missing these. The long image is broken into multiple pieces to allow for multiple links (room fragrances and 2 new scents), but all sections link to the same landing page (Gifts for Her).

This design, graphically, is nothing short of inspiring!

Read More

Sur La Table

Creating the Perfect Design

Do you ever see a design that just feels right but you can’t put your finger on what makes it so great? Well here’s a breakdown of things every designer should know to make their design fabulous. I chose this email from Sur La Table to dissect as an example. I thought the design was well done overall. So let’s dig in!

From: Sur La Table
Date: 11/09/15
Subject Line: Our Holiday Gift Shops are ready — take a peek!

Sur La Table

You want to weave the subscribers’ eyes through the design — over each product and down the page. There are many ways to create flow from staggered products, angled images, or added graphics. Sur La Table used a numbered list to zig-zag your eye through the page.

Sur La Table

No email is sent without a purpose. Make sure it’s clear to the subscriber as well by making your call to action clear and present. Make it pop on the page and keep the copy concise and specific. This email isn’t the best example of this, but it’s not bad. The call to action is a nice contrasting red to the light grey background, but a colored box could have helped it stand out a bit more. Spoiler alert: I’ll have another blog coming soon all about call to actions!

Color can be a great way to add flow and interest to your design. You can stagger colors (just like images) to create flow. In this email for example, the white is used as negative space. The dark brown curves your eye around the section. Color can also be used to unify sections and products. If you notice all the imagery in the first section sets a grey tone. The secondary section is primarily reds and browns. It helps to separate the sections and makes the product feel like they belong together.

Sur La Table

Again, you don’t want to confuse subscribers about the focus of the email. Without a sense of hierarchy, you will lose their interest. Make sure sections are clearly defined, sized appropriately, and don’t try to cram too much into one email. Although Sur La Table’s primary and secondary sections are fairly equal in size, they are clearly separated and defined. They use extra white space between the messages and placed the secondary headline in a color bar. I love the addition of the arrow to tie the headline with the products and draw your eye down.

Sur La Table

Time for me to get a bit OCD on you. Sometimes image and text groupings just click. They feel right but it may not be obvious why. Well, here’s a big tip for you. Place every object with equal balance and purpose. And I don’t just mean aligning your copy. Look at the space that surrounds the copy vertically and horizontally. Is it equal? What about the space that borders the entire hero? Now that you’ve seen it, it can’t be unseen. I’m sorry and welcome to my world.

Sur La Table

I created an animated gif below (a before and after), showing how I would modify this hero. I made the following adjustments:

  • Centered the call to action to the headline
  • Centered the grey body copy
  • Moved the call to action up so that the space below the button was equal to the space above the headline
  • Moved the stocking image right so that the space to the left and right of the headline was equal

Sur La Table

Doesn’t that just feel a little bit better? It’s all in the details. No one will measure the pixels in your design (other than me), but when it fits, the design simply feels complete.

Whenever you get the chance, break out of the box. Find unique ways to add interest by using things like graphics, textured backgrounds, fun image borders, animations, etc. Sur La Table added a little value with some curved text and a fun font.

Sur La Table Sur La Table

The last thing I want to mention is content does matter. The wrong copy and/or imagery can really kill any design. If the copy is too wordy or bland, subscribers will lose interest. It’s also hard to get bad imagery to work. These can be real struggles for a designer since content is usually handed to them. But when you see an opportunity to make an improvement, pitch your idea! Support your claims of why it’s a good idea. Show an example of working copy from a competitor or take the time to find some stock imagery that might be suitable. They just might be appreciative of the new perspective.

So there you go! Every email is a piece of art just waiting to happen, so get creative and go rock it!

Read More

Sale 101 Hero

Sale Messaging 101

Email marketing can’t be treated like any other form of marketing. Unlike print or websites, emails must follow different standards for language and design. Find out how you can optimize your SALE email message with my tips below!


Email marketing has a bad rep. People automatically associate it with the dreaded 4-letter word: “SPAM.” If your message seems even the least bit misleading, that’s exactly what you’ll be considered. The words “UP TO” or “AS LOW AS” in a sale message can be off-putting to a subscriber. Here’s why: When a subscriber sees “UP TO 70% OFF” they fear they’ll find one item that is 70% OFF while the remainder are nearly full price. It feels like a trick. You can be sure if they do click through and find that their fears were justified, they won’t be making that mistake twice. You’ve just lost all credibility.

Here are a few guidelines to follow to avoid misleading language and keep your subscribers happy.

40% (or more) off shoes
Use the mode percentage (percentage that appears most frequently), rather than the highest savings. This will set a more accurate representation of what you have to offer and won’t lead to disappointment. If everyone followed this simple rule, the only time we’d see “up to” is when the majority of products were at the max discount possible. Even if that’s the situation for you, I suggest not using it because abusers have ruined this phrase for all of us. This is why we can’t have nice things. 😉

Save 25% on ALMOST everything!
This can be a nice way to call out the mode as well, but only use phrases like “almost all” or “nearly all” if it’s true. Don’t be the boy that cried wolf.

60% off hundreds of items!
Help alleviate the worry of limited selection by calling out the number of products on sale. This can be generalized (40% off half of our store) or separated into categories (more than 25 shoes now 60% off) as well.

All shoes 70% off, All shirts under $20
If your savings can encompass an entire section, use it to your advantage. Provide separate links for the different categories or price points.

30-60% off the entire store
Use a savings range. It’s not the most glamorous solution but it’s honest and if used in combination with images and a breakdown of savings it can be a great option.

HUGE summer sale!
Omit percentages or prices all together. Use creative language or urgency to get your message across. Don’t overdo it if your sale isn’t really that great though or you might lose future clicks.


Unlike other mediums, emails require the extra step of clicking-through. So, what may keep a subscriber from clicking?

One factor is the fear that they won’t find good deals or worthwhile products. Show that you have something to offer by including product images that highlight the discount. It will also provide visual queues to spark the subscriber’s interest.

Another factor is that they’ve grown numb to seeing the same text-based sale message again and again. If you’re sending frequently, varying product images will also help to keep your designs from getting stale and will show the customer that there’s something new to check out.

Although product images aren’t always needed, I find myself much more likely to click on an email that includes them. If you choose to go without them, find other ways to make your message interesting. Animation is a nice eye-catching solution. You can also mix in fun graphics. A clever theme or wording can really make an email stand out too. Just remember not to reuse the same image-less design again and again or it will lose its allure, no matter how good your deals are.

Here are some examples of sale emails done right:

From: Pottery Barn Kids
Date: 9/15/15
Subject Line: FURNITURE FLEA! Up to 40% off fresh new finds ☚

This email from Pottery Barn Kids is a great example of how to include product images in a sale email and highlight the savings. Although it uses the words “up to,” it shows there are many worthwhile products with great savings to check out.

Pottery Barn Kids

From: ThinkGeek Overlords
Date: 9/15/15
Subject Line: 20% off (or more!) on some of our greatest hits: press play & SHOP!

With the title “30 Greatest Hits: 20% OFF or much, much more!”, ThinkGeek shows us how to avoid the words “up to” by using the mode percentage. They also mention how many products can be found and they provide some product images as well. Score!


Date: 9/16/15
Subject Line: Fall Bake Sale! 20% Off Pans, Mixes & More – In Stores & Online

This email from Williams-Sonoma is a nice example of how to include click-worthy images even when you can’t call out products specifically (due to inventory issues or what-have-you). What they do instead is include an image to represent each category. The key is to choose images placed in a setting to make it feel more generalized. These pictures give the feeling of the baking process or entertaining, as opposed to a cut-out image of a baking tool.

When I look at this email and see the picture of the beautiful pecan pie, it inspires me to shop for Thanksgiving. When I see the mixing bowls, I’m reminded that my set could use an update. I’m, personally, 100 times more likely to click on this email than an email that just says SALE. I don’t need to use my imagination to know what treasures I may find.


From: J. Crew
Date: 9/14/15
Subject Line: Don’t forget to shop 25% off select fall must-haves (ends tonight)
Date: 9/10/15
Subject Line: It’s the end of you-know-what. Here’s how to cope…

J. Crew delivered these unique image-less emails. Clever wording can sometimes be enough to attract interest from time to time. Just don’t over-use it, or it will get old fast.

J. Crew  J. Crew

From: Crazy 8
Date: 9/18/15
Subject Line: Entire site up to 65% off, 4 days only!

Crazy 8 does a great job at using a savings range in this example. They mention the range at the top of the email (entire site 40-65% off), and then go on to explain what can be found at which percentages (40% off regular price items and 20% off all markdowns). They also included a product image which is nice, but I would love to see more images. It’s also too bad they used the “up to” phrase in the subject line.

Crazy 8

Read More

For Fiat, Orange is the New Green

From: Fiat
Date: 03/24/2014
Subject Line: Welcome to the FIAT® family.

03.24.2014 Fiat


Rarely is the Code à la Mode team moved to blog about something that arrives in an actual old school mailbox. However, this little gem from FIAT is so clever, that we feel compelled to make an exception (plus, there is no way that the same physical content could have been delivered via email or other digital format).

Here are a few things to love about this direct mail piece:
1) The color. Orange is the signature color for the Fiat 500e – the bright color makes their cars stand out on the road, and this piece of mail “pop” in comparison to all the usual junk in the mailbox. Keeping with the color theme, the packaging contains a thank you card imbedded with poppy seeds, the California state flower*.
2) The copy. It is short, sweet, and kinda sexy. You’ve joined a family with fashionable taste… makes one feel like a part of the in crowd. The brief set of resources listed in the handy reference guide (which will go in the glove box) are a nice additional touch.
3) The eco-friendly packaging (just like the Fiat 500e itself!). Naturally, the envelope and contents are printed on recycled/compostable paper.

*Note: for the time being, the 500e is available ONLY in California.

In short, everything about this Thank You card is perfectly in sync with the entire Fiat 500e marketing program.

Ciao for now, darlings…time to go for a spin! 🙂

Read More