Sunday, March 18, 2007

My thoughts on website width

The width of a design is a hot point for discussion from two very seperate camps. The fixed width camp, and the fluid width camp. A very general summary would be that some people don't like the wasted browser space that comes with fixed width designs, and the others don't like the potentially huge line-length that comes with fluid designs.

A quick glance at my work will make it pretty obvious which camp I fall into, and I'll explain why.

I'm pedantic about details

I'll be honest, as a designer I like things to be pixel perfect. It has taken me far too long to stop using px units for fonts and start using relative font sizes for this very reason. Fixed widths allow me to control my websites down to the pixel, and that makes me feel warm inside (and somewhat like a god).

The magic number

Only in the last year has it finally started to become acceptable to stop supporting 800x600 resolutions as much as we used to, and start creating designs intended for 1024x768 and above. The increased size now allows us to make brilliant and complex grid based designs through the magic width of 960px. I reccommend that if you are going to make a fixed width site for 1024 and above, 960 should be your site width of choice. Why you ask? Simple math. 960 is divisable by 1, 2, 3, 4, 5, and 6, allowing you to have even columns in any number of configurations. Click on the diagram for a more visual explanation.

Line length

It seems to be pretty widely accepted that 75-100 characters per line is roughly the optimal length for reading text on screen, and while the studies that have been done haven't been as extensive as I'd like (I'm sure its hard to get funding for such studies) my own experience certainly tells me I don't like my paragraphs being 1 or 2 lines long with 250 characters per line (much the case with a 24" widescreen).

A perfect world

In a perfect world the rendering of all browsers would be equal, and max-width would be widely supported without pesky javascript and hacks abound. I would love to start making designs that can expand and contract within limits I could set, and I think this would satisfy both camps to a point, but until IE7 has eclipsed IE6, I wont be making the move just yet.

Saturday, March 24, 2007 9:46:51 AM (New Zealand Daylight Time, UTC+13:00)
You forgot my camp, http://alistapart.com/articles/elastic/
Saturday, March 24, 2007 3:09:34 PM (New Zealand Daylight Time, UTC+13:00)
Its good to see people thinking outside the box to come up with solutions like that, but I'd have to see a more real-world example of something like that implemented into a better design before I looked at it too heavily. There's too many CSS 'solutions' that rely on your design being nothing more than coloured boxes.
Thursday, March 29, 2007 1:43:53 AM (New Zealand Daylight Time, UTC+13:00)
I'm with Keri; elastic FTW.
Thursday, May 03, 2007 4:05:37 PM (New Zealand Standard Time, UTC+12:00)
I'm with you Steve, unless the user has specified larger fonts they aren't about to bother increasing the text size. However I always impressed by these articles and how the designer/developers continues to push the frontiers!
Currently I design web applications which generally need to use as much as the window as permitted. Therefore I mix the layout up as much I can with fluid/fixed width elements.

BTW great work & tutorials.
AJ

AJ
Comments are closed.
Add a Comment