Home Articles Articles Web Design Articles Web Design Articles - Screen Resolutions

Web Design and Screen Resolutions

"Create me a professional, great looking website", says the client.
"No problem", says the designer, and creates a magnificent website. He shows it to the client, who feels cheated.
Why?
Because on the client's monitor, the website fills up only half of the screen's width. It looks like a column in the middle of a desert. Not very effective..

Need another horror scenario?
"Create me a professional, great looking website", says the client, "..and I want it to fill up the entire screen"
"No problem", says the designer (some designer..), and creates an outstanding website.
The designer has created a website that perfectly fits the most common screen resolution, which is currently 1024x768. The designer feels that he has not only created a beautiful website, but he has also considered global internet statistics and has therefore acted responsible.
Has he really?
The answer is of course a clear No, because what happens is that the client looks at the website and sees a design-killer called horizontal scrollbar.

What does that mean?
It means he has to scroll to the right, and then back in order to see the entire website content. The page looks cut off to the client.
Why did that happen?
Because the client uses a screen resolution that is in the mean time quite rare, but it obviously still exists. He uses the almost extinct 800x600 screen resolution.

The perfect tool to see what any website looks like in different screen resolutions Screen Resolution Checker No matter what screen resolution you use..

The solution? In this case they should have talked up front and agreed on the details.

One of the first major challenges for any web designer is to create a website that looks good on any screen.

The first thing to do is test your websites, or any websites you created, on different screen resolutions.
You can use the Screen Resolution Checker to test any website and see it in different resolutions.

Here are a few more common ways to create a professionally looking website - on any screen resolution:

Fixed width websites, usually created to fit the most common screen resolution
Website can be left-aligned, centered (CNN.com, Yahoo.com), or right-aligned.
Pros: Better possibilities for precise layouts (text & images), fits any resolution
Cons: Unnecessary vertical scrolling on higher resolutions, blank space

Variable width websites, content is displayed in percentage of available space (PepFX.com)
Pros: Website will fill up the screen on any screen resolution
Cons: Very limited possibilities (less freedom) for layout (harmony of text & images)

Flash websites
Pros: Can create beautiful full width & full height websites, no scrolling
Cons: Can't use imported images, as they look distorted (low quality) if stretched, or if large images are imported, then the file size is drastically increased.

Frames
Pros: No reloading of once loaded content, lots of freedom for layout & usability
Cons: Search engine killer. Content is either not registered or split up and therefore less valuable than with classic (no frame) pages.

If you are not sure what your screen resolution is, click here to perform a Screen Resolution Check.

Additional information

Now... with all this splendid information in mind, don't forget that an informed decision is all that really matters. If the client chooses the most common screen resolution, so 1024x768, then great! Just don't forget to ask.