A while ago I wrote about converting some of my websites to variable width.
My thinking at the time was that, for someone using a wide-screen monitor, the appearance would be better if the content expanded to fill a larger portion of the screen.
Having got a couple of them successfully converted I had second thoughts. I decided that it wasn’t such a good idea after all.
After pondering for a while, I eventually closed one of the sites down and converted the other one back to a fixed width.
Here’s why:
Variable width works best where your page is largely text. That’s why so many forums use variable widths.
But where you have images, or any other design elements on your page, it all becomes a bit messy because it’s difficult to get your page looking exactly as you want it at all possible widths.
In the process of converting my second site I came up against this issue and decided to limit the amount by which the width could vary.
But still, however much I fiddled around with it, the site looked better on a narrower screen because this forced it to display at the width at which it was originally designed.
So I decided to convert it back to a fixed width – and I’ve never looked back.
Best Solution: Use a Combination
The most recent site I built uses a combination of fixed and variable widths – and this works well for me.
The header and footer are both variable width – in both cases set at 100%, so they fill the entire width of any screen they’re viewed on.
All the rest of the content is styled and positioned within a page-container div (fixed width and centred).
This means that I have complete control over how the content appears to readers, irrespective of the width of the screen they’re using. And the variable width header and footer help to improve the appearance on wider screens.
The best of both worlds. (Here’s the site in question).
Other Articles You Might Like:
{ 2 comments… read them below or add one }
Hi Martin,
Your series is a nice presentation of the in’s and out’s of variable web page design. Couldn’t say it better my self. I have found much (all?) of what you point out to be true. I too have been working with variable web page content presentation thru trial and error. Wish I had seen this post earlier.
Thanks for the great write-up.
Dwight
Dwight, hi,
You’re welcome!
Cheers,
Martin.
{ 1 trackback }