Make your site fit all your users' screens - quick tip
Posted: Sat 25. Sep 2004, 02:52
One thing I'm noticing in looking at the 'sites you're proud of' and 'new sites' is that the vast majority of phpwcms designers are using fixed-width page layouts.
No doubt they look great on your screen, but trust me, they don't necessarily look so hot to your users where they have a different resolution to your pc settings. Parts of your site run off the edge of their screen where they have a lower resolution (and I'm also seeing a lot of designs with non-standard resolutions), or if they are using a higher resolution your site will have a large empty border to the left and/or right.
Fortunately, the solution is very simple.
In your page layouts, instead of just putting in a fixed pixel width, use a percentage, and your content will resize to fit the available area. The beauty of it is you can mix and match fixed width.
The following page layout settings are the standard from Oliver's Page Layout documentation here: http://www.phpwcms.de/index.php?id=14,0,0,1,0,0
All blocks: width: 500
Left: 100
Left space: 10
Main: 280
Right space: 10
Right: 100
Which is fine, if your user's available screen area totals 500 pixels. This is not likely.
Try this instead:
All blocks: width: 100%
Left: 100
Left space: 10
Main: 100%
Right space: 10
Right: 100
Now you're talking flexible! Your main content area of your site will resize to fill the available area of your visitor's screen.
You may need to throw in the odd trick here and there - you may find that your left and right areas, for example, are forced to 'shrink' if there is not enough content there to fill their alotted pixel widths. This can be fixed easily by nesting in a single cell fixed width table in these areas in your templates, which you then put your replacement tags inside. I know, I know, nested tables = blah. It's a inconvenience though if it makes your site friendlier to your visitors.
No doubt they look great on your screen, but trust me, they don't necessarily look so hot to your users where they have a different resolution to your pc settings. Parts of your site run off the edge of their screen where they have a lower resolution (and I'm also seeing a lot of designs with non-standard resolutions), or if they are using a higher resolution your site will have a large empty border to the left and/or right.
Fortunately, the solution is very simple.
In your page layouts, instead of just putting in a fixed pixel width, use a percentage, and your content will resize to fit the available area. The beauty of it is you can mix and match fixed width.
The following page layout settings are the standard from Oliver's Page Layout documentation here: http://www.phpwcms.de/index.php?id=14,0,0,1,0,0
All blocks: width: 500
Left: 100
Left space: 10
Main: 280
Right space: 10
Right: 100
Which is fine, if your user's available screen area totals 500 pixels. This is not likely.
Try this instead:
All blocks: width: 100%
Left: 100
Left space: 10
Main: 100%
Right space: 10
Right: 100
Now you're talking flexible! Your main content area of your site will resize to fill the available area of your visitor's screen.
You may need to throw in the odd trick here and there - you may find that your left and right areas, for example, are forced to 'shrink' if there is not enough content there to fill their alotted pixel widths. This can be fixed easily by nesting in a single cell fixed width table in these areas in your templates, which you then put your replacement tags inside. I know, I know, nested tables = blah. It's a inconvenience though if it makes your site friendlier to your visitors.
