Pixels, Pallets and Other Pesky Details

Pixels Not Inches or Centimeters

Pixel, one of the individual dots that make up an image on your computer. For example, if your computer monitor is set to 640-by-480 mode, you can see up to 640 pixels across and 480 pixels down. Images are created by the program setting each individual pixel to the correct color.

Most people have their computers set to 640-by-480, so that is the size you should design your web site for. Why is that important? Because if you make your site 1000 pixels wide, visitors will have to scroll to the right just to see everything - and most don't think to scroll to the right.

A web site designed for 640-by-480 works out to be (safely) 600 pixels wide and 400 pixels tall. Why smaller? Because the browser itself takes up valuable screen space, along with any other "always visible" items they may have running. Your site can always be longer - visitors do know to scroll down the page.

Get yourself a few sheets of graph paper and draw out a box that is 60 squares wide by 40 squares high. That is your sketch screen for your site with each square equaling 10 pixels by 10 pixels. If you want a header on the top of the page, you can draw it in and get a good idea how much space it might take up. If you plan to have a photograph on the page that is 320-by-240, after blocking it out on your grid, you can see you have very little space left.

Play around with your ideas, making new sketch screens as you need them. Eventually, you'll figure out a layout you like!