Return to the Web design menu to learn the basics of Web design with these great Web design tutorials. From navigation and usability, to choosing a Web host and domain name, these tips will help you get started!
Web design tips and tutorials for beginners: Home pageWeb design tips and tutorials for beginners: Design techniquesWeb design tips and tutorials for beginners: Dreamweaver tutorialsWeb design tips and tutorials for beginners: Fireworks tutorialsWeb design tips and tutorials for beginners: Photoshop Elements tutorialsWeb design tips and tutorials for beginners: AdSense tutorials

Home > Web Design > Screen resolution

Screen resolution

As you design your site, you'll need to decide what resolution you'll be optimizing for. Below are some recent statistics regarding global screen resolution:

Browser resolution is one consideration of Web site design. Match your Webpage to your user's screen resolution

Although 800x600 had been the most prevalent revolution, there is a gradual shift toward higher resolutions. However, unless you'd like to try "stretchy tables" (see below) we'd recommend optimizing for 800x600. Here's why:

  • If you optimize for anything higher, you'll commit a design "no-no" for over 20% of your visitors- the dreaded "horizontal scroll bar".

  • A printed page (portrait with default margins) only has about 600 pixels available horizontally. If your pages are 1024 pixels wide, visitors will lose over 40% of the page every time they print!

  • Many people with higher resolutions (like 1280x1024) prefer to have two side-by-side browser windows (rather than one that fills the screen).



Optimizing for 800x600 leaves about 780 pixels of usable screen. (You need to provide for the vertical scroll bar and borders.) Also, it's a good idea to center the page within the browser window. This reduces the visual 'wasted space' for visitors with higher resolutions. To help explain, here's a look at one of our pages:

Creating a site at 800x600 resolution
at 800x600

Creating a site at 1024x7680 resolution
Centered at 1024x768

A left-justified Web site at 1024x768 resolution
Left justified at 1024x768

Stretchy Tables

Unless you're an intermediate designer, or feeling really brave, we'd recommend against using stretchy tables (sometimes called 'liquid' tables or layouts) on your site.

Advantages

  • Page fills the screen for all users
  • Don't have to worry about horizontal scroll bar

Disadvantages

  • Design & maintenance of layouts is more difficult
  • Can't control appearance of your pages. (Will vary depending on resolution.)
  • Lines of text will get very long, and thus difficult to read (poor design) if the
    visitor is using a very high resolution (above 1024x768).
 
      
 

Home | Design | Dreamweaver | Fireworks | Photoshop | AdSense
   
 

©2006 Wilk Web Works
All rights reserved.