Building

Fluid versus Fixed-Width Page Layout

Designing Pages For The Web

Cal Poly recommends that you design your Web pages for presentation on the most common size monitor used by your audience. Designing a fixed-width layout requires doing research to find the optimum screen resolution. The W3 Schools browser statistics show that 93% of their users use a monitor with a screen resolution of 1024 x 768 or higher. Fluid Web layouts should be considered because they can adapt to larger or smaller screen resolutions.

Common monitor pixel resolutions used to view the top-level Cal Poly web site as of March 2009 are 1024 x 768 through 1680 x 1050. Studies have shown that users with higher resolution monitors (those over 1024 x 768 pixels) rarely expand their browser window to their full screen width. That is, they keep their browser window closer to the 1024 width even though they could expand it.

Additional information about page size and viewable areas can be found at:

Designing Pages To Be Printed

Fluid pages will not only adapt to the size of the browser window, but also to the size of the paper it is printed on. Fixed-width layouts require an alternate stylesheet that will allow all of the content to fit on the paper. Most printers are capable of printing only a certain width in portrait mode, so content may be cut off when printed if it is not designed correctly.

Here are some solutions to ensure that your pages will print correctly:

  • If using a fixed-width site layout, use a print style sheet (CSS) that sets a reduced width for the site when it is being printed. This can be accomplished by using a minimal amount of graphics and by removing the navigation areas via CSS.
  • If using a fluid-width site layout, use a print style sheet to ensure that the essential content is printed for the user. Fluid designs usually make it easier to print by adapting to the size of the printer.

The next section describes how to include a print style sheet on your web site (note: the Cal Poly Web template includes a print stylesheet)

Cascading Style Sheets (CSS) to print Web pages

An easy way of making your Web pages printable is by using Cascading Style Sheets (CSS). Create a separate stylesheet that will be used only for print and link it in the <head> section of your site. The media="print" specifies that this stylesheet will be used in print and the href="" is the name and filepath of the CSS file.

<link rel="stylesheet" type="text/css" media="print" href="print.css" />

Refer to the following link for more information about the CSS print command: