Why does my website look different on another computer?

Articles > Why does my website look different on another computer?

Web Design
Where to Start?
10 Tips to a Great Website
10 Web Design Mistakes
Evaluating Web Designers
Tips for Successful Websites
Best Page Layout for Websites
Why does my website look different on another computer?
How to choose your website colours
Web Safe Fonts
216 Colours from the Web Palette

Search Engines
Google Position Monitoring
Google PageRank - Explained
How to get Great Search Engine Rankings
Why Website Content is King
Search Engine Tips & Tricks
Why you don't need to submit to 10,000 Search Engines
Why submitting to 10,000 Search Engines is a bad idea
Common-pay-per-clicks-advertising-mistakes

Marketing
Build it and they will come
Offline Marketing
Link Requests
Evaulating Link Exchange Partners

Other Articles
Website Uptime Monitoring
Understanding Website Statistics
What's in a domain name?

One of the most frequent asked questions with websites designed for clients is "Why does my website look different on another computer?" How can this happen you ask? It happens because of the various screen resolution or display settings available on every computer.

The picture on your computer screen is made up by colored dots called "pixels". The more pixels used to make the display, the sharper and clearer your picture will be and the smaller everything will look on your screen. This is called screen resolution.

A few years ago, the most common monitor size was 15" with a default screen resolution of 800x600. Currently, the standard is 17" monitors with a screen resolution of 1024x768. The issue is that web pages look different at different computer monitor resolutions. Because we are at a time in the evolution of computer monitors where the standard is currently moving between two widely used settings this issue occurs a lot.

To check the screen resolution on a PC, go to:

1. Start Button
2. Control Panel
3. Appearance & Themes
4. Display
5. Settings (Tab)
6. Screen Resolutions (Section of the screen)

There are a couple of different design solutions to cater for the different screen resolutions. These are discussed below.

Fixed Width Layouts

Fixed width layout websites are created specifically to display on one screen resolution, usually 800 x 600. They can be made to look better for both resolutions by designing the full screen to display for 800 x 600 resolution monitors and a border to display on computers with a display resolution set to 1024x768.

Look at the images below for an example.

800 x 600 Screen Resolution		1024 x 768 Screen Resolution

These images show the same website at two different screen resolutions

The advantages of the fixed size websites are:

• Better possibilities for precise layouts (text & images)
• fits any resolution with more or less border displayed
  

The disadvantages are:

• Unnecessary vertical scrolling on higher resolutions
• blank spaces

"Stretch & Grow" Layouts

An alternative design option is to have a "stretch & grow" website, where the width of the website stretches to the larger width screens. An example of this design style is shown below.

800 x 600 Screen Resolution	1024 x 768 Screen Resolution

The advantages to the stretch & grow websites are:

• Website will fill up the screen on any screen resolution

The disadvantages are:

• Very limited possibilities (less freedom) for layout (harmony of text & images)
  

© Copyright 2006 Abacus Design - Web Design Sydney, Australia

Privacy Policy |Site Map | Glossary | Useful Links