Why would you want to build a variable-width website?
Because the range of screen widths on which people browse the internet now ranges from around 12 inches to twice that size.
And if you choose to view your computer through your TV you could be viewing web pages on screens many times bigger than people were using just a few years ago.
So if you build a fixed-width site that fits onto a 12 inch screen, the person using a wide-screen is going to see your site as a narrow strip down the middle.
Which doesn’t look so good.
Luckily, building a variable-width site is very easy, as long as you’re using CSS.
And if you’re not yet building your sites with CSS you should start. It greatly improves cross-browser compatibility and enables faster loading.
A very brief intro to CSS follows but if you’re already familiar with that and want to go straight to variable widths then click here.
The concept behind CSS
CSS is about separating the design elements of a site from the content. This makes is easier to retain consistency of design throughout, particularly when making styling changes.
For example, if you want to change the way links are displayed you only need to do it in one place: the stylesheet. The new style links will then be displayed throughout your site.
CSS structure is like Russian dolls
Building a site with CSS (as opposed to tables) means you need to think of the content of your site as being enclosed in a series of containers. These containers are called ‘divs’.
You start with your main container, or div, and then create smaller containers which sit inside it and which you position by telling them to float left or right. This creates the layout of your pages.
You style your divs (background colour, text alignment, font type, font-size, etc.) by defining those attributes in your stylesheet. And there are loads of free CSS editors that makes this process a real cinch.
Divs should be used once on a page
Each div must have a unique name and you should only use the same div once on each page. For example, one container div, one content-box div, etc.
Classes can be used many times on a page
You also have entities called ‘classes’.
Classes can be used many times on one page. An example might be for styling specific types of links.
Let’s say you wanted to use a different style of link for a specific purpose. The first step would be to define the styles for this link and give it a class name.
Then, whenever you wanted the links to be displayed in your newly-defined style you would specify either
<span class="name-of-class"> or
<a class="name-of-class">. That would cause those links to be styled differently from the default.
Creating a site: design and layout first
When I’m creating a hand-built website I create the design and layout first.
To make this easier I initially give each div a different background colour so that when I preview the design and layout I can clearly see where each div begins and ends.
Once you’re satisfied with the way the site is laid out you can remove the background colours and start adding your content.
If you’re new to CSS and would like to learn there’s an excellent tutorial here. This is the tutorial that got me started on CSS and it’s really worth a look if you’re new to CSS and interested in getting started.
The easiest way is by specifying the width of your main div (the one that contains all the others) as a percentage value, rather than a specific width.
That will cause it to adjust to the specified percent of the width of the screen it’s being viewed on.
Some of your divs (for example the divs that form your sidebars) will probably have fixed widths specified. That’s fine, and they’ll retain their fixed width within your main div.
You do, though, need to make sure that the div containing your main content does not have a fixed width specified.
For example: if your page has a div which contains your primary content and a right sidebar which contains testimonials, you would typically specify the width of the div containing the right sidebar (for example 200px) and tell that div to float right.
You would then specify a right margin of 200 px for your content div, which would cause the divs to sit side by side. (Remember – these are enclosed within, and bounded by, the main div so they position themselves in relation to that).
However, although you’ve specified a right margin of 200 px for your content div, you’ve not specified a width.
This means that when the width of your main div expands because it’s being viewed on a wide screen, your content div is able to expand as well.
It will still retain a right margin of 200px and your sidebar div will retain its fixed width of 200 px, so the relationship of those two will not be changed.
A few things to keep in mind
Make sure that your header and footer are designed so that they can accommodate varying screen widths (their widths should either not be specified or specified as a percent).
If you use an image in your header you need to put this into its own fixed width div, which will then sit (centred) inside your header div.
The width of the header div will expand and contract with the different screen sizes but your fixed width and centred div containing your header image will stay centred and in place.
You also need to consider images contained within your content.
As the width of your content div expands it may reduce the number of lines in a paragraph. So on a 12 inch screen a paragraph may have 6 lines but on a 24 inch screen this may reduce to 4, because of the extra line length.
Therefore you need to consider whether this would cause images contained within text to become incorrectly positioned.
I’ve just converted one of my sites (one of my secondary blogs which I didn’t mind experimenting on!) to a variable width site. I’m pleased with that one, and I now need to get started on the rest.
Update 7th May, 2009
I wrote another post expanding on this one when I came across a problem while converting my second site.
You can find it here.
Update 1st October, 2009
I eventually decided to move to a combination of fixed and variable widths – and wrote an updated article explaining why. You can find it here.