Hybrid Coding redux – raising the bar

The Hybrid Coding approach as discussed earlier is a fluid concept by definition a hybrid is a refined mix of styles, it is in a state of flux and moves with this industry.  The “mobile revolution” aka natural progression for email, is opening the doors for very advanced dev work. We have seen some great innovation recently, like HTML 5 video, CSS games, interactive carousels and more.

Hybrid Coding as a theory, is a great way to lock down the lowest common denominator of an email in order to push further, just like we have always done – only this time it raises the bar for what “lowest common denominator” means for mobile email. Currently, we tend to default to the desktop version if media queries are ignored, which is sensible, but it doesn’t have to be that way. This means we can have the scenario where mobile optimisation in all devices, such as “stacking in Gmail app” is a minimum. It’s a brave new mobile email world, people. Let’s keep pushing the standard up.

I have been requested to illustrate how stacking may work, in a more “real world” type context. Essentially to “bring the concept to the coalface” I have no idea what that really means, but apparently it’s legit jargon, as certified by our new intern/designer/in-house blogging consultant, Poppy*.

So here we go: show me the code.

This can be expanded upon to be 3 columns, but certainly wouldn’t recommend more (!). There are some extra clever ways to manage how these layouts display in more co-operative environments, by adding in media queries where we know we can use them. It’s like a sort of “reverse graceful degradation” even though that doesn’t make any sense. Start with bare bones and build up as if you can’t go high enough. Build and test first without media queries then add them in as the gloss to give the polished look to your email. After that, go down the pub and wonder just when will Gmail have style?

*Poppy is a Dalmatian

  • http://www.brianleegraves.com Brian Graves

    “reverse graceful degradation” aka “progressive enhancement”? :)

  • Mike Ragan

    Hi Brian – exactly! I was meaning to add a footnote on this, mainly I just wanted to avoid “bottom up approach” as a phrase…

  • Manos

    I am not entirely sure that this will render in yahoo.

  • Mike Ragan

    Hi Manos – yeah that’s always a possibility as things are ever changing and dependant upon rendering guidelines (e.g. my personal preference is ‘to the left’ for hotmail/outlook & Yahoo, but others will disagree!) There are a couple of fixes that can be applied and will put that in the next revision, or maybe a whole other short blog post. We have a few different ways of dealing with Yahoo!

  • Manos

    Excellent Mike,

    I am looking forward to that. This approach seems really interesting. Keep them coming ^^

  • http://www.unfunked.org/ Colin Richardson

    Why is all the content within each item 100% width tables rather than table rows? Is this some sort of trickery to fix X in Y?

  • Jaina

    Outlook.com removes all comments from within conditional comments, this going to be an issue with this approach?

  • Mike Ragan

    Hi Colin – no trickery! Thats just how I code emails; so [100%] tables stacked on top of each other vs one big table with a load of rows. There are a few reasons for this, but number one is that it makes the code easier to manipulate and to read at code level (e.g. when non HTML specialists are setting an email up in a ESP) without breaking the email. It’s a “hand coding” trait, but both ways work just fine :)

  • Mike Ragan

    Hi Jaina – haha, yeah isn’t it great when things like this happen?! Actually, it is fine and doesn’t affect it because we can still add for MS Outlook, we just cant hide exclusively from MS Outlook (using cond statement only).

    So you can still add the “fake structure” it will be read by MS Outlook and if it is read or ignored by anywhere else it doesn’t matter (mercifully!) its just wrapping tables and ghosting columns after all.

    If you are hiding stuff from MSO you can use “MSO-hide:all;” but it doesn’t work in all versions, so finding a clean way to hide from all MSO without impacting .com could be a challenge…

  • Jaina

    If it’s not Outlook keeping us on our toes, it’s Gmail. Go figure, huh!

    I always try and combine “mso-hide:all;” with a few other CSS attributes to make it a bit more sturdy. But yeah, even that’s a bit mystical at times.

  • http://tmorrisonphoto.com Tyler Morrison

    Beautiful work! This solves / simplifies a few of the issues I’ve had with creating consistent “padding” across all clients. I also love how this solves the Gmail App legibility issues that come with Antwort. I was able to use a min-width declaration to prevent Gmail from killing my layout, but it forced a non-mobile look into the smartphone app that is not desirable.

    I ran your code (as is) through Litmus and noticed a few quirks that I noticed…
    – The conditional tags that wrap your tables with width of 320px are missing any “valign” declarations. This caused them to not line-up in Outlook ’07 & ’10 but was an easy fix.
    – The horizontal centering on the main holder element seems to be spotty. On Android 2.3 & 4.2, the main columns were getting pushed to the right edge; however, on Apple Mail and Thunderbird, the layout was snapping to the left edge.

    That said, I definitely plan on integrating this into my current work to try and achieve a better layout for the Gmail app.

  • Mike Ragan

    Hi Tyler – Thanks for your comments! I’ve been a little bit shy about putting out a full template all set and ready-for-send so to speak, so you will find little errors in this beta code – but it sounds like you can solve them with a bit of refinement! Good luck & thanks again for the kind words.

  • Pingback: Can you just make it responsive? | #ActionRocketLabs

  • Pingback: Reverse stacking in the Gmail App | #ActionRocketLabs

  • Pingback: why does the Gmail app on iPhone ignore media queries? - DexPage

  • Jackson Sandland

    How does one adapt this for 3 columns? Great tutorial!

  • Pingback: why does the Gmail app on iPhone ignore media queries? - gmail