Emerging technologies often go through a period of rapid change as innovators seek to exploit new possibilities. Alternative solutions to problems compete for mind- and market-share. Mobile user interface (UI) technology is in the midst of this evolutionary phase. Phones and tablets that use Apple’s iOS (iPhone, iPod Touch, and iPad), Google’s Android archictecture, Blackberry’s operating system, HP’s webOS, and Windows® Phone 7 mobile operating system all offer diverse UI design approaches.
Mobile web technology provides a more cost-effective way to develop applications that are usable on a variety of device platforms. With newly developed JavaScript libraries such as Dojo Mobile, jQuery Mobile, and Sencha Touch, mobile UI developers can “write once, run anywhere.” Developers don’t need to learn different frameworks for different platforms, or redevelop or port applications to each supported platform. Users will also benefit from the zero-install nature of web applications. They’ll always be using the latest version of the application, and won’t have to install updates from the online application store. Application deployers benefit by not having to worry about supporting users running on different versions of the same application.
However, designing quality mobile web applications has its own set of complications. First, mobile user interfaces are essentially a new paradigm for user interaction due to:
Second, because a web UI should run on any device regardless of the its size, form factor, or feature set, designers must consider more variables when compared to designing a traditional desktop web application.
This article explores considerations and best practices for designing mobile web UIs. Though there’s very little detail on implementation, the article occasionally references HTML5 and the Dojo Toolkit mobile UI components. By necessity, there is discussion of issues relevant for native mobile application design, but the main focus is on cross-platform design. Because of relative market share, emphasis is on the iOS, Android, and Blackberry user expectations.
Compactness can enable a device to be _used_just about anywhere, but it can also work against many aspects of _usability._A small screen limits the information that can be legibly displayed. While designing, text and images can quickly consume the limited screen space, causing a trade-off between content and user interactions.
martphones are small, and tablets are in the range of netbook to laptop size. Many vendors offer both types of devices in a variety of display sizes, as shown in Figure 1. Mobile web application designs must scale to handle the wide range of displays without appearing cramped at the low end or stretched at the high end.