Organizing Web pages' structure and pages' interactions requires us to attend to the layout of page elements on the screen. Our first limitation is that of the users' screen--this is referred to as screen real estate, and, because screen resolution varies, the amount of screen real estate a given user may have can vary from 640 pixels wide by 480 pixels high (640x480) to 1024 pixels wide by 768 pixels high (1024x768), 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 best 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 ice designs to reflect their inflexibility at different display resolutions. Site designs that are somewhere in between--meaning they have some rigidity and some liquidity--are often referred to as flexible.
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 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.
While I personally strive to create designs that are fluid or at least flexible, 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 640x480. Currently 640x480 browsers make up <5% of the user population. For a long time the standard was 800x600. As of January 2006 somewhere around 20% of users still have screen resolutions at this size. Today the most common display resolution is 1024x768, accounting for >75% of all users. I still recommend that if one chooses a rigid design strategy one should restrict one's critical content to 800x600.
For more information, visit Browser News (http://www.upsdell.com/BrowserNews/stat_trends.htm)
If you are designing for display on a screen that is, say, 800x600 you must keep in mind that 800x600 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:
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.
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 in the last lesson I used 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.
While simplicity is a good idea, I wouldn't say that you can't have a lot of content or resources on your Web pages. I say that whatever content is ther should all serve your Web page'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%."