These are the 2 most common ways to design a web page. Your choice is either a fixed width, OR a fluid design that stretches the full width of the page. There are advantages and drawbacks to both. Many designers will tell you they are the only two choices you have. Not true, but more on that later.

Fixed Width

This is an easy way to design. Pick a width (let’s say 750px) and your page will always remain at that….never wider, no narrower. As you build a page, it’s comforting to know that everything will display just the way you see it.

That’s the good thing about it, so any drawbacks? Well, let’s see. The lowest resolution monitor you really need to consider is 800×600px (ignore things like handhelds and cellphones for now). But how is your page going to display on a widescreen 1680px monitor?

Yep, it will be 750px wide. So you have 750 of webpage, and about 900px of blank space. It’s not a particularly nice look. Some people will not have a full browser window open at that resolution, which is the only saving grace, IMO.

Fluid Design

So is an expandable page any better? Well, yes….and no.  On the one hand, the page will expand with a wider screen. So you don’t get a narrow width on a wider monitor. But on the other hand, it will keep expanding as there is nothing to stop it. So you go beyond a comfortable line length.

Which all leads to the question – is there a better way? Some designers will say no, those are your two design options.

So, if neither a fixed or fluid design is the ideal, what is?

How about something I like to call “the Oprah effect”. A page that widens and contracts. But unlike Oprah, it actually knows when to stop. So it will expand to a predetemined width, set by you then stop expanding.

Let me give you an example of how this works. Take a look at this website. No, it’s not my site, but it contains css and code written by myself. A simple, functional, and relatively pleasing to the eye page.

Take a look at the page using 800×600px resolution (to do this, right click on your desktop, select properties, then choose the settings tab). You will see the page displays at 95% width of the screen, centered, and with a colored background either side of the page.

Okay, so now try 1024×768. What do you see? the page is still at 95% width, and centered. In other words, it has expanded to fit the available screen size. Now…..if you have access to a widescreen monitor, try viewing the page with that, and see the difference.

The page has stopped expanding at 1050px wide. It remains centered, only the body either side of the page has expanded to fill the screen. View it in any browser you like, and at any resolution you want, the result is the same. (with a few minor exceptions that I will explain later)

Because the page doesn’t expand indefinitely, a good line length of approximately 60 characters is maintained on this 3 column layout.

Have you seen this done before? And if so, have you ever seen instructions for how to do it?

Probably not, yet it is a way to get the best of both worlds. Think of it as a “capped width fluid design”. The how to will be the subject of another post. Take care until then, and happy designing!

AJ