July 11, 2014

Email Inspiration: B&Q Interactive Email

Email Inspiration: B&Q Interactive Email

We love this B&Q email that Mark Robbins spotted on Twitter, because there is almost everything you’d want to do in an email going on. First off, there’s a custom published barcode, which contains the user’s unique member number. It’s also very nicely responsive. But the main reason we love this email is that it contains an interactive offer carousel, which changes when you mouseover different menu items.

bandq-1

So an interactive carousel — how do you go about making that? It looks mostly to be a pretty hefty combination of CSS transformations, fixed CSS positions and a touch of Z-index. There’s a sneaky bit of javascript but it’s unclear if that’s just for the web-hosted view, where support for Javascript is less of an issue.

As you’d expect, the interactive element doesn’t work everywhere (pretty much only in webkit powered devices/clients in fact), but it falls back to a more conventional looking email everywhere else.

  • Jason Holland

    Selection buttons don’t stick in Apple Mail and therefore all but one CTA button for each panel disappears before you can click on it! Mobile experience at the expense of working on desktop!?

    No thanks.

    • Alexander Barber

      The issue you mentioned has already been fixed for further iterations, you don’t have to worry about your desktop either now! Also means no more JavaScript for the webview 🙂

  • Jaina

    While I kinda agree with Jason, sacrificing desktop for a good mobile experience, what is absolutely fantastic about this is that a DIY retailer is pushing the boundaries of email like this. I would not have expected this from them!

  • Joe Garite II

    It’s possible that the company knows the email client demographics of their user base and therefore doesn’t care that Apple Mail won’t work. Perhaps their user base is mostly mobile. I do agree with Jason that it’s not a good practice, but, with Jaina, I agree that it’s not expected and so the “wow factor” for mobile users may create more interaction and provide a higher open rate than an email that would work across all email clients. It’s all about experimenting and pushing the boundaries.

  • Steve Light

    Does anyone know who the Dev was who created this. I’d like to get in touch.