Since the primary scrolling direction on mobile devices is vertical, this technique concerns avoiding "wide" elements -- elements whose horizontal dimension is large, and which may require "secondary scrolling" in the horizontal direction to view.
- Avoid tables. Tables are necessarily horizontal as well as vertical and are prone to be wider than the target device's display. Simple tables may often be rendered as lists. The text in lists may at least be wrapped and flowed into one column by a mobile device, whereas tables impose a possibly unnecessary side-by-side layout.
<table> <tr><td>Do</td><td>A deer, a female deer</td></tr> <tr><td>Re</td><Td>A drop of golden sun</td></tr> <tr><td>Mi</td><td>A name I call myself</td></tr> ... </table>
<ul> <li>Do: A deer, a female deer</li> <li>Re: A drop of golden sun</li> <li>Mi: A name I call myself</li> ... </ul>
- Resize images on the server to be no wider than the target device's display. Set image dimensions in the image tag.
<img src="..." height="80" width="120"/>
- Limit elements to 100% of containing element's width. When a potentially wide element is placed on a page, one mayset its width to 100% of the containing block's width. This may prevent the element from increasing the width of the containing block. This may be applied to images, for example, but note that it is preferable to resize an image to exactly the height and width that is appropriate for the target device. This technique may be useful in cases where server-side resizing is not practical
<img src="..." width="100%"/> ... <p style="width: 100%">...</p>
Back to BestPracticesList