Easy Responsive Design Tutorial in 7 Steps



27 thoughts on “Easy Responsive Design Tutorial in 7 Steps”

  1. Great post! Just wondering if the query for the class of hidden will work in gmail on android? I’ve done a few tests, and can never get display:none !important; to work…wondering if there are other workarounds?

  2. Mike,
    Gmail ignores most styles in the <head> of the email, including display: none. You could try hiding the element inline (which gmail will respect) and then showing it using media queries. That will create its own set of challenges, but it’s a start!

  3. Any news about Gmail client on Android / iPhone? All the above is pretty ok and a great article, but regarding Gmail client it doesn’t work as it doesn’t support media queries. Any workaround?

    Thanks.

  4. Arlequin Media Group,
    There’s no workaround for a media queries in Gmail. You can try to use a flexible design instead.

  5. Thanks for your answer. I knew. Problem is that all the articles related to responsive design clearly avoid talking about this issue that’s not minor. I myself spent countless hours trying to find workarounds and clear information but it seems that all the people advocating for responsiveness avoid explaining the problem on purpose.

  6. Arlequin Media Group,
    Yes, that’s probably true. From our perspective it seems like a well-known fact. Gmail’s lack of responsive design is well documented in other sections of our site and in the tips and tricks in our back end. It’s also discussed in other blogs on the site.

    We have a blog about what Gmail does and does not strip: https://www.emailonacid.com/blog/details/C13/gmail_web_app_allows_style

    Check out this blog on the value of responsive design here: https://www.emailonacid.com/blog/details/C4/is_responsive_design_really_effective

    Gmail only accounts for a small percentage of the market, and not all of those opens are on mobile. Some opens that are on mobile are through a native app, which will allow responsive styles. My point here is that responsive design is still very valuable, and we’ll just have to wait for Gmail to get with the times.

  7. Hi Geoff, is there a way to make alternating 2-column rows stack up the same way? In other words, let’s say I have a table with 3 rows, 2-columns. Here’s the code:

    ROW 1, LEFT COLUMNROW 1, RIGHT COLUMNROW 2, RIGHT COLUMNROW 2, LEFT COLUMNROW 3, LEFT COLUMNROW 3, RIGHT COLUMN

    On the desktop, it shows like this:

    ROW 1, LEFT COLUMN ROW 1, RIGHT COLUMN
    ROW 2, RIGHT COLUMN ROW 2, LEFT COLUMN
    ROW 3, LEFT COLUMN ROW 3, RIGHT COLUMN

    But on mobile, I want it to stack like this:

    ROW 1, LEFT COLUMN
    ROW 1, RIGHT COLUMN

    ROW 2, RIGHT COLUMN
    ROW 2, LEFT COLUMN

    ROW 3, LEFT COLUMN
    ROW 3, RIGHT COLUMN

    I can only stack the left column above the right column by assigning a class that floats left to each of the 2 TD tags per row. I’d like to also stack the right column above the left column. Hope this makes sense, thanks in advance!

  8. td {display: block} is no longer supported by Android for stacking table cells. table align is the only way to achieve this (if you want it to appear correctly on Android). I think email on acid is still using an earlier Android version, so folks using the display: block method will not catch it.

  9. Display:block on tds isn’t supported by Android 4.4 and higher. It’s best to work with floating tables instead. Which also gives you the opportunity of showing right content above the left on mobile by putting the code of the right table first.

  10. egrossbach, Marjolein Verheij, it’s not that simple. A few points to consider:

    1. With Android 5.0 already released, Android is replacing the native email app and directing users to the Gmail app which doesn’t support media queries all together. 4.3 and 4.4 doesn’t support stacking TDs because the doctype is stripped. Likewise with Samsung’s proprietary email app that acts like the native email app.

    2. Comparing the methods not considering compatibility, stacking TDs vs floating tables, stacking TDs is truly a superior method for simplicity. There are also methods for reverse stacking TDs that doesn’t involve reversing the content order and disrupting the actual flow, like with floating tables.

    3. Floating tables have spacing issues in Outlook 2007, 2010, and 2013. A workaround is to ghost table cells around the tables for Outlook only. This removes the spacing issues but then you’re unable to reverse stack content blocks by reversing the content order. To fix that, you then have to surround the tables with another div and declare display:table-header-group and display:table-footer-group in order to reverse stack, like with reverse stacking TDs.

    This 3rd method is probably the most compatible so far out of the 3, but requires a ton of work, and all because Android decided to strip the doctype which makes no sense. Overall, with Android shifting to the Gmail app, it simplifies the landscape a bit and with 4.3 and 4.4 adoption rates continuing to drop, the first method of stacking TDs may be the preferred method over time once again.

  11. A minor detail, but might a suggest a white-space: nowrap; in the footer links “unsubscribe”, “about” and perhaps a one or two column layout ther as well.

    I personally hurt my eyes when I see;
    ABO
    UT

  12. Jordan,

    Wow, well this is good to know, and very problematic. I imagine clients will be in disbelief when they learn emails can’t be responsive on Androids, assuming gmail will indeed become the default app.

    Do you by any chance have documentation on this? I searched and couldn’t find much on it.

    And Email On Acid really needs to publish something about this.

    I’ve been using the Outlook hack of ghosting table cells, haven’t had much call for reverse stacking.

    Curious how you reverse stack using TDs. I’ll try working with your method.

  13. egrossbach,
    Don’t worry, we plan on writing about this very soon! I really appreciate the feedback on this article. Too bad nothing in the email world stays the same for long.

  14. Hey egrossbach, not sure if there was any official announcements, but I recall reading about this in another email testing service’s forum. Also found a thread on AndroidCentral with people complaining about this:

    http://forums.androidcentral.com/google-nexus-5/461052-lollipop-killed-stock-email-app.html

    Regarding reverse stacking, you just have to wrap each aligned table in another div and fire display:table-header-group !important; and display:table-footer-group !important; to the divs in your media queries.

    Originally found the method here: http://labs.actionrocket.co/reverse-stack-using-table-align-based-methods

  15. egrossbach, just saw your latest reply. I don’t believe Android forces you to update to the latest OS, as the majority of people are still on 4.2.x.

    The thing with the Android ecosystem is the disconnect with software and hardware. While Google can release a new Android OS, it’s up to the device manufacturers and the carriers to decide if they’re willing to put in the time/effort/money to test and release the update to their devices.

    I’ve read that Samsung is already in the process of getting 5.0 ready for their devices all the way back to S4. That means S3 and below owners will not get the update. However, given that Samsung includes their own proprietary native email app, the force to the Gmail app in 5.0 probably doesn’t really matter anyways for Samsung owners. Good news is that Samsung’s marketshare is on the decline. Android really is a terrible mess, imho.

  16. Nice responsive email design tutorials, I am web designer at http://www.emailchopper.com I have already created some editable email templates.All these email templates has a wide range of stunning features like – responsive layout, drag & drop builder etc.

  17. I am just wondering, seems I do it backwards.
    I set my main CSS for mobile, then use MQ min width to cater for desktop. Sure, each site is different but I seem to end up with less in the MQ than yours.

    I will try it your way later to see.

Leave a Reply

Your email address will not be published. Required fields are marked *

Free Email Goodies