Monitor Resolution
Monitor resolutions are measured in pixels.
Pixels are tiny dots on a computer or TV screen. The size of the dots determines your monitor resolution. The smaller the dot the more pixels you can display on a screen.
Each pixel on a screen is assigned a color to produce a picture.
The chart on the right is taken from our Google Analytics. It shows the monitor resolutions of visiting browsers to our website over a 30 day period.
Note that only 2.94% of our visitors have their monitor resolution set to less than 1024 pixels in width. See resolution 800X600.
The first number, 800, is the width in pixels. The second number , 600, is the height in pixels.
Effect on Page Width
Because we are building our web pages with a fixed page width, we need to determine the best width in pixels that will better serve the majority of our viewers.
Take a look at the diagrams below.
These diagrams demonstrate how a web page set to a 1000 pixel width will display at different monitor resolutions.
| Fig 1 | Fig 2 | Fig3 |
|---|---|---|
 This is the empty browser window. |
 This diagram shows how a 1000 pixel width page would view in a browser window when the user's monitor is set to an 800X600 resolution. The user would have to scroll to the right to view the entire web page. |
 This diagram shows how a 1000 pixel width page would view in a browser window when the user's monitor is set to a 1024X768 resolution. In most cases no scrolling is required. |
| Fig 4 | Fig 5 | Fig 6 |
|---|---|---|
This diagram shows how a 1000 pixel width page would view in a browser window when the user's monitor is set to a 1280X800 resolution. |
This diagram shows how a 1000 pixel width page would view in a browser window when the user's monitor is set to a 1440X900 resolution. |
This diagram shows how a 1200 pixel width page would display in a browser window when a viewer's monitor is set to 800 to 1152 pixels wide. |
Notice that as the monitor resolution increases the 1000 width page uses less and less of the browser window space.
If you set your page width to 1000 pixels wide, 97.06% of your visitors will be able to view your website without scrolling to the right.
If you set your page width to 1200 pixels wide 36.95% of your visitors will scroll to the right to view your page.
Conclusion
The optimal page width for best viewing in today's visiting browsers is 1000 pixels.
Besides page width, another element of the web page that you want to consider as it relates to resolution, is the size of your text. The higher the resolution , the smaller your text will appear.
Creating liquid pages that flex and shrink with the size of the browser window regardless of monitor resolution is not something that beginners should attempt.
Back to Blatant Errors
