If you put your face really close the monitor, you’ll see that it is made up of countless little dots, which work together to form an image. Each of these dots, in computer-speak, is called a “pixel”. The higher the resolution of a monitor, the greater the number of pixels on-screen.
So why is monitor resolution so important? A higher monitor resolution not only means a higher quality image, but also that much more information can appear on-screen at a time.
As a Web designer, your goal should be to design your site for a resolution that doesn’t require your users to scroll left-to-right in order to read each page. To do this, simply specify a table width that allows only “x” number of pixels to be displayed horizontally.
Here’s the problem: say that you design for the 800 x 600 monitor resolution, by specifying a table width greater than 600 pixels. Whenever someone comes along with their monitor set to 640 x 480 they will see a horizontal scroll bar. On the other hand, if you design your site for 640 x 480, anybody who visits your site with a monitor set to a higher resolution will see a lot of blank space.
Unless your site is meant to be viewable on a handheld device such as a Palm or WAP Mobile phone, it will all come down to three choices:
Design For 640 x 480:
Pros:
- Everyone will be able to view your site without needing to scroll horizontally.
Cons:
- There will be a lot of white space on the screen for people with higher resolutions. The amount of information that you can squeeze onto the screen will also be severely limited.
Design For 800 x 600:
Pros:
- You’ll have a lot more room to work in. And, for most designs, this resolution provides enough space to present your site navigation bar along with a reasonable amount of content.
Cons:
- You’ll alienate visitors who use a 640 x 480 resolution
Use a “Flexible Design”:
The “Flexible Design” uses percentages instead of exact pixel measurements for specifying table width. So, instead of saying that the table width should be 780 pixels, you instead specify that it should take up 95% of the screen. Site visitors on 800×600 monitors will see 760 pixels horizontally, while visitors with 640×480 monitor resolutions will see 608 pixels of information.
Pros:
- There will never be any wasted space. Your site will always occupy 100% of the available space on the monitor (or whatever percentage you choose).
Cons:
- It will become difficult to predict how your site will look on the wide range of systems out there. Higher resolution monitors will also display a large number of words per line, which can make the text difficult to read.
Weigh the pros and cons carefully before making a decision here. Because each site has its own unique audience, you should find out what monitor resolutions your visitors use – sign up with a service such as TheCounter.com. A good source of information on what resolutions the general Internet population uses can be found at Statmarket.com.
You’ve got less space than you think
You may think that if you’re designing a site for 640 x 480, you just create a table that’s 640 pixels wide and dump all your content in there. Not so. The browsers’ scrollbars bars occupy a lot of that space, and further limit the amount of space you have to work in. Also, things like the Microsoft Office ToolBar can cut down the on-screen real estate even further. If that weren’t enough, some users don’t maximize their browser windows. Below I’ve outlined how many pixels wide a table should be in order to comfortably fit onto a screen at the specified resolution with the browser window maximized.
640 x 480 — 600 pixel wide table
800 x 600 — 780 pixel wide table
1024 x 768 – 1000 pixel wide table
1280 x 1024 — 1200 pixel wide table
So, what resolution is right for your site?
Unfortunately, there is no single answer as to which resolution you should design your site for. The best way to make that decision is to find out which resolution is most popular with your target audience, and then design your site to accommodate them. If you haven’t begun your design yet, a good rule of thumb is to only design for the higher monitor resolutions if your site is intended for techies or people who have the money to upgrade their computers regularly.
Matt MickiewiczMatt is the co-founder of SitePoint, 99designs and Flippa. He lives in Vancouver, Canada.
