using a modem, or just want to change this site's design? try these...
website design tips » August 2004: “Designing Web Sites for Monitor Resolution”
most recent project
CORE BT Application Graphical User Interface (GUI) and Advanced CSS Design. Requirements included outstanding design and flexible advanced XHTML/CSS
web site design tips
This month’s website design tip is on the topic of vector vs. raster graphics.
web site design techniques
This month’s website design technique demonstrates a wacky way to fake a resizable background image in a DIV.
800x600 is not 800x600
OK, so you’ve settled on a resolution to design for. You hop into Photoshop and create a new 800x600 document and start designing away, right? Ugg... not really.
Sure, you can go ahead and make the doc 800x600 but don’t use the whole space because “designing for 800x600” does not mean creating art that fits into 800x600 pixels. Browser chrome (that useless stuff on all sides of the browser like navigation bars, scrollbars, etc.) eats away at your design space.
Set some guidelines up at the "safe" dimensions for 800x600 — you can determine that at Web Monkey. Way Cool Web Design uses 744x410 as a starting place, depending on project requirements.
“Above The Fold” Is Below The Belt
To add insult to injury at having to use such a small width, there’s also “The Fold” to deal with. Although it sounds akin to an Organized Crime Family, “The Fold” is actually instead what the height guideline at 410 is for. That guideline marks the area where a user will need to scroll if items exist below it. It’s fine and dandy to have content below the fold, just know that a user who has his screen set to 800x600 will have to scroll to see it.
Resolution To This Article
There you have it, folks. Monitor resolution for the masses. If you didn’t have this weapon in your Web design arsenal before, now you do. So please stop making me scroll left and right!