I frequently get asked, both by clients and by our mobile web design training attendees about how much scrolling is okay. The answer is that in general, scrolling is better than fetching another page. Consider the length of an address book.
But that answer doesn’t go far enough. There are technology limitations: some devices can only support a markup size of 10,000 bytes or so. And many pages would be perceived as being too slow if they had 30 links or 15 images.
And the user has to know that the content scrolls. Even if the device does have scrollbars, they are likely to go unnoticed as a cue. So you have to design your content for scrolling.
- Limit markup size to what the device can comfortably handle. This sounds obvious, but the “comfortably” bit is important, too. We’ve seen web sites that would render on a Motorola RAZR, but were so heavy that the device didn’t have any capacity to spare for moving the cursor in a timely fashion.
- Ensure users have a reason to scroll. Make the top part of your page/screen compelling. Avoid closure, false bottoms. Create expectations that more is below. This is especially important on landing pages.
- Provide accelerators for certain lists. Opera Mini uses left and right to page-scroll up and down in some modes. Openwave browsers support volume up and down for page scrolling. The iPhone Address Book provides letter shortcuts and handles the problem of the letter being too small by only using it to scroll to a spot, rather than filter. Some sites have within-page navigation.
- Reduce page length by:
- Using only key navigation links (maybe just Home) rather than a full set on every page.
- Providing the first few items of a topic area, like the first 5 comments, and linking to a full list of comments
- Only putting the spacing needed for touch users on touch devices
You can also make compelling user experiences without scrolling, but they will tend to be applications and have a lot of screen states.