Intro. to Monitor Resolution

Topics:




Standard Resolutions    back to top

The word resolution can refer to dots or pixels per inch (dpi or ppi). However, it can also refer to how many pixels are set to fit horizontally (across) and vertically (down) on a monitor.

There are some common 4:3 resolutions on Mac and PC:

640x480   - (means 640 pixels across, 480 pixels down)
800x600   - (means 800 pixels across, 600 pixels down)
1024x768  - (means 1024 pixels across, 768 pixels down)
1152x864  - (means 1152 pixels across, 864 pixels down)
1280x960  - (means 1280 pixels across, 960 pixels down)
1440x900  - (means 1440 pixels across, 900 pixels down) -not 4:3

The higher the numbers, the higher the resolution. 1024x768 is a resolution anyone can see on a computer, meaning, many people have their monitors set to this setting or higher.

4:3 refers to the proportion of the width of a display to the height. A monitor or display setting that is 4:3 means that the ratio of the width to the height is 4 units to 3 units.
4:3 aspect ratio is NOT the same as widescreen displays/monitors. Be aware that the resolution of screens that are widescreen will not necessarily conform to the (mostly) 4:3 resolutions I've listed above.


Effects of Changing Monitor Resolutions    back to top

Increasing the resolution setting of your monitor:

When changing your monitor setting from a lower setting to a higher one, you will notice that images appear to shrink a bit, and may appear sharper. At the same time, you will notice that you seem to have more screen space to work with.

Decreasing the resolution setting of your monitor:

Conversely, when you go from a higher setting to a lower one, images will appear to grow and take up more screen space; at the same time you will seem to have less screen space overall.

Summary:

Higher resolutions give you more screen space, and images appear smaller relative to the screen space as a whole.

Lower resolutions give you less screen space, and images appear larger relative to the screen space as a whole.


Considerations    back to top

At this point in time, most people have their monitors set to resolutions at or higher than 1024x768.

A web artist or designer must decide what minimum resolution it is reasonable to assume that her/his audience(s) will have, and create web pages accordingly.

Essentially, 1024x768 is a simple minimum resolution to assume for web audiences using a desktop or laptop computer.

Avoid Sideways Scrolling?

Web pages that cause sideways (horizontal) scroll bars to appear are a no-no in conventional web design, and pages with content that users can't even see unless they scroll sideways are a BIG no-no (unless you are using sideways scrolling deliberately as an aesthetic device -- and you have to pull it off well or it just comes across as sloppy planning). Vertical scrolling is usually much, much, much more acceptable than horizontal scrolling (and exploring vertical scrolling as an aesthetic device is also important to think about).


One Page at Different Resolutions    back to top

Below are 4 pictures of the first page of the old Fall/Winter FACS 2930 course notes from years ago (as that page appeared on a Mac monitor set to one of several resolutions). This is to show you how the same web page looks and acts differently when the monitor is set to different resolutions:


Below is the page at 640x480: Some Problems
Notice the sideways scroll bar, and notice that page content is cut off at the right edge of the window as well as at the bottom edge.


Below is the page at 800x600: Fine
The sideways scroll bar is gone, and a reasonable amount of page content is visible. The images on the page are a bit smaller relative to what we can see on the monitor overall.


Below is the page at 1024x768: Fine
Images on the page are smaller again relative to what we can see on the monitor overall, and we can see even more page contents on the screen. Notice that the vertical scroll bar is gone, but that a slightly large amount of white space is appearing on the right of the page.


And here it is an an even higher resolution: Some Problems
Images on the page are smaller yet again relative to what we can see on the monitor overall. Page content has actually become proportionately too small, and readability is an issue. Notice the background image is now starting to repeat at the right of the page.


Essentially, a web site should look/work fine on at least 2 different resolutions (as the old old Fall/Winter FACS 2930 course site does above), or more. It is can be very difficult to create a web site that looks/works fine on more than 3 different resolutions, so you do not always see it in action. However, this is the goal of the recent movement towards responsive web design.



Factors in Making Sites Work at Different Resolutions    back to top

So now you have an idea of how monitor resolution settings can affect how your site looks and works, and you see why a site should work fine on 2 different settings. The question is, how do you accomplish this?

The minimum resolution you are aiming at gives you your starting point. Let's say you are aiming at a minimum resolution of 800x600 (meaning anyone with a resolution of 800x600 or higher should be able to see your site without content being cut off at the right, or without having to scroll sideways). You therefore assume you have 800 pixels across to work with on the screen.

You might assume that you can go ahead and make an image (or a fixed-width table, for example) that is 800 pixels across and put it in your web page without any sideways scroll bars appearing. Unfortunately, this assumption, though logical, would be wrong. It would be wrong because that assumption doesn't take into account the pixels that the browser window needs at each side of the screen.

If the browser window is full screen on a monitor set to 800x600, any table or image on the page in the browser must be smaller than 800 pixels across -- to leave room for the edge of the browser window as well as the margin between the edge of the browser window and the page content.

Edge of the browser window:

If you look at a browser window, you can see that it needs a little space on the left and the right to show you the grey edges of the browser itself. That uses up some pixels, leaving you with fewer than 800 pixels across for any image (or table, etc.) you wanted to put on your page.

Margin around the inside of the browser window:

And if you look more closely, you may also notice that a browser usually indents the content (text, images, etc.) on a page a few pixels from the left and from the right so that words and images don't run right into the grey edge of the browser. This also uses up some pixels, leaving you with even fewer pixels across again.

A Basic Dilemma of the Web:

"So," you may say, "tell me how many pixels the browser needs for its edges and for the margin, and I'll subtract that from 800 to get how wide my image on the page could be without causing sideways scroll bars." The problem is, many browsers use different numbers of pixels. Internet Explorer (IE) is different than Firefox, which is different than Safari or Chrome. Also, one version of a browser could be different than a different version number of the same browser. Firefox on a Mac doesn't necessarily use the same number of pixels as Firefox on a PC. Etc.

So now you are confronted with some of the technical challenges of putting creative work on the internet. How do you make sure that your image isn't too wide when whether it's too wide depends not only on the resolution of the monitor, but on whether the audience uses Firefox or Chrome (or another browser), on whether the audience is on a Mac or on a PC (etc.), and on what version of the browser the audience has?

Luckily for you, other web artists and designers have done research on this very dilemma, and have made recommendations...


Recommendations for Different Resolutions IF you want to avoid sideways scrolling:    back to top

The best way to approach the dilemmas of resolution and web page creation is to follow recommended maximum pixels widths for a given resolution, and then double-check your pages by testing them at different resolutions in different browsers on different computers. Testing is a big topic in itself, which I won't go into further here, but the maximum pixel widths for each resolution are a really good start...

Maximum pixel widths for images, tables, divs, etc., that I would recommend:

for 640x480   - 557 pixels wide
for 800x600   - 717 pixels wide
for 1024x768   - 941 pixels wide
for 1152x864   - 1069 pixels wide
for 1280x960   - 1197 pixels wide

The above maximum widths assume that the user sets their browser window to the full width of the screen. The above widths also take into account different versions of browsers, on Mac and PC, with or without vertical scrollbars, and even the possibility of PC users having a Microsoft Office taskbar showing up at the left or right edge of the screen.

Because of all these factors, the numbers I recommend are a little conservative, but they are pretty much guaranteed to work! For instance, an image that was 717 pixels wide (or less) on a web page viewed at 800x600 would not be too wide to be completely visible in the browser window, and it would not cause sideways scroll bars to show up!

Images, tables, and other elements that are a maximum of 557 or 717 or 941 or 1069 or 1197 pixels prevent sideways scroll bars if used properly: