Laying Out A Webpage: Screen Width

A div, or division is a very useful element for css-based web design. If you consider it to be a box, then you’re on the right track.

Before we start, I’d like to discuss some standard layout methods. Take a look at this image:

Realistically, a page’s width is more crucial than its height, since scrolling vertically is generally easier than horizontally (mouse scroll wheel, PgUp and PgDown, and arrow keys). Screen resolutions vary from ridiculously small to outrageously huge, but devices of similar purpose generally have similar resolutions.

  • Televisions generally output in 720×480 (SD), 1280×720, or 1920×1080 (HD)
  • A standard 20″ lcd monitor will have a resolution of either 1680×1050 (for an aspect ratio of 16:10) or 1600×900 (for an aspect ratio of 16:9 – standard widescreen)
  • An oldschool lcd or crt monitor can usually output up to 1280×1024 (with an aspect ratio of 5:4)
  • Netbooks, like the Acer Aspire One, usually have a resolution of 1024×600.

The cathode ray tube used to be the king

Back in the day when the cathode ray was king (think 90’s), Web Developers had to fit a page within the confines of 640×480, and if they were lucky, 800×600. Even though devices have jumped quite a bit further from these original standards, it’s still a good idea to keep them in mind.

Rule #1: You don’t know how big your visitor’s screen is.