The Problem of Resolution

One problem has plagued the web ever since the time graphic designing started for websites and is on a continuing spree till now. This is the problem that the different sized monitors handle different page widths. HTML does not pay any attention to the width while designing.

Resolution
Screen Resolution is the number of pixels that can be displayed across the monitor, both vertically as well as horizontally. For example, 640 x 480 is the lowest resolution that anyone uses today. In this resolution, the screen is 640 pixels in width and 480 pixels in height.

Most monitors have the option of adjustment of the resolution. A Lower resolution makes the objects on the screen appear bigger, and a higher resolution makes them look smaller. The default size is somewhere in the middle. Most monitors offer 4 settings that are, 640×480, 800×600, 1024×768 and 1280×1024. So, it is important to test your site to make sure it works properly on all these settings.

Failure Pays
For all the resolutions less than the one that you designed for your site, the site would display horizontal scrollbars. The site's width should not be set to a very low width as the visitors who use a higher resolution will view a thin strip of the site in the center of the screen.

Solutions
The best solution is to design the site for 800×600 resolution, as the people who use a higher resolution can make their browser window smaller. In order to create a fixed width design, set the CSS width in pixels such as for 800×600, set it to 800px.

The CSS margins can be set to auto, putting your fixed-width page in the middle of the screen. If you do not set the margins, the page would appear in the left corner.

It is very important to make sure that your designs work properly on all of the browsers, irrespective of how wide it is. Elastic designs stretch themselves to fit the window. It is a little complicated to carry out but works well. For instance, if your site is divided into three columns, the left and right ones can be made fixed with, and the center one can be kept elastic.

However, the graphics are the one that create the maximum problem with elastic designs. Suppose, you have a fixed-width header over your site,  to adjust it, you will need to make it as an image floating over the background.

Spread the word

del.icio.us Digg Furl Reddit Ask BlinkList blogmarks Blogg-Buzz Google Ma.gnolia Netscape ppnow Rojo Shadows Simpy Socializer Spurl StumbleUpon Tailrank Technorati Windows Live Wists Yahoo!

Print

Related Entries

Related Tags

, , , ,