Timely and Urgent Emails Deserve the Mobile Treatment

[ 2 By

As I was on my way to the airport to catch a flight recently, I received the below email from Delta:

Thankful that they caught me (literally) as I was walking out the door, I was impressed with their ability to get timely, relevant and helpful information into my hands. Better yet, they did so in the medium most convenient for me. Funnily enough, Delta called me to inform me of my flight delay/change as well, but I received the email before I noticed the missed call and voicemail!

Relevant Content

Call it force of habit, an addiction, or whatever you’d like, but I usually do check my email before I leave the house (apparently I’m not alone—a recent study by MailChimp found that 77% of participants reported checking email “everywhere” and “obsessively”). The subject line on this email definitely caught my eye and gave me a good reason to open it: “Last Minute Information About Your Trip.” After opening, I saw the purpose of the email in the preheader right away: “A time change has occured for your Delta flight.” This preheader text was also pulled into my iPhone inbox as preview text that appears below the subject line.

 

The preheader of the email also appears in my iPhone inbox, under the subject line

 

Reading further, I saw specific details about the nature of the flight change (it’s been delayed for almost two hours! I’m glad they caught me right as I was leaving) and more information about where I can find gate locations once I arrive at the airport. In addition, Delta provides links to check my flight status online, view my itinerary, and restates my confirmation number. Again, this is helpful and relevant (maybe even crucial) information for me to have at my fingertips in case I need to get in touch with friends, family, clients or even Delta about my delayed flight.

Subtle, yet effective branding & design

The template used for this email isn’t fancy or exciting (but neither is finding out that your flight is delayed!) so the format and design is appropriate for the content. I’d consider it a typical transactional/triggered email: Delta logo in upper left corner, brand colors throughout, mostly text and very little images. This type of simple template allows for the emphasis to be on the content, which is perfect for this type of email.

Delta’s simple template design allows the content to take priority

 

Last minute email on mobile

Due to the relatively urgent nature of the message (I received it a little less than two hours before my originally scheduled departure time), it’s probably not surprising that I caught this email on my iPhone. While it renders fine in Gmail on my desktop (which I didn’t notice until later), it didn’t fare so well on my iPhone screen:

Crucial information is barely readable on the iPhone

 

Due to the small size of the text and tight line spacing, the flight times are nearly unreadable, which almost defeats the purpose of the email. How did this crucial part of the message manage to get so mangled on my iPhone? Taking a look at the HTML, the flight times have a font-size of 11px and a line-height of 12px. But since iOS auto-adjusts small text sizes up to 13px, the end result is a font-size of 13px and line-height of 12px, leading to illegible, squished text:

<FONT style="FONT-SIZE: 11px; LINE-HEIGHT: 12px">


gets effectively changed to:

<FONT style="FONT-SIZE: 13px; LINE-HEIGHT: 12px">


While iOS will upscale font size, it doesn't override specified line-heights for corresponding text.

To make matters worse, iOS has detected the original and modified flight times and modified them to integrate with the iPhone's calendar app. These modifications include changing the font color to blue and underlining the text to indicate a link is available. In some cases this time and date detection can be really useful, but in this case it's simply causing more confusion. In the desktop text styles, my original flight time was styled with a lighter text color and strikethrough and the new flight time appears as standard black body text—an effective and clear visual hierarchy for this information. However, on my iPhone both old and new flight times appear as blue, underlined text. Luckily the strikethrough is retained: without it, the text is almost useless.

It's a touch ironic that the most crucial information in the email has become the hardest to read, especially on the device that you're (arguably) most likely to read it on.

Easy fixes for mobile-friendly emails

To make this timely, urgent and relevant message more legible (especially in the most likely context it will be read in), I'd suggest the following:

  • Use a minimum 14px body font. While you can override the auto-adjusting behavior, I wouldn't recommend including font sizes smaller than 13px in this type of email. It's simply too small to risk not being legible on a smartphone.
  • Rather than relying on a gray font and strikethrough styling to suggest an old or outdated flight time, include copy that clearly indicates the original flight time and the updated flight time.
  • Anticipate that iOS will modify all dates, times and addresses and override these styles. We explain how to do this in an earlier post, "Banning Blue Links on iOS Devices".

With mobile email opens continuing to rise (a 123% increase in 18 months) it's more important than ever to address the growing number of subscribers that are accessing messages on their smartphone—especially for urgent communications like last-minute flight changes! Small changes—like increasing font size and adding a bit of CSS to override mobile OS styles—can go a long way. In this case, these modifications would have transformed a nearly nearly unreadable message into a perfect case study for mobile-optimized email!

What do you think?

Have you ever received an email with awesome content, but the context in which you received it made it less than stellar? Let us know, we'd love to hear about it.

ADDITIONAL RESOURCES

  • http://twitter.com/stephanhov Stephan Hovnanian

    Spectacular post, Justine! Especially the 3 easy fixes part…so crucial to get those details right!!

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

      Thanks Stephan! It was really surprising to see how much better the email looked in Gmail on a desktop. iPhone has a great reputation for rendering well but in this case the automatic sizing of the text and the underline/blue text did a number on it!