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