Page Structure and Layout

Designing for Screen Real Estate: Fluid, Rigid, or Flexible?

To review, our 6-stage Web design process looks like this:

  1. Define the Project
  2. Develop Site Structure & Organize Information
  3. Develop Page Structure & Organize Interactions
  4. Design Graphic User Interface
  5. Build Web Site
  6. Produce & Publish Web Site

In the previous lesson, we talked about how the content of a Web site is organized into individual Web pages listed under topics all linked together by information structure. Your site may consist of information structures that are hierarchical, linear, or web-like. Now it's time to look at the organization of the individual pages, and how users interact with common features of those pages (for instance, navigation systems).

This lesson focuses on Stage 3, Develop Page Structure & Organize Interactions by looking at several key components of the layout of web pages in a site. We begin by considering a technical detail of web page presentation, screen real estate..

Screen Real Estate and Resolution

Of the many limitations web designers must deal with screen real estate should be completely understood. Screen real estate refers to the space available to design in. This could be an arbitrary box, but that box might vary depending on the size and resolution of users' computer display. Screen resolution varies from computer to computer, though it can be predicted in part by the age of the computer. Newer computers typically provide the standard screen resolution or higher. Older computers may have much lower resolutions.

The amount of screen real estate a given user may have can vary from 800 pixels wide by 600 pixels high (800x600) to 1024 pixels wide by 768 pixels high (1024x768), to 1400 pixels wide by 1050 pixels high, and beyond. Here are some examples of users I know and their screen resolutions:

Three different users, three different resolutions. Yet they should all be able to get info off your site quickly and easily. How do we achieve this? The first answer is liquidity. Web site designs can be liquid (also referred to as fluid), meaning the design and layout elements stretch and shrink to fit the user's display. Sites with fixed height and width are often referred to as rigid, or fixed designs to reflect their inflexibility at different display resolutions.

One very real problem with fully fluid designs is that on high-resolution screens text spreads too far horizontally. There's a reason why books limit the number of characters to about 50 per line, and its not just to fit on those pages! It turns out that it's easier on the eyes to read rather reasonably short lines. Fluid designs do not take this into consideration, and until CSS is able to size fonts by percentage this will remain a weakness of fluid designs.

A 100% fluid design on a screen resolution of 800x600. Just the right size for reading.
A 100% fluid design on a screen resolution of 1400x1050. Way too long to be readable

On the other hand...

This site is a rigid design, and was obviously made for 1024x768 resolution, which is just right for rigid designs. Yet notice that you can start to see problems when you have displays that are lower or higher than 1024x768.

So between these two options, which should you choose? I recommend flexible or elastic designs. These provide some rigidity--perhaps with respect to line length--and some liquidity--perhaps with respect to text resizing or a maximum width that disallows horizontal scrolling.

While I aim to create flexible designs most of the time to ensure the proper line length for text content, there are times when client demands require a rigid design. Rigid designs do have some clear advantages, the main one being that they allow for more precise designs, and provide more flexibility and precision to the graphic designer, often producing more visually appealing Web sites. In such cases, the Web design standard is to work toward the current dominant user resolution. Just a few years ago the dominant user resolution was 800x600. Today the most common display resolution is 1024x768, but that is changing rapidly as users get higher-resolution displays.

For more information, visit Browser News (http://www.upsdell.com/BrowserNews/stat_trends.htm)

Graphic "Safe Areas"

Though 1024x768 seems a safe starting point, keep in mind that 1024x768 pixels is the resolution for the entire screen--the actual amount of screen space that your Web design must fit into is considerably less. Here are some estimates of how much actual screen space you have available for your Web design:

Graphic "safe area" dimensions for layouts designed for 1024 X 768 screens
Maximum width = 980 pixels
Maximum height = 600 pixels (visible without scrolling)

Rigid designs that are created larger than the current dominant user resolution look weak and poorly designed. More importantly they inconvenience and frustrate users, as they must scroll horizontally as well as vertically in order to view all information on a given page. More often than not users with screen resolutions lower than the design resolution will simply not scroll, and consequently miss out on important information or features of the Web site.

King Content

Fluididty, flexibility, and rigidity of designs is a good concept to keep in mind as we begin to think about layout. But we should also concern ourselves with how we utilize the screen real estate that is there. Do you remember the phrase, "content is king"? From a usability standpoint most of your page should be used for content that is of most relevance to the intended audience. Generally speaking, simplicity wins over complexity. Google is a good example of "just enough" content for their purpose. It exemplifies simplicity, and the use of white space emphasizes that simplicity while highlighting the functionality of the Web site by directing users to the tool(s) they need to accomplish their task.

All content should serve your Web site's specific purpose and maximize the screen real estate appropriately. Usability guru Jakob Nielson says that, "content should account for at least half of a page's design, and preferably closer to 80%."