Screen Resolution and Page Layout

Source Article: www.useit.com/alertbox/screen_resolution.html

Being able to see your content, as could be imagined, is one of the most crucial aspects of your website. However, people have screen sizes with a large range of resolutions. It becomes important therefore, to take in many resolutions during the designing process to make sure nobody is left out.

Jakob Nielson says to optimize for 1024x768 resolution. That's currently what 60% of the monitors are. By "optimize", he simply means that our site should look and work the best at this size. However, the most common size is subject to change and therefore, so is the "optimal size". Also, there are people with monitors far larger than that. There are also people with monitors far smaller than that.

The first rule of figuring in screen resolution is a liquid layout. By using relative sizes and positioning, the user is able to increase or decrease the size of the content.

At optimal size, everything should be legible, properly laid out, and that the most compelling material is visible above the fold. Some of this is difficult to maintain at various sizes. For instance, the fold is alot higher on a 800x600 browser window. Here, it's important to put make sure that the critical stuff is still visible. Obviously, it's a good idea to test at several resolutions.

I tested my site for how liquid it is. It seems to work pretty well but I need to make my header image and my nav bar more compatible.