December 27, 2006, 12:39 pm
Wide Right
by Henry Woodbury
Filed under: Web Interface Design
In the web coding world, “liquid” layout refers to the technique of setting column widths on a web page as percentages. This allows the interface to expand to fit the size of a user’s browser. Information Design Watch uses liquid layout.
The goal is to use all of the window real-estate possible for content while letting users retain control over presentation width. The problem with this goal is two-fold: First, users don’t necessarily want to resize their browsers as they link from one site to another. Second, with the increasing use of PDAs and wide-screen monitors, a liquid layout may be shrunk or expanded far out of the 800 to 1200 pixel range common to PC video-card configurations.
In this A List Apart article, Marc Van Den Dobbelsteen proposes an alternate solution: different style sheets for differently-sized screens. A simple JavaScript function detects the browser’s window width and loads a style sheet that resets the content layout appropriately. For example, a suite of three style sheets could be designed to handle very small windows (400px or less), a broad middle range (400 to 1024px), and very wide windows (1024 or greater).
This makes a lot of sense for Web sites known to have a PDA (or wide-screen) user base. However, like other stylesheet-switching techniques, implementation is the easy part. The challenges come before and after implementation — before, in increased design costs; and after, in the long-term maintenance of multiple stylesheets.
Comments
No comments yet.