Monitors - Screen Resolution and Websites

There are two things that determine how large a web page looks on someone's screen: Screen size and resolution.

Resolution is the number of pixels per inch. A pixel is one of the individual dots of light and color that make up each image.

Resolution also determines how the page fits on or fills the screen and whether or when someone has to scroll to see all of it.

Many people are surprised to learn that a web page often looks SMALLER on a larger screen. That's because the resolution is so high.

Remember what I said yesterday, that what your browser gets when you go to a web page is INSTRUCTIONS on how to display the page? Those instructions include how many pixels high and wide to display the various images and other elements of the page.

If your web page is 1000 pixels wide (pretty typical these days), and your screen is only 800 pixels wide, then you are going to have a left-right scroll bar as your screen can't fit the whole page on it horizontally. Only about 5% of monitors are about 800 pixels wide anymore (a few years ago they were in the majority).

Currently, about 25% of monitors are in the vicinity of 1100 pixels wide, another 50% around 1300 pixels wide, and about 25% around 1400 pixels wide or more. We'll talk about mobile browsers (iPhones and the like) another day.

If your web page is only 750 pixels wide, it'll fit on those 5% of monitors that are only 800 pixels wide. But it'll leave huge blank spaces on the left and right of the screen, for most viewers.

There are a few solutions to this. One is to actually detect what size (in pixels) the screen is and adjust what you are serving up to that visitor. Some websites do this, but it is an expensive approach. You can also make some crude settings to adjust the page display to the full screen width, but that tends to look really bad on a large percentage of screens. In most cases, the best solution is to design for the largest majority of visitors.

Since resolutions have been increasing (and increasingly shifting towards widescreen, influenced by the spread of high definition), from time-to-time that is going to shift. Currently it means designing to around 1000 pixels wide, and to consider how the background will look with different resolutions - since the background bands left and right of the page will be anywhere from thin, to huge (if someone has, for example 1900 pixels or more resolution).

This is one of the reasons most websites start to look old-fashioned after about 3 years.

Contact us
from unknown to unforgettable
Request a FREE Evaluation of your
Website or Internet Marketing