|
Screen Resolution: What's the Best Size to Design For?
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? 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. 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... 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. target="_top">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 target="_top">Google Website Optimizer. 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: or shrink to the size of the browser window and screen resolution 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 Don't: space gives the eyes a rest 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: the fold so users can see it without scrolling? columns, given their allocated width? 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. As displays continue to get larger, a 1024 X 768 pixel screen resolution may not be the most common in the future. At least twice a year, check your site statistics to see what screen resolution size most of your visitors are using. Watch the video for more information... ARTICLE DATE: 2008-11-26 REVISED DATE: |