“Real World” Web Design Still Needs to Accomodate 800×600

Published by Chris Coyier

Check out the statistics for the screen resolutions of all you hip kids who read CSS-Tricks:

csstricksresolutions.gif

On this site, 800x600 doesn't even make the top ten. Knowing that, I designed this site to make use of that extra pixel space. Right now it's at 980 pixels. At first I went a full 1024, but that was causing horizontal scrolling problems because it wasn't taking into account the 13-15 pixels that get taken by the vertical scroll bar. Doh!

CSS-Tricks isn't exactly a "real world" website though. It is targeted at an audience that is a bit more tech savvy. In all likelihood, the tech savvy have bigger monitors. Fortunately, I don't need to guess. My Google Analytics tell me exactly what screen resolutions you are using. CSS-Tricks isn't the only site I track, either. I have about 25 sites that I track ranging from the other Creative Suite Help network sites to some eCommerce sites that I track from clients.

One of these eCommerce sites is a site that sells baseball field equipment. The target audience is maintenance personnel from city parks, schools, and stadiums. No offense to them whatsoever, but these people are not tech savvy. They are using the the CRT monitor that has been on their desk from the early 1990's. More power to them, I say. I am here to accommodate. Guess what resolutions many of those old monitors are? 800x600 baby. Check out the stats from that site:

ecommerse-resolutions.gif

On this site 800x600 comes in a healthy third place. If I were to make a design for this site that was 980 pixels wide, it would lead to a very frustrating experience for visitors having to horizontally scroll around as well as vertically scroll. Especially since on this particular site, the "cart" is on the right hand side! That would be annoying indeed. This site needs to be as easy as possible for users to navigate. After all, I am trying to get them to actually spend money here. People don't spend money on frustrating websites, they will find an easier one. The internet is a big place and it is extremely easy to lose customers for dumb little reasons.

The bottom line: know your audience.

In my opinion there are really only three options:

  • Optimize for 800x600
  • Optimize for 1024x768
  • Go fluid-width (or go with resizeable content like Flash)

CSS is all about accessibility. Wouldn't it be a shame to go to all the trouble of making a really nice an accessible website and then have it be too big to fit on a visitors monitor?