Switchy McLayout: An Adaptive Layout Technique
by Marc van den Dobbelsteen
- Published in: Browsers, HTML and XHTML
- | Share this article »
CSS-based liquid layout has proven successful during the reign of 800-pixel to 1024-pixel screens, but as we use a wider range of devices to access the web, we need more powerful and flexible ways of managing layout. If we want to serve devices whose viewports range from 240 pixels to about 1680 pixels—and with resolution ranging from 72 to 150 pixels per inch—we need a new method.
What’s the problem with liquid layouts?
If you create a liquid layout optimized for a maximum width of 1024 pixels—limiting maximum line-lengths for your text to maintain readability— gaps will appear on a wider screens, and your carefully balanced layout will break. On a tiny-screened PDA, your text and images will be compressed into a crowded content sandwich. No designer wants that. If vector-based layouts were technically possible on a wide range of browsers, we could use a single generic layout that looked exactly the same on all screen sizes. Since that’s more fictional than feasible, we have to find another way.
So why don’t we just define layout and appearance for a series of screen-width ranges, then find a way to match these layouts with the user’s viewport size?
Switchy McLayout to the rescue
Switchy McLayout lets you define the dimensions, information richness, and appearance of your content objects for set ranges of screen sizes. A news site, for example, could have one layout and appearance for wide screens, one for medium-sized screens, and another for PDAs. Images could shrink or even disappear according to the screen size, columns could come and go as needed to maintain readability, and you can achieve a more efficient use of the available space for each screen size.
This example news page uses Switchy McLayout. For purposes of demonstration, we’ve defined seven screen-size ranges and given each range its own layout that makes effective use of the available space. CSS used in examples is for demonstration only.
Figure 1: The progressive states of a news item’s appearance.
The page’s degradable, unchanging markup for the page contains all the items shown in the “extra wide” layout. As the viewport size diminishes, various kinds of content are changed. It’s like peeling an onion: every time the screen shinks, a layer is removed, until only the essential parts remain. The ranges and corresponding appearance defined for this example are:
| Device | Screensize | Layout |
|---|---|---|
| PDA Vertical oriented | < 240 px |  |
| PDA Horizontal oriented | 240-320 px |  |
| Set top / TV | 320-640 px |  |
| Old CRT screen | 640-800 px |  |
| Common TFT screen | 800 – 1024 px |  |
| Wide screen | 1024 – 1280 px |  |
| Super-wide screen | > 1280 px |  |
Class switching
Now that we’ve defined a range of layouts, we have to detect the user’s actual screen size and activate the appropriate group of styles. We’ll use a style-switching method that’s dependent on the class of the body element.
JavaScript, our CSS assistant
To monitor the user’s actual screen size and switch classes on the body-element, we use a little unobtrusive JavaScript. Through the onresize event of the window object, we obtain the windows/screen size. A ternary operator selects the appropriate layout and class name, and this class is added through the DOM to the classes already residing on the body element. When JavaScript is not available, the layout degrades to an “old-school” liquid layout.
Note that different browsers use different event models. IE6, for example, fires the onresize event in real-time, while Firefox only fires the onresize event at the end of the actual resizing.
Progressive content compression
Our second example shows how Switchy McLayout can help us make more efficient use of available screen space on different devices. In its raw form, the markup is a simple definition list with four items. On wide screens, all items and headers will be shown as four columns in a row. As available space decreases, the columns will be shown as two rows of two columns, then as a horizontal tabbed panel, then as a vertical tabbed panel, and finally as four rows in one column with a reduced font size.
Figure 2: The various states of progressive content compression
Taking it further
We’ve used the screen size property as an input for class switching. If you used other triggers to switch styles, you could check for screen height, presence of a scrollbar, font size, mouse position, color depth, and so on—and change your page’s appearance accordingly.
In conclusion
The growing number of popular screen sizes and resolutions will challenge web designers to deliver their content in an appealing way for a wide range of devices. Switchy McLayout is a step toward a solution that meets this challenge.
Acknowledgments and alternatives
While the technique presented above was developed independently, many related techniques have been introduced elsewhere. Richard Rutter collects a series of such techniques at Clagnut, and Kevin Hale presents a technique that achieves a similar result using a slightly different method at Particletree. Andy Clarke and James Edwards’ pioneering “Invasion of the Body Switchers” helped popularize the use of body classes to alter layouts. 
- Illustration by Kevin Cornell
Learn More
Related Topics: Browsers, HTML and XHTML
About the Author
Marc van den Dobbelsteen is the owner of the Dutch company WebbForce and the lead front–end developer of the new, standards-compliant www.rabobank.nl. Besides building the web the right way, Marc strives to discover new frontiers, and shares his findings at his blog, Crossroads.
