Timely and Urgent Emails Deserve the Mobile Treatment2
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!
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.
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.
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:
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.
- “Tip: Override the minimum font size on the iPhone and iPad” — Campaign Monitor.
- “Design for ALL Inboxes” — determine which email optimization is right for you — mobile aware or responsive?
- Prevent iPhones from turning dates, times and addresses blue in "Banning Blue Links on iOS Devices"