Iterative Design: The Power of Cascading Style Sheets

by Jared M. Spool

Sheets for Prototyping is an essential tool for designers. The ability to take a vision, quickly mock it up, and present it for critique and evaluation is critical to developing quality, usable designs.

Prototypes are most valuable when teams can iterate quickly. Taking an idea, trying it out, discovering flaws, modifying the design, and trying it out again is the essence of an iterative approach to design.

Slowing Down the Design Process

If designs take too long to prototype and modify, then the prototyping tool quickly loses its value. The key to successful prototyping is extremely fast iterations.

Most of today’s prototyping tools evolved to help with the control and flow of an application. Designers can quickly lay out buttons and other elements, allowing users and team members to quickly get an idea of how the application will work.

However, web page prototypes have always presented a challenge. Unlike software application design, most web designs have a very heavy content component. On most pages, even those of web-based applications, the control and flow of the design plays a second fiddle to the content.

Reformatting content involves changes to layout, chunking, and other display qualities. While some designers can produce clever prototypes using Microsoft Word or Quark’s QuarkXPress, these tools can be difficult to learn and hard to manipulate quickly.

CSS to the Rescue

This is why we’ve recently gotten very excited about Cascading Style Sheets.

Cascading Style Sheets were originally created to give designers flexibility across multiple browser platforms, including text-only browsers and portable devices. They allow the designer to separate the description of the layout from the content, thereby giving them flexibility to display an appropriate layout to take advantage a given browser or technology’s strengths.

Almost by accident, CSS turns out to be a tremendously valuable prototyping tool. It allows for very fast design changes of both the content and the control and flow of a page, giving the design team incredible power during the iterative-design stages of development.

Walking through the Zen Garden

If you’ve never really been exposed to the power of CSS, the best place to see how it can work is to visit http://csszengarden.com. The CSS Zen Garden is a “demonstration of what can be accomplished visually through CSS-based design.”

Clicking on one of the dozens of available designs on the site instantly transforms the page into a completely different look. Fonts, layout, images, and striking backgrounds all rearrange to make the exact same content look dramatically different.

It is this ability to quickly reorganize the content that gives CSS its power as a prototyping tool. Designers can quickly mock up radically different designs, trying out one idea after another, until they get a subset they like.

Then, they can show the team the design and put it in front of users. Because the team can apply the style sheets to live pages, the team can quickly get feedback on how the site feels and how effective it is. And with quick changes to the style sheet file, pages that reference that file automatically change, making iterations across large content repositories fast and effective.

Starting with CSS

Both ESPN.com and Wired.com have been moving to CSS implementations. [Editor’s note: we’ve done so too with UIConf.com.] However, you don’t have to convert your entire site to take advantage of the technology.

As we wrote in The Quiet Death of the Major Relaunch, designers don’t have to redesign the entire site with CSS to take advantage of it. Starting with just a few pages is a better strategy, getting everyone on the team accustomed to the technology in small bursts.

However, to use CSS as a prototyping tool, the final design doesn’t have to be implemented with it. Even if the end users never see the CSS version, the team can still reap advantages by saving time making changes in the layout and display of the pages.

As we look at sites, we’re seeing that the teams that are using CSS as a base are producing some excellent designs that really please users. Having CSS as a prototyping platform really helps the team achieve that goal.

Published here on September 22, 2005.