Three Step Media Queries Imitate Fluid Resizing for Expedia Emails11
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:
Take a peek at the Scoped email and HTML.
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!
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:
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.
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:
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!
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 firstname.lastname@example.org to be featured on our blog!