Fixed Width vs. Flexible Width
Website designs are either fixed width or flexible width. (Other terms for flexible width designs are relative, elastic or liquid designs.) We’ll talk about which design style is better later. For right now let’s take a look at each style.
Fixed Width Designs
Fixed width website designs have a constant width. No matter what size screen you have the website will always be the same width. Washington Winemaker is an example of a fixed width design.
This is how it looks on my screen with my usual settings.
Here’s how it would look on a larger screen or with different settings. Note the gray area on each side of the site. See how it’s increased?
No matter how large your screen the website will always be the same width. The gray area will get larger but not the website design.
Flexible Width Designs
Flexible width designs expand with the screen size. The design of this Charles Dickens site will expand to fill the screen. Here’s how it looks on my screen.
And here’s how the same website would look on a larger screen.
The middle section of this website expands to fill the larger area. It’s flexible, liquid and elastic. It will keep going no matter how large the screen.
Which is better?
To be honest each style has its advantages.
Fixed width designs give you more control. In the world of website design, where your website will look different on different computers, that’s no small thing. It gives the designer better layout control and it gives the owner more confidence on the look and feel of the site.
Flexible width designs make the best use of available space. It’s important to show get as much of the website above the fold (visible without scrolling down) as possible. Flexible designs do that.
So the answer is that’s there’s no right answer. Think about what you want your website to do, think about the design and make the choice that’s right for you.
Share this:
March 12th, 2008 at 5:59 pm
As always, you do a good job of explaining this hard computer stuff!
March 14th, 2008 at 5:58 am
[...] an earlier post I explained the difference between flexible and fixed width website designs. “But how do you switch between the two?” was a question one reader asked. The [...]
March 23rd, 2009 at 3:58 am
[...] contain a graphic uploader but I love everything else about it. You can set it to be flexible or fixed width. If you want a fixed width website you can adjust the size. It even helps you with the Meta [...]