Weblogs: Web Development

Are there any accessibility-based reasons for chosing a variable-width layout over a fixed-width layout?

Not really. There's a whole host of myths and memes about the downsides of fixed width layouts versus the fluid, semi-fluid, partially fluid or jello type layouts. The main conclusion is that fixed versus fluid is trading off a different set of advantages and acquiring a different set of disadvantages.

Readable line lengths

One of the arguments against fixed-width is that when increasing the font-size, pages get longer, and there's less text per line (well, in browsers like IE6 that treat pixel widths as absolute font-sizes). Consequently people argue that em based widths are more appropriate, figuring that comfortable reading levels are supposed to be about 8 - 10 words per line. (Or percentage based widths because the visitor can control that by resizing their browser window)

But usability research shows that its not the number of words per line that makes text easier to read. The human eye only has so much field of vision, and a comfortable reading text should fit into that field of vision (without moving your head). Typically you'll find that readable text widths are actually specified in inches, and that is then (based on the standard paper sizes and standard font sizes in print equates to about 50 characters which then equates to about 8-10 words per line).

So the situation we face is that readable text is based on the typical human eye's field of vision, where a column of 3.5 inches is the easiest on the eye. That's almost translatable into a fixed width (leaving out factors like monitor size and resolution).

Using em based widths (one form of fluid) raises the barrier that at increased font-sizes, line lengths become longer, and more difficult to read. It tires the eyes and the neck-muscles out much quicker.

Visitor choice

Percentage based widths also create a similar problem, which however can be addressed by resizing the window. But because sites across the web are not consistent in their use of widths, the average browser user will have to size and resize their browser for each site as they surf. Most will probably give up and just maximise their browser and suffer the consequences.

Mobile friendly designs

One of the arguments for fluid widths is their friendliness towards smaller screens - like mobile phones, but considering most sites are still based on the concept of multiple columns (e.g. a left hand navigation bar), the end result in a mobile phone is a percentage based layout where the left nav still takes up the same percentage of screen size - just the number of actual pixels it occupies is far less that what's needed to be readable. (For a mobile phone, you'd mostly want a columnless layout)

min-width and max-width

The fair balance is found using the min-width and max-width properties - I think the real answer, with a perhaps more acceptable level of tradeoffs lies here.

With multiple column layouts there's always going to be that minimum usable width before the design collapses into the unusable. The max-width can certainly be used as a factor for preventing horizontal scrolling, even for fixed pixel width layouts.

So the real answer is it depends. It depends on the design, the operable requirements, and of course, the audience you are addressing. Each type of layout presents its own complement of ups and downs.

---

[ Weblog | Categories and feeds | 2011 | 2010 | 2009 | 2008 | 2007 | 2006 | 2005 | 2004 | 2003 | 2002 ]