Fixed-width solutions require a thorough examination of your users and their possible systems. There are several options and each requires a tradeoff: designing for the lowest common denominator, designing for the majority of users, designing for high-level machines and users, or designing for a known user base (e.g., an intranet).
Designing for the lowest common denominator is the one way to be sure that roughly 99 percent of all users can use your site.
This requires developing a screen layout that will print effectively without clipping and without requiring users to adjust their print settings (thus no more than 520 pixels wide); will work on low-resolution monitors (e.g., 640 x 480 pixels) with low color depth (e.g., 8 bit): and supports text-only browsing.
If this is your target audience, then there are several constraints you’ll want to follow (it’s not as simple as developing screens that fit within a 640 x 480 design space). The minimum adjusted requirements that need to be made when using a fixed-width solution geared toward machines at specified resolutions.
You’ll note that the recommended sizes are significantly smaller than the actual screen size. This is due to the browser requiring a certain amount of the page width within which the actual web site is displayed.
This percentage varies from browser to browser and across platforms. This means that when choosing 640 x 480 resolution as your target width, you’ll need to make sure your page is sufficiently smaller than 640 x 480 pixels.
Thus, 520 x 295 pixels is a requirement that we often use (the following paragraph elaborates on the rationale between these numbers).
While 640 x 480 screens are most likely a small percentage of new monitor sales, a considerable number of people still use them. Additionally, some people with high-resolution monitors set them to lower-resolution settings to ease reading and legibility in their day-to-day work.
Making Fixed Width Work
A common complaint when developing fixed-width layouts for the lowest common denominator comes from users with high-end machines who look at the page and complain that there is too much additional space surrounding the page.
First, center the site. This won’t work if you need to depend on alignment of foreground and background images. However, it guarantees that the page will be presented in the center of the browser window and tends to resolve the complaint of only using a small amount of screen space on the left-hand side of the screen. Second, use a background image as a decorative solution on the right.
This may present bandwidth problems, so if you use a large background image to do this, you’ll want to be sure that it has a minimal palette and is graphically simple. One way to do this is to use low resolution graphical elements in the right-hand margin.
There are some things to remember when using a fixed-width solution. The lowest common denominator fixed-width size to use is 520 pixels wide. This will work for printing and on 640 x 480 monitors.
Some combinations of printers, printer settings, browsers, and operating systems will not work with pages beyond 520 pixels in width. Anything above this may be cut off.
Thus, if it is important that your pages are printable for all your customers, you may want to consider 520 pixels as a maximum width or provide an alternate means for them to get printed information from your web site.
If printing isn’t a concern, then the next width you need to worry about is that required by users who are running machines with a resolution of 640 x 480 pixels. To leave plenty of horizontal space for margins, windows, scroll bars, and window borders, we use a maximum width of 595 pixels.
New browsers seem to be using more and more of the available horizontal space. You never can tell when a new browser will use those 10 pixels you are relying on. If you plan on having your web site available for a long period of time and want to do minimum maintenance, you may want to plan a little extra buffer zone for future browser modifications.
If you know your user base very well (e.g., as you would on an intranet), or are willing to dismiss a certain percentage of users (e.g., an interactive art exhibition may choose to reduce potential viewers to gain additional screen real estate), the same logic as above can be applied.
You may be able to rely on a wider design, but you should still determine the exact width will work for your target platforms. Discover your user base, understand the limitations of their systems, and thoroughly test any implementation on a variety of browsers and operating systems.
Another solution is to use both fixed-width and variable-width page layouts. By using a combination of the two, you can set a minimum width for particular areas of the page (e.g., the major text body) and allow the page to increase in size as the user sees fit. This allows a minimum width for a text area (e.g., 200 pixels) while making use of the flexibility available by the use of a variable-width setting.
Page Layout in Web Site Design … Here’s what You Can Do
So how do you get around all of these constraints? Once you are aware of the constraints, you can do several things to address them.
Place Critical Information at the Top of the Page
Pages load top-down. There is no way around it, short of developing your own bottom-up browser. So be sure to include the most relevant information at the top of the pages. Let users know right away whether or not they are on the right page.
Using this space to display a large graphic is usually not going to facilitate information-finding. Similarly, an enormous, intricate title does little more than reinforce to the user what the general topic of the page is.
Give the user some information. An opening paragraph that is highly descriptive of the page contents or a quick bulleted list of the major topics is much more useful than a company logo. Users should be able to determine whether or not the information they are looking for is on this page.
The quicker this is resolved, the more usable your site will be (not to mention the happier users will be, and the higher your user retention rates will be).
In web site design, the top of the age is the most critical area. This “sweet spot” is the most dominant area of the page. It loads first, is accessible to the highest proportion of users, and is virtually guaranteed to be seen. Use this space wisely. Put the most critical information here.
Introduce the contents of the page, provide the user with the novel and unique information of the page, and be sure it is quickly accessible. In other words, use this space sensibly and efficiently. It is the area of the page that packs the most punch, so spend the extra time to make sure it is well structured and designed.
Title: Common Page Layout Problems
Following are design flaws and constraints frequently encountered in page layout:
• Misalignment for foreground and background images
• Changing gutter sizes at the left edge of the browser
• Overlapping foreground images not allowed (although there are several tricks to get around this, such as using an image as a table cell background, using style sheets, or drawing them as a single image)
• Font size differences from system to system, machine to machine, and browser to browser
• Dynamic restructuring of pages not thoroughly tested
Dynamic Font Sizes and Line Spacing
Keep in mind that in the development of a web page, the fonts displayed on the screen are dynamic: they have the ability to increase and decrease in size.
This can affect your layout, the spacing in between items, and line-spacing on the page. What looks nice on Netscape and the MacOS may look completely different on Internet Explorer and Microsoft Windows.
What about Whit Space?
Is white space useful or not? There are a few key ideas to keep in mind when thinking about whether or not to use white space within your page.
While white space can be wasted space, it can also effectively support and organize the structure of the elements within the page. For example, setting a “New” section apart from the rest of the page makes use of white space to support the user.
However, you’ll want to keep in mind that if you use line-spacing within your text, you run the risk of font changes multiplying the white space. While vertical white space can be useful for differentiation between content sections, horizontal space is at a premium – gratuitous use of horizontal white space is a no-no.