Geeks With Blogs


Google My Blog

Murray Gordon Flash a-ah! Savior of the universe...

Screen Resolution and Page Layout

Optimize Web pages for 1024x768, but use a liquid layout that stretches well for any resolution, from 800x600 to 1280x1024.

One of the most frequently asked questions in my Web usability course is "What screen resolution should we design for?" The full answer is a bit tricky, but the basic advice is clear:

  • Optimize for 1024x768, which is currently the most widely used screen size. Of course, the general guideline is to optimize for your target audience's most common resolution, so the size will change in the future. It might even be a different size now, if, say, you're designing an intranet for a company that gives all employees big monitors.
  • Do not design solely for a specific monitor size because screen sizes vary among users. Window size variability is even greater, since users don't always maximize their browsers (especially if they have large screens).
  • Use a liquid layout that stretches to the current user's window size (that is, avoid frozen layouts that are always the same size).

Currently, about 60% of all monitors are set at 1024x768 pixels. In comparison, only about 17% use 800x600 so it's obviously less important to aim at perfection for these small-display users. What's equally obvious, however, is that you can't simply ignore 17% of your customer segment by providing a frozen layout that requires more screen space than they have available.

Optimizing for 1024x768

When I say "optimize" I 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. But it should be its best at 1024x768.

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

  • 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.
  • Readability: How easy is it to read the text in various columns, given their allocated width?
  • 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 800x600 to 1280x1024. 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 640x480. 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 (my new book discusses this in detail, giving statistics for how many users scroll various types of pages). So, when you design, you should consider how much users can see if they scroll only a screenfull or two.

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 1024x768: present your most compelling material above the fold at this resolution (while ensuring that the absolutely critical information remains visible at 800x600).

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.

Big Screens

Many users have large displays. Currently, about 18% of users have at least 1280x1024. The percentage of users with big screens is growing, though not as fast as I would like.

Big monitors are the easiest way to increase white-collar productivity, and anyone who makes at least $50,000 per year ought to have at least 1600x1200 screen resolution. A flat-panel display with this resolution currently costs less than $500. So, as long as the bigger display increases productivity by at least 0.5%, you'll recover the investment in less than a year. (The typical corporate overhead doubles the company's per-employee cost; always remember to use loaded cost, not take-home salary, in any productivity calculation.)

Apple and Microsoft have both published reports that attempt to quantify the productivity gains from bigger monitors. Sadly, the studies don't provide credible numbers because of various methodological weaknesses. My experience shows estimated productivity gains of 5-10% when users do knowledge work on a big monitor. This translates into about an 0.5-1% increase in overall productivity for a person who does screen-focused knowledge work 10% of the day. There's no doubt that big screens are worth the money.

I personally use a 2048x1536 display, and I wouldn't even call that a really big screen. Within the next 10 years, I expect monitors of, say, 5000x3000 to be in fairly common use, at least among high-end business professionals.

Starting at 1600x1200, users rarely stretch their browser windows to the full screen because few websites work well on such a wide canvas. Big windows are magic for working on spreadsheets, graphic design, and many other tasks, but not for the current paradigm of Web pages. Today, big-screen Web users typically utilize their extra space for multiple windows and parallel browsing.

To serve Web users with truly big screens in the future, we'll probably need a different paradigm than individual pages. Perhaps a more newspaper-like metaphor or a different information dashboard will prove superior down the road.

In any case, the need for a new paradigm in the future doesn't change current recommendations: optimize for 1024x768, but don't design solely for this size. Your pages should work at any resolution, from 800x600 to 1280x1024 and beyond.

Taken from, Jakob Nielsen’s Alertbox posting.


Here’s a little about Jacob Nielsen:

Jakob Nielsen (usability consultant)




Jakob Nielsen speaking at a conference.

Jakob Nielsen (born 1957 in Copenhagen, Denmark) is a writer, speaker, and consultant on software and web-design usability. He earned a Ph.D. in user interface design and computer science from the Technical University of Denmark. Nielsen worked at Bellcore, IBM, and as a senior researcher at computer company Sun Microsystems. In 1991, when the Web was new, Nielsen correctly predicted that hypertext was the future of user interface design and jumped on the bandwagon by writing a comprehensive book about it: "Hypertext and Hypermedia", published in 1990. "Multimedia and Hypertext: The Internet and Beyond," an updated version of the textbook, was published in 1995 to take into account the success of the Web.


After his regular articles on his Web site about usability research attracted media attention, he subsequently co-founded usability consulting company Nielsen Norman Group with fellow usability expert Donald Norman.

Nielsen is a controversial leading authority on web usability. Engineering-oriented and emphatically not a graphic designer, he is noted for harsh criticisms of popular websites, contending that many concentrate too heavily on design features he views as gimmicky — like animation, Flash and graphics — at the expense of usability, particularly for disabled visitors. Nielsen continues to write a fortnightly newsletter on web design matters and has published several books on the subject of web design.


His published books include:

Posted on Wednesday, August 16, 2006 6:58 AM General | Back to top

Comments on this post: Screen Resolution, Optimizing for 1024x768 and Big Screens

# re: Screen Resolution, Optimizing for 1024x768 and Big Screens
Requesting Gravatar...
I think your usability points are great. We've had some debates about what size monitors to design our company's website for.

Looking at our web logs, I see that fewer than 6% of people who visit our site have monitors of 800x600 or smaller--and, of course, I have no idea how many of those are really potential customers.

At what point do you think we can start ignoring these people? You say that we shouldn't ignore 17% of potential customers, and I agree. But what about 5.5%? 10%? 3%?

Left by Dan Ciruli on Aug 16, 2006 9:17 AM

# re: Screen Resolution, Optimizing for 1024x768 and Big Screens
Requesting Gravatar...
hey, i was just searching around for some advice and i came across your site. I have just bought a new samsung 19" flat panel monitor and i am trying to set it to the recommended resolution of around 1440 x 1200 or whatever is the closest one to that. but when i go to change it in the display settings, it only goes up to 1280 x 800 and this makes the picture all fuzzy. i have installed all the correct drivers for it and still nothing. your help would be great.


Left by Corey Topp on Sep 26, 2008 4:54 AM

# re: Screen Resolution, Optimizing for 1024x768 and Big Screens
Requesting Gravatar...
LCD's are typically targeted at a specific resolution. If it's fuzzy, you're probably targeting a resolution it's not optimized for. I would change your resolution to the optimal resolution prescribed in your LCD's manual.

But I could be wrong. If it's a driver issue, then get the latest from the LCD manufacturer. That's all I could recommend.

Left by Murray Gordon on Sep 26, 2008 4:31 PM

# re: Screen Resolution, Optimizing for 1024x768 and Big Screens
Requesting Gravatar...
Can you either send me or direct me to a link where it has a resolution chart? I need to resize a back ground and I want to make it rather large to compensate for repeating.

Thank you for your assistance,
I await your reply,

Micheal Cooper
Designer & Photographer
Left by Micheal Cooper on Sep 18, 2009 2:41 PM

Your comment:
 (will show your gravatar)

Copyright © Murray Gordon | Powered by: