Custom UI

I see a lot of interest in custom UI for iPad.   There are wonderful interactive books such as Alice and Im sure well see some very interesting interactive comics and graphic novels come out for the platform this Christmas.

Some brands have a certain graphic look and feel that is distinctive and they want to preserve that instead of the Apple ‘native’ look.   Other clients want a native looking app done in HTML5 delivered faster than an approval process would allow.

I recently developed an iPad app for an US based startup company.  The app gathers medical data at the scene of an emergency, and the designer came up with some excellent visual motifs, mixed in with traditional native UI elements.

Ive tended to develop custom UI in native Cocoa until this point, but the technology has been there for a while, as evidenced by apples own PastryKit.  Now there are several good frameworks like jQTouch, Sencha and jQueryMobile, but more importantly one can google for the grab-bag of techniques and examples that showcase the power of accelerated webkit animations.

iPad Demo

For a clickable early version of the app, open this link in Safari on iPad or Safari on Mac – iPad Demo

[ chrome on Linux will also work, for example, as it too is webkit under the hood ]

As you can see Ive implemented boolean [ ON | OFF ] slide toggle switches using an alpha mask and webkit transitions – pretty much any native UI is doable.

Impressions

I continue to enjoy the lisp-ness of Javascript.

Javascript + CSS + HTML divs + nice GPU accelerated animated transitions = superb prototyping environment.

The other win is that my code seems a _lot_ smaller than if I did this in Cocoa / Objective C.  I’m not knocking UIKit / iOS, the APIs are generally excellent.. but they are verbose in comparison.

The native look and feel and immediate response is achievable [ make sure you implement touchstart and don’t rely on the click event or your user will be waiting 250ms for the UI to respond… ]

Interesting times.

About these ads