Support : Guides

Website Design Considerations

Design Perspectives

The following is a historical perspective of the evolution of web technologies. This perspective emphasizes the importance of recognizing there are an assortment of different levels of technologies in use today and how best to address these differences.

In 1994 the driving technological forces bringing the Internet to the general public were modem transfer rates, data compression and error correction, increases in processor rates, increases in addressable memory, increases in storage capabilities and the declining costs of all the previously mentioned. By 1995 most of online service companies were providing Internet "gateway" access and ISP (Internet Service Provider) companies were operating in most communities on a global scale. Then, in 1996, the World Wide Web Organization, or W3 Org, approved the HTML 2.0 and 3.2 standards. Implementation of the new standard by web browser and HTML authoring tools proved equally interesting. Leading the HTML standards push was Netscape Communications with significant contributions to the 3.2 standards revision.

In 1997 and 1998 the focus was software and infrastructure development and legislative issues. By 1999, the playing field had leveled. The real work had begun. Venture capital and speculators started plugging the plug. The WWW was a household term and business was convince that it held a purpose regardless of the industry. By 2000, the economy was being hit by the outflow of funding to fledging companies. The industry key players continued to jockey for position and started hungering down to weather the economic fallout to come. In 2001, the industry was stabilizing and the stock market had made its adjustments. The new technologies continued to roll out to the market place. Orders were there, but not in the numbers where they had been the previous few years. By the end of the year reality had sunk in. The party was over and it was time to get back to work as usual. And, it was a good thing.

Today the technology industries are pushing forward and following the trends that had been established in decades past. Moore's law is still holding and everything continues to move forward. And, what you have is several million Internet users, all using a little different technology with each requiring just a little special consideration when it comes to website design.

So, where does that leave us? The most important aspect of website design considerations is determining your intended user. This means examining whether users can be qualified as to a minimum computer configuration. This includes monitor size and resolution, connection rates and processor speeds. For more higher end audiences, users can be expected to be utilizing technologies not more than three years old. For the lower end user, consider the 3.0 standards as the minimum and include special handling for anything beyond the standard; however, typically Netscape version 4.7 and Microsoft I.E. 5.5 can be relied upon for Windows 98 and above, and Macintosh 9.2 and above.

Determining Standards

Effective website design requires a watchful eye on the standards approval process. The objective to provide a presentation that performs regardless of the user technology. Knowing web browsers' supportive functions is essential. This is defined in the web browser's documented specification. Each version and release has its own set of application specifications. These describe the functions and interfaces along with the defects that the release corrects from its predecessor. The goal is not to fall into the black hole of application defects. They are something that should be anticipated and tested for. Do not assume that because an application's specification says it will produce such and such a behavior when such and such occurs. You must test that behavior yourself and on all the major platforms.

The "Standards" are the goal of the software manufacturer. In addition, they produce their own set of extensions to the standards. Advise here is to stay within the standard, unless your business and customer are directly engaged in the deployment of that technology itself...they'll be more forgiving when something runs amiss. Otherwise, keep it simple and to the book.

A final note on Standards. Be cautious of new standards that are not backward compatible. Too much special handling is simply that, too much.

Plug-ins and Helper Applications

First, some definitions. Plug-ins are components of a web browser. Helper Applications are stand alone applications. Simple enough?

Bare in mind that requiring a plug-in or helper application is just another step your user must go through in order to take advantage of what you have to offer. Most won't especially it the component must be acquired from a relatively unknown source. Again, the rule should be keep it simple. With that having been said, there are many solid and reliable plug-ins and helper applications. If your business requires some special effects, by all means go for it, but make sure those users not willing to install and configure are also supported.

Computer Platforms

The primary Web Browsers continue to be from Netscape and Microsoft. The primary client computer platforms are Microsoft, Apple, UNIX and Linux. The primary server platforms are UNIX, Linux and Windows. It's important to remember the Internet has been in existence for more than three decades, so there are many other platforms out there in use. Again, determine your intended audience and make sure you support their minimum configuration.

Recommended Standards

Javascript®

Javascript provides programmatic logic to be place within the context of a page. The code is stored within the browser memory space and executes either inline while the page is being initially displayed, or when invoked by an event that occurs after the page has been displayed. These events can be automatic based on timers, or triggered by a user's action on the page. This programmatic logic provides for what is referred to as dynamic HTML.

The syntax of Javascript is similar to the Java programming language. Both are object oriented programming languages, meaning that the language operates on objects with a predefined set of methods to perform its function. Web browsers have a set of predefined objects that represent various parts of the web browser application. A web page may embed functions that may be also be invoked.

Using Javascript requires special consideration as the implementation across web browser is different, particularly when supporting pre-4.x browsers. And, here's the reason...

Javascript was originally developed by Netscape Communications. Microsoft followed suit developing JScript to operate with its web browser. Incidentally, the MOSAIC web browser was the prototype for both Netscape's and Microsoft's web browser. So, Javascript and JScript though similar and performing similar basic functions originally had a variety of differences. Those differences are becoming less significant now that the DOM (Document Object Model) Standard has entered the scene. The difference none the less require special handling in order to assure your website visitor is supported regardless of what version and release of web browser they are running with.

Most web browser permit the user to disable Javascript processing. The requires that assurances are taken to provide "NOSCRIPT" code where necessary. Just remember, the web browser may not support Javascript simply because the user has disabled it.

Coding Javascript is not complex; although, it is quite easy to write complex code. There are now many good tools for development. Both Netscape and recent versions of Microsoft browser provide support for internal debuggers.

Here is a little history of the battle between Javascript and JScript.

January 1997 - Note that its reported that Microsoft is working closely with Sun Microsystems and Netscape to assure implementation of Javascript® in Microsoft's next release of Explorer®. The predominance of Netscape's user base, and Microsoft's indication of implementation, Javascript® should be considered as a standard. This requires website components to be designed to support both enabled and non-enabled Javascript® supportive browsers.
October 1997 - The previous comment regarding the concerted efforts of the parties described above appear to gone amiss. Referenced is the legal action of Sun Microsystems over Microsoft's JAVA implementation. Both parties are presenting completely different description of their differences and complaints.
April 1998 - The legal debate continues with injunction against Microsoft to withdraw usage of JAVA logo under license from Sun Microsystems. Microsoft contends logo use not in violation.
March 1999 - ...most of the legal debate has settled down and Javascript is alive and well. You'll find full support in MS I.E. 5.0.
March 2000 - Although the design and implementation issues have stabilized, the implementation of communicating with the elements of a Web Page using Javascript is still platform specific. The various elements of a web page reflected by Object Oriented Classes are not identical requiring some platform testing and platform specific coding within a Web Page's imbedded Javascript. Given that ultimately numerous platforms will be supported in addition to Web Browsers, this is doing the web page design a favor by forcing them to put in the hooks and conditional statements used to handle to platform specifics.
February 2001 - The use of DOM (Document Object Model) continues to be browser specific; although, is supported by both current releases of Netscape and Microsoft browsers. There are some noted backward compatibility issues that remain to be addressed to fully implement the DOM standard.

Frames

As part of the 3.2 standard, Frames should be considered part of "The Standard." In support of older browsers, both frame and non-frame supportive browsers requires design consideration. It is possible to code quite complex framed website, but use caution especially if you expect a search engine robot to be able to figure out how to get around. As a general rule, for Internet websites, as opposed to Intranet and Extranet, use no more than two frames.

Image Resolution

Many computer configuration still support low resolution terminal displays. The support of 256 (215 dithering), thousands, and millions of colors requires consideration.

In 1996 the cost of super high resolution (SVGA) monitors were still relatively expensive. 256 color resolution was high proportion of use. Now the cost has dropped considerably and the high resolution monitors are typical. But, keep in mind your intended audience. If it is the general public, the percentage of low resolutions monitors is still fairly high.

In 2002, I still recommend using the 215 color palette GIF images for icons and controls and keeping high resolution JPEG for graphics.

Cascading Style Sheets

Supports more specific display format, and supports defining styles one time with a document, or using external style sheets provides for website wide use of individual style sheets. NOTE: The use of style sheets was introduced in version 4.0 web browsers. It is necessary to also use the HTML font tags in order to support all versions of browsers.

With the HTML 4.0 Standard all visual display attributes are being transitioned to the Style Sheet and are being deprecated from HTML. However, bare in mind that the previous standard is also intended to be supported by the web browsers. The transition process is expected to be gradual.

HTML Standards

Go to the source:

HTML 4.01 at W3 ORG
HTML 3.2 at W3 ORG
HTML 2.0 at W3 ORG

HTML Aspects

Discussion on Forms

Graphics and Imaging Information

There are a series of design considerations relating to use of graphics at a website. Here are the primary issues:

Image File Size
File size determines the time it takes for the image to download and display within the content of a page. The smaller the file size, the faster the file will be processed. File size is impacted not only by network throughput rates, but also processor speeds.
Image File Type
Basically, there are two image file types; GIF and JPEG. GIF is limited to a maximum of 256 colors and supports animation. JPEG supports millions of colors and supports compression. The graphic itself should determine the file type to be used. High resolution graphics are best supported by JPEG. Low resolution graphics perform best using GIF.

Advantages of GIF is the amount of storage per pixel. GIF's also support Interlacing and Animation. Interlacing is the phased partial display while an image is being downloaded. Animation supports display of multiple images within the content of one file, and supporting parameters such as frame delay intervals, frame retention and refresh.

Advantages of JPEG is support of millions of colors and file compression. Disadvantages JPEG is the size and amount of storage per pixel.

NOTE: Although there is currently a standard supporting Animated JPEG images, most browsers and applications are yet to support the standard.
Number of Images
The number of images displayed on a page adds to the total number of bytes requiring to be downloaded and processed by a client browser. The larger the total number of bytes contained in a page is, the longer the page takes to download and display.

Utilizing the file caching functionality of client browsers permits a page containing numerous images to be downloaded rapidly, when the majority of the images have previously been cached during the display of previous pages. Exploiting this client browser attribute can significantly improve the display of graphic intense pages. You'll note that this site utilizes this functionality significantly.
Image Caching
This built-in web browser function is a key factor to designing website's that perform at optimum. Staging the introduction of images and reusing images that have already been downloaded can significantly speed up the presentation of a website. The trick here is to measure to total number of bytes for a web page and determine how many elements would typically already have been used on a previous page that the user has visited. There are usually a couple of megabytes of cache available at your disposal, as long as the user has properly configured their cache preferences. Consider both 14.4 BPS and 56 BPS for maximum and minimum download time for all components on the page, then start subtracting the cached elements. The first page displayed will be the slowest to display, but subsequent pages if properly designed should speed right along. If you do this right, your visitor will be impressed with the performance of your website compared to the major of website out there.