Variable Width Websites: An Update

by Martin Malden

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).

Please share this article - I'm counting on you!
       
Found this article useful? Get free updates!

Get regular updates, plus a free eBook on how to set up a business online - join us!

Your details are safe with me.
My Privacy Policy.

Previous post:

Next post: