“Rules can be broken, but not ignored” – a truism that most assuredly applies to mobile web design. In this post I’m going to use the BlackBerry Management Center site as an example of how we revisited the mobile user experience of one of our websites, and how (I hope) you can learn from our reorientation of BlackBerry Management Center.

First, some background: BlackBerry Management Center is a web-based mobile device management service for small businesses. It has a website for use by both an administrator and device (handheld) user. Our requirement was to design a mobile version for BlackBerry smartphone users, targeting WebKit browsers, specifically BlackBerry® 6+ OS browsers on handhelds. The following are the design heuristics and the decisions we made.

Use a Separate Mobile Theme

We approached the mobile site as a theme separate from the website, making a conscious decision to not scrape the website and directly translate UI elements to fit them into a mobile screen. Instead, we created a new, more compact CSS for the layout. We opted for minimal JavaScript® and no third-party JavaScript libraries, which resulted in a smaller client-side download.

Make it Simpler

We knew from the beginning that the BlackBerry Management Center mobile site should have a simplified design and functionality. Starting from a blank slate, we asked what goals the user needs to achieve on a mobile device, and then designed the information architecture, thought through the interactions and UI elements, created the layout, and mapped the navigation. We removed menus, eliminated graphic elements, and cut most of the verbiage. With minimal JavaScript and no third-party libraries, the UI became simpler and the user did not have to download large JavaScript libraries over a cellular connection. Short and simple was our mantra here!

Limit the Number of Links

The rule of thumb is to limit links to 10 per page since too many links make it difficult to navigate and read content. We also placed links flushed left for a better experience by ensuring that the eye scans the page in two directions (top/down) only instead of four (top/down/left/right).

Optimize Navigation

To avoid zooming in every time a user wants to click on something, we made all fonts two points bigger than the website version of BlackBerry Management Center. Trying to click on tiny, barely-visible links is a real pain, so we also added extra padding for our links to make the clickable area greater.

Limit Scrolling to One Direction

Most users find it annoying to have to scroll in multiple directions on a page when on a desktop, and it’s easy to accidentally scroll the wrong way (horizontally or vertically) when using a touchscreen or a trackpad. We eliminated this hassle by fitting the content so that the user is limited to scrolling vertically whether in portrait or landscape mode on the mobile device.

Don’t Use Pop-Ups or Open New Windows

The website uses modals to display more detail or to display confirmations to the user. Pop-ups and new windows interfere with the browsing experience, so we got rid of this completely on the mobile version. Instead, we give user feedback by providing confirmation text inline.

Minimize the Use of Images

The BlackBerry Management Center website has a very rich UI with graphics, which means more processing and rendering that could be taxing to the system. A quick test of the mobile version versus the website (with minimal images and no pop-ups) showed a 60% performance improvement. This is significant since mobile devices have smaller bandwidth on cellular networks. We decided to leave the BlackBerry logo and eliminated images that served no added purpose other than to look pretty.

Provide the Option of Visiting the Standard Site

We decided against this option because switching from mobile to the full site would limit the UI on the phone. Unlike most sites, the BlackBerry Management Center device user experience is a flow from one state to the next as the user enters information about their device. There is also no value gained by switching to the full site from the mobile version because it already covers a majority of the functionality.

Use a Separate Domain or Subdomain

We did not register a separate domain for the mobile version. Once a mobile client is detected through its user agent, it is served the mobile version within the same domain. As mentioned above, the mobile version has full user functionality and the user would not need to switch to the full site.

Conclusion and Lessons Learned

From the beginning, we should have designed for the mobile device in parallel with the standard website. If we had the mobile version in mind from the get-go, the user experience would be more seamless and less jarring. Testing was quite a challenge, despite focusing mainly on BlackBerry browsers 6 and above. Creating a flow diagram and click stream helped during the design process; prioritizing content and deciding on what is essential proved to be an important exercise as well. Finally, a clean, semantic markup, along with separation of our content and presentation with CSS provided a solid foundation for a usable mobile site. Once the framework was set, we were off to a great start.

Good luck to you on your next mobile web design project! Let us know how it goes.

Further Reading

W3C Mobile Web Best Practices
Mobile Design and Development