This is a good writeup. We've started doing the same thing for the startups we've been building, and funny enough, in almost the exact same way, using Zurb Foundation and everything.

We found that, as awesome as Zurb is, it doesn't go quite all the way with its mobile components. It's missing things like full-width padded lists (for fat fingers), and a few other touches. Which is why we just started building foundation-mobile as a plugin for Foundation to add the extra mobile-only interface elements. We have Zurb's support, but we only just started it a couple weeks ago. We're planning an initial release here in the next couple weeks.

I'm not sure I would classify this as a 'complex' webapp. Not to downplay the work that has gone on here, which is great, but when I think of a complex web app I think of one that has dozens or hundreds of screens, dozens or hundreds of dialogs, extensive use of user roles/permissions, etc.

Just used adioso for the first time. Then I read the post.

From my perspective, it looks cool and all, but the dates load extremely slow and you have to click the right arrow to pick your dates, rather than pop-up calendar, which they also use on a different part of the site and works out better.. Also, I wanted to fly to Vegas, it picked out my local airport and an 8 hour 1 stop trip to Vegas. By selecting an airport just 45 minutes farther from me, there are 4 hour flights to Vegas. But it didn't suggest those flights for me, it just took my location by default (from IP) and then shot out the 8 hour flights.

I don't know, I dont like the design. Too much fluff, not enough ease.

Thank you for the comprehensive writeup...even if it can be done, there is still a good amount of skill and knowledge required to pull it off...too often, non-designers underestimate the work and design considerations involved.

That said, I wonder if you are going too far in being responsive? The 1000px+ size, IMO, takes the concept of whitespace too far. For example, the third most important datapoint -- the arrival date, is located as far as possible from the two critical datapoints (price and departure date)...in the narrower versions of the site, the listings are, IMO, significantly easier to scan. I wonder if you (or rather, your users) wouldn't benefit from keeping the listings no wider than they are in iPad portrait?

The other choice, of course, is to just move Arrival Date to the left side, but that's a consideration not related to the responsive design.

Great post, Dan - really well written.

Personally I'm still conflicted about using so many different classes for different breakpoints, but I'm finding that the whole "No grid for < tablet portrait" isn't always the best solution.

Quick heads up, the responsive mixin is missing a bracket:

@include respond-to(small-mode) {

For anyone out there using Rock Hammer, here's that mixin converted to work with Malarkey's breakpoint controls (also with my own custom breakpoint sizing comments, feel free to remove):

https://gist.github.com/iamtyce/5778876

Wordpress's admin panel is totally responsive. It's quite well done and impressive. It's lovely to be able to fire it up on my phone and delete spam comments without pinching and zooming in on controls.

What's with all these CSS frameworks which serve one css file for everybody? Toolkits like GWT have had the sense to serve only what each environment needs, since 2004. If you are worried about mobile devices being able to handle things, how about NOT downloading things that they don't need?

Your CSS framework should include a precompiler that generates files for each platform. Then either the client or the server can decide the right file(s) to load.

This post illustrates that building a responsive website, while cheaper than building apps and easier than maintaining a separate mobile website, still involves quite a bit more work than a desktop-only site.

We're just about finished with a responsive redesign, although one of the owners doesn't understand why we're "shrinking the website" instead of building an app for her phone.

Can this approach (especially the nesting of grids in the table example) be taken with bootstrap as well? Wondering if anyone has any links to a similar post showing how to leverage bootstrap in a similar fashion.

Anyone have any idea if their landing page is some kind of template? I have seen it used before and would love to play around with it if it is available somewhere.

So I just tried out adioso on a desktop. It wasn't as responsive as I hoped.

Long answer short: No, you can't get a complex webapp resolved responsively with all its complexity on a mobile.

Two reasons for that:

1. The mobile browser (excluding the iPad/larger tablets) are yet to achieve the level or even meet standards, for that matter, where a really good developer could go an dive and into creating a complex webapp.

2. Even if point no. 1 is met by vendors (which is questionable) then also there is a significant difference between the way people interact by sitting on their desktops and on their mobiles when on the go.

That said, nice piece of work.

BTW we do a lot of this type of work too - i.e. trying to achieve a fairly complex webapp for all screens. We don't use Zurb or Bootstrap, rather have our own custom CSS framework built from ground up. I'm hoping for better support from the vendors soon given there is more competition. It surely will get better.

Cool desgin and interesting post, but it's really not worth much if it doesn't find the cheapest flights.

http://adioso.com/at/vienna-at-to-ams-june-21-return-june-25 http://web24.checkfelix.com/flugsuche/de/fluege.html?what=re...

Maybe it's not so good yet for european flights?