By Rick Johnson

Website builders craft their sites by following these standards. Anyone who's ever tried their hand at HTML knows however, that there are still many inconsistencies within these standards.

The problem is that the two major browsers, Netscape and Microsoft Explorer, have always differed slightly in their interpretation of HTML. Also, the web page has to work on the wide variety of computer setups. We have no way of knowing what type of computer our website visitors might have or how they have it set up.

The web developer worries whether his code will work on older versions of Netscape and Explorer. For example, he knows old browsers are especially inconsistent in their support of JavaScript, making the already challenging practice of web development more tricky. Even today, with version 4 giving way to version 5 of the major browsers, problems still persist.

Each new release is awaited by the development community and filled with promises of greater adherence to standards. Often, these hopes give way to disappointment with a new release, and a consistent standard for all Internet browsers is still not a reality.

Web builders need standards of their own to insure their sites will look good to the greatest percentage of visitors to their website. Perhaps we can make some educated guesses about how to make our websites viewable by the maximum number of visitors regardless of their computer or browser type.

Monitor Size/Resolution

One of the most hotly debated topics among web professionals is, what is the best size to build a web page? The problem is that users can set their screen resolution any size they want. Measured in pixels, the most common sizes for Windows are 640x480, 800x600, 1024x768, and 1280x1024.

The question is, what is the proper size? A web site 590 wide will fill a 640x 480 screen quite nicely, leave about a third of empty space on a 600x800 screen, but won't even fill half of a screen on a higher resolution monitor. A web page more than 640 pixels wide will force users to scroll sideways if they have a low resolution setting, not a pleasant experience.

Luckily the Internet provides us with some statistics.

How Internet Users set their Screen Resolutions* 1280 x 1024 2.05% 1024 x 768 25.82% 800 x 600 54.10% 640 x 480 12.57% Others 3.21%

Clearly we see the majority of computers have monitors set to 800x600, but interestingly enough the old (640x480 low resolution, big type) has become a relatively small percentage with the 1024x768 now up to nearly a fourth.

The definitive website for web design standards is the Yale Style Guide, http://info.med.yale.edu/caim/manual/contents.html. They make a point for a website design using consistent page grid dimensions throughout. They argue for a text area 535 pixels wide. Why? That is the maximum area that can be printed on an 81/2 x 11 inch page. They consider the maximum viewing area for a 640x480 display is 595 x 295.

Another consideration is that long lines of text are simply too hard to read. The eye has trouble finding the start of the next line. A text block more than 535 pixels wide would be wider than a conventional page and should be divided into columns. Why not make the page expand automatically to fill the page, no matter what size the resolution? Well, it is possible by building the page with a table that is set to WIDTH=100%. For example, this table would fill the whole screen regardless of the monitor resolution setting.

<TABLE WIDTH=100%>
<TR><TD>
This is text that will fill all of the horizontal space, etc., etc. etc....
</TD></TR>
</TABLE>

The trouble is that a paragraph containing 20 lines with 15 words per line on one monitor, might stretch to 4 lines with 75 words per line on another.

So what do the big sites do? A quick informal look is very revealing.

All of these sites have a text area of around 600 pixels wide that can be seen on a 640 x 480 screen. We see several variations of how they handle the rest of the screen space.

Variation 1
Keep site at fixed width… 600-640 Centered
Disney.com, NationalGeographic.com, YAHOO.com

Variation 2
Expand site to 100% of screen, at least 3 columns of content, fix width on 2, center column adjusts…
Excite.com, Amazon.com

Variation 3
Fixed content of about 600, extra right column of 150, aligned to left
Pcmag.com, cnn.com

Variation 4
Fixed content of about 600, expanding backgrounds / color bands, to 100%
Razorfish.com

Stats as of Nov 99 * Browser Wars IE Explorer 78% Netscape 21% Other 1% Browser Versions Version 4 and 5 93% Versions 3 5% Web TV 1% All other 1% Operating Systems Windows 94% Macintosh 3% Other 2% Unix .4%

Browser Version

Another big consideration for website builders is to consider what browser versions their web site is going to support. Of course, it goes without saying we'll need to be compatible with both Netscape and Microsoft Explorer versions 4 and above, but how backwardly compatible do we need to be. Pages built for versions 4 and above that also work well with version 3 browsers presents some limitations such as the use of Java Script and support of style sheets (CSS).

The question is, do we need to worry about versions 3 or even versions 2?

Again, we first refer to some hard facts about browser usage. According to the latest numbers, Version 4 browsers (or above) account for about 93% of the browsers used on the Internet today. Versions 3 account for about 5%. Web TV is 1% and all other versions total about 1%.

A word about Web Statistics

Before we go much further, a word about how we're using web statistics in this article. First of all, the stats used here are from only one source, and are used for general reference only. The idea is to get a basic idea of what the reality is now, in late 1999, on the ever-changing Internet. If Macs are less than 5% of all computers, should you forget them? If your site looks terrible on Netscape 3 because you used style sheets, should you ignore it because Netscape 3 is only used by 3% of users? These are questions each of us will have to answer.

Personally, I don't want to turn away any users to sites I have built. I no longer insist Netscape 3 looks perfect, but I check it for obvious defects. Mac users might be at a small percentage, but if you're building a site for schools, for example, your Mac audience may be larger. Just when you decide to forget about Netscape 3, I can guarantee you that someone will contact your client wondering why the new website doesn't work on their computer.

It might be better to simply stop users with a "Please update your browser" message, than to allow anyone to see an unprofessional version on an old browser, no matter how small the percentage.

Other Website Standard Examples

Netscape - Web Safe Colors
The 216 Netscape colors are called "Web Safe" because they are fairly consistent across monitors and platforms. For example, a web safe color value used to create a graphic in PhotoShop (153,0,0), will match a table background color of the same converted value in HTML (#990000). Using a non-Netscape color, even with the exact same values, may not match on some monitors.

Should all website graphics be only 216 colors? Should you check your site on a 256color computer? No. Photos and color graphics use millions of colors and a computer on the Internet set to only 256 colors looks terrible. Just make sure when a graphic has to match an HTML color, it's web safe.

See … http://www.ibiz.net/sep99/faq.htm http://www.lynda.com/hexh.html

Headers, Meta Tags and Titles
For search engines, every page should have a meaningful title and Meta tags containing a site description and keywords. Contact information about the web developer might also be included as a comment tag and could contain other information such as a date and the developer's initials.

<!--------
Website developed by XYZ Web Co. Dec 1998
Xyz@web.com
Last updated on Jan 12, 1999 - RJ
---->

Graphics Compression
All web graphics should be saved as tifs and then run through graphics compression software such as Fireworks or Debabelizer.

Download Size
You might want to set a standard of a maximum total file size for each page. This is always a tough one because some designs dictate more graphics.

Filenames and Folders
It's important to have a consistent file system. Project files properly stored and backed up are essential when several people work on a project or when the inevitable update a year later occurs. All website filenames should be in lowercase letters because UNIX web servers are case sensitive. Some firms also have naming conventions and filename guidelines such as the 8 and 3 policy… 8 letters or less with a 3 letter extension. (i.e. filename.gif)

Now it's time to draw our line in the sand. We want our sites to look good to as many users as possible, but we do have to stand our ground at some point.

Our Website Standards - Example Sites work well on Netscape and Explorer versions 4 or greater. Sites are checked on version 3 browsers and Macs. Won't worry about other browsers or versions 2 or less. Won't worry about text only browsers. Use web-safe colors to match graphics with HTML colors Place Headers, Meta Tags and Titles on all pages Compress all graphics Try to keep total file size less than 30K on all pages Use a consistent file namimg scheme

Website standards are important for team web development environments because of the obvious advantages of consistent and organized website creation. Standards are also important for the single person developer to stay on track and not continually rethink these confusing issues.

*Web Stats are from http://www.statmarket.com