A thought has been bouncing around in my head for a while now: prototyping in HTML, CSS, and JavaScript is all well and good for web sites and webapps. But what about native apps (iOS and Android)? Can you prototype them in HTML?
Obviously, there are things that HTML prototypes (and webapps too for that matter) can't do that native apps can. The browser on your smartphone or tablet just doesn't have access to all the capabilities of the device and the OS that native APIs provide (e.g., location data, accelerometer, system notifications and so on).
Aside from this though, is there any reason why we can't do this? If you use a responsive framework, layout is a cinch. You can even change your page layout depending on device orientation. And we now have things like off-screen menus and independently-scrolling sections.
But one place where native apps really shine and provide opportunities to delight is in the sphere of animation. Most webapps don't attempt the fancy stuff that some native apps do.
So I decided to do a little experiment. I picked an animation from a native iOS that I figured I should be able to replicate without too much difficulty, and tried recreating it in HTML, CSS, and JavaScript. The animation I chose is the one that the Tumblr app uses when you tap the new post button.
When you tap the button, an overlay appears over the current content, and six buttons (one for each type of post) come flying up from below the screen and bounce into position. Immediately after this, a "Nevermind" button slides up at the bottom of the screen. If you tap one of the buttons, the six buttons fly up off the top of the screen and are replaced by a photo selector, text entry area, or whatever. If you tap "Nevermind", the buttons fly off and the overlay fades out so you're back where you started.
I decided to just replicate the "Nevermind" action. (I didn't bother getting every last little detail right—I used numbers instead of icons for the buttons, the buttons themselves are a bit small, etc.)
I used Foundation for layout and Julian Shapiro's excellent velocity.js for animation. The result looks like this (try clicking New):
(In some mobile browsers, this doesn't display correctly. So you might want to open it in a new tab.)
And here's a video showing the original Tumblr animation, my version in a desktop browser, and my version in Mobile Safari:
I think it's pretty convincing. There's a "but" coming though…
And this is it: but there are limitations. For example, the overlay that the Tumblr animation adds also blurs the content that it covers. This is easy enough to do in CSS, and you can animate the blur using velocity.js. It looks great in a desktop browser, but in Mobile Safari, it makes the animation a bit clunky.
And this is a fairly simple animation. Other, more complex animations that require more processing power will most likely perform more poorly in mobile browsers.
So is this a viable approach? It depends what you are trying to do.
If you want to show people your prototype on the desktop (maybe in something like my iPhone viewer (code), then it works great. If you want to actually show it working on a smartphone, then you may run into performance issues, depending on what you're trying to achieve. (If you have a newer phone than mine, it may work better.)
I'll definitely be experimenting more to see what works and what doesn't.
If you want to poke around in the code, it's on GitHub.
And if this pushes your buttons (sorry), you should check out my upcoming workshops, which will cover this and oh my goodness so much more. If you're a UX designer and you want to learn how to make stuff like this, give it a look.