Proof of concept ‘stacking’ responsive menu
Read below for the context, or just view the demo here.
I read a lengthy thread/discussion on Google+ the other day about the state of the web applications, specifically in relation to native apps on mobile devices. I had always taken it as a given that the open web would prevail over proprietary and device-specific technologies, and that it was just a matter of time before the web catches up, but this article kind of worried me, with plenty of well-respected members of the web community voicing concern of the lack of urgency in implementing features to bring the web on a par with native applications, and that in fact it may never catch up.
Anyway, this made me sad. I understand that there are technical limitations with certain device APIs not yet available to browsers, and certain features lacking the ubiquity or ease-of-use to make web-based applications viable, such as an efficient offline-storage implementation, but I still think with regard to UI there really isn’t anything stopping web-based solutions being on a par with native implementations. When I say this, I’m really talking about responsive design as opposed to web technologies in a downloadable native wrapper. I have said before that there is a lack of full-featured, dynamic, responsive sites and we haven’t really seen RWD achieve anything close to it’s potential.
Demo it or it didn’t happen
So, I wanted to see how easy it would be to recreate a native app interaction – specifically the ‘browser tab’ menu from Chrome for iOS. I like the Chrome app, it has a slick interface with nice transitions and makes the most of a gesture-based OS.
This isn’t really a ‘navigation’ pattern, but this is the kind of thing I think would work well on smaller sites, or on single page apps with perhaps a small number of top-level pages. The tab/section switching could be hooked up to some AJAX to create a more native app-y feel. Needs some pushState, history management as well, but it is just a DEMO! Anyway, pretty happy how it turned out for such little work, could easily see myself using this in a project in the future.
Note – “Demo it or it didn’t happen” is from the footer of CodePen, not sure if that’s where it was originally from though…