We can’t say it enough—if your emails aren’t easy to read and interact with, your subscribers are likely to abandon them. Regardless of what the industry open trends are, it’s your subscribers’ data that matters most. Where are they opening your emails? Where should you be focusing your testing efforts? How can you provide them with the best email experience possible?
Working with customer engagement agency The Lacek Group,Starwood Preferred Guest began looking at their subscriber open data to determine how to optimize their emails for their audience.
With opens in iOS drastically increasing, they knew it was imperative to optimize their emails for iPad and iPhone. However, a large portion of their audience was also opening on desktop clients—a perfect opportunity for responsive design.
WHY GO RESPONSIVE?
After looking at their Email Analytics data, they discovered that many of their subscribers were viewing their emails in Outlook 2002+. Along with a requirement to support Outlook, many of their subscribers were also viewing their emails on mobile devices. These mobile opens were mostly occurring in iOS, but they were also seeing numerous Android opens.
This scenario presented a unique challenge—their emails needed convey messaging via HTML text to avoid image blocking in Outlook while still maintaining visual appeal. Along with those challenges, they also have a localization requirement: each of their emails is translated to ten different languages!
Jess Heitland, Senior Interactive Designer at the Lacek Group, explained:
RESPONSIVE DESIGN ALLOWS US TO CONTINUE TO PROVIDE AN ON-BRAND LAYOUT AND MESSAGE FOR OUR NUMEROUS DESKTOP VIEWERS, WHILE STILL ENGAGING WITH MOBILE USERS IN A FORMAT THEY ARE BEGINNING TO EXPECT.
While the percentage of their subscribers viewing their communications on mobile devices is now eclipsing desktop users, it’s important to optimize for both environments. He stated,
PROPERLY FORMATTING TEXT, CTAS AND IMAGERY IN A MANNER THAT MAKES EVERYTHING EASY TO READ, SCAN, TAP AND CLICK, IN THE CONTEXT OF BOTH MOBILE AND DESKTOP ENVIRONMENTS, INCREASES ENGAGEMENT AND CLICK THRUS.
MOBILE-OPTIMIZED EMAILS
Working with the Lacek Group, Starwood Preferred Guest recently overhauled two of their emails: Gold Reinforcement email and eStatement email. Their Gold Reinforcement email is usually refreshed about once a year and deployed numerous times throughout the year. The eStatement email is a templated structure that is sent to members on a monthly basis.
GOLD REINFORCEMENT
Desktop view
Mobile view
Through the use of media queries, Starwood is able to make this email easy to read and interact with in almost every environment! How did they make sure it rendered correctly across desktop, mobile and webmail clients? Jess explains,
OVERALL, WE TEST EVERY BUILD THRU LITMUS. WE CAN’T IMAGINE SUPPORTING THE QUANTITY OF EMAILS WITHOUT THE LITMUS TOOL… IT’S ABSOLUTELY VITAL TO OUR DAILY WORKFLOW.
When viewing the email on mobile devices that support media queries, the following occurs:
- Preheader is removed
- Header image and text is centered
- Layout shifts to single column design (images on top of text, rather than side-by-side)
- Some content is removed
- Links for “Rating & Reviews,” “SPG Resorts” and “SPG Flights,” expand to fit the entire width of the device
Through these responsive elements, the mobile view of this email is extremely sleek and easy to interact with—I actually like it better than the desktop view, which I find a bit busy!
Other impressive elements:
- A preheader that isn’t “Can’t view this image? Click here”
- Personalization at the very beginning of the email—full name and their Starwood Preferred Guest number (makes the recipient feel as if the email was tailored specifically for them!)
- Social proof—don’t take Starwood’s word for it, see what other customers are saying!
- “S-curve” design (alternating text and image between the left and right sides of the email), encourages subscribers to scroll down the entire email
Starwood also has optimized their emails for images-off viewing! This is critical for email clients that disable images by default, like Gmail.
Images off
The majority of the email is live text, which means the content is still legible even when images can’t be seen. In addition, the background color at the top of the email makes it feel as if a banner is there!
Starwood also uses ALT text so, even when images are disabled, there is still a “preview” of what the image would be if it was downloaded. However, styled ALT text and bulletproof buttons could have taken their images-off optimization to a whole new level!
ESTATEMENT
Desktop view
Mobile view
Similarly to the Gold Reinforcement email, in the eStatement email, Starwood uses responsive elements to make the email easy to read on mobile devices. A two-column design is switched to a one-column design, and CTAs take up the entire width of the device.
This email also has a nice s-curve design and great personalization! However, their images-off optimization isn’t as successful as it is in the Gold Reinforcement email. Since they use white ALT text on a light background, it’s barely legible:
I wish they had use more prominent styled ALT text, as well as bulletproof buttons!
A SUGGESTION…
These emails are great! However, the long footer text in both of the emails is a bit of a turnoff.
It makes it appear as if the great deals they’re mentioning in the body of the emails are actually full of disclaimers.
ENCOURAGING RESULTS
While they haven’t received numbers on the Gold Reinforcement emails yet, they have seen the eStatement mobile open rates continuing to increase. In addition, other responsive email promotions have seen mobile click-to-open rates increase around 28%! They are excited to see the effect that responsive design has on their other email programs.
WANT TO BE FEATURED ON OUR BLOG?
Have any emails that you’re especially proud of? Submit them to inspiration@litmus.com.
