Things to consider for your website Part 2

Part one of our three part series on designing a good website investigated consistency, and how a good web designer, or web developer can convey that to your audience. The next topic in our series is knowing your audience and their computer equipment. This topic has four sections. They are monitor size, Internet connection speed, audience platform, and audience's web browser. It is an overlooked fact, but not every websurfer is surfing at the same speed, nor do they have the same computer, operating system, web browser, or monitor while viewing a website. Some designer and developers overlook that.

The audience's equipment defines the parameters of most web design. According to MyComputer.com almost 50 percent of websurfers have an 800 x 600 screen resolution. That is an important thing to remember. There are websites that can only be viewed at 1024 x 768. That misses almost half of the audiences because they can't view the site without using the scroll bars. Scroll bars should not be utilized as the sole means of viewing a website.

Average Monitor Resolution
Resolution	% of Users
640 x 480	8.9 %
800 x 600	49.5 %
1024 x 768	22.5 %
1280 x 1024	2.0 %
Unknown	14.8%
MyComputer.com, 2001

When a web browser is open the buttons and search areas take up some of the screen. The space lost to the browser must be accounted for by reducing the average 800 x 600 design space. "The actual usable size to avoid any scrolling at this resolution is 595 x 295 pixels (the safe width for printing at this resolution is 535 pixels). Most users however have their resolution set at 800 x 600 (31%). To avoid scrolling here, the usable size is 750 x 425 pixels. A compromise would be to place the most important information within areas that are visible at lower resolution settings, while placing less important information in areas visible at higher resolution settings" (Bernard:http://psychology.wichita.edu/optimalweb/position.htm).

The average 15-inch monitor has only a viewable area of 13.1 inches. Some monitors can fit a 1024 x 768 resolution on a screen that size, but again some can only render at 800 x 600. The average 17-inch monitor only has a 15.1-inch viewable area. Some of those monitors have a resolution of 1600 x 1200, while others are only 1280 x 1024. That screen size also has the browser window to compete with as well.

Internet Access 100% determines the size and use of content. Whether the content uses GIF's, JPEG's, SWF's of QuickTime movies it has to be used wisely in order not to over inundate the user with long wait times. The average audience still has a 56k dialup modem connection. With that in mind most web pages limit their total size between 40k and 60k. In real time that is the difference between someone on a 33.6k modem waiting 1.5 to 2.5 seconds to download a page. Most data on user patience says that you have on the average of 5 - 7 seconds to win a user's attention. If you have a 350k Flash site that is presented to most 33.6k dialup customers they will wait between 10 and 20 seconds to download a site. A lot of people think that the DSL and high-speed broadband connection are more popular. High-speed connections account for less than 5% of all Internet connections. Planning for the user to have a slow dialup connection makes a site that everyone can enjoy regardless of Internet connection speed.

Good use of graphics takes into consideration the amount of time it takes to download the graphic. Some graphics are visually stimulating but most users don't pay attention to them. Some users turn the graphics off in their web browser surf the web only reading text. "According to the Poynter Institute, users are twice as likely to fixate on text than on the images in their initial visit to a site. In fact, they found that users did not look at the images until the second or third visit to the site" (Bernard:http://psychology.wichita.edu/optimalweb/images.htm). Lately there has been a trend to use animated graphics on webpages. The animated graphics range from rollover buttons, to banner ads, to fully interactive Flash sites. It was believed that animated graphics would give the audience some entertainment while conveying a message, but at the same time most animated graphics are in the form of banner advertising. Most users ignore banner advertising because it distracts them from reading content on a website.

The audience's operating system is important for a few reasons. The first reason is the main three platforms Windows, OS X, and UNIX all render graphic completely differently. In theory the h1 tag should be the same font size from platform to platform, but it isn't. Netscape 7.0 on OS X looks different than Internet Explorer on Windows, and so does a Lynx text browser on UNIX. Taking all of that into consideration there has to be a happy middle to design toward, as well as testing your final work on all platforms to ensure the look you want cross platform.

Web Browsers play an important role in how websites are seen. Microsoft's Internet Explorer (I.E.) is the most popular web browser. Most people are happy if their site looks good in I.E. because it most computers already have it pre-installed. Firefox, Safari, Netscape and Opera are also popular but they aren't as widely used as I.E. Each web browser interprets and executes HTML tags similarly but a Cascading Style Sheet (CSS) would give a designer more consistent control over their design than hoping on the h1 tag to always modify a font to a 24 pt size. If a web designer relies on the HTML being interpreted the same way by one program over three operating systems they will see the subtle differences. If you use JavaScript 1.1 all browsers back to I.E. 3 and Netscape 3 can interpret the script. If you use JavaScript 1.5 it works differently I.E. 4 and Netscape 4 are the first set of compatible browsers that can read Javascript 1.5. Another thing to remember is that Netscape invented JavaScript, and JavaScript will work better in Netscape, and other Mozilla based browsers than in I.E. Knowing and understanding the rendering differences between each web browser is key to good layout and screen design.