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

Year in Review hero

Year In Review Email

From: Disney Movie Rewards
Date: 01/01/19
Subject Line: 🎉 Happy New Year, Amy!

Disney Movie Rewards

Happy 2019!! On New Year’s Day I received this email from Disney Movie Rewards summarizing my activity throughout the past year. I thought it was pretty cool. Some of the numbers were surprising to me, and it reminded me how much I value their services. It got me imagining all the ways this could apply to other retailers. Here were some ideas I came up with, keeping with the same number format:

Dollars saved:
[Number of] Products viewed:
Reward points collected:
Years as a subscriber/member:
[Number of] Online purchases:
Events attended: (if emails are collected at events)

I was trying to decide if a collage of the “products viewed” would feel intrusive? A lot of people value their privacy and don’t like to know that retailers are keeping tabs on that information. On the flip-side, it might remind someone of products they were interested in but didn’t purchase, encouraging them to revisit them? What are your thoughts? Cool or creepy? What other info would you like to see in the yearly summary?

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

Animate Your Catalog hero

Get Your Catalog Moving

Are you trying to create awareness of, or drive traffic to your online catalog? There’s an email for that! Sure, you can throw a graphic in your header or footer, but if that’s not cutting it for you, go for gusto with an animated hero! What better way to grab someone’s attention?! Here are three retailers that did just that.

From: Michaels
Date: 8/26/18
Subject Line: Your Fall Lookbook Is Here! 👀

Michaels email shortened   Michaels animation

 

Michaels did a good job placing their message above the fold. They also included images of leaves which continue throughout the design, tying it all together nicely. However, it’s missing a call-to-action and the animation begins without mention of the catalog. If the viewer doesn’t take the time to watch the entire gif, they might miss the objective entirely. Our next email has a solution for this exact issue.

From: Mark and Graham
Date: 8/26/18
Subject Line: 20% Off Sitewide + Over 100 NEW Arrivals Starting at $29!

Mark and Graham email   Mark and Graham animation

Mark and Graham placed their headline “View the New Online Fall Catalog” and CTA above the animation. This way, wherever you start watching the gif, you’ll know what it’s about and will always have a place to click-through. If I were to change something, I would remove the photo that’s next to the headline, allowing the title to take less space, moving everything up. The use of the picture and horizontal line also make it feel like 2 separate messages – I would like them to feel better integrated.

From: Target
Date: 8/05/18
Subject Line: Your new Weekly Ad is here.

Target email   Target animation

I saved the best for last. One noticeable difference that Target implemented: instead of flipping through the Weekly Ad, they animate the cover. I LOVE this! It brings the cover to life, making it fun and drawing your attention. You know they had to plan ahead to achieve this, and it pays off! They also fit their headline and call-to-action next to the animation, above the fold. I wouldn’t change a thing. Here are a few others they’ve done in the recent past.

Target animation 2Target animation 3Target animation 4Target animation 5

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