A Responsive Horizontal Scroller from BrightWave Marketing

[ 4 By

We may have received this email from BrightWave Marketing a few weeks ago, but it was too good to pass up. Who cares if the holidays have passed?! The horizontally scrolling format paired with responsive design, undoubtedly, make it inspiration-worthy.

LET’S START AT THE BEGINNING

Before we get to the good stuff, let’s start at the VERY beginning.

What immediately attracted me to this email was its subject line, “BrightWave Elves Take Over Your Inbox.” Since it was sent a few days before Christmas, the subject line was relevant to the holiday season, yet had an extra touch of fun (it wasn’t the typical “Happy Holidays” or “Holiday Sale – XX% off” that I had been receiving for weeks). BrightWave’s elves are in my inbox? Huh?! I just had to open up the email & check it out!

The preheader of this email also added to its charm, “Special Holiday Greeting from the BrightWave team – we can’t wait to make your 2013 a success.” It’s definitely a nice change from the “having trouble viewing this email?” preheader that we see so frequently. This preheader showed me that BrightWave actually cares for their customers — they aren’t trying to promote a new product, or trying to get their subscribers to upgrade; instead, they’re simply wishing everyone a happy holiday season.

As Jordie van Rijn explains in his post, “Boost Customer Loyalty with these five bulletproof Email Marketing tactics,” doing something extra nice, such as sending your customers a happy holiday email (that, shockingly enough, doesn’t try to sell a single thing in it!), can help bring delight to a customer and create brand loyalty. It’s nice knowing that BrightWave cares about their customers enough to put together this thoughtful (and fun!) email.

THE HORIZONTAL + RESPONSIVE DESIGN

As you can see, the responsive element of this email is pretty unique. There are two completely different versions of the email — a horizontally-scrolling version for viewing on larger screens and a vertically-scrolling layout for smaller screens.


While the message in both versions of the email is the same — “From all of us at BrightWave Marketing, wish you a happy Holiday Season and a joyous New Year!” — the message is presented in a different format. In the horizontal layout, the five images comprise groups of BrightWave employees holding up signs that make up the message; in the vertical layout, the nine smaller images group together to create one long banner with the message on it while BrightWave employees poke their heads out from behind the banner. Both versions are fun and add some personalization to the email — it’s nice to see the faces behind a company you do business with!

One of my favorite aspects of this email is definitely the additional message on the mobile version. While the rest of the mobile message is the same as the desktop message, this adds an extra special touch! Without patting themselves on the back too much, they’re basically saying “you think this email looks cool on your mobile device? Wait til you see how different it is (yet still cool!) on your desktop!”

Horizontally scrolling emails are seen more frequently in retail and consumer-oriented emails (there are 20+ examples in this post from Anna Yeaman), so it’s also great to see a B2B-oriented company giving it a shot. Since email and internet conventions dictate that scrolling happens up-and-down, changing it up and sending an email that scrolls the other way can be a creative way to re-engage your audience and surprise them with something a bit out of the ordinary. A few years ago, our friends at ExactTarget performed an A/B/C/D split test with a horizontally-scrolling email, and it beat the other three designs!

Since horizontally-scrolling emails aren’t common, it’s helpful to provide visual cues for the reader to scroll to the right and see the rest of the message. In ExactTarget’s email, they used road signs and arrows to help guide the reader along. In BrightWave’s holiday email, breaking the message into small chunks both visually and rationally keep you moving to the right — you can’t continue reading the message until you scroll — and the preview pane of most email clients prevents the entire width of the email from being displayed all at once. It can also be helpful to add a button or other call-to-action on the far right side of the email to better gauge the number of readers that scroll.

Only a portion of BrightWave’s email is visible in the preview pane, but the imagery encourages users to continue scrolling

One thing to keep in mind about horizontally-scrolling emails: Outlook 2007+ has a maximum scroll width of 2110px. BrightWave’s email is about 2010px long: just below the Outlook limit!

IMAGES-OFF OPTIMIZATION? KIND OF.

How does this email look in an images-off environment? Let’s take a look.

Since they use a very dark gray background color for the entire email, it does stand out compared to the typical white background of an images-disabled email. However, in most email clients, the black-text-on-black-background made the ALT text nearly invisible. To make ALT text stand out on a dark background, you can try using styled ALT text, which is supported in most webkit-based email clients (and when readers open webmail in webkit browsers). In this example, the ALT text is blue on the first image since it was linked. Also, in the mobile version of the email, all of the images have the same ALT text  — “From BrightWave Marketing.” I’m not sure if this was intentional or a mistake, but they could have used similar ALT text from desktop version to give their subscribers a better understanding of what the images could be, and offer more accurate ALT text for mobile users with devices that block images by default.

WANT US TO ANALYZE YOUR EMAIL?

Do you have an email that you’re especially proud of? Email us at inspiration@litmus.com — we’d love to feature it in our inspiration series!

ADDITIONAL RESOURCES.

  • http://www.tedgoas.com/ Ted Goas

    Interesting, any idea how they generated two different emails? This looks like something too complex for media queries alone to handle. Especially with Outlook in the mix!

    • http://www.litmus.com Justine, Litmus

      Hi Ted! I’ve been digging into the HTML this morning. It looks like they’ve combined a media query along with hiding the images for the mobile version. I’ve reached out to the folks at BrightWave to see if they’re interested in commenting here. I’ll keep you posted!

      • http://mindgrapes.ryantuttle.com Ryan P. Tuttle

        Hey Ted/Justine

        Obviously, there’s a bit more than meets the eye in how we do this type of mobile optimization. We’re using the RESS design approach to mobile (normally applied to websites), so there is a server-side component. You can probably tell that lends itself to a lot of extra work (and HTML), but we’ve actually developed software that automates much of the process so that we don’t have to start from scratch every time a client wants to send out a mobile optimized email.

        • http://www.litmus.com Justine, Litmus

          Thanks for swinging by to comment, Ryan! As far as I know, this is the first I’ve interacted with an email optimized with RESS techniques: pretty cool! I’d love to hear more about your experiences with this and its support in email. Any chance you’d like to do a guest post?