ericgideon.com

I fly a planes.

Reinventing Email at Redfin

This was originally published on the Redfin developer blog.

Old, unresponsive Redfin email on iPhoneDepending on what you read, around a third of the time spent on mobile devices is taken up by email. Redfin is being increasingly accessed from mobile devices. It’s the 21st century, and we’ve all got computers in our pockets.

Why, then, are we sending out emails that are formatted exclusively for desktop email clients? Not even necessarily all that well, honestly. If you’re reading them on something like a MacBook Air or an ultrabook/netbook sort of machine, our font size choices are probably making that whole situation pretty tough. That said, we have some good looking templates that heavily favor desktop reading, thanks to font sizes, header elements, and (most important) multi-column layouts.

The future of email is here, and it looks a lot like the past.

I started working on Redfin’s emails late last year, and we immediately started cleaning things up. Fewer tables, larger font sizes, less clutter. You probably didn’t notice, or if you did you didn’t think much about it. They look pretty good, but our email is nothing special. And everything we were sending was 100% tables, with weird hacks to get around Outlook 2007 & 2010. For desktop only, that’s fine, but what about for mobile? Android and iOS both boast incredibly modern WebKit-based default mail clients, supporting HTML5 and CSS3 (including things like inline video!). But the work involved in designing and coding a separate ‘mobile’ email campaign is pretty intimidating, and the idea of going through every email we send and redesigning wasn’t particularly appealing either.

What do you do, then? Lots of desktop/mobile email templates out there seem to reformat the existing table cells as narrower versions for mobile, but that’s kind of a cop-out. They look good, and the responsive layout might be nifty, but they still run the risk of tiny text areas. So, designing emails to have secondary content that can collapse doesn’t really solve the problem of an email that is truly accessible to mobile users. It also doesn’t address the issue of the design & coding workload required to get new templates designed, built, and tested.

I mentioned earlier that mobile email clients (except for Gmail, on any platform) are fancy and modern; what does this actually mean for the old-school table layouts, though? That got me thinking: what if we could convince these clients that they should ignore the fact that the content is in a table? Most web developers probably use display:block; on inline elements like all the time, so why not on table cells? Obviously if you’re writing semantic code and using tables for tabular data, this makes no sense, but if you’re writing emails and using tables for layout, this seems like the perfect solution. It took some experimentation, but I found that, yes, we can turn a td into a block element that we can manipulate as a pseudo-div.

Breaking tables (deliberately)

First, we set up a media query that will only be triggered by small screens. This isn’t anything new if you’ve worked with CSS3 and responsive design. Within the media query, we build a simple class that can be assigned to whatever we want to reformat for mobile.

1
2
3
4
5
6
7
8
9
10
11
12
13
<style type="text/css">
    @media only screen and (max-device-width: 480px) {
        *[class~=stackonmobile] {
            display: block !important;
            clear: both !important;
            width: 100% !important;
            margin: 0;
        }
        *[class~=hideonmobile] {
            display: none !important;
        }
    }
</style>

There’s some weird bits to that CSS, especially in the selectors we’re using to pick out .stackonmobile and .hideonmobile - you can thank Yahoo Mail for that. Anyway, this is a class that you’ll want to apply after inlining your css, if you use a tool like premailer. Also, for testing and development, it can help if you use max-width rather than max-device-width - this lets you resize your browser and see your revisions live.

1
2
3
4
5
6
7
8
9
10
11
12
<table class="stackonmobile">
    <tr>
        <td class="stackonmobile">
        </td>
        <td class="stackonmobile">
        </td>
    </tr>
    <tr>
        <td class="hideonmobile" colspan="2">
        </td>
    </tr>
</table>

Same email, converted to a responsive layout, on iPhone When viewed in an email client or web browser, you’ll see a normal table with two columns, and a second row spanning both. When you hit the same page in a mobile browser, or view the email on an iOS or Android device with a small screen, you’ll get a single-column layout. Take a look at one of our emails to see what I’ve been talking about. We’ve used one set of HTML, but adapted the layout from a horizontal grid to a vertical one, perfect for the narrow confines of a mobile screen. Is it a bit hacky? Yes. Is it valid HTML and CSS? Technically, yes!

We’re gradually rolling out this new format to all the email we send. If you’re a Redfin user and we send you email, please let us know if you have suggestions or see bugs!

Thanks to:

  • Litmus (awesome browser testing and great articles)
  • Campaign Monitor (more great articles, and some awesome resources on compatibility)

Sadly, there is a disclaimer!

Of course, there are a few compatibility problems. IE and IE mobile (and by extension, the Windows Phone 7.x email client, which otherwise seems quite nice) apparently don’t know that you can apply display:block; to a table cell. As a result, they apply the styles erroneously or not at all (visit the sample in Internet Explorer to see an example of this in action). We get very few opens on Windows Phone, so we deemed it an acceptable risk, but we’re keeping an eye on stats and we are hoping to eventually find some solutions.

If you’ve got a lot of subscribers reading your email on Windows Phone, this probably isn’t the solution for you.