How does Mailbox app render responsive HTML emails?

Edit: As of October 2013, Mailbox no longer features full support for media queries. It has been patchy and problematic for the past couple of months, Mailbox are apparently aware of this but there is no known upcoming fix. For the time being, sadly, Mailbox simply does not support responsive emails.

Mailbox.app, the popular mail app for iPhone, only supports one method of responsive HTML email development.

Previously, I used both of these methods interchangeably:

First method: using ‘align’ on tables

Second method: using “display: block” on <td>s

Here are the media queries:

The results in Mailbox show that only the first method actually works.

It’s also worth noting that because of the extra background on Mailbox.app, emails display within a narrower 612px width (on a Retina display; 306 on non-retina).

Comparison of how each client renders responsive email HTML
Comparison of how each client renders responsive email HTML

Published by

Nicole Merlin

I'm an HTML email designer and developer from Melbourne, Australia. I love email, design, typography, calligraphy and curling up with a book.

  • Colin

    Thanks for breaking this down. I sent a tweet to @mailbox to see if they plan on fixing this. So many of my emails come out all crazy-like!

  • Nicole

    No problemo Colin! Yes, there were a couple of mine that went out into the world looking preeeetty broken in Mailbox before I had time to figure this out.

  • Shaimoom Newaz

    Thanks for this insight. In all honesty, we are just starting to create responsive emails and I didn’t even think about the Mailbox app. This will be a helpful note for our team.

  • No worries Shaimoom! This also applies to the Sparrow mail app for iOS. There was never any real reason to favour one method over the other before, but now it’s good to know there is a safe method for all the new mail apps out there too.

  • Pingback: How does Sparrow on iPhone render responsive HTML emails?()

  • Pingback: How to fix extra space between tables in Outlook when tables are stacking in responsive emails()

  • Pingback: How to build a responsive email and avoid annoying Outlook issues | Email Wizardry()

  • Pingback: iOS email apps: highlights and data » STYLECampaign »()

  • Hi
    The align method dosn’t work in Outlook2010 and 13. But what you can do is make a around each and float left/right in your @media

  • Thanks for sharing Rasmus! I’ve found that the align method works if you have a bit of space in between the tables. I will try out your little ‘a’ trick 🙂

  • Pingback: Mobile Email Compatibility Guide: What Works Where? | E-mail Marketing Specialisten()

  • I have been using aligned tables for a while now but the last few tests I have run have stopped working with Mailbox App. Does anyone know if anything has changed recently?

    I checked the gmail account via the stock iPhone mail app and it works, and when I pull up old emails in Mailbox App they work but when I blast new tests to Mailbox app it shows full width email.

  • Hey mazurka! I just updated this post to reflect the answer which is that Mailbox has stopped supporting media queries for the time being. I think they had some kind of security issue that they fixed, but media query support was dropped. Sad times.

  • wow. I tweeted them about it and they assured me nothing has changed. very strange & disappointing.

  • HR

    Hi, Have you got an example of a 3 column to 1 column responsive layout tutorial?

  • Hi – apparently the fixed their app and now support responsive emails with their latest update.

  • I noticed your page’s ranking in google’s search results is very low.
    You are loosing a lot of traffic. You need high
    Page Rank backlinks to rank in top10. I know – buying them is too expensive.
    It’s better to own them. I know how to do that,
    just google it:
    Polswor’s Backlinks Source