So – do you design a website for fixed width or 100% width? What do you mean?
Well, a fixed width page or a fixed width site will be exactly that – a fixed width. Being oldschool I’m used to the time when everyone had 800×600 desktops and, allowing for browser scrollbars and the like, you’d probably design a website or a webpage to 760px wide. This page is fixed width 🙂
A 100% width page or a fluid, dynamic, or liquid design will fully stretch to fit the screen widthways on any desktop, so it will cover the screen on any size.
But I’ve got a 17 inch monitor
Now, let’s pop this bubble straight away. If you have an 800×600 desktop and a 15″ monitor it will still be 800×600 if you plug in a 17″, 19″, 21″ or a 30″ monitor. Comprendez? Screen size and desktop resolution are different so please don’t mix them up.
So
Once upon a time we designed for 640×480 desktops .
Now, many people are designing mainly for 1024×768 desktops.
Times change.
But remember – you should really work to the lowest common denominator. The 640×480 is a rarity these days and Windows XP has a native minimum desktop of 800×600 so something like a 760px page will do nicely.
But what about the 1600×1200 desktops and wider?
I hear you say. Well, on a 1600 width desktop your fixed width page or website will only cover half the screen. The choice is yours but remember that there are advantages and disadvantages to both methods…
Fixed-Width
Pros
- Everyone will see the site the same size.
- Users with smaller desktops will be able to see the page as it was intended
- Planning content is much easier – if you have text to wrap around images, for instance, then you can plan your design almost perfectly.
- Not everyone has a big desktop.
- Readability – short lines are easier and more comfortable to read – why do you think newspapers are written in columns?
Cons
- On big desktops you’ll see a lot of space – this may be a disadvantage/discomfort to some people.
100% Width
Pros
- Great aesthetic – the page fills on all desktop sizes
- Shows you care about every desktop size 🙂
Cons
- Planning – Ah, that image looked good with the text wrapped around it on an 800×600 but at 1600×1200 it looks bad! Planning (and testing) is harder with 100% widths.
- Readability – long lines are uncomfortable to read.
Ah but, I’ve heard…
Yes, I know, you can design for a minimum and a maximum width. “How do you do that?” OK, it’s a style sheet thing. You need to create a div or container for your page and place all of your page within the div, let’s call this one “container”… this example is for 800-1024px resolutions, allowing for scrollbars in the web browser.
.container { min-width: 760px; max-width: 944px;}
Then you’d create your content to work at the minimum and maximums of 760 and 944 pixels. And don’t forget to test them too 😉
