onenaught.com

Posted on: Thursday, July 26th, 2007 at 3:48 pm

Even though many people have adopted web standards, fixed width layouts are still prevalent. While sometimes necessary, it can often be less flexible for different users.

This is an often-discussed topic, but I was having a chat with a colleague about this, so thought I’d summarize my view of the issues:

The layout approach for web sites is always a tricky one. It often boils down to the following:

Fixed layouts

Using pixel-based units for the dimensions of the page

Fluid layouts

Using %-based units

Elastic layouts (em based)

Using em-based units

(Of course, these are not the only ones, but the first two are certainly the most common ones, and the third overlaps with the previous ones.)

Here’s a quick summary of the pros and cons of those approaches:

Benefits of fixed layout

• Fixed layouts often seen easier to develop (pixel calculation can be easier than em calculation)
• Browsers such as Opera and IE 7 are offering zoom support (though IE 7’s still needs improvement) so flexible sizes may be less important
• Usually less background/decorative images are required for download (or at least less in number if not in overall size)

Problems with fixed layout

• They are fixed based on designer/developer’s choice not user’s
• Not all browsers support zoom, and text resizing may be required
• Sometimes get horizontal scroll bars which most people don’t like
• Text can overlap their original boundaries when resized. May make text hard or impossible to read

Benefits of fluid layout (% width)

• Design typically scales with the browser window as needed (maybe if too narrow there are problems)
• Gives a bit more control to the user

Problems of fluid layout (% width)

• If the screen is too wide, long lines of text may be hard to read, or there might be too much white space
• Calculating percents may be tough due to browser rounding errors, and desire to mix pixels and percents (which CSS spec unfortunately doesn’t support)

Benefits of elastic layout (em-based units)

• Works like fixed at “default” font size; keeps design proportions as you increase or decrease font size
• Overcomes most issues with the above two approaches

Problems of elastic layout (em-based units)

• Horizontal scroll bars if sizing too much — but easily fixed with max-width (to say something like 100%) and min-width (IE 6 and below would require an CSS expression hack if you even care about those browsers!)
• Calculation may be hard, as with %-based. CSS doesn’t have the ability to have functions and conversions such as being able to subtract some pixel values used within the content from the em-width of that content
• Creating flexible images may sometimes require a bit more work (e.g. breaking up what may appear to be one image into smaller ones so that the appearance of stretching and resizing is possible)

Is it even a developer problem?

It could be argued that font sizes are concerns of the browser and/or operating system. In some ways this is fair. Most browsers allow you to resize text, but scaling graphics and widths etc is less common (Opera has had it for a long time, and IE7 has recently introduced it. The former is quite good, the latter is new and so has some kinks to sort out). Most OSs offer zooming technology but they differ in quality.

I would argue that resizing text is still important within a browser even if an OS has it, because you might have your own preferences that do not match the specific site you are viewing. Also, until such time as zooming technology is more prevalent users may still need to change the text size of the sites they visit.

On a personal note, sometimes I find it quite handy to sit back from the screen if I am tired and increase the font size and read from a distance. It feels more relaxed, and even helps when there is background noise! Smaller text sometimes helps me concentrate.

My preference

I usually opt for elastic (preferred choice), or fluid depending on the type of site. I will try as much as possible to avoid pixel-based widths for the time being.

This blog is one example of an em-based layout. If you resize a bit, the proportions will remain in tact. At a certain point (depending on your screen size) you will hit the edge and if you are using a modern browser, I have used max-width to try and avoid horizontal scroll bars (unless you zoom a lot!)

Depending on the site being developed, em-based layouts are not that different to pixel-based. You still have to calculate the dimensions you want, but now you just use ems instead of px.

Once zoom technology is more widespread and well-implemented hopefully things might become a lot simpler to create even more flexible sites. SVG-based images may also help with many image scaling issues

About this post

This entry was posted on Thursday, July 26th, 2007 at 3:48 pm and is filed under Design, General Web Development. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.