22i design - web design Farnborough

Wednesday, November 13, 2019



This page uses Valid CSS
Valid HTML 4.01!
For what it's worth, 22i design is a member of the UKWDA
Get FireFox - The Browser ReLoaded



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.

So

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

Fixed

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%

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 800x600 but at 1600x1200 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 ;)