A Clickable & Responsive Background Image

It’s elusive, but possible.

Clients want it all and we’re here to try and make that happen. Sometimes that means live text or a bullet-proof button on top of their hero image that can still be a link (which also happens to be a fluid/responsive template). This was one our recent requests and we worked to make it happen. For today’s purposes we’ll use a cute kitten as our creative design.

The first piece of the puzzle involves getting the background image to scale with the fluid template (not just to a specific pixel size). This is accomplished using the following CSS on our background image td tag:

The next step is overlaying the content needed on the background image. In this sample I used a bullet proof button. This is a good time to note, getting too complex can cause problems. Elements overlaid on the background image may not change size proportionally with the background image. The button used in this example will not change size at all. What parts of the design could be covered by elements such as text or a button? What design elements are critical to the email? Leave wiggle room around your critical elements.

From here create transparent PNGs for the surrounding space. In this example I used a PNG above and below the button as outlined in the image below. Linking these PNGs will create the affect of a clickable background image.

Now we need to ensure these transparent PNGs re-size with our fluid template. In the responsive CSS include the following code and add the class to the img tag in the HTML:

When creating the background image, I made it 30px taller than I anticipated using in design/code. This will allow some flexibility in height should the overlaid elements not resize proportionally to the size of the background design.

Do you have any workarounds for challenging client requests or tricks in your email code? We’d love to hear from other perspectives.

Read More

Ulta hero

Interactive Email?! 😱🤯

From: Ulta Beauty
Date: 11/29/18
Subject Line: 🌙 Your All-Nighter Shopping Pass is here + Bonus Points

Ulta email  Ulta interactivity

Just when I think I know everything that’s possible with email, something new gets thrown into the mix! Ulta surprised me when I clicked on an image of a gift (to “unwrap” my savings), expecting it to open a web browser. Instead, it swapped the image of the present, revealing my deal within the email! From what I can deduct, they were able to pull this off using the company LiveClicker. It definitely threw me for a loop. I love the instant gratification of seeing my reward right away and the clutter-free lack of a pop-up. I hope to see this more in emails! Ulta also did a great job enticing me to click on the gift by animating it. Not to mention it’s packed with custom relevant content: my name in multiple locations (including a headline with fancy font), rewards balance, membership number and local store information. Nicely done!

Read More

Panera Hero

Emails with Live Updates

From: Panera
Date: 10/13/18
Subject Line: Amy, vote for your favorite Mac & Cheese!

Panera Cropped Email    Panera Animation

We’ve seen it before: emails that refresh the content each time you visit. Mostly it’s been used to count down the time until a sale ends. Well, Panera has come up with an innovative way to use live email updates. They ask subscribers to vote for their favorite Mac & Cheese creation, with the email displaying the live results! What a cool way to get customers up-to-date information that’s also interactive. In this case, it was also a fun way to let customers know that new fall “Soups and Mac” have arrived.

The live results aren’t the only thing Panera is doing right in this email. They also animated the hero to grab my attention, used my name in the subject line and email to make it feel personal, and made the design mobile friendly. Nicely done!

I could see this strategy being used for other types of retailers. For instance, Gymboree recently had a vote-for-our-next-toddler-model contest. Wouldn’t it have been cool to see which child was “in the lead” in the email? I could also see a clothing retailer having shoppers vote on their favorite fall outfit. What about having subscribers vote what the next holiday “deal of the day” should be? The possibilities are endless!

Read More

Moms Day hero 2018

My Mother’s Day Picks

Did your Mother’s Day email fall short this year? Help add life to your message with use of authenticity, originality and humor. Check out the emails that made my list this year.

From: Hot Topic
Date: 5/14/18
Subject Line: Newsflash: It’s Mother’s Day. Get your cool mom a cool gift.

Moms Day Hot Topic Email  Moms Day Hot Topic Animated

This email animates a phone conversation between a mother and daughter. It not only grabs your attention with the animation, but also makes it fun by adding some humor when the mom asks for Slipknot tank for Mother’s Day. It’s smart that they added in the typing […] graphic to the animation to allow time for reading while also making it feel more genuine. I also love how they manipulated the keyboard and word-suggestion area to call attention to the sale.

From: aerie
Date: 5/08/18
Subject Line: You Got It From Your Mama!

Moms Day Aerie Email  Moms Day Aerie Email zoom

Aerie sent out an email asking their models what they got from their mothers. The design features loving quotes and pictures of the moms and daughters together. What makes this one extra special though, is that all of the women are wearing aerie swimsuits and (as is the aerie way) are shown in untouched photography. It’s refreshing to see women of all ages and body types together, having fun and confidence in their natural forms.

From: Anthropologie
Date: 5/13/18
Subject Line: Isn’t Mom the best?

Moms Day Anthropologie Email  Moms Day Anthropologie Email zoom

Anthropologie sent out a series of emails highlighting their female staff with their kids. It’s a different angle to feature the employee as the mom. The photography is really what brings these emails to life. They are shot outside of a studio and look very authentic — Moms hugging and tickling their kids and playing on the beach. It just warms my heart. The script fonts, shadows and ripped edges add to the natural playfulness.

From: UncommonGoods
Date: 5/08/18
Subject Line: Gifts for Woman Warriors (aka Moms)

Moms Day UnCommonGoods Email  Moms Day UnCommonGoods Email zoom

Finally, this email from UncommonGoods caught my eye. It defines Moms as superheroes and lets you choose which comic best fits your mom’s style. The unique hand drawn covers portray different super-abilities that match shopping categories. For example: “Dr. Brainiac” leads to geek gifts, “Mother of Gardens” goes to garden gifts and (my favorite) “The Gray Tornado” features gifts for grandma. The theme overall is original and fun.

Read More

UncommonGoods hero

No joke – this email is great.

From: UncommonGoods
Date: 6/14/17
Subject Line: Shopping for Dad Is No Joke

UncommonGoods Email

This email from UncommonGoods is filled with fun, humor, and originality. It’s the one Father’s Day email that really stood out to me this year. It has the theme: Dad always tells the lamest jokes. They encourage you to shop all the usual categories (ties, beer, gadgets, grilling, etc), but the spin is they pair each section with a cheesy and relevant joke. For example, “I used to hate facial hair. But then it grew on me. [Shop personal care].” Every joke is also being told by a character that represents that category (a mustache with legs for instance). Most of the characters are crying with laughter, which put a smile on my face. The design flows nicely, staggered left to right. I had a lot of fun reading this email and even told my son some of the jokes. It takes a lot of creativity to come up with something for every section, and they pulled it off flawlessly. (BTW, I also love the preheader: Email died laughing? View in browser.)

Read More

Loft Mother's Day Hero

A Mother of an Email

From: LOFT
Date: 5/05/17
Subject Line: Two things we love: our moms…and a SALE

Loft Mother's Day Email

Mother’s Day is right around the corner. I love Loft’s approach to celebrating the holiday. They decided to do a mother-daughter photoshoot with the staff! The email introduces the staff member & their mom, has a personal quote about their relationship, and (the best part) includes a throwback photo of the two of them together. I like how personal this email is — you really feel like you’re getting to know the people “behind the curtain” at Loft. To top it off, all moms are dressed in Loft attire! It’s a great way of showing how versatile their clothing line is. Plus, it doesn’t take any stretch of the imagination to picture your own mom in the same wardrobe. They include calls-to-action that lead you to buy the clothing they’re wearing.

From: LOFT
Date: 5/03/17
Subject Line: Real moms, real style

Loft Mother's Day Email

Loft took two different approaches with this message. In this email they focus less on the individual staff members (removed the names, quotes and throwback photos) and made it more of a general message. They rely on you to click through to the landing page to learn more about the staff/moms. In this email it’s less obvious to me that the mothers are wearing Loft clothing (in the other email the copy points out that the moms are stepping in as models). Because of this, I find the main call-to-action (shop now) a little out of place. I would expect to see the “meet our moms” CTA first. Still, it’s very sweet and personal (because of the photos), but I favor the content in the other version more.

Read More

Rejuvenation Hero

The Beauty of a Zoom

From: Rejuvenation
Date: 3/24/17
Subject Line: LAST CHANCE! FREE SHIPPING + bath makeover inspiration

From: Rejuvenation
Date: 3/22/17
Subject Line: Don’t miss out! Free Shipping on your first order!

From: Rejuvenation
Date: 3/20/17
Subject Line: We’re treating you to Complimentary Shipping on your next order

Rejuvenation   Rejuvenation   Rejuvenation

These emails by Rejuvenation are the new evolution of design. Two major staples of my methods include: 1) creating flow by staggering products and 2) not overwhelming layouts with too many products. These email do neither, so WHY would I find these emails so aesthetically pleasing? The answer is in the photo zooms! If you tried this layout with photos of a typical shooting distance, it would become overwhelmingly cluttered; your eye wouldn’t know where to look and your brain would have trouble processing every element before you got bored and moved on to the next email. The zooms, however, add a clear and beautiful level of detail that are simplistic and easy to digest. Each image leaves you wanting more. The angles that the photos were taken at are also important; if each photo was shot head-on, it would become stale and lack movement. However, Rejuvenation cropped each image to add balance and interest to a layout that would otherwise be devoid of flow. I also love how each design has its own color scheme; every image coordinates with the hero perfectly.

Read More