Fixed width or full width websites?

By Matt Cornock

I recently read an article on A List Apart called Fluid Grids. This got me thinking on how many websites use fixed width columns and how many used full window width to display content. Certainly when the web was young, the design of many websites (quite often personal web pages) were full width, expecially with the typical resolutions being 640×480 or 800×600 if you were lucky. The lack of screen space meant that to have any area dedicated to ‘airy’ white space would result in lines of text comprising three words. Since then, we’ve had more screen space to play with and then the dilemma of to fix or not to fix lurks around every corner.

Screen sizes vary more than they used to, even the shape has moved away from the 4:3 ratio in many cases. With this in mind the current cons for the fixed width is that it “needs” to work on the smaller screens (1024×786 is the lowest in common use). However, when using a fixed width that works for that screen size, what happens when it is viewed on a 21″ widescreen? Margins wider than the Humber bridge. Having scalable, fluid layouts is great for filling up the screen, but then there’s the other consideration that having a screen filled is not necessarily the best thing to do.

If we take Nielsen’s eye-tracking research into consideration (see the pretty pictures on the Alertbox site), I’d conclude that whether you had fixed width or full width, the same F-shaped pattern would apply. Hence, surely it is better to have a narrower page so that items on the right didn’t get missed completely?

Further to that, have you ever tried reading very wide pages? You reach the end of one line, go to the start of the next and as you’re halfway through realise that you’ve missed a line out. That’s the reason why newspapers have narrow columns. There is something to be said then for fixed layout and large margin width. For mahoosive resolutions, use the background of the page, or other design elements, to fill the cavernous void of large margins.

Fluid, full width isn’t all bad though. It has its purpose, particularly for sites which aren’t text-centric. Many graphic design studios use full width display for their portfolios, which makes sense. Why would you compress your best image to the fixed resolution of your visitors’ smallest browser when you can easily scale accordingly? There is still something very practical about fixed width for me. It reminds me of a book or newspaper, and that ties in with the same familiarity website visitors will have, making their using the website more comforting. The opportunity for space provided by the margins also makes the page more user-friendly, and focuses the user on the central blob of content rather than having to flick their eye around a wider screen area. People tend to have larger screen resolutions for other projects (media editing or gaming), not for internet browsing. The thought of the Google homepage (or even more of an example the new Ask homepage) on a 21″ widescreen monitor demonstrates this beautifully: think of the page content as a rubber dinghy in the middle of the Atlantic ocean of screen space.

What we need is a solution which compresses down for smaller screens, instead of expanding up for larger ones (subtle difference). Set the fixed width for a 1280×1024 screen, then work out how that could be squished for 1024×786 and 800×600. That way we maintain our user-friendly reading columns, keep a tidy margin and whitespace, but eliminate the space for low-res browsing. Javascript initiated CSS would be a neat way of doing it, but I’m sure there’s other solutions out there more practical. I will investigate and see what I come up with I’m sure.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.