Designing for Mobile Browsers

At first, developers are inclined to create a single site for both desktop and mobile browsers. And by a “single site,” we don’t just mean that the pages are all deployed in a single Web application root of Microsoft Internet Information Services (IIS). Developers want to have their site functionality simply ported to mobile browsers. However, many pieces of functionality don’t translate well to the mobile Web environment. For example, data entry can be tedious for the user, especially for longer forms. The first step in developing your site for mobile devices is to determine what subset of the application functionality should be exposed to the user. The most successful mobile pages are those that provide information with minimum user input.

Tip

Mobile pages should limit the amount of input required by the user. Strive for maximum relevant information with the fewest key clicks. Entering data can be tedious on a small form factor, and networks for mobile devices are still relatively slow compared to wired devices, so performing postbacks and following links can be somewhat time consuming.

On their desktop browsers, users are accustomed to accessing rich cascading menus and having dynamic interactions with a large quantity of available selections. Mobile device users, however, are often connected to the Internet through relatively slow wireless connections on machines without powerful processors. Every postback and action requiring a round trip to the server can be painfully slow, so navigation should be simple and allow the user to get to the end page easily—not more than three clicks from the home page is a good rule of thumb. This mobile UI strategy is likely to be a significant shift from the desktop UI you currently present in your applications.

Many developers neglect the problems posed by slower connections when designing their pages. You should create pages that reduce the number of round trips to the server, but you don’t have to limit page content to the size of the screen. Most devices provide vertical scrolling keys to make page reading easier for the user.

Also be aware that many mobile browsers have strict limits on the amount of content that can be returned in a page, so you need to be reasonable when addressing a single page request and judicious about the amount of content to be displayed. If you exceed that content limit, the user will get an error message. Too little content frustrates the user with too many waiting periods, and too much content turns the page into a browser error.