Looking for the lessons? Get started!
Monitors and their impact on Web design.
The entire Web Design Principles section can be accessed through the menu below.
Unfortunately, not everyone's browser will support the spiffy JavaScript menu behind that innocent-looking button. If your browser won't display the menu, just click on the button and you'll be taken to a separate page with the entire menu displayed in clear, non-JavaScript HTML.
If there's one piece of computer equipment that graphic designers interact with more than any other on a daily basis, it's their computer monitor. — Design TalkBoard
Monitors come in sizes (i.e. 17 inches, 21 inches, whatever), but we're more concerned with their display sizes. This tells us how big the actual display of the screen is. The measurement is in pixels, which goes along nicely with our use of pixels as units of measurement.
Everything on this page dovetails with the information about page layouts:
A List of Display Sizes (Desktop Computers)
- 640x480
- The standard monitor size in the mid-1990s. Almost no one designs for a display this small any more.
- 800x600
- According to some surveys, less than 5% of users have monitors this small. But many designers still make their designs to accomodate this size.
- 1024x768
- Currently the "standard" display size. Most designers create their designs with this in mind as their primary size.
- 1280x1024
- Larger than the current "standard" size, but many users view their Web pages in this display size.
- 1600x1200
- A significant number of users have displays this large.
- 1900x1220
- Now we're getting into the high end of display sizes. Most designers don't design for displays this large, unless they're creating "fluid" layouts (see below). If you create a fixed design for a display this large, almost everyone has to horizontally scroll to see your content.
- Larger display sizes
- "Vanity" displays, big-screen televisions, and so forth.
The authors at Design TalkBoard write:
For web design a 17" monitor is good for simulating the most popular size of computer monitor, but many web designers will find that the screen clutter created by Flash and Dreamweaver tool palettes is intrusive.
LCD or CRT Monitors?
Chances are you've worked with both LCD and CRT monitors at one point or another. LCDs are the cool "new" flat-screen monitors, while CRTs are the old "tank" monitors. Here's what the folks at Design TalkBoard have to say about the two as they impact graphic and Web design:
Good LCD monitors usually give a sharper picture and cause less eye strain. However, CRT monitors are still considered to have a better color range and are easier to calibrate for color accuracy. As such, CRT screens are still very popular in graphic arts environments where high quality color reproduction is vital.
Layouts: "Fixed" or "Fluid"?
This question pertains to the kind of "layouts" you will use for your pages — a concept we cover in a different page.
The simple definitions:
- Fixed width layouts
- The width is "fixed," or set at a specific number of (usually) pixels. No matter how narrow or how wide the display is, the width of the Web page is the same.
- Fluid width layouts
- These adjust themselves based on the width of the user's monitor display, and are usually based on ems or percentages.
There are subcategories of fluid layouts, particularly the layout style called "elastic." There are also combinations of layouts called "fixed-fluid." We won't go into that here.
Which one is better? Neither one is "better." The question is, which choice — fixed or fluid — suit the needs of your users, and which personally appeals to you as a designer. Only you can answer these questions.
Optimum Page Sizes for Various Displays
So if you're using a fixed layout for your site, what are the optimum page sizes for the various sizes? That's certainly a matter of debate, but here are some guideline figures. Your mileage may vary, so test them yourself before ramming them into your layouts. Remember, "chrome" (the operating system and browser interface elements, such as taskbars, address bars, scrollbars, and the like) takes up a significant piece of the desktop display. What's actually available to your site is called the "canvas." Different browsers provide different sizes of "canvases." Macs provide larger display areas than Windows PCs, unless the sidebar is enabled. Everyone's computer is set up slightly differently, so these numbers are not set in stone. (And don't forget, some users don't like to view the Web with their browsers maximized.)
Just be grateful we're not designing for one of these puppies any longer:
(Image from Wikimedia, a public domain source.)
The dimensions in this page follow the convention of placing the width first. In other words, width x height.
| Display Size (in pixels) | Optimal "Canvas" Width (in pixels) |
|---|---|
| 640x480 | width 600 |
| 800x600 | width 780 |
| 1024x768 | width 960 |
| 1280x800 | width 1220 |
(This information is based primarily on material from Jennifer Niederst Robbins, Cameron Moll, ProAxis, and Chet Garrison.)
As noted above, the 640x480 monitor size is quite obsolete, with less than 1% of general users employing such monitors. So, unless you know large numbers of your audience use the bitty monitors, you can forget about setting your page width at 600px — most of your visitors will see your site in a relatively narrow "strip" down the center of their monitors. It's somewhat the same with the 800x600 monitor; though there are significant segments of the population who use them, studies show that the use hovers anywhere between 1% and 5% of the respondants. (Those studies, I think, are somewhat flawed, measuring as they do mostly high-end users and not the more general population, including those who use the Internet in libraries, community centers, and the like, not to mention the millions of users in less developed countries, or in less developed areas of Europe, Australia, and the US, who rely on the smaller monitors to surf the Web.) So, though many designers no longer bother with the needs of their 800x600 users, those needs are worth consideration.
As for the larger monitors, I didn't put them on the list for several reasons. While many people use them, their usage is not in the majority, not yet anyway. There are a number of larger displays, including 1152x870, 1280x960, and 1600x1200 among others, so it's difficult to set a "one size fits all" canvas for these larger monitors. And, many folks who use these enormous monitors "multi-task" with them, having several browsers, documents, and so forth open at one, with none of them maximized. So these widths aren't what most designers use when laying out their pages.
Of course, you can always design a liquid layout and avoid all of these issues.
Optimal Page Widths for Mobile Devices
If you thought designing for desktop and laptop displays was confusing, try designing for mobile devices. The number of different page widths (and heights) are almost endless. On the other hand, operating system and browser "chrome" is minimal, so you can use the width(s) of the display to determine the size of your layout. Some of the most popular sizes are:
- 128 x 160 pixels
- 176 x 220 pixels
- 240 x 240 pixels
- 240 x 320 pixels
- 320 x 480 pixels
On the lower end, you have mobile phones like the black-on-green Nokia phone:
(Image from Wikimedia, a public domain source.)
which are tough to design for under any circumstances, and features a 128x128 display.
Somewhere in the middle, you have BlackBerries and Palm Pilots:
(Image from Wikimedia, a public domain source.)
which often feature displays of 240x240 or 240x320.
On the upper end, you have Apple's iPhone:
(Image from Wikimedia, a public domain source.)
which uses the more generous 320x480 display size.
Then there's the new Apple iPad:
(Image from Wikimedia, a public domain source.)
which, with a 1024x768 display size, can handle regular desktop/laptop display sizes without issues. (There are other issues with the iPad's operating system which don't allow designers to just treat it as they would a desktop or laptop, but we won't go into those here.) Same with Nokia's Internet Tablet and other "tablet PCs," which operate much like regular desktop/laptops and can, with some caveats, be designed for in the same manner.
