Skip to content

Prototyping User Interfaces via WebApps

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.

HTML5 AND JAVASCRIPT

We think HTML5 has a big part to play in bridging that gap.  By giving web applications more power (via javascript integration, new HTML tags, CSS styles, multi-touch support, and local storage — see the html5demos), developers can build new tools and interfaces with connectivity at their core.  And, unlike the Flash era we’re currently in, the future will provide more openness for development environments, code, and media without needing dedicated players and proprietary plug-ins.

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

After mocking-up a handful of webapps ourselves, we decided to create a basic HTML5/JavaScript framework for quickly getting interactive ideas off of the ground. With it, and just a bit of web know-how, you can build scalable webapps to prototype your ideas and test them on a wide range of web-enabled devices.

The WebApp UI prototyping framework we put together consists of three parts:

  • teagueproto.js — This is an aggregate javascript library that combines jQuery, multi-touch handlers, gps navigation, and HTML5 utils; all rolled into one simple call.
  • applications template — The template is the starting point that sets up some basic structure (javascript includes, static and dynamic code separation, and a loading screen) and allows you to immediately focus on developing interactive components.
  • 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.

As an example, we mocked-up the iPhone OS with TeagueProtoJS, allowing us to create a simplified HTML5/JavaScript version of the operating system all within a browser. Try out the prototype yourself in the browser, on an iPhone, and on an iPad.

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!

5 Comments

  1. I tried this on my android galaxy s in the standard browser and it works a treat thanks guys for the example its a great step towards intergrating apps across multiple platforms with out recoding.
    keep up the good work.

  2. i amdroid developer, it is great news for people like us

  3. Thanks for this one! Worked like a charm for an ui-prototype we made for a client presentation. They were pretty amazed of us when we already had an working example to show off!

    Many thanks again!
    /Erik Friberg

Leave a Reply

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

WordPress Anti-Spam by WP-SpamShield