Have you ever visited a Web site that looked, well strange? Something about it just wasn't right. The design was well done but it just didn't seem to fit the screen. It happens quite a bit. The cause is lack of attention on the designer's part.

One of the most challenging things a Web designer faces is designing a site that looks good on everyone's computer screen. Because there are so many different browsers, and because each surfer can have their monitor set to a different screen size, the designer must pay attention to how the pages will look in a variety of situations. Let's take a look at the three most important issues:

Does This Look Small to You?

An important thing to understand about screen resolution is that it is NOT the same thing as screen size. The screen "size" (15", 17", etc.) itself always stays constant, whereas the "resolution" of a screen can change depending on your display settings. A 15" screen and a 17" screen might both have the same exact resolution, which means that the display would look the same, even though one screen is larger than the other.

Resolution is measured in pixels. A pixel is basically one dot on the screen. There are three basic screen resolution settings on computers: 640 x 480 pixels, 800 x 600 pixels, and 1024 x 768 pixels. A 640 x 480 setting means the screen is showing 640 pixels horizontally and 480 pixels vertically for a total of 307,200 pixels on the screen. A 1024 x 768 setting means 1024 pixels horizontally and 768 pixels vertically for a total of 786,432 pixels. So what does this mean to you?

Think of it as "zooming in" or "zooming out" on the same image. If you are viewing a Web page at a 640 x 480 resolution, you have "zoomed in" on it and are viewing it close up. The text and images probably appear larger but you might not be able to see the entire picture. Scroll bars might appear on the screen that all you to scroll horizontally to see everything on the page.

Changing to a resolution of 600 x 800 would be similar to "zooming out" slightly from the 640 x 480 size. The text and images appear smaller than they did at the 640 x 480 setting and you may be able to see the entire picture rather than having to scroll from left to right. And finally, the 1024 x 768 setting "zooms out" even more. You can view the entire page, but there might be a lot of surrounding white space. Text and images appear much smaller and further away than they did at the 640 x 480 resolution.

At this point, you might be interested in experimenting with your screen resolution to see the differences first hand.

Important note: You may want to make a note of your original resolution so you can change back after experimenting.

For Windows users:

Clicking on the Start button,

Select Settings,

Select Control Panel,

Double click on Display,

The Display Properties window opens up

Click on the Settings tab at the top of the window

Take note of original resolution

Move the screen area bar by dragging it to the desired resolution.

For MAC users:

Click the colored apple in the top left corner

Choose Control Panels

Choose Monitor and Sound

Take note of original resolution

On resolution, use the drop down selector to set your resolution.

A Web designer needs to take all three of these screen resolutions into consideration when designing a Web site. Not an easy task as what looks good in a 640 x 480 resolution doesn't usually look good in a 1024 x 768 resolution and vice versa.

Are Your Colors Safe?

Mac's and PC's both use different color palettes, however they have 216 colors that are common to both. These 216 colors are considered to be "Web safe" colors. Using the 216 Web safe colors means that your colors will look fairly consistent on different computer platforms (Mac or PC), different operating systems (Windows or Mac), as well as different browsers (Internet Explorer and Netscape Navigator, to name two). As a side note, any graphics created for the Web, such as logos or buttons should also use the 216 Web safe colors.

How do you determine if a color is Web safe? Many programs, such as Macromedia Dreamweaver, come with a color picker that allows you to specifically choose Web safe colors. If you don't have a program like that, there are many free ones available on the 'Net. .

Your Browser, Their Browser It's All the Same. NOT!

A Web site will appear differently depending on the browser being used to view it. The two most commonly used Web browsers are Internet Explorer and Netscape Navigator. However, there are many more - including the AOL browser, Mosaic, Opera, Lynx and Web TV to name a few.

Not only do designers need to worry about cross-browser compatibility, but they also need to consider the version of the browser being used. For example, Internet Explorer 3.0 and Internet Explorer 5.5 support different features and may display pages differently.
Want to check your Web site for compatibility with Internet Explorer and Netscape Navigator? Run it through the validator at http://www.netmechanic.com. As a plus, this service also checks a Web site for broken links, html errors, possible spelling errors and approximate download times.

All in all, it is important to test a Web site in as many ways as possible. View it in different screen resolutions, various computer platforms and different browsers. Take the time and effort to ensure that a Web site will look good no matter how it is viewed. The result will be a pleasurable viewing experience for all your visitors.