Physical devices make application development messy. iPhones (including the iPad), Android phones, Zune players, Windows, Mac, and Linux machines all have their own development environments, support different programming languages, and run on many different hardware configurations.
Developing for the web, however, is quite different; the same site can function as an application across a very broad set of devices and platforms. Sure, there are limits, but slowly those constraints are dissolving and the two worlds of desktop and web are undoubtedly converging via the WebApp.
There are a couple of obvious constraints, such as needing an internet connection (although html5 storage helps with that) and developing workarounds for non web-standard integration, but with those comes a lot of strengths. For example, there is never a need to install updates at the user’s expense since updating the website will cause subsequent users to see the changes immediately. There’s also no need to download a dedicated application or copy it between machines; all that’s really necessary to ‘install’ an application is its URL.
WEBAPPS FOR PROTOTYPING
All of this adds up to a bright future for digital prototypes. Any modern device with a screen and a browser can immediately be commandeered for testing and exploration. It works great for one-to-one device applications, but can also be easily extended to other experimental forms by taking apart existing devices and rearranging, combining, and altering their components.
And if you’re worried about your applications feeling too much like a generic bookmark on the web, rest assured there are easy ways to make your WebApp feel like it’s on your desktop. Users can click on a desktop icon which loads a dedicated chromeless browser (a browser that opens a single URL and is void of any interface or decorations, such as a back button or window border; think one step further than Google’s Chrome OS) and feel like their opening up a local application (such as the PhoneGap approach).
But even without a dedicated chromeless browser, you can still try out interactive ideas using your desktop or mobile device web browser. Allowing a webapp to get access to the entire screen is a bit of challenge, but with a few tricks and meta tags you can get pretty close without much hassle.
Although this approach doesn’t allow for native hardware use (such as accelerometer data or using a device’s camera), it’s a great way to try out dynamic, interactive ideas in very little time. Dynamic graphical behaviors, multi-touch support, and location-based systems can all be created without the need for specialized browsers or data handling. Additionally, HTML5utils and libraries such as jQuery give more power to your webapps for manipulating elements and working with rich media such as video, audio, and computational graphics.
TRY IT OUT
The WebApp UI prototyping framework we put together consists of three parts:
- desktop viewers — You can try out your code directly on your device (it is, after all, a WebApp), but if you don’t have the device around or you want to use desktop debugging tools (such as FireBug), these little viewers can be super handy.
You can also try out the basic TeagueProtoJS template, and download the full TeagueProtoJS source code and examples to get started with your own WebApp UI prototypes!