Nothing Insightful

Interesting jQuery Mobile Design Choices

Following major announcements from Sencha Touch and jQTouch, the jQuery team has piped up: announcing jQuery Mobile. How the jQuery Mobile project differs from projects like jQTouch is the way in which it aims support a range of devices. This can only be achieved by making use of a unified design approach.

jQuery Mobile is faced with an exceptionally difficult task. jQuery Mobile theme design must complement a range of operating systems including iOS, Android, webOS, Symbian, Windows Mobile, Blackberry and more.

Over the years, Apple has introduced and perfected a range of design and usability conventions for the handheld device. It has always felt like the competition has been clamoring to catch up. Libraries like Sencha Touch and jQTouch piggy-back off the success of the iOS interface. If jQuery Mobile is to set itself apart from other libraries, and appear as native as possible across a range of devices, it must abandon some of the best-practice examples that Apple and others have already established.

Below is a comparison between jQMobile and iOS back buttons. I think the iOS back button is an excellent motif, where the tapering of the left hand side represents the direction this button will take you in. Without that, you need some kind of directional arrow. Your back button just grew 31px, and now reminds you of the early 00’s.

Rounded as Usual

I’ve been fairly critical of jQuery UI themes in the past. Points I made about the “goofyness” of the themes were in fact well received by the jQuery UI team and lead to some changes in ThemeRoller. A lot of the problems stemmed from excessive rounding, vibrant colour choices and dated gradients. With jQMobile, the rounding of pretty much every element remains unchanged. A combination of excessive rounding and the “abandoning Apple conventions” problem lead to the following example:

What this screenshot means to me is that if I want a ‘Back’ or a ‘Cancel’ button at the same time as a ‘Save’ button, (preserving padding and readability) I can only spare four characters for a title. That’s right. Four. Characters.

Don’t get me wrong, the majority of elements look big and clickable and enticing. It’s also good to see the design team toning down their colour choices to the colour-of-now: desaturated blue. jQuery and jQuery UI have revolutionised design and development for me personally, and have changed the way we do things at work. If jQMobile can iron out some of the UI teething problems, hopefully it can do the same for universal app development.

PS. For the love of god, please tone down the rounding. Everyone knows it reduces your perceived hit target. And it looks cheap.