Mobile


Planning for jQuery Mobile

 

The primary focus of this effort is to design a cross-platform mobile UI system for jQuery. That being said, we believe that a shared design language and underlying code across all devices -- desktop, tablet, smartphone -- is going to result in a stronger design system and more maintainable development approach. Our initial explorations consider all three major form factors. Instead of simply tweaking the existing jQuery UI widgets to work on mobile, we're using this opportunity to take a step back and take a fresh look at what jQuery UI could evolve into in the future. Please consider these to be early future-state concepts that may change significantly over the coming weeks and do not represent a specific release. Feel free to let us know what you think in the comments.

 

Initial design explorations - July 21, 2010

Below is a set of proposed mobile widgets and layouts followed by a few samples of specific elements that may be a bit different on a tablet or desktop device. As a proof of concept, we've taken the new UI elements and shown how they could be assembled to build an email app appropriate for each class of device. You can see that there is more in common than differences and most of the adjustments have to do with optimizing screen real estate. That being said, a handful of widgets will have different designs and interactions -- for example, we're proposing a spinner design that uses a thumbwheel-like design for a touch device vs. traditional up/down arrows on a desktop. The designs cover the following topics:

 

 

Refined designs - July 22, 2010

We made some design tweaks based on feedback:

 

 

 

To-do in the next iteration

 

 

 

Download the Illustrator source file 

mobile-ui-22jul2010.ai (requires Adobe CS5) 

 

 

 

 

 

 

 

 

 

 

And finally, an example of how these same theme styles could potentially be applied to a corporate website. Now that the themes have more levers, it's possible to make a site that is workable with ThemeRoller:

 

 

ThemeRoller Impact

To make these designs work with ThemeRoller, we'd need to more than double the number of levers to give it enough visual texture to build complete UIs. The current ThemeRoller has just one header + content block + button (with states), while these designs use two of these lever sets (black + light gray) plus an accent button (blue) and uses lots of new CSS3 styling with text and box shadow so we will need to expand ThemeRoller  to support a more robust design system. In addition, we should add levers for a pressed (down) state, a body/base page content style, a secondary content style for things like striped table rows among others to make ThemeRoller really comprehensive. Once the designs are in good shape, one task we need to do is catalog the proposed ThemeRoller additions and migration path.

 

Visual design best practice research

The goal is develop a mobile-friendly design system that is ThemeRoller-ready and incorporates best practices gleaned from all mobile platforms instead of being an exact copy of a particular OS. 
These are screenshots of many of the popular mobile OS's for review: