Three Step Media Queries Imitate Fluid Resizing for Expedia Emails

[ 11 By

In the past few years, deal hunting has become one of America’s favorite new pastimes; whether it be for restaurants, haircuts, or travel, everyone is looking for a discount code or promotion. Technology—particularly mobile—has proven to be the tool of choice for these deal hunters, especially when it comes to the travel industry. In 2012, 28% of mobile device owners booked travel on their smartphones. It’s projected that mobile travel bookings will more than triple from 2012 to 2014 and reach about $25.8 billion US dollars.

It probably comes as no surprise that Expedia (arguably the most recognized internet-based travel site), decided to “go mobile” with their promotional emails. Wanting to provide the best customer experience possible, Expedia knew that optimizing their emails for the devices their customers were using was one of the best ways to achieve this goal.

After attending our Mobile Email Design Master Class, Todd Spilker, Email Producer at Expedia, decided to implement some of the media query and CSS best practices discussed at the workshop. The result? Expedia has moved almost all of their non-triggered promotional campaigns to responsive design.

Let’s take a look at the journey (no pun intended!) of Expedia’s emails—from before the redesign to the responsive awesomeness!

BEFORE THE REDESIGN

Before the redesign, Expedia’s emails still had the same great, helpful content and enticing imagery, but they were not optimized for viewing on mobile devices. Let’s check out two examples:

expedia-before

Take a peek at the Scoped email and HTML.

expedia-before-wed

Take a look at the Scope version.

Due to the small text, long navigation bars, and multi-column design, these emails are very difficult to interact with on a small screen. I’d have to do a lot of zooming in to read and follow the CTAs in these emails!

AFTER: RESPONSIVE DESIGN IN ITS GLORY!

Based on what Todd learned in the workshop, the Expedia team decided to take a three-step media query approach, utilizing breakpoints at 600px, 400px and 300px. As a result, their emails imitate a true responsive design: fluidly resizing and scaling beautifully. Let’s take a look!

expedia-after-affordable

Take a peek at the code.

Impressive! Through the use of media queries, Expedia is able to scale down the email to be easily readable on smartphones and tablets. Through careful planning and responsive strategy they were able to:

  • Remove the preheader links: “Save big on flights from your airport” and “View email in browser”
  • Scale down the navigation bar to include only flights, hotels, packages, and cruises
  • Remove the airplane imagery, so that the text is able to scale the entire width of the email
  • Increase text size
  • Enlarge the button
  • Scale the CTA to call for expert advice onto two lines so that the text is larger and the phone number is easy to “tap” to call

Here’s another great example:

expedia-after-nojoke

See the HTML for this email.

Similarly to the first email, this email also uses a three-step media query. The layout switches to a one column design, fonts are enlarged, buttons are large and tappable, and the navigation bar is scaled down.

Strangely enough, I actually like the mobile version more than the desktop version in this particular email. I found that the hierarchy of the desktop view was difficult to distinguish—the two yellow buttons, “See Deals” and “See Packages,” are the same color and both very large. Which is the main CTA? In addition, the Royal Caribbean imagery towards the bottom of the email looks ad-like and doesn’t fit in well with the design of the email.

However, when viewed on a mobile device, the hierarchy becomes crystal clear (the “See Deals” CTA spans the entire width of the email) and the Royal Caribbean advertisement blends in better with the design of the email.

Also, towards the bottom of the mobile view, four text CTAs are stacked on top of one another. Links clustered close together like this can become difficult to tap, increasing the chance that your subscribers will click the wrong link, become frustrated and abandon your email.

IMAGES-OFF OPTIMIZATION

Expedia also does a great job at optimizing its emails for images-off viewing. Here is one of the mobile-optimized emails with images disabled:

expedia-off

Since their emails are mostly live text, they are almost completely readable with images are disabled. In addition, by using background colors and bulletproof buttons, the hierarchy and main CTAs remain visible. Through the use of ALT text (and even styled ALT text in the “midnight deals” email!), subscribers are able to get a preview of what the images will be if he/she decides to enable them.

However, it should be noted that in many email clients, ALT text will disappear once the size or length of the text exceeds the width and/or height of the image container. Expedia uses styled ALT text on one of their CTAs but due to this behavior, it’s not visible! It’s better to stick to shorter descriptions and smaller font sizes to avoid ALT text being removed.

LIMIT THE DISCLAIMER TEXT

In the “affordable flight” email, the disclaimer text is almost longer than the actual marketing message!

expedia-disclaimer

While lengthy disclaimers are sometimes necessary, I’d like to think that they could be minimized, or even linked to a separate page. It’s a bit overwhelming and made me feel as if there were a bunch of loopholes to the deal!

WHAT DO YOU THINK?

What do you think of Expedia’s redesign? Are you as impressed as I am? I’d love to hear your thoughts.

SUBMIT YOUR EMAILS TO BE FEATURED

Do you have an email that you’re especially proud of? Send it to me at inspiration@litmus.com to be featured on our blog!

  • Dibya Prakash Sahoo

    Great Job Lauren…. I liked your services a lot.

    • Lauren_Litmus

      Thanks you, Dibya! So happy to hear that you like the post (and our services!).

      • Dibya Prakash Sahoo

        Lauren, I was Just wondering that whether Responsive design is all to do by HTML designers or their are technologies which can render normal designs into a responsive design.

        Is it like just following few guidelines or best practices we can design responsive designs or there are technologies or tool which can automate this.

        Would love to hear your comments on the same…

  • disqus_U2l8q31wuO

    You know what would make for an even more interesting article? How the company addressed their emails in gmail and outlook? I would like to see what solutions they come up with. This kind of information is hardly ever shared nor spotlighted. Everyone can make a mobile responsive email with media queries.

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

      We’re planning a post about responsive design support for Outlook, so stay tuned!

      • disqus_U2l8q31wuO

        A Gmail specific post would be better as outlook has been well documented….also gmail ACCEPTS the style tag now…so you would be first to cover that as there are quite a bit of caveats though to this.

    • Jarrod

      Sounds like someone’s had a bad Outlook day…

  • Jarrod

    Thank God for scope, I finally figured out how to change it to responsive design: I’ve been using (max-device-width: 480px) all along, just needed to remove device… Jeez.

  • Christian Matthew

    Awesome write up. the coding Expedia used threw me off a bit. *[class ]