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