Forum Moderators: not2easy
The other option is to do a dynamic/fluid layout, there's lots of tutorials to help with that. Then it'll stretch to fill wider screens.
Fluid is good, but limit the maximum width so lines of text remain readable (there is a reason newspapers use columns instead of lines running all the way). As far as columns go, it's just that with the limited viewport vertically, columns don't work well for on-screen reading. So limiting things to a 800px wide screen does make sense.
Leading on from the previous posts, I keep in mind:
# Web is not print. Design and code for an equivalent user experience, not equal user experience. If the display is true to design and functions - what's not to like ;)
# Mac is not PC. They display differently. They were designed that way.
# Be thankful the client doesn't surf on their cell phone.(But a demonstration can convert a client with a limited budget to the first two ideas.)
I consider there are an infinite number of variables that affect viewport size - of which screen resolution is just one. So design (then code) for fluid/flexible/elastic, or floats so extra content can float "up" if there is space in the viewport, or if the client must, a centred fixed-width suitable for the demograph and copy.
However, which are appropriate depends on the site type and purpose so these are decisions should be made at the design stage as they impact on the final "look". For an existing site where the design may already have been signed off, your options may be more limited. Compromises might be:
# If fixed measurements, convert to flexible (px to ems/%) to gain a little stretch
# Centre it with flexible margins (don't leave it positioned at top left) to avoid it appearing to be dangle in space
If the problem is too much "blank" space, guide the eye and prevent the centred content looking like a deserted island by:
# laying it over a background that will expand to fill the otherwise "blank space" at higher resolutions
# designing a flexible header and/or footer that will expand the full screen width (Sometimes as simple as a few pxs of border on the body, could be an appropriate graphic etc)
# Balancing proportions by pushing the content down the page a bit
... looking forward to other peoples techniques ...
People have bigger screens nowadays... but nowadays people ALSO have EEE's (800×480), iPhones (even lower), etc. ... at least try to fit the most important content inside the first 800x600 pixels of the browser's viewport. PDA's etc. won't be able to fit this either, but they (some at least) will/can throw away the CSS, or you can specify a 'mobile' style sheet.
There are a number of ways to get the most out of your space, for example centering your template and applying a large margin to the left and right (a lot of blogs use this one). There are a number of ways to make the best use of your space however.
But in the end, your client is 'always right' (even when he's way off). You can try to convince him of your point of view (and here, showing is always better than trying to explain) but if you want as close a match as possible, the easiest way is to design using pixel units in your CSS and testing multiple browser/OS combinations when developing. Even then, it won't be a 100% match... like already said, OSX isn't Windows isn't Linux isn't the-OS-on-your-PDA... and not everyone uses the same browser, window size, fonts, ...
If you want to take pride in creating good and clean code, pick up a copy of (e.g.) BulletProof Web Design. That guy explains themes like this one really well. (when it comes to 'design', the CSS Zen Garden book is pretty good too)
It takes a lot of time to really 'get' CSS for design, but if you're dealing with websites a lot it's definitely worth it. In the long run, it can really pay off. For example, I had to import a website into a CMS system last week, with a totally different template, and I could literally copy the code for the content. Saves a heck of a lot of work.
[edited by: Darkelve at 12:25 pm (utc) on Aug. 26, 2008]
