One of the strengths of web pages is their flexibility. Web browsers will adjust a page so that it fits your browser window perfectly, no matter what size the window is or what your font size is. Unfortunately, many web designers think of a web page as they would a piece of paper that doesn't change its size or shape, and they code their pages in a way that prevents the browser from adjusting to the viewer's window.
One of the most common symptoms of this disease is forcing pages to a fixed width, specified in pixels (px). Some designers think that by setting a fixed size, the page will look the same in everyone's browser. They ignore the fact that people have differently sized windows, different font sizes, and so on. As a result, those pages look good only when the browser window fits that exact size or a little larger. (Note: it's the window size that matters, not the screen resolution.) Viewers with a different size of window are out of luck.
Compare fixed-width and fluid pages
In this tale of two pages, I will compare fixed.shtml and fluid.shtml . They are identical except for the headings and the width specifications. The fixed.shtml page has an invariable width of 1024px:
body
{
width: 1024px;
}
The other file, fluid.shtml, uses a width specification that is proportional to the size of the window:
body
{
width: 90%;
max-width: 65em;
}
Look at the three screenshots of fixed.shtml. (Each screenshot is a link to a full-size image.)
- In an 800px window, the page doesn't all fit, and there's a horizontal scroll bar.
- In a 1024px window, it just about fits. There is a small amount of horizontal scrolling, but all the text is inside the window.
- In a 1280px window, there is a moderate margin on each side. It's not too bad. In larger windows, the margins will just get bigger and bigger.
The fluid page, on the other hand, looks much the same no
matter what the window size.
There will be a difference in a very wide window.
Very long lines are hard to read, so the
max-width specification in the stylesheet
constrains the page to a width that is comfortable to read.