The E/A Home Page Primer by Sally A. Handley & Marco J. Shmerykowsky

Much of the web page advice you read today is geared towards attracting "surfers" and aimed at getting placed in potential customers "favorite spots" directory. It's hard to imagine a scenario in which a client surfs the web, locates an interestingly designed engineering firm web page and says, "I think I'll hire them to design something for me." Selecting engineers and architects from a catalogue is just about as likely to occur.

That is not to say, however, that web pages serve no purpose for the marketing of professional services. Potential clients visiting the web page of an architect or engineer are visiting the site to obtain information, not to be entertained. They are in search of firms which have the experience and qualifications they require. This type of client inquiry is more similar to a brochure request -- which is why all those admonitions not to put your brochure on the web make architects and engineers scratch their heads and wonder exactly what they are supposed to put on a web page.

The World Wide Web was originally created to enable educational institutions to communicate information. As the web becomes more commercial, this basic purpose is sometimes forgotten. Rapid access to basic information is dismissed in favor of visually appealing graphics that take time to load. Sometimes a client really does just want to locate an engineer in New York City who designs tall building structures or an architect in Boston who specializes in historic restoration projects.

Stop and consider a moment the benefit of having your brochure and some standard marketing fare on the web. A potential client who calls to request a brochure can view it immediately without waiting for express mail. A design team member can download resumes to include in a joint submission. An existing client working after your office has closed for the day, can quickly access your homepage to see if you provide site/civil engineering services, even though s/he has only used you for structural engineering services in the past.

The bottom line is this -- if architects and engineers don't advertise the way McDonald's and Revlon do, they don't need to create home pages the way they do either. The buyers of architectural/engineering services are interested in the experience and qualifications of the firms they consider to design their projects. That doesn't change because you're conveying your experience and qualifications via the World Wide Web. There is however, different criteria that must be adapted when designing for the web.

Design Pointers

The first step in designing a web page for a service-oriented company centers on recognizing that the World Wide Web is a very different medium from paper. When you attempt to put together an informative brochure for a client, you have full control over the development of the brochure. You determine the font style, the color of text, the size of the brochure, the arrangement and size of graphical images, etc. For example, if a picture is placed at the center of a page with two columns of text flowing neatly around the image, the designer knows that the intended presentation will reach the client. On the Web, however, this fine degree of control doesn't exist. Consequently, there are a few rules of thumb to allow for the creation of web sites that do what they're supposed to -- provide information.

The most basic rule of thumb is to choose between two design approaches.

1. The first is that a Web page be designed in adherence with the "Least Common Denominator." This essentially means that a page should be designed in a manner which will allow the slowest possible computer to access the page quickly and to display the material properly. This approach ensures that all computers of varying capabilities and connections will see the same page design.

2. The second design approach centers on the concept of "controlled deconstruction." With this approach, a page designer develops a complicated page for a high end or popular platform. In addition to developing the basic design, the developer ensures that the page presents the intended information properly as certain key features are disabled. For example, if the page is designed to use Netscape's feature, then the designer should ensure that a potential customer can view the page and obtain the information with a non-frames capable browser.

A corollary to both design approaches centers on an age-old engineering principal which seems to have vaporized in the modern computer world. This principal is known as KISS -- Keep It Simple, Stupid!

Web designers must never assume that their audience is using the latest and greatest www browser, or that they have super fast connections, or that they have computers with state-of-the-art multimedia capabilities. Such a callous assumption will just lead to the creation of a page which is slow to download and view. This has the very real potential to translate into lost viewers or "hits".

The best way to understand this concept is to think back to the last piece of software you tried to install on a personal computer. Almost everyone has encountered these chilling words: "This program requires (chose from a faster CPU, more physical memory, more storage space, or different version of the operating system) which is not installed on your machine. Program can not run." While a user may attempt to solve this problem at home, on the Internet it is much easier to just head to another web site. Thus, if the web site for A/E firm A is too slow, then the user may quickly jump over to A/E firm B. The developer must ask if developing a super fancy site is worth the risk of alienating a potentially lucrative client.

In general, a web page designer should remember that the Internet is a computer network which follows "open" standards. Thus, the Internet supports a variety of programs and operating systems which connect to the Internet through the same standards. Consequently, it seems rather illogical to pick one product and say "we only support this."

File Size

Continuing from the previous concept, keep all files small. Since everything which is transmitted from a web server to a web client is essentially a computer file, it is understandable that the larger the file, the longer it will take to deliver the file from point A to B. Consequently, the total size of ALL of the files on a "page" should be kept under control.

A typical HTML file, which is the core file for a "web page." is essentially an ASCII text file. This is a simple file containing nothing more than text. In addition to the "content", the file contains the code which tells a browser such as Netscape's Navigator how to display the text. This "display" information tells the browser which images to load, how big the text should be, how the information in a table should be arranged and so on. Typically, a single HTML file will range in size from 2 Kbytes to 20 Kbytes.

Format Files

Once the basic HTML file is loaded, the browser must also load all of the graphical images such as icons, logos, and photographs. These images can be saved in a variety of formats such as Bitmaps, GIF's, and JPEG's. Each of these formats has advantages and disadvantages. The most popular image formats are GIF's and JPEG's.

The GIF file format has two features which tend to be very popular and useful. They are known as "Transparency" and "Interlacing."

1. Transparency allows the browser to "turn off" a single color in an image. This allows the background to be seen in place of the "transparent color." For example, a web developer obtains a rectangular image which contains the Olympic Rings on a white background. Since the designer would like just the rings to "float" on a textured background, he decides to make the white color "transparent." Thus, when the browser displays the rectangular image, the white background will not be displayed.

2. Interlacing allows a browser to quickly display the entire image quickly. Thus the user does not have to wait until the image has been completely downloaded. As the computer receives the first pieces of information about the image, it displays it. As more information is received, the computer refines the image. Thus, the image slowly comes into focus. In general, this process allows a user to feel as if a site is "responding" faster because s/he can start seeing the image quicker than s/he would if it wasn't interlaced.

In general, some basic rules for graphic design apply. Icons, logos and additional page enhancers should be kept small and should use a limited number of colors. Photographs should be "tuned" so that an efficient balance between image quality and file size is maintained.

Under Construction

The phrase "Under Construction" serves no purpose except as a pun for a firm involved in the building and construction industry. All Web sites should be viewed as dynamic and evolving works. They are constantly changing and developing. New information should be constantly added and old information updated.

Perhaps the biggest mistake you can make is thinking you can hire a computer consultant or web page designer to "create a site." This option is only valid if you realize two things:

First, you will have to advise the consultant on the content and structure of the site. In-house staff will need to write the content and collect the photographs, drawings or renderings which will reside on the site. (Sounds like there is a lot of work to be done by the in-house staff, doesn't it?)

Second, you are paying for a one shot deal. If you want to add to a site, modify information, add sections, or redesign the site, you'll most likely have to rehire the consultant and pay more money. Thus your "one time cost" could easily turn into a cash sink hole. This accounts for a recent article in the Wall Street Journal which stated that "Nearly five million pages of a total 30 million indexed by Altavista on the Web haven't been updated at all since early 1996. Some 424,000 Web pages haven't been refreshed since early 1995 -- and 75,000 Web pages haven't been touched since before 1994."

A more sensible approach for architectural or engineering firms with limited marketing budgets, is to have an individual or web design team in the firm conversant with graphic design, HTML language and computer technology. This individual or team will be responsible for keeping the page maintained and updated.

Website Integrity

Another reason for having a member of the staff as "pagekeeper" is the need for graphic and content integrity. All designers should attempt to maintain a consistent "look and feel" to an entire web site. This consistent look and feel hasn't been implemented until the most recent versions of the bloatware office suite packages.

Basic options which should be used include:

1. Background: The same or a similar background should be used for all pages at a site. The background can consist of a texture; an image such as company logo, a color; or a color scheme.

2. Each page on a site should include a common "navigation" bar. This bar contains a hypertext link to each of the major areas in a web site such as the main page or "entrance."

3. Finally, each page should contain a way for the user to contact the administrators of the site. This should be used to report problems, browser incompatibilities, and for general feedback.

Any experienced designer knows that computer programs that "do the work for you" should be approached with scepticism. It is always important to know what the computer program is doing and how it functions so that a designer can check if everything was done correctly. This applies as much to creating a web document as it does to designing a structural beam.

All web designers should have a basic understanding of HTML code. This will allow a developer to scan the page for errors which may cause certain browsers to crash or which may be improperly implemented. For example, missing or duplicate tags can cause certain browsers to crash. It is possible to use both "heading" tags and "font" tags to change text height. Both provide similar functionality but were created for different purposes.

Frames

A discussion of web page design also needs to touch on the topic of "frames." A frame is a feature supported by browsers such as Netscape's Navigator and Microsoft's Internet Explorer. This feature allows a designer to take the "browsing window" and subdivide it into smaller windows which display different HTML files. For example, a designer could split the browsing window into two "frames" or windows. The top frame could contain a company logo and the bottom frame would contain the content. As the user navigates from link to link. The top frame would continue to display the same image while the bottom frame displays the selected HTML files.

Frames can be used effectively for various purposes. As previously mentioned, frames can be used to keep the corporate logo prominently and consistently displayed as the user navigates a site. Frames may also be used to continuously keep a consistent navigation bar visible. Another popular use is to develop a continuously visible index for a particular section of the site. This index could consist of the "main categories" or may contain a series of graphical images. In either case, as a "topic" in the index is selected, the "main frame" will display more detailed information on the selected topic.

Although frames have very real uses, they should be used with care. Don't make an entire site "frame enabled" just because it is convenient or flashy and cutting edge. Frames should only be used when it is determined that a user can obtain some special benefit. Furthermore, when frames are used, the site designer should ensure that the identical information may be accessed through the use of a "non-frame" enabled browser.

Multi-Media

The final area of web page design which may be tempting to a creative designer centers on the topic of "multimedia." Currently it is possible to include video and sound clips in a web page. The main drawback to this technology is that it takes a considerable amount of time for data to be downloaded. For example, a short AVI or Quicktime movie can take half an hour to download. The question which needs to be answered is whether or not this video clip will provide some extraordinary benefit which will make the user's wait worth while. In most circumstances, you'll find that this information may be directed to an end user in a much more effective manner which doesn't have to involve the use of the Internet.

It is possible to employ "streaming" technology such as that provided by Real Audio, Real Video, and IBM's Bamba. This technology reduces the amount of time a user needs to wait by sending enough information to the computer so that the video or sound clip can begin playing before the download is completed. Although this is an improvement over downloading a complete file, it still uses heavy bandwidth and does not provide the same quality which a VHS tape could provide. Again, the rule of "is it really worth it" applies.

Summary

In general, the design of any web site in a service industry should completely focus on providing a potential client with quick access to information about your firm's experience and qualifications. By following fundamental design principles and basic marketing guidelines every architect or engineer can create a basic website that fulfills that function.