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.
1 comment
Comments feed for this article
November 11, 2010 at 03:42
Eddie
Thank you for putting together this site and blog dedicated to native UI in HTML5. These are exciting times and as someone interested in building a business around the myriad of devices / platforms, there’s no doubt that the real winner is going to be HTML5 (unless one has infinite cash to spend on building and maintaining multiple versions of native apps) … I’ve been waiting a LONG time for SVG and SMIL, for example, to have its day in the sun. These devices are now finally powerful enough where they can render gorgeous SVG, SMIL, and move things around with CSS and so on. The great news is that not even the Kings and Queens (King Steve Jobs and Eric Schmidt for example) have a choice about HTML5 — because it comes out of the W3C and is put together by consortia (Steve Jobs doesn’t like this of course but the world has already grown weary of monopolists so sorry Steve, even you as a billionaire have to play with the other kids in the playground). What’s funny is that in the early 2000s both Adobe and Microsoft were pretending to be all buddy buddy while sending their representatives to conferences such as SVG Open in Vancouver (but in reality they didn’t want to see SVG succeed). Now, due to the awesome competition and thanks in large part to Google Android entering the fray, little boy blue Billy Gates and his pals at MSFT have to play nicely with W3 standards. Oh, how I wish we could bring back Curly from the 3 Stooges to give Ballmer and Adobe’s John Warnock the Curly wave with a “nyuk nyuk nyuk”! Cheers!!!!