From Garb to Goul

Want to join in on the Halloween fun but don’t sell Halloween products? No sweat! Polyvore and LOFT sent these emails showing how to turn everyday clothes into one-of-a-kind Halloween showstoppers! With the right foundation and a few accessories, you can make your products relevant and irresistibly original! It just takes a little imagination.

From: Polyvore
Date: 10/14/15
Subject Line: The Lazy Girl’s Guide to Halloween


As for the design, they did a great job making the text scannable and staggering the products for flow. However, I would have liked to see a little more Halloween flare by using color, backdrops or graphics. Also, the landing page experience was less than ideal. After looking through pages upon pages of products, I was unable to find the clothing featured in the email. Whenever you’re linking to a category rather than a specific product, ALWAYS begin the list with the featured item.

From: LOFT
Date: 10/29/15
Subject Line: 40% off EVERYTHING (costumes included)


LOFT took a similar approach. In fact, the designs are nearly identical. They chose to add a flashing call to action, which is sure to grab attention. (And an additional call to action at the bottom, which also can’t hurt!) However, the banner at the top of the email (IMHO) takes up too much space, pushing the main message and products below the fold. Their landing page is better than Polyvore’s, but could be improved upon. Every link goes to the same page, containing all of the items featured in the email. They took the time to write out the different products (ex: striped shirt + high waist skinnies + gloves = mime), so they could have easily linked each word to the corresponding item’s page on the website.

Read More

Render Error: iOS layering images

This week a client brought an unusual rendering problem to the CALM team. In the iOS native Mail app the email was appearing very broken, with images and content layered and floating on top of each other. iOS is generally a very easy going email renderer, supporting a ton of modern CSS and standard HTML.  So when this issue was brought to our attention, it was baffling to say the least.

The email itself was very simple, basically a text preheader, a series of images stacked in tables stacked, and a footer. At the client’s request, we coded the images in the email without a defined height.  It is generally best practice to define a height for an image, however in this case, leaving the height to be computed enables the client to easily update the images at the last minute.

We dug into the problem right away. After ruling out a syntax error, things got interesting. After some troubleshooting, we discovered that iOS Mail in iOS 7-9 on the iPhone 5s and iPhone 6 when confronted with images without a defined height and no other elements to define their height loses its mind and tries to layer them on top of each other.

This is the simplest example we could contrive: two images in the body of an HTML document without a defined height. (The opacity is set so that we can see how iOS is layering the images.)

Litmus: https://litmus.com/builder/b5e2291

Cat's heads don't generally float over their feet.
Cat’s heads don’t generally float over their feet.

In this example, we’ve wrapped the two images in a container table and that seems to have solved the problem.

Litmus: https://litmus.com/builder/8e69941

However, what happens if we split the two images into their own tables.

Litmus: https://litmus.com/builder/12ac542

Everything appears fine, but if we add some text at the same level as the container tables, things break again.

Litmus: https://litmus.com/builder/e6a6df4


The simplest and most reliable solution we settled on is to make just sure our content is wrapped in a container table. This is generally best practice anyway and perhaps why we’ve not seen this problem before.

Litmus: https://litmus.com/builder/a307451


We will keep exploring this error and will post any updates.  Please post a comment with any questions or solutions that you have found.

Read More

Uncommon Holidays Hero

Uncommon Holiday Emails

There are so many holidays that people don’t know about that can really make a fun promotion. Until recently, who knew there was a National Siblings Day? And how many people had heard “May the 4th be with you?” Thanks to social media and promotions, many of these uncommonly known holidays are being brought to light. My suggestion: browse through the list of upcoming uncommon holidays and use them to your advantage! Here are 2 emails that did just that.

From: Michaels
Date: 10/22/15
Subject Line: Happy National Color Day!


Michael’s sheds light on National Color Day in this email. The design receives an A+ in my book! I love the incorporation of the coloring page doodles throughout the design. It has just the right amount to support the theme but not be overwhelming. They chose to color some of the doodles and leave some black-and-white to add to the staggered effect. The love continues with the stylized headlines, flag graphics, colorful borders, angled & staggered products, ripped page edges, and call to actions that pop! The sections are nicely separated but still all work together to support the theme. They even included a video at the bottom. Someone clearly had a lot of fun with this one and it shows. Awesome job!

From: Cheesecake Factory Greetings
Date: 10/20/15
Subject Line: , Did Someone Say Pumpkin Cheesecake?

The Cheesecake Factory

This email from The Cheesecake Factory is about National Pumpkin Cheesecake Day. Who knew?? What a great excuse to send a giant picture of a delicious slice of cheesecake to make subscribers’ collective mouths water. They get people involved by announcing a Twitter chat, creating hashtags, and offering a contest. The design isn’t bad but the image could be a little more interesting and the headline could look better in a more appealing font. The call out for Twitter chat and the hashtags get a little lost and don’t really highlight an incentive for people to get involved. It might work better in its own section and with revised copy. There also seems to have been a mishap including my name in the subject line. Lastly, it would be better to have the “trouble viewing this email” link in the preheader (instead of the footer) to make it easier for subscribers to find.

Read More

JibJab Hero

A Hauntingly Fabulous Email

JibJab is scoring some major design points! Their emails are always sure to grab your attention by including your photo in a hilarious setting and/or using fun animated gifs. This email in particular went the extra mile.

From: JibJab
Date: 10/20/15
Subject Line: The Halloween Collection is Here
See it in Motion


I love their use of graphics from top to bottom. The animated flying bats, JibJab logo in the glowing full moon, haunted house, night sky backdrop, and spooky graveyard all give this email a very fun and unified look. All of the videos are tied together, each appearing inside a window of the haunted house. The animated gifs really grab your attention and set the tone. I especially like that each animation is unique – from dancing characters to flicking film, swaying monsters and a spooky glow. The borders around each call to action are also a nice touch. They even did a fantastic job optimizing this email for disabled images by using HTML text. Love, love, love this email. Happy Halloween, JibJab!

Read More

Best Buy

A Great Start

I’ve seen some inspiring marketing strategies from Best Buy lately. Unfortunately, the email designs have been a little lackluster. With a few adjustments, however, these emails could really stand out. Check out some of the ideas they’re bringing to the table and my suggestions about how to improve the email experience.

From: Best Buy
Date: 9/11/15
Subject Line: Man Caves and She Sheds—the ultimate getaways
Landing Page

Best Buy

I love the idea of the “makeover” email. The before and after room transformation is a fun, compelling, and original idea. Imagine how this could be applied across other brands. I’d LOVE to see a before and after makeover from a clothing or makeup retailer! As for the design, I like that they provided before and after photos. But the pros stop there. This email has a lack of hierarchy, too much information, not enough flow, and the supporting content doesn’t have enough tie-in so it feels almost unrelated.

From: Best Buy
Date: 9/24/15
Subject Line: ✈ Don’t Delay! Tech you need for your next trip.
Landing Page

Best Buy

“Six Activities for Family Fun.” This email focuses on fun ways to spend your summer and features products that make each activity possible. It’s a great soft sale, making the focus the activities instead of the products. I like the product cutouts that overlay the environment photos. It helps add dimension and ties the activities and products together. But, there is a lot of room for improvement with this email. The biggest missed opportunity has to do with the images. On the landing page each picture has a fun animation, but they didn’t include it in the email. This could have really made this email POP in a fun way. I would also suggest losing the 3 subsections (adventurous days, peaceful nights and connected at all times) — they create unnecessary division. Staggering the images would also add some much needed flow to this design. Finally, although the copy for each activity is short, they could use titles for even quicker scanning: Scavenger Hunt, Family 5K, Movie Night, and Staycation.

From: Best Buy
Date: 10/05/15
Subject Line: Got an appetite for fright?
Landing Page

Best Buy

Best Buy offers up 5 ways to make your house spooky for Halloween. They have some great ideas that are original (electronics that turn on unexpectedly and objects that move on their own), trendy (head in a jar) and awesome (who knew you could make your own two way mirror so easily?!). The pranks are quickly and easily explained, each with their own how-to video. It’s clear that a lot of thought was put into these. However, the email fell short by a landslide on this one. It doesn’t give any indication about what type of pranks can be found by clicking through. The lack of imagery and design really is a bummer. They also missed a BIG opportunity by not including an animated gif of the video/s from the landing page. On the plus side, the text is concise and scannable, so at least people know there are haunted tips to be found. But without any teasers, it’s not as likely to get many clicks.

From: Best Buy
Date: 10/21/15
Subject Line: Hey McFly—The Future is Here!
Landing Page

Best Buy

Movie fans around the world were celebrating October 21st this year for a unique reason. This was the day that Marty McFly and Doc jumped into the future in the classic Back to the Future sequel. Countless people were dressing up, watching the movie and sharing this event through social media. However, not a lot of retailers were cashing in on this craze. Best Buy was one of the few. They were able to stay current, to recognize chatter in social media and keep up with what people are interested in. Their landing page evaluated which tech from the movie actually became reality. It included everything from the hover board to the food hydration machine. I found the concept smart and fun. But, like the other examples, the email was lacking. On a positive note, the copy was concise and scannable. The subject line was clever. The hero image was a nice way to set the mood of the email – bringing back the nostalgia. But what the email is missing is a preview of some of the tech from the landing page. Rather than using a general hero image, I would have preferred to see staggered images of scenes from the movie with the tech they touch on.

Bottom line: Put the same amount of thought into your emails as you do for your landing pages. If you take the time to make a video or animation, include it in the email. Also make sure to keep in mind email design best practices: scalability, hierarchy, and flow. No matter how good your landing page is, without a compelling email, no one will see it.

Read More

Video gif hero

Get Your Video Moving

Do you have a video to share? As email retailers are painfully aware, videos can’t be embedded into emails. But don’t let that stop you from getting the next best thing. Converting part of your video into an animated gif has multiple clear advantages. Right off the bat, the motion is sure to grab your subscribers’ attention. Furthermore, showing part of the video will give them a better idea about what to expect by clicking. Not to mention that the teaser is a great way to leave them wanting more.

When going this route there are a few things to keep in mind.
1) Animated gifs don’t support audio, so choose a part of the video that works best without sound.
2) Select the section of the video that is most interesting. You can only show a few seconds, so make them count.
3) If your gif is playing on a loop, make sure there isn’t an awkward transition from the end of the video to when it replays.
4) Don’t forget your call to action. Make sure people know the video is clickable by adding a play button to the video itself or a button nearby.
5) File size. Try to keep your video around or under 1-megabyte if possible for quicker loading time.

From: LOFT
Date: 9/28/15
Subject Line: LOFT loves Busy Philipps
See it in motion


Here is one example from LOFT. They chose a section of the video that contained the most humor and least amount of talking. They also added the play button to the center of the video throughout the gif. Both good calls. My only suggestion — I personally wish this video played on a loop. While reading or scrolling through the email, it’s easy to miss the beginning of the gif. Having it replay will ensure it gets viewed in it’s entirety.

From: Sephora Beauty Insider
Date: 9/23/15
Subject Line: The #1 beauty secret?
See it in motion


Sephora also chose a section of video that was most interesting. They doubled up on their call-to-actions by having a “Watch the Video” link as well as a play button in the corner of the video. The more the better, I say. I also wish the videos looped in this email.

Read More

No Pants Hero

Will Drop Pants for Clicks

Just in case you didn’t get the memo: Pants are out. I found it inconceivable and hilarious that I recieved these two strikingly similar emails in the same month. Both feature an animated GIF of a man dropping his pants to reveal his underwear. It’s sure to grab anyone’s attention and maybe even cause a little chuckle – I’ll give them that!

I’ll break down the pros and cons for each email, but I have one suggestion that applies to both. In each, the animated GIF is used to show a multitude of products. For AEO, 5 boxers are shown; in Moosejaw, 3 pants cycle through. I would suggest adding images of these products below the GIF. This will allow the subscriber to 1) get a better view of the product, 2) let them see it for a longer amount of time, and 3) will also provide a link to each product.

From: American Eagle Outfitters
Date: 10/05/15
Subject Line: Pants off, sale on.
See the animated email

American Eagle Outfitters  AEO GIF


  • Large clear image and headline. It’s eye grabbing and straight forward.
  • The way the links are integrated over the hero image is a nice touch. It’s a nice way of bringing everything together into one solid message.
  • Cute preheader. “More AEO underwear = less laundry…#winning”


  • 4 Meg GIF = Slow loading time

From: Moosejaw.com
Date: 10/15/15
Subject Line: Keep Your Pants On | Free $10 for Taking a Survey
See the animated email

Moosejaw  Moosejaw GIF


  • 700K GIF = Quick loading time
  • For those that read the copy, it’s hilariously well written. Here’s a snippet: “Let’s face it, nobody likes wearing pants. As a matter of fact, I’m not wearing any right now. Ever wonder why some people are jerks in the morning? It’s because they had to put on pants.”


  • Not very scannable copy. I love the humor, but titles or bolded text could help get the point across quicker for those that don’t have time to read.
  • No flow. Everything is full width and stacked. Not ideal.
  • Lack of hierarchy. The first two messages are related, but the third isn’t. It feels out of place. I suggest treating it more like a secondary message by making it smaller, or removing it entirely.

Read More

Aerie Keeping It Real Hero

Keeping It Real

From: aerie
Date: 9/28/15
Subject Line: Over 200 Bras Are ALL On Sale!
See the animation


The title states, “The REAL you is sexy. Emma Roberts doesn’t need retouching. Neither do you.” What a great way to connect with your subscribers. Offer something that people can relate to. Something they can picture themselves wearing/using. Let them see the product in an unaltered photo, no tricks of camerawork or photoshopping.

The only thing that might make this email better would be seeing the product on a variety of body types. It’s easy to not retouch a gorgeous model – let’s see some average body types too.

Aerie continues the theme and builds the relationship further by offering the hashtag #aeriereal. Here, people can share their own unaltered photos. Hashtags are a great way to get subscribers involved and do your marketing for you!

This begs the question: How can you make your email experience more relatable for your subscribers?

Read More

Product Bigger Hero

Make My Products BIGGER

You may recall the satire video “Make My Logo BIGGER!!!” which jabbed at companies constantly wanting to make their logos, well, larger. These emails from Crate and Barrel are my take on “Make My Products BIGGER.” But, actually, it works. In fact, I’m kind of in love with them. The size of the products really make them stand out and show a lot of detail. Some products are partially shown, some are at angles, and some overlap — all great techniques to make these layouts interesting to look at and create nice flow. So, go ahead. Make those products bigger!

From: Crate and Barrel
Date: 9/28/15
Subject Line: What you need to host a festive Halloween.

Crate and Barrel

From: Crate and Barrel
Date: 9/07/15
Subject Line: Fireside chat.

Create and Barrel

From: Crate and Barrel
Date: 8/16/15
Subject Line: Our favorite fall living room look.

Crate and Barrel

Read More