I've been browsing Air BnB for a while looking for apartments in New York next year. As I wanted to make a wish list I signed up and received to my Gmail account this great looking email from them.
Of course I wanted to inspect the design (and maybe a little bit find its flaws). I immediately realised they were using background images as the live text was overlaid onto a non block colour so thought I'd see what kind of fallback they'd get in Outlook.
It all seemed fine until we arrive at the key call to action - can you make it out at all? No? That's because it's a white link on a very pale blue background, rendering it pretty much illegible. Outlook users are getting a pretty crappy experience from it. There's a few ways to fix this of course:![]()
Of course I wanted to inspect the design (and maybe a little bit find its flaws). I immediately realised they were using background images as the live text was overlaid onto a non block colour so thought I'd see what kind of fallback they'd get in Outlook.
It all seemed fine until we arrive at the key call to action - can you make it out at all? No? That's because it's a white link on a very pale blue background, rendering it pretty much illegible. Outlook users are getting a pretty crappy experience from it. There's a few ways to fix this of course:
- Use an image for the button and format an alt tag behind it (if images are turned off this obviously won't display in Outlook)
- Cut up the button and make a 3 x 3 table with the centre cell being block pink with the same white writing on and putting display:block on the link text to "fill out" the box
Great looking email otherwise, just a little more testing required!
