Mobile web libraries – iUI

Mobile computing is evolving, we either catch up with it or remain out of this growing market. Mobile devices usually have small screens which most of the time makes it impossible to create a one size fits all design. I already wrote about WPtouch, and how simple it is to make a WordPress blog to be mobile-friendly. But we need something that can help us out in other scenarios, we don’t want to start developing for mobiles from scratch, because it is both hard and expensive(actually hard=n*expensive) so we want to avoid it.

I discovered a library called iUI, it’s a web framework for creating interactive iPhone and iPod compatible web UIs from simple html. It has a simple and intuitive HTML API, that most web developers can pick up instantly. The written HTML is utilized by a JavaScript/CSS engine, that turns it into an iPhone web application.

This is how a typical(partial) iUI markup looks like:

<div class="toolbar">
 
        <a id="backButton" class="button" href="#"></a>
        <a class="button" href="#searchForm">Search</a></div>
<ul id="home" title="Music">
	<li><a href="#artists">Artists</a></li>
	<li><a href="#settings">Settings</a></li>
	<li><a href="stats.gtpl">Stats</a></li>
	<li><a href="#themes">Theme Switcher</a></li>
	<li><a href="#iui-cache-panel">HTML5 WebApp Cache</a></li>
	<li><a href="http://code.google.com/p/iui/" target="_self">About</a></li>
	<li>Nothing</li>
</ul>
<ul id="artists" title="Artists">
	<li class="group">B</li>
	<li><a href="#TheBeatles">The Beatles</a></li>
	<li><a href="#BelleSebastian">Belle &amp; Sebastian</a></li>
	<li class="group">C</li>
	<li><a href="#CrowdedHouse">Crowded House</a></li>
	<li class="group">J</li>
	<li><a href="#JennyLewis">Jenny Lewis</a></li>
	<li><a href="#JohnMayer">John Mayer</a></li>
	<li class="group">Z</li>
	<li><a href="#Zero7">Zero 7</a></li>
</ul>

Full working example found here: http://iui.googlecode.com/hg/web-app/samples/music/music.html#_home

The concept is simple, there are pages, which can be ULs or DIVs, which contain elements, mostly A tags, which link to other pages by referring to them via link hash, for example: <a href=”#foo”>Go to foo page</a>. There is also support for iPhone-like form controls and AJAX form submissions and of course themes.

This video(direct download) explains most of the features and usages better than I can, and there is always the wiki and the source documentation.

This project is developing nice in general, however last time I checked the code it wasn’t too pretty it was really ugly at some parts and a flaw is that this only works in modern browsers and does not work under Opera Mobile, because it uses JavaScript timing functions which Opera Mobile does not support.

So if either clean code or Opera support is a requirement then iUI may not be an option, otherwise it is definably worth considering. Note that the project is relatively young so I think it will improve in the future, a new feature it is bringing is iPad support.

Tags: , , , ,

This entry was posted on Wednesday, June 16th, 2010 at 11:36 pm and is filed under Mobile web, web. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.