Fixed Content

Problem

The normal behavior of content on a page is to go off the viewport as the user scrolls through. However, you may need to provide quick access to functions or information persistently through the entire page.

Solution

Present the content positioned fixed to the edges of the browser window, over the page, and assuring that it is visible through the entire page.

FIXED CONTENT allows us to provide quick access to functions that need to be present through the entire page, or alert the user of some important information. Given that, it is commonly used for designing web applications or to give a more native look to the interface.

A major drawback1 with this pattern is that it takes a considerable amount of space, which is already a limited asset on these devices. Besides of the already small height of the device, we have to account for the OS toolbar, the browser chrome, and a potential keyboard, all those contributing for reducing the effective the real estate of the page. This problem is even more prevalent when the device is oriented in landscape. Therefore, make sure that any FIXED CONTENT is absolutely essential in your website.

***

Web Design Patterns for Mobile Devices
dconstruct 2010, 04/2012
Web Design Patterns for Mobile Devices
Design Made in Germany magazine, 04/2012
Web Design Patterns for Mobile Devices
Paper web app, 04/2012
Web Design Patterns for Mobile Devices
Twitter page, 06/2012
  • Bottom Navigation in Designing Interfaces
  • Fixed Menu in Designing Mobile Interfaces

  1. Another downside is caused by a somehow buggy implementation of the position fixed on current mobile browsers. In some older browsers it simply just does not work, but it is especially problematic on the browsers that implement it poorly rather than those where it is just ignored. Thus, do not assume that your design will work, without carefully testing it. You can solve some of these problems through Javascript, though, by doing that you are adding complexity and it will probably still not work with some older browsers. Brad Frost discussed this problem more extensibily.