Basic Web Design: Dimension Restrictions

Web pages are not printed media; they are text files which are read into a web browser and displayed in a browser window on a user's monitor. Most users do not have large monitors, and the browser window itself, along with the Windows or Macintosh operating system elements, takes up much of the available screen space. If your web page design is too large, the frustrated user will have to scroll left and right, and the impact of your beautiful design will be lost. Any parts of the design which must be seen all at once by users must keep within certain dimension restrictions.

Maximum Web Page "Splash Screen" Size:

14" (640x480) monitor: 500-550 pixels wide by 300-325 pixels high.
15" (800x600) monitor: 600-700 pixels wide by 400-425 pixels high.

Remember: content on a web page doesn't go right to the edge of the browser window, as there's usually a margin of some sort; you'll need to make your graphics that much smaller to compensate.

You may choose to design for either the very smallest monitors (14"), or the next smallest and most common monitors (15"). Again, although many people have larger monitors, most people do not. Remember, too, that a whole new group of users are coming online, using cellphones and PDAs to surf the web; these devices use 640x480 pixel displays, so we'll be supporting small monitor resolutions for some time to come.

I usually design my pages between 500 and 550 pixels in width, and make all my graphics a maximum of 300-325 pixels tall.

If you yourself possess a large monitor, you may need to do your preliminary design work in Photoshop. Start with a blank graphic in your chosen splash screen dimensions (500x300 or 700x400 or whatever), and create your design within that limited space; that's what the professionals do.

Main Menu