The Screen Resolution Problem

I used to come across this problem almost every time I looked around the web. I would get to a web site that has a nice design, but I could not see everything without scrolling sideways with the bottom scrollbar in my browser! The reason is that the highest screen resolution my old monitor would support was 800x600 pixels. (It was an old monitor). There are also many other surfers out there who have older monitors or video cards. If you have a large target audience, you will want everyone to be able to read the page easily.

So why are webmasters designing sites for larger screen resolutions (1024x768, 1280x1024 etc.) when people are clicking away because they cannot read without scrolling two ways? There are a few answers out there to look at: Webmasters who do not realize what they are doing, those who do not care, and those whose target audience would typically have a high screen resolution.

Yes, there are some webmasters who do not realize that their web site does not look the same on every computer. It took me a bit of time to find that out myself, back when I was creating my first homepage. The problem is that you simply cannot see the problem when you only use your own computer with your personal settings. In this case, I can't really blame the webmaster....if I had a nice monitor, I would set a higher resolution as well.

Webmasters who do this knowingly yet do not care are likely to lose a large number of visitors simply because they refuse to use a smaller graphic or table. The presence of a graphic that is over 600-620 pixels wide will almost surely force the user with a low resolution into using the horizontal scrollbar. The problem is really annoying if the viewer is trying to read a paragraph of text and has to scroll every 5 seconds to see the next few words at the beginning or end of a line. Navigation can be irritating as well, because the navigation menus may be partially hidden or in some cases, entirely hidden from the viewer when they first see the page. If they do not realize the scrollbar on the bottom, they may feel the site is not finished or has nothing there to see. Well, if the webmaster does not care.......

If a webmasters target audience would be people with higher screen resolutions, they may design site to be viewed at that resolution. Usually they will make sure the 640x480 viewer can at least see the important information without the need to scroll, but the site is optimized for their target audience. This is not a major problem, since most of the people viewing that site would have the correct equipment and settings.

So, how can you as a webmaster or homepage creator avoid forcing people to scroll from left to right? One way is to simply not use any graphic with a width greater than 600 pixels, and do not define anything such as an <HR> tag or tables to be greater than 600 pixels wide. Also, do not use the <NOBR> tag on any page unless you need to make a point, such as "this line of javascript needs to be all on one line."

Another option is to use tables to enclose the contents of your page. By using tables with a width of 600 pixels or less, you will be sure that almost anyone can view your page as intended. You can center the tables if you wish, but if you are going to use some of the new features of DHTML or Style Sheets you may want to align the table to the left or right side in order to use absolute positioning without any surprises.

Another problem I have been told about is that viewers of your site may resize their viewing window. There is no way to guess what size they might go to, but you can use a table with a width percentage instead of pixels so that the content resizes along with the window. This one is much harder to deal with, especially with a complicated design scheme that requires exact numbers rather than percentages. Do what you can, but if your viewers use 50x50 windows, there just isn't much you can do stop the scroll bars.

This page used to have a centered table with a width of 550 pixels. I only have a few pages where a bottom scrollbar will show up, usually on examples of the <NOBR> tag and in some javascript tutorials. This article uses style sheets or the browser defaults if style sheets are not supported. Otherwise, I use mostly 550 pixel tables, or I use no tables at all and keep the images and horizontal bars small in width. Just remember, if you want everyone to see your site without scrolling, keep your site inside the 600 pixel width barrier. Those who have old monitors or video cards will definitely appreciate it and return to your site in the future.