The 980 Pixel Layout
November 27th, 2006
What does 980 pixels get you? 4 nice sized equal width columns or 2 nice sized sidebars and one decent sized main content area. Any way you slice it, 980 pixels is nice. It divides evenly and provides enough horizontal resolution for great looking 3 or 4 column layouts. The math is nice for people like me who were never very good at it and require a calculator to do their CSS; working like this, I need to pull it up a lot less often. It’s easy to remember 245 + 245 = 490 + 490 = 980… or if I do happen to forget this, I can at least figure it out without my calculator (whew).
So, why the heck does all this matter? Read on good patron, and you shall not be spared the hoopla.
Your Responsibility
All this matters because if you are a professional web developer, you already have a formula for developing a successful layout within the constraints of an 800 x 600 resolution but more and more clients will start asking for a wider layout. They might not know how to voice this to you but it will come up as something like:
“Is there some way we can utilize that negative space to the left/right of the page?”
And in the past, you could calmly justify your decision to work with a fixed width layout, optimized for a lower resolution, but as time passes and your clients get bigger and better monitors, they inevitably demand more, more use of the screen space available because let’s face it, they have a ton of stuff they want to put on there. Your position at 800 x 600 starts to look a little shaky. You are trying to preserve what little whitespace remains so your design has room to breathe and yet, the client dislikes vertical scrolling. They’ve accepted that everyone knows how to scroll down, but don’t want to risk anyone missing anything important. So you have a job to do, regardless of whether you maintain support for 800 x 600 or not, you’ve gotta do something for 1024 x 768 as a first priority. Now, if your clients’ needs are modest and you are confident that 800 x 600 is enough horizontal space, you go ahead, run with that, you can forget whatever I’ve said here thusfar and stop reading. However, if you, like me, have clients that love to cram as much as possible into as small a space as possible, then you really owe it to them, and yourself, to give the CSS an extra 200 pixels or so.
1024 is really 980. 768 is really 700.
When designing for 800 x 600 you never really have 800 pixels of horizontal resolution. I frequently make the width of my layout 750 or 780 pixels wide; similarly with 1024 x 768 you really don’t have 1024 pixels of horizontal resolution to work with. The user is bound to sidebars and browser chrome, etc. using up both horizontal and vertical resolution, this is commonly known. To compensate for this, you, like me, are probably all too familiar with this process of measuring up the width of your layout to work within a specific resolution spec.
After a bit of experimentation, it is my conclusion that 980 pixels is pretty much the optimal measurement for working with the 1024 spec. Now, obviously there are other options than a fixed width layout, you can always go liquid, but then you sacrifice optimal line length for readability. You can also go elastic, and the same measurement can be used in that scenario, only there you’d measure up with 98em instead.
You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.