Skidoo : Demo

Fixed Width

Converting skidoo into a fixed-width layout can be accomplished with only minor additions and changes to the CSS. These changes can be found in fixedWidth.css. The styles found there could just as easily be copied into base.css so that you do not have to add another separate stylesheet to your layout.

The effect is generated by applying a specific width to the #pageWrapper element and setting its left and right margins to auto. If you don't want your content centered in the page, you can just set your margins to 0. Because the auto-margin approach does not work under IE5, we must apply text-align: center to the parent element of #pageWrapper which, in this case, is the body element. To keep child-elements from centering their text, we must also apply text-align: left to the #pageWrapper element.

An alternative to a fixed-width layout would be one in which either margins get applied to #pageWrapper or padding gets applied to body The purpose is to set this gutter space in percentage values, allowing you to control how much of the screen is used to display content. For example, applying margin-left: 20%; margin-right: 20%; to #pageWrapper would force the layout, regardless of resolution, to take up about 60%, little over half, of the monitor's width.

Why would you want to do this? Long story short, several usability studies have shown that a user's eyes tire more quickly when they have to read text that spans more than a certain, small percentage of his/her field of view. In other words, going from one end of the monitor to the other and then back again to read text can really work out the eyes. Tired eyes lead to a drop in the user's willingness to stay at a site and read through the text. To alleviate this problem, you can constrain the width of your content area. This keeps the user's eyes within a small arc of his/her's field of view, making it less tiring, thus more likely they'll stick around your site.

A fixed-width approach will work well for a large-resolution display. However, if you're fixed width is set at, say, 700px, and a user is viewing your site on a 640x480 desktop display resolution, their eyes will have to not only go edge-to-edge of the monitor, but they'll also have to horizontally scroll the viewport to read all your information. The way around this is to use margins, defined in percentages, rather than a fixed width. If 20% margins had been applied, rather than a fixed width, then even a 640x480 user will see your content and still not have to read edge-to-edge.

This is, by no means, an absolute approach to accessibility and web site design. But it's certainly something to consider when developing your layout.