An Introduction to W3C's Mobile Web Best Practices: Free Sample and Demo

Scrolling

Problem:

• scrolling in general on a mobile device with a limited keyboard is a difficult operation; scrolling in both direction is very difficult;
• shifting the viewport in both directions can be very confusing, making the user feel lost;
• the scrollbars on two sides of the screen eat space on the limited screen estate

Solutions:

• avoid using images larger than the screen width of the mobile device,
• use a liquid layout or an elastic layout rather than a fixed layout: we've already seen that you shouldn't use HTML tables for layout, but in addition to this, do not use absolute measures in the style sheets (such as px, pt), but instead, rely on em and percentages,
• if you need to put a table with data, try to make it as narrow as possible, or even use a different way to present the data,
• prefer a linear layout to a multi-columns one.

Please proceed to the assignment associated with this chapter, where you'll be invited to put these solutions in practice.