Wide Screens and Usability
More and more people are going to wide screens these days. In general, though your particular stats may vary, less than 9% of web users overall are surfing at an 800 x 600 resolution. Approximately half are using 1024 x 768, with the rest using resolutions between 1280 wide and 1680 wide.
With css we CAN build layouts to flex to all these widths. But should we?
One of the issues that we run up against in liquid design is that of line length, especially in a two column design. If you create the design to flex to the full width of a 1680 screen, then what happens in a two column layout is that the text line lengths in content get so long that it’s uncomfortable for the eye to track back to the beginning of a line when moving down the content. A three column layout is slightly less problematical, but can still be uncomfortable when stretched to full width. Though research suggests that longer line length actually results in faster reading speed, it also suggests that people strongly prefer a “medium” line length. Since the cardinal rule of web design is “don’t piss off the visitor” then we should try to limit just how long our line lengths will go.
So that’s what the max-width attribute in css is designed to deal with. We can set a max width for our main wrapper element so that it will flex up to a maximum width. Using auto margins we can still center the layout so it doesn’t look awkward on larger screens. But what about the problem child, IE6? The method I use to accomodate IE6 is to use a combination of conditional comments and an IE proprietary expression, as Georg’s CSS SledgeHammer describes, which will set a range for IE6 for both min and max widths.
There is one gotcha. If you set your mainwrapper width as a percentage, add side borders to it, and use auto margins to center it, IE6 will cough up a hairball, since the poor broken thing doesn’t know how to interpret all those variables, and shoots the layout to full width or worse. So in that case you use the * html hack to feed only to IE6 a percentage left/right padding on the body, which won’t make it EXACTLY the same as everyone else, but at least it will be somewhat closer to looking like the better browsers. Adjust that percentage to taste, and season with salt.
[tags]usability line length, wide resolutions, widescreens, css liquid layout issue[/tags]
