Breaking tables for fun & profit: building responsive, mobile‑friendly email at Redfin

Depending 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.

This is a table-based, HTML email

This is a table-based, HTML email that we were sending a month ago.

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.

There’s some weird bits to that CSS, especially in the selectors we’re using to pick out .stackonmobile and .hideonmobileyou 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.

redfin mail old Breaking tables for fun & profit: building responsive, mobile‑friendly email at Redfin

This is the same HTML email shown earlier, adapted using the table-block technique.

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!

This technique has been applied to a select few live emails we’re currently testing, and 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:

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.

Discussion

  • lvmonkey

    thank you guys SO SO much for this great insight. me and my team are in the process of redesigning a client’s email marketing campaign towards responsive emails, and your insight has ehlped us immensely. thanks!

    • http://redfin.com/jobs/ Eric Gideon

      Glad this helped! Hope you were able to ship something awesome in the last 4 months (sorry about that). If you’ve got any followup questions, let me know here or on twitter: @egid.

      Also looks like I need to go back through and make some tweaks now that we’ve redesigned the devblog.

      • lvmonkey

        thanks, and interestingly enough, my first name is Gideon :)

  • ed

    I must be missing something because I’ve copied and tested your source and have not seen its responsiveness (iPhone mail).

    • http://redfin.com/jobs/ Eric Gideon

      Hi, ed, sorry for the super late reply; did you try the source code I linked to, not just the chunk in the blog post? http://f.cl.ly/items/0e1D3q2y0o0v0v2c0H3a/4_sample.html

      We moved away from that method for a few reasons, but it does work in iPhone mail – we sent thousands of working emails using that structure over a year or so before moving on!

  • Jay Griffin

    Pretty good template! I would make one suggestion and that being for Yahoo! add an inline margin-bottom: 1px; to paragraphs. Otherwise there would be no gap between paragraphs.