Optimizing for 1024×768 Screen Sizes

When we say “optimize” we mean that your page should look and work the best at the most common size. It should still look good and work well at other sizes, which is why I recommend a liquid layout using percentage widths to control layout. But it should be its best at 1024×768.

The three main criteria in optimizing a page layout for a certain screen size are:

* Web Page Initial visibility: Is all key information visible above the fold so users can see it without scrolling? This is a tradeoff between how many items are shown vs. how much detail is displayed for each item.
* Web Page Readability: How easy is it to read the text in various columns, given their allocated width?
* Web Page Aesthetics: How good does your page look when the elements are at the proper size and location for this screen size? Do all the elements line up correctly — that is, are captions immediately next to the photos, etc.?

You should also consider all three criteria at the full range of sizes, continuously resizing the browser window from 800×600 to 1280×1024. Your page should score high on all criteria throughout the entire resolution range.

Your page should also work at even smaller and bigger sizes, though such extremes are less important. Fewer than half a percent of users still have 640×480. Although such users should certainly be able to access your site, giving them a less-than-great design is an acceptable compromise.

As the first criterion implies, scrolling is always a key consideration. Users generally don’t like to scroll. So, when you design, you should consider how much users can see if they scroll only a screen full or two. Any more than five screen full’s should be an indication to you that there is two much copy on the page.

Both scrolling and initial visibility obviously depend on screen size: Bigger screens show more content above the fold and require less scrolling. This is where you have to optimize for 1024×768: present your most compelling material above the fold at this resolution (while ensuring that the absolutely critical information remains visible at 800×600).

So, what about tiny screens, such as those found on mobile devices? A liquid design should scale all the way down to a phone, but don’t assume that this is how you should deliver your company’s mobile user experience. Mobile environments are special; to optimize for them, you must design a separate service that provides fewer features, is written even more concisely, and is more context aware.