Screen Resolution: Whats the Best Size to Design For?

View Archives

The Solution Movie (90 sec.)

Recent Forum Posts

• SEO

• Change Website Description

• Google Search Results for my Website

• Slow computer with Spyware hurting my web business

home | Sample Articles | Screen Resolution: Whats the Best Si . . .

Screen Resolution: What's the Best Size to Design For?

Rick Henkin

Designing a website that looks good and performs well for the majority of your visitors is a tall order. How do you decide what's the best screen resolution to design for?

Skip to Video

What's the difference between screen size and screen resolution?

Screen size refers to the size of a computer monitor or display measured diagonally in inches.

Screen resolution is the number of pixels that fit on an entire screen. For example, an 800 x 600 pixel screen is capable of displaying 800 distinct dots on each of 600 lines.

Let's say you have a notebook with a 15.1 inch screen. As you increase the resolution on your display, from 800 X 600 pixels to 1024 X 768 pixels to 1280 X 800 pixels, everything on your screen seems to get smaller. If you increase your resolution even more, eventually everything will be so small, you won't be able to read it.

The reason, of course, is that while your screen size remains the same, you're trying to jam more pixels into the same space, so your pixels are smaller.

Now, if you were using a larger screen, everything might still look fine as you increase the resolution size. This is because a smaller screen set to specific pixel dimensions has a higher resolution than a larger screen set to display at the same pixel dimensions.

Is it possible to design a website that looks the same in every browser, screen resolution and operating system?

No. Not only do we have multiple combinations of browsers, screen resolutions and operating systems to contend with, the individual user has the ability to manually change the settings on their own computer and may not even choose to maximize their window size.

So, forget about it, which begs another question...

What about placing items "above the fold"?

Above the fold is a newspaper term that refers to the headlines and stories that are visible when the newspaper is folded in half as on a news rack. These are what sell the paper. In web terms, above the fold simply means the first full screen that a user sees without scrolling. (We're speaking about vertical scrolling, not horizontal scrolling, which is a complete no-no.)

The truthful answer about placing items above the fold is that you have no real idea of where the "fold" is for a specific visitor. It depends on the screen resolution the user has set, as well as the screen size of their monitor. Bigger screens show more content above the fold and require less scrolling. Smaller screens show less content above the fold and require more scrollling.

However, critical elements should still appear on that first screen. Elements that tell your visitor who you are, what you're offering, and why they should do business with you have to be seen on the first screen, or you've lost them.

Place your calls to action on the first screen as well, but avoid using the far right of the screen in case some of your visitors don't keep their screens at full size.

Don't jam everything possible on to it, just make sure that first screen conveys exactly what your website is about, in as clear and simple language as possible.

Rather than worry about where the fold is, make sure that your content is interesting and valuable to the reader.

What's the most common screen resolution?

A study by Onestat.com shows that as of September 30, 2008, 40% of all computer screens worldwide were using a screen resolution of 1024 X 768 pixels. If you look at just normal screens as opposed to wide screens, that percentage increases to almost 62%. The lowest resolution in their study, 640 X 480 pixels accounted for only 0.16% of all screens, while a screen resolution of 800 X 600 pixels accounted for just 4% of all screens.

You web analytics program will give you statistics for your own website or you can try the free Google Website Optimizer.

Should I design for a 1024 X 768 screen resolution?

Unless your research tells you that your audience uses a specific screen resolution (not likely, unless it's a company intranet and everyone uses the exact same computers and displays), the best choice is to design for the most common screen resolution, which currently is 1024 X 768 pixels.

This doesn't mean that all the other sizes should be ignored. Your website should look good and work well at other sizes, but look and work the best at the most common size.

Do's and don't's of designing for screen resolution

Do:

Use a liquid or flexible design with % widths that expand or shrink to the size of the browser window and screen resolution

Make sure to keep your text to around 60 characters per line even if you now have more space. Long lines of text are hard to follow

Test with different browsers, both at the current version and at least, the immediate prior version

Test with different screen resolutions

Test with different operating systems

Don't:

Don't make the lines longer just because you have more room

Don't clutter the page because you have more room. White space gives the eyes a rest

Don't use images that are too wide as they may distort and/or cause the horizontal scroll bar to appear

According to Jakob Nielsen, a renowned usability expert, the 3 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?

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 compare these 3 criteria at different screen resolutions, both smaller and larger.