800 x 600

April 18, 2003 | 7 Comments

Julie Albertson wrote a little ditty about the reasons why it’s a good idea to design for a screen resolution of 800 x 600. Obviously this depends on the type of site we are talking about, Julie I think is referring to news types site, and in that case I’d say this comes about as close as you can to a rule on the Web.

I’m sure you’ve heard that designing for 800 x 600 is a good idea for various reasons, even though some folks tend to think that 800 x 600 is going the way of the dinosaur. Something I don’t think is going to happen any time soon, by the way. Julie points out (with great examples) a reason that I’ve not heard spoken much, but often noticed in my own surfing and one that I’m sure many practiced designers take into account.

That reason is that it’s very difficult to read something that is too wide on screen. Have you ever had your browser maximized and come across a site with it’s width set to 100%? If you were running on 1024 x 768 and wanting to read something, you might have resized your browser to make it easier to read like I do. Not too handy.

It get ridiculous on my Powerbook at times.

We can take the lead from print media on this one. There is such a thing as a page that is too wide, or a sentence to long on one line. There is also nothing wrong with designing for 800 x 600 in most cases. Heck I remember when 800 x 600 was considered big!

Bottom line if you want people to read it, keep it fairly slim. A guideline we used at Boeing was 575 width for any content column. That seemed to work very well, and I’m sure there is plenty of room to wiggle with that.

Update - Funny thing. I was on Jay Small’s site, the very site Julie mentions as starting her thinking about this, and he happens to use those expandable tables she talks about, although not everywhere. My browser was maximized and guess what? Yep, I had to resize to read his content. Just kind of ironic.

Filed under: Web Design

Comments

1. Dave S. said:

I recently addressed this issue myself, as you’re well aware, and I came to roughly the same concusions.

Having that extra real estate isn’t always beneficial. I run 1024x768 on my home monitor, and the 900-odd wide hard width on my site bothers me. I like desktop poking through, not a full-screen window. It’s one of those decisions that seemed fine when Dave The Designer was at work, but Dave The User firmly disagrees.

The problem with the print analogy is that there is that extra space whether you like it or not. With print, you have only so much paper, and you can fill it however you please. On the web, you have absolutely NO idea how much extra paper your users will have, or even if they’ll have enough. So you design for flexibility.

There are plenty of ways to keep your line lengths at a good size while allowing your design to scale to browser width. A DIV containing your body text could be center aligned and hardwired to 500px, for example.

And just for the sake of argument, the long-established typographical rule is that each line should range from 35 to 80 charaters for maximum legibility, the best possible being 66.

Posted on April 19, 2003 09:41 PM | #

2. Keith said:

Hmm…Good points and observations. It’s something I had just taken for granted for quite awhile now – you make sure your design works 800 x 600 – no matter what. It stems from my start back at Boeing. Back when I started out we had to worry about 640 x 480 so most of my designs were no wider that 600 pixels.

We had to worry about folks down on the factory floor with really small monitors.

Let’s see 66 characters would be the best possible for maximum legibility? That would be a column of what, maybe 400 or so pixels? I think that is about what I know I like to read from.

Also the solution you describe is very near what I do here. Seems to work well.

Posted on April 19, 2003 10:38 PM | #

3. Dave S. said:

I don’t think 800x600 is disappearing any time soon either. It’s still 35 - 50% of the population, depending on who you talk to. In some cases I don’t necessarily think giving those still running it a horizontal scroll bar is the end of the world, but generally I avoid it as best I can.

I start with a 750 pixel canvas, actually, because that way I can account for scrollbars without worrying too much, and it has the added bonus of poking body background through, something I find too easy to forget about when I’m playing with a fixed width in Photoshop.

66 characters = no hard pixel value, depends on your font size, naturally. I play with 500 pixel lines, but I think there’s room to go either way. 66 is just a guideline too; the design of some sites can require more or less, without compromising the readibility.

That’s when the formulaic part of design turns into art. ;)

Posted on April 20, 2003 10:05 AM | #

4. Keith said:

No doubt. ;)

Posted on April 20, 2003 01:13 PM | #

5. Bob said:

I can’t seem to bring myself to NOT design for 800x600 … which is a good thing, I suppose. I start with a 740x520 canvas for the same reasons as Dave, above - it allows for scrollbars, toolbars, etc., and allows a little desktop to poke through in most situations.

The challenge is making your content fit within those restrictions sometimes!

Posted on April 25, 2003 09:08 PM | #

6. jess said:

you might be interested in Bob Bailey’s line length roundup
http://www.webusability.com/usabilarticle2002optimal_line_length.htm

Of course, he missed my take on the subject
http://www.cjlt.ca/content/vol28.1/mcmullin_etal.html (while the publication date is in 2002, I did this research in 1998-99)

Bottom line for me - the web is not print.

For a given amount of text, shorter line lengths often mean more scrolling or breaking the text into multiple pages. Both alternatives also slow users. Good design needs to balance all these factors (linelength, font size, font face, whitespace, scrolling, linking). In fact, good copy editing can reduce scrolling and multiple pages too.

cheers…

Posted on July 14, 2003 12:52 PM | #

7. Jay Small said:

I only recently switched my site design to the “accordion” style, after observing usability tests (on a different site) where people just didn’t understand why we had all that dead space on the right side. And that was even the people who knew that monitors come in different resolutions.

My real wish is that Internet Explorer 6 for Windows, and IE 5 for Mac, recognized the CSS min-width and max-width values. Mozilla and Safari do.

If so, it would be pretty easy to create an accordion layout that would look good at a minimum 800x600 resolution, and max out at maybe just a little more than 1024x768 resolution. If you own an Apple Cinema display, or a Jumbotron, well, you won’t have to resize but you will have a lot of dead space! :-)

Posted on September 5, 2003 04:52 AM | #