![]() |
|
|
Saturday, March 13, 2010 |
|
| 22i DESiGN » WEB DESiGN TiPS » Fixed Width or 100%? Fixed Width or 100%?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 800x600 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 800x600 desktop and a 15" monitor it will still be 800x600 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. SoOnce upon a time we designed for 640x480 desktops . Now many people are designing mainly for 1024x768 desktops. Times change. But remember - you should really work to the lowest common denominator. The 640x480 is a rarity these days and Windows XP has a native minimum desktop of 800x600 so something like a 760px page will do nicely. "But what about the 1600x1200 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... FixedPros
Cons
100%Pros
Cons
"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 ;)
|
|