First Things First: Consider the Context

There are two big reasons why the web is just a fundamentally different experience than print, for both designers and users. First, the context of the user experience is completely different and leads to a different set of design considerations. In most cases, people interact with print directly, meaning they can hold the printed piece in their hands. Direct physical contact changes everything, so designers must consider size, weight, materials, and many other factors before they get too deep into the creative process. Viewing web content is a much less physical experience; even though we use our hands to operate navigational controls, we don't actually experience touch in the same way we do with print. So with web design, that whole set of print-specific considerations disappears-- there is no texture, weight, or thickness to a web page, not to mention smell (print designers, you know you love the smell of a freshly printed poster). Instead, the context is now all about screens. Though they come in many different sizes and shapes, screens have a much more limited range of display options than paper. What a relief! But they also serve as somewhat of a barrier between the user and the content. Design has to take this distance into account, making sure to remember the web context so that it doesn't introduce further barriers of its own.

Below is an image that shows all the various screen resolutions that users could potentially have. Depending on your goals, it's not always necessary to design to the lowest common denominator. Sometimes it's useful to consider the industry for which you're designing. For example, the lowest common screen resolution is likely to be higher among technology companies than retail consumer product companies. For this reason, I often recommend making sure that the design is functional within the 1024 x 768 resolution, which is wide enough to allow for a comfortable horizontal room but realistically account for the vertical limitations of many widescreen displays, especially those of notebook computers. As an example, I've also included below an image of how the New York Times homepage fits within a 1024 x 768 resolution.

The other significant difference between print and web design is change. Effective websites are always changing, expanding and contracting with their content on a regular basis. Because of this, it is virtually impossible to control things like the alignment of various elements. The designer establishes rules (things like fonts, styles, colors, background and other graphics, padding and spacing, etc.) that future content must "obey," but those rules don't determine the way two different kinds of content align in a layout. Each individual piece of content may grow or shrink every time it's updated, which means that where its top or bottom line up could be different each time as well.

Below is an image of the table of contents page for an issue of Communication Arts magazine. I've highlighted the "Columns" listing in red to point out how it adheres to a perfect and evenly spaced grid. The layout designer has the luxury of designing in this way because the information listed in that portion of the page, specifically the titles and descriptions, will never change. Once it's printed, it's there for good.



On the other hand, take a look at the following image, which shows how the New York Times website homepage changed over just a matter of hours. Notice that elements shift placement as content expands and contracts. The overall design is maintained by adhering to a particular palette of colors, graphics and styles. Still, no one can guarantee that the bottom line of one story will always align with the bottom edge of an advertisement, for example. (Click the image to view the full size version.)