Finding people while mobile

Posted in: Archive

As part of our innovation time, I thought it would be interesting to get one of our applications working on a mobile.  Not only would this give me the opportunity to try out some new technologies and develop for a different display device than we generally do from day to day.   It also gave me the chance to play with my new iPhone at work.

Our Person Finder application seemed the logical choice for use on a mobile as phone numbers and email addresses are both things you might need when you are out of the office.

I started by looking at the Safari development docs provided by Apple.  They had some good example applications which demonstrated some of the different things you could do, e.g. mark-up that allowed phone numbers and email addresses, when clicked, to launch the relevant iPhone functionality.  However, any development would have required lots of custom CSS and JavaScript.

Enter jQTouch.  This is a jQuery plugin for developing for mobile devices.  It comes bundled with two themes, the standard iPhone look and feel and a custom theme.  Very simple HTML and CSS classes are all you need to create a page that looks like a native iPhone application. Creating iPhone style animated transitions between pages is simply a matter of adding classes to the link or form tags. The default is slide for links and flip for forms.

[sourcecode language="html"]
<div id="home">
<div>
<h1>Person Finder</h1>
</div>
<form action="searchresults.php" method="get" id="searchform">
<ul class="rounded">
<li><input type="text" placeholder="Type a name or username here..." name="pgeneralsearch" id="pgeneralsearch" autocapitalize="off" autocorrect="off" autocomplete="off" /></li>
</ul>
</form>
</div>[/sourcecode]

Once I had got to grips with this plugin, creating the application was fairly straight forward.  I did have to make a slight tweak to the plugin as it didn't allow different animation effects to be added to forms and I wanted to change it to a fade effect.

It is far from a releasable application but it demonstrates that it is pretty simple to create functioning iPhone web applications.

http://www.vimeo.com/11899626

Posted in: Archive