A List Apart

Switchy McLayout: An Adaptive Layout Technique

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?

Share this on

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:

Range of defined transitions

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.

About the Author

Marc van den Dobbelsteen is the owner of the Dutch company WebbForce and front-end architect at Rabobank. Besides his search for structure in designing and building the web, Marc strives to discover new frontiers, and shares his findings at his blog, Frontendarchitecture.org.

Can typography encourage long-form reading—not just scanning? What are the most exciting areas of cutting-edge experimentation in typographic technology and digital layout, and what new skills will we need to design tomorrow’s web content? Three experts—Mozilla’s Jen Simmons, publication design legend Roger Black, and ALA’s Jeffrey Zeldman—discuss typography and layout on today’s web: where we are now, and where we’re going.