by Colin Gilboy
(This article was originally published in the February 1997 CSI Specifier Magazine. The text has been modified and updated from the original submitted article for use on 4specs.com. Please print out this article to read at your leisure and to retain as a guide to developing your web site. Colin Gilboy 1997-9)
The November 1996 Construction Specifier Product Rep column provided an overview of using an Internet Web site for construction product information. This article discusses the decisions and specific steps needed to develop your Web site. This article provides ideas on how to integrate the Web site into your marketing and literature strategy.
There are two messages in the article you should take away:
(1) Internet Web sites will change the way information is delivered to architects and specifiers, and
(2) Fancy Web page designs and complicated programming features are not necessary for a specified-product Web site. Architects consistently tell me that they want a Web site to quickly provide them the design information they need to complete the project design and specification. Completeness and usability of the information is more important than fancy visual effects on the Web site.
DEFINE YOUR GOALSThe first step is to define the goals for your Web site. For a manufacturer, the goals can be to increase availability of product information, increase effectiveness of print advertising and to reduce the costs of distributing product information. Distribution costs include printing, mailing, updating, catalog collections, CD-ROMs and disks.
DETERMINE THE SCOPE OF YOUR FIRST SITE
Start by reproducing your basic brochure, product data sheets and specifications. Develop a Web site design using story boards to show the general Web site layout and relationship among pages. Develop a main home page for the company, a product selection guide and mini-home pages for each MasterFormat section. These product pages will be linked to outside indexing sites for quick access to the product data without going through your entire Web site.
After the Web site is completed, you can redesign your printed brochures and eliminate much of the boiler plate product information and specifications in the printed brochure. Your redesigned literature can point to specific addresses in your Web site for that information.
All Web sites go through developmental phases, so expect and plan for that development by starting simply and expanding as you learn. Once your Web site is on line, expand the initial site to include your entire architectural design binder. Your design binder is the result of many years of experience and you probably already have the photos and the text files on disk, ready for editing.
Develop a plan to continually improve the content and the visual effectiveness; increase the site complexity as you learn more about what your customers are using and need to find. Much of the content will remain the same as your Web site design evolves by redoing the graphics and connecting pages as you explore how to improve the Web site.
WHAT WILL A WEB SITE COST
Developmental Costs (small or medium manufacturer):
Low |
High |
|
| Web Site Consulting including Conceptual Development | $0 |
$5,000 |
| Computer Programs and Books | 500 |
1,000 |
| Internet Name Registration | $100 |
$200 |
| Graphical Design and Photo Conversion | 500 |
3,000 |
| First year's ISP Costs | 750 |
2,500 |
| Cost of employee or consultant time to develop initial Web site (20 documents and four connecting pages) | 2,000 |
5,000 |
TOTAL |
$3,850 |
$16,700 |
Annual Costs: (Written in 1996)
Low |
High |
|
| Annual ISP Fees (assumes outsourcing the server) | $400 |
$3,000 |
| Site Maintenance Costs (Employee) | $1,000 |
$6,000 |
| Consulting, Seminars, Books and Computer Programs | $500 |
$2,000 |
TOTAL |
$1,950 |
$11,000 |
DO IT YOURSELF OR CONTRACT OUT?
Most manufacturers will work with their advertising agency and perhaps an outside consultant to develop the Web site concept and initial pages. I recommend that an in house person learn to maintain the Web site on a day to day basis.
A business-to-business Internet site is different than a consumer-oriented site. An architect or contractor will visit your site to get information to use in the project and not to be entertained. This is a key point to emphasize and to reach agreement with the consultants or in house staff developing your Web site.
SELECT YOUR INTERNET WEB PROVIDER
Select which company will deliver your Website. This can be different than the company providing your web access or dialup. Few construction product manufacturers will need a dedicated server that can handle 1,000's of visitors per hour. You can use either a shared web server (least expensive) or co-locate a server at the ISP.
Use your own company name as your domain name in the Internet address. The domain name can be set up by your ISP as part of the business package. With your own domain name, you can use email to customers, distributors and sales people such as george@yourco.com. Your ISP can check to see if the name is available and work to develop an alternate name.
Some special features services, such as guest books, discussion groups and mail back forms, require programming using CGI and PERL programs or a package such as FrontPage. Check to see if your prospective ISP allows CGI and PERL programs and if your ISP provides a FrontPage site complete with the Microsoft extensions. Many ISP's do not allow programming to run on their Web servers.
Key message - have separate mini-home pages for each product or CSI MasterFormat Division and Section. This will provide an architect or specifier a direct way to get to your product data. Think of these mini-home pages as separate binders for the architect's office library.
HOW WEB PAGES ARE WRITTEN
One of the first decisions is whether to use an Integrated Web Design Suite such as Microsoft FrontPage, Netscape Gold, or Adobe SiteMill. These Integrated Web Design Suites automate the process of site development and are an easy way to get started. If you are planning to use the special features you will need to select an ISP that provides the server package. 4specs.com uses FrontPage and highly recommends that package as an editing tool. We do not use the FrontPage web server extensions.
When I first started 4specs.com, I manually programmed all the pages with a text editor. Later, I used a variety of programs. Late in 1996 I started to use FrontPage to do the page updating. This has simplified the web site maintenance, even though the ISP I use does not have the FrontPage extensions. I would not return to manually writing all the HTML. In addition to FrontPage I use a special FTP program to upload the revised pages and to ensure that the latest version is on the ISP's server. NetLoad checks with the web site to see if the version on my computer is newer than the one on the ISP's server. If so, the revised page is scheduled for upload.
The alternative to the Integrated Suite is to use individual programs to handle each step in the Web site development process. You combine and manually link the Web pages and upload the files to your ISP. The activities are the same in either case. I will use the manual method to show you each step and to demonstrate the underlying principles.
Web pages are written using a markup language called Hyper Text Markup Language or HTML. Browsers interpret the HTML and produce the visual image on your computer. The most common browsers today are from Netscape and Microsoft. The majority of browsers are from Netscape and Microsoft.
Complicated pages take time to learn how to make the page look like you want it to. The final visual effect is complicated by the variety of interpretations from various browsers. Only the latest browsers support the latest features. By early 1997 most architectural visitors to your site will be using the most recent browser upgrades from Netscape and Microsoft provided by AOL, CompuServe, or downloaded from the Internet.
PROGRAMMING TOOLS
You will need HTML and Image processing programs for Web site development. Standard text pages can be converted to an HTML file using a recent version of your Word Processing Program (Microsoft Office 95 & 97 or WordPerfect 7 & 8). FrontPage does an excellent conversion. This article was first read by FrontPage and the web page edited from the original text using FrontPage. The HTML output from these programs will require some editing to improve appearance, such as a changing the background and changed type faces to improve emphasis and on-screen readability.
There are many HTML Editors available to help develop the more complex HTML pages with graphics and links. These HTML editors provide the proper link markup, provide the proper locations for images and with internal and external Internet links. There are several HTML editors available for a free 30 day trial with a cost under $50 for the complete version. Some HTML editors show the final page appearance either while editing or as a preview. These editors allow you to quickly view the design work and to spot errors and problems as you go along. Some HTML editors include verification programs to check your syntax compliance with the HTML standards. This syntax checking will reduce errors that may create unexpected results on some older browsers.
Image Editors handle the cutting, format conversion and color reduction. The image editor can take a scanned photo and crop, resize and make the necessary changes to optimize loading time and appearance of images, banners and photos. More about images below. PaintShopPro and Microsoft Image Editor are capable for most Web page graphical development.
An FTP Program will transfer the files from your computer to the Internet server. These programs are low cost and available from the Internet. You can use [no longer a source] as a source for many programs. 4specs.com currently uses NetLoad as a means to ensure the latest pages are available on the website.
Adobe Acrobat will convert data and submittal sheets to a file with specific appearances. This format is ideal for documents that will be printed. The Acrobat PDF format (for Portable Document Format) allows the user to download a complete page including fonts and complete printer formatting. The user can download a free Acrobat reader from the Adobe web site and read and print the document.
To provide special features, such as mail-to forms, discussion groups, search engines, visitor counters and guest books, the site needs to use proprietary programming available from packages such as FrontPage. Otherwise the special feature will require custom programming in Java, CGI or PERL.
PRODUCT DATA WEB PAGES
Your site will most likely consist of the following types of information:
General Product Information, similar to the 4 to 28 page brochures found in Sweets Catalogs.
Product Data Sheets provide information to evaluate and specify your products. These sheets should be available in both HTML for online reading as well as an Acrobat PDF format for printing and archiving in the project files. The information on the CSI Spec-Data(tm) sheets is a good starting spot on what to provide.
CAD Details are distributed in a DWG or DXF format, depending upon which format is smaller in size. It is not necessary to compress these details to save space. Most high-speed modems automatically compress during transmission whenever possible. The lost time expanding the compressed file will usually exceed the possible time savings in transmission.
Specifications are best maintained in the WordPerfect 5.1 format because most word processing programs can read the WP5.1 files and retain the page formatting. Not all older programs can read the Word95 and Office97 files. Also, Office 95 cannot read Office 97 files.
Submittal Sheets for approval submittals. These sheets are probably best in the Acrobat PDF format.
GRAPHICS AND IMAGES
Graphics and photos improve the visual effect of a Web site. It is very important to balance the image size and transmission time against increased effectiveness of the Web site.
There are several criteria that affect image size and transmission time:
Size - the larger the image the large the image file. Provide small images, say 1" by 1" to show the larger photo. Your viewer can decide whether to view the entire photo rather than requiring the larger picture to be downloaded when the site is visited. The online pages have examples downloaded from other sites as examples showing the size and projected download time for each image.
Unnecessary small Images - While small and unnecessary graphics may look attractive when viewed, these small images will make a Web site slower to load for the first time visitor. Avoid the use of small graphics as "click-me" buttons. Avoid large image maps that take a long time to download.
File Type - Graphics are usually saved as a GIF or JPG format. Experiment with both formats to find which is smaller for your images. Photos will generally work better in a JPG format and drawings better in a GIF format. Try both and see which one is smaller.
Color Depth or Palette - Computers can generally display either 256 colors (8 bit color) or 16.7 million (true color). A GIF format uses only 256 colors and JPG uses millions. Reduce the number of colors in the image and on each page and you can generally reduce the size of the image, and thus its loading time. Color management is a complex topic and several references for more information can be found on the online Web page supporting this article. 4specs.com uses GifWizard.com as a tool to compress images.
Image Animation can be provided to make the image move and attract attention, and substantially increases the size of the file and can distract from a professional page.
UPLOADING THE INFORMATION TO THE SERVER
The completed pages in the form of files and images are transferred to the Web server using an FTP (File Transfer Protocol) program. Maintain a mirror image of your Web site on your Web design computer and transfer revised pages to both the Web server and your mirror files. The mirror file is there in case something goes wrong and you need a back up copy.
PROMOTE YOUR SITE
Many Web sites are located through the various search engines such as Yahoo!, Infoseek, and AltaVista. Once your site is online in its permanent location, register your site with the major search engines. Most search engine sites have a form to request the site to send a "robot" to visit your site and add your information to its key word index. There are other Web sites that will submit your Internet address to the major search sites for you.
Search Engines go from one site to another, following out all the links and indexing the sites and pages the robots find. Looking at the server logs will show when the search engines visited your Web site. You can add meta-statements in the HTML to tell the search engine what information is available on your Web site and to ensure the best presentation of the information. You can see the meta-statements used on 4specs.com by viewing the source code. Go on your browser to View, Source Code.
Have your advertising agency develop a list of places to promote your new site. Submit your Web address to trade magazines with annual manufacturer listing, such as the Specifier issue in January. Many trade associations maintain Web sites and will exchange Web links. Notify any catalog collections and publications where your currently advertise of your new Internet address. Specialized indexing and directory sites, such as 4specs.com, list Internet sites that meet their selection criteria.
Increase your advertising effectiveness by providing supplementary information on the products featured in the ad. Develop a unique page for each ad not referenced elsewhere on the Web site or in other advertising. The unique page may be identical to another page, except at a different address. Activity Reports from your server will show the number of visits to each page, including any unique page. Properly designed, you can identify how many people reached the unique page as a result of the specific ad. This will help to gauge the impact of the ad, brochure or direct mailing piece as the only way to get to that specific page was from the ad.
MAINTENANCE
Most Web servers will provide server logs for your account. From these server logs activity reports are be developed by your ISP on a weekly basis. The activity report will tell you how many times each page was accessed. You will be able to develop an idea of how people are visiting your site. The activity reports will list the visitor's ISP, which will whether it was a commercial site (com), educational (edu), and from which country if not from the US. The logs cannot tell you who visited, only the Internet provider's name and location.
The server may also provide an access error log. It is important to monitor this error log as it will show you what types of errors are occurring. Your error log may be your first indication of an internal programming problem or broken links.
Once your site is up and going, you develop a plan of further development and what information should be added.
CAUTIONS:
These are a list of cautions and guidelines that are not obvious until you start the Web site development and have a problem you did not anticipate:
1. Whenever you use an image, provide an ALT tag to tell the viewer what the image shows. It is frustrating to reach a site and encounter a large image map that tells you nothing until the entire image loads in 3 minutes.
2. Chose file names carefully. If you move a page by changing the file name or deleting the file, it may take 6 months until all references to that page are removed from the search engines. If you must move pages, leave a page with the reference to the new page. Most Web servers are UNIX machines and are case sensitive to names. Roofing.html is not equivalent to Roofing.HTML is not equivalent to roofing.HTML is not equivalent to roofing.htm. Use all lower case file names to avoid problems.
3. Test, test, and retest. Then check at the error logs to see what you have missed.
4. Remember, that once you have visited a site, the computer will cache, or save, the image so that you do not have to download the images on your next visit. Thus your computer will lead you to believe that your site is fast, yet the first time visitor will complain about how slow the site is and may exit before the pages are completely downloaded.
See how a first-time visitor will see your site by accessing your site during the busy evening hours after emptying the browser cache. Test using a slow modem setting and CompuServe or AOL to see how your site will looks for many people. Each a page should be no larger than 25-30,000 bytes, including all images. That size will provide about a 10-20 second load time. Pages containing information the architects needs (such as a CAD file) can be as large as necessary. While fast connections will eliminate speed issues over the next 5 years, you must assume that at least some users have slow connections.
5. Avoid using frames. Frames seldom improve the information availability. A frame on the home page will be difficult for the search engines to index and you may lose many potential visitors.
6. During the writing of this article one programmer wrote me that he was guilty of using the latest tools and HTML features to become familiar with them. He could then show that the sites he developed used the latest designs. He did the simple programming only after the rest of the work was done. I suggest you reach agreement that your complete site will be programmed, online and promoted before the fancy graphics are done, including frames and image maps.
OTHER INFORMATION SOURCES
There are 100's of books available on Web site development. Select one that appeals to you. A good reference guide for HTML programming is Teach Yourself Web Publishing by Laura Lemay. An excellent reference for the latest site development and explanation of color use on the Internet is Creating Killer Web Sites by David Siegal. Laura Lemay and David Siegal have other great books.
Colin Gilboy was an independent manufacturers' representative for 25 years, focusing primarily on Division 7 products in the San Francisco area.
--------------------------------------
Colin Gilboy
Publisher - 4specs
Contact us