Linearized Layout

Problem

On smaller devices with narrow screens, more complex designs with multiple columns do not fit perfectly. In most cases you end up with a scaled-down page that is unreadable.

Solution

Linearize the content, by stacking all blocks of information on top of each other, spanning the width of the screen.

Layouts with multiple columns are a common pattern on web design. However, they do not work properly on devices with narrow viewports. When this type of websites are accessed on these devices, browsers will zoom out the page until it fits on the width of the screen; or they will add horizontal scrolling. Both alternatives are far from satisfying. Column layouts should be optimized for mobile viewing. Therefore, you should design your mobile site by assembling the page vertically and by stacking each page section on top of each other, which is already the default behavior of a page when no style is defined.

Because we cannot foresee the size and resolution of the devices that will access our website, blocks with fixed widths are not a good practice. The LINEARIZED LAYOUT should have a fluid layout that adapts to the width of the browser whatever is its effective size.

This pattern is also a requirement for many of the other patterns proposed, particularly the VERTICAL LIST, i.e., if you want to use it you will invariably need to linearize the content.

An alternative approach the organization of content on a page is the GRID LAYOUT pattern.

***

Web Design Patterns for Mobile Devices
United Pixelworkers, 04/2012
Web Design Patterns for Mobile Devices
Colly, 04/2012
Web Design Patterns for Mobile Devices
The Shape of Book Design, 07/2012
  • Vertical Stack in Designing Interfaces