Fixed, Fluid, or Elastic Width Layouts?

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 🙂

9 thoughts on “Fixed, Fluid, or Elastic Width Layouts?

  1. Pingback: Designing for 1024×768 or 1000 pixel screen resolution « Bang Your Drum - web design | digital marketing - Bristol, UK

  2. Hi Anup.

    One of the SitePoint books – The Principles of Beautiful Web Design by Jason Beaird, pg 123 – talks about setting the font size in the body tag to 62.5%, which allows you to scale ems to px by moving the decimal place. For example, 12px = 1.2em, 32px = 3.2em and so forth. It’s a technique that I use often, but do you know how that might effect things in an elastic layout?

    You still set your font sizes specifically in your element tags (p { font-size: 1.6em }) but I’m not too sure whether or not the browser would take its em proportions from the body size of 62.5% or the actual font size of 1.6em. I’m pretty sure that it sets the size proportionally to the percentage, but I thought I’d ask for your take on it.

    I hope this question isn’t too confusing.

    All the best,

    Tim.

  3. Hi Tim. This blog actually uses a % size for the body and em elsewhere and resize with ems is not a problem.

    That being said, all the major browsers now support zoom so em-based resizing often won’t kick in (unless you are on IE6).

  4. Thanks for your response Anup. It was very helpful.

    By the way, in reference to “unless you are on IE6″… If I was forced to use IE6 I would probably give up on browsing the web altogether. lol

  5. Pingback: Sexy Web Design Inspiration « Aaron Snowberger’s Home Abroad

  6. Hi
    Thanks for this article. If you can help, I’d appreciate it immensely: I created an elastic website, using ems for every element, and the site still gets completely distorted when a user zooms. Do you have anything to suggest? The site I’m referring to is http://www.newstylesignsusa.com I’d really appreciate any help you can offer!!!! Thank you!

  7. So what do you suggest I can do to fix this problem? At first, my css was all in ems, and when I saw that the layout gets messed up when zoomed, I changed it all to ems to correct the problem. But that did not help, the layout still gets totally distorted when a user zooms! Any suggestions? Thanks.

Comments are closed.