Overview

The mass acceptance of the Internet has not even reached its 10 year mark (dated 2003), yet in this time frame the "expected look and feel" for a quality WEB site has changed many times over. There is often a vicious cycle between one part of company wanting to cram as much data onto a home page or WEB site as possible, while another aspect of the same company wanting to make the WEB site an artistic masterpiece without any substantial technical content. In our opinion this cycle seems to dominate WEB site development and refinement for many Fortune 1000 companies.

Okino's first WEB site went online in 1985, quickly followed by a more artistic and content laden site in 1997. By 2001 we knew we needed a completely new site with a redesigned infrastructure to allow for expansion over the next 5 to 10 years. This short document describes some past history and our experiences in writing this third major WEB site.

Some Past History

Okino's founders were quite familiar and experienced with the use of Arpanet and Usenet for email and FTP communication, from 1983 onwards (since Toronto's "Zoology" department at the University of Toronto was one of the original and key hubs for Usenet distribution). So once the Internet hit its stride we launched our first WEB site on March 1st 1995 (along with many major companies and government organizations that year), placing it in the estimated first 23000 WEB sites to be created for the Internet (out of 40 million currently in 2003). It was only 9 months earlier, in June 1994, when Microsoft announced their first "experimental" WEB server for their company, so this was quite a time "of change" for many companies. As a side note, does anyone remember when visiting Microsoft online meant going to their FTP server to acquire files and not their WEB server? There was at least a 10 year span before 1995 when Usenet email and FTP was the "norm" for personal and data communication. Times have changed drastically since those early days!

The concept of "proper" WEB site design, as we know and expect it today, was something not overly important or understood at the time (1994 and 1995 era). Plain white pages with huge Times Roman fonts was the norm, with GIF based graphics being introduced to add some flare such as mottled backgrounds.

The 1997 and 1998 Redesigns

By 1997 and 1998 the Internet had matured greatly and so had the flourishing concept of "good WEB site design". 1997 was basically the year the Internet exploded, maturing in unison with the release of Microsoft's Internet Explorer v4 (the first usable version). The introduction of Internet Explorer v4 and Netscape v4.5 paved the way for semi-standardized cascading style sheets (CSS), dynamic HTML and DOM models, and thus more complex WEB sites.

By 1997 we understood the need for some sense of "artistic merit" for a corporate WEB site and set forth on a large redesign. Our inspiration came from the "black" background-based Softimage WEB site of that time. We released an initial black WEB site in 1997 based on (then popular) concept of "Frames" for the left-side, top-side and main navigation areas. The color scheme was a black background with purple tinted banners on each page. A snapshot from the "black" site near the end of its existence looked as follows:

Click on image to see full scale version.

In 1998 we set forth on an another redesign of our initial black WEB site of 1997, this time being based on Microsoft's new ASP server side technology. The emphasis on this redesign was on a cleaner, more consistent design and a dynamic page serving underpinning based on ASP. Some screen snapshots of the original design are shown here:

Click on image to see full scale version.

Click on image to see full scale version.

The graphics designer of the 1998 experimental WEB site also created some memorable graphics for the site, which we would like to remember on this page for posterity. The use of Helvetica text, varying font sizes, contrasts in color, animated lens flares (see "NuGraf" image below), and delineation of buttons by round and oval shapes was quite innovative for the time.

This redesign in 1998 also introduced the "oval" Okino logo and the animated lines logo:

After the 1998 experimental WEB site was designed we decided to merge it into the 1997 WEB site design and not outright replace the 1997 design. In 1998 we found that ASP-based WEB servers tended to crash a lot (especially on a shared server machine) and hence we could not rely on our WEB site being ASP based, at least for the time being.

Nonetheless, the 1998 experimental design led to many changes in the published Okino WEB site of the time, and for the future 2002/2003 redesign process:

• Use of a 10 and 11 point white Helvetica font rather than a New Times Roman, to give it a "modern" design look.
• Clean and modern looking tables, such as the "File Formats" page shown above.
• Introduction of a true "graphical design", with innovative images as shown above.
• Creation of the official Okino "Rotating oval logo".
• The innovative and self-written left-side Java navigation system (with dynamic size expansion and content), which was eventually replaced with the Auscomp tree navigation system.
• The implementation and introduction of our first "Order Entry Wizard" which is still used today for our online order entry and product registration pages.

The 2002/2003 WEB Site Redesign

During 2002 we visited hundreds, if not a thousand WEB sites, and analyzed them to answer the question of "What defines a modern WEB site?". Books written on the subject at the time did not adequately answer this question, other than "Keep the navigation simple and obvious to the visitor". During this time we defined the following terms as the basis to redesign the Okino WEB site once again:

• Must use a white background. This was the most controversial point for us. We enjoyed the previous black background of the 1998 WEB site redesign because it provided good contrast for our 3D rendered images, but it was too far difficult to read. A white WEB site with 80% to 100% black text was the only way to go. It was agreed that the white WEB site was easier to read, and more in tune with mainstream WEB sites.
  
  
• Use a Helvetica or Arial sans-serif font, 10 or 11 point, to give it that distinctive "modern and clean" look.
  
  
• The left-side navigation had to be simple and "topical", meaning that a user reading the current WEB page would know exactly where they were based on the highlighted entry on the left side navigation.
  
  
• A "break crumb" line was essential, which would show where the currently displayed WEB page existed in the WEB site's hierarchy of pages. Few WEB sites had or do implement bread crumb lines because they are difficult to implement without some content management server behind them.
  
  
• The top of the screen should have a distinctive banner visible on every page, which includes a search item and some buttons to send email or return to the home page.
  
  
• Under the top banner should be a distinctive line of pop-up menus that provide easy and direct access to all major top-level pages of the WEB site.
  
  
• Topics within each WEB page should be clearly separated from each other, using something other than the standard HTML "horizontal ruler".
  
  
• Each page should have a clean graphic on it to instantly define the contents of the page being shown.
  
  
• Each page should have a footer with access to demo downloads, sales information, products, copyrights and corporate info.
  
  
• The final displayed page, with navigation and content info, should not be cluttered. This is the crux of many WEB sites, past, present and future.
  
  
• Ideally, long WEB pages (except the one you are reading!), should be segmented using tabbed navigation (as was used on the new file format pages).
  
  
• The WEB site should work with Internet Explorer v5, Netscape 6 or Opera 7. It should also be viewable with Internet Explorer v4 or Netscape 4.5.
  
  
• A consistent color scheme and layout design should be enforced across the entire WEB site.

The initial few months was spent investigating current WEB technologies (ASP, PHP, Cold Fusion, etc) and different commercial navigation systems (menus, left-side navigation, etc). From this investigation we decided to write our own custom WEB site and underlying infrastructure based on PHP.

The inspiration for the page layout design came partly from the Microsoft Office 2000 "Turquoise Blue" WEB site (no longer used by Microsoft). It had a white page background, an open and not crowded text and graphics layout, and the delineation of one topic from other using turquoise separator bars. From these concepts we first started off by creating our own topic separator bars but with the addition of the "orange arrows with black border" indicators that you will find on the WEB page you are now reading (this small graphic greatly helped define where topic separator lines existed on a page, and thus helped achieve our goal of readability and a clean design). The choice of colors for the separator line and text led to the color scheme for the hyper-links and top/left-side navigation. Multiple "style" sheets were defined for the new WEB site based on these color schemes, as well as keeping uniform and open space between text paragraphs and major topics.

One of the most significant aspects of the Okino WEB site redesign was the implementation of the drop-down menus, the left-side dynamic tree navigation system and the "bread crumbs line". After spending too much time evaluating a dozen commercial menu systems, we opted to use Macromedia Fireworks and Dreamweaver's built in Javascript-based menu system and editor; this was "carefully grafted" right into the mainline PHP code so that the two worked together, and could still be edited inside Dreamweaver (the tricky part, if there was one in particular). The left-side navigation, break crumbs line, and the dynamic page creation was all handled with reams of PHP based server-side code.

As with most WEB sites, the PHP back-end code is hidden from view and hidden from any knowledge from a visitor to the site. One of the most interesting aspects of our work with PHP is for the dynamic creation and rendering of our file format pages. We did not wish to continue to hand edit our file format converter tables any more, especially since we have been expanding the number of file formats greatly from year to year, so we wanted to automate the process. In addition, we wanted to render the tables with the design we had pioneered in 1998 for the experimental file format page (see screen snapshot above). This was done by spending a month writing a dozen text tables which defined the contents of the tables in fairly easy to edit text. The following is a snippet of such a table for the 3D file imports table:

---

File Format|  Extension | Mat | Hier | u/v | VC | L&C | NURBS | Anim | Skel | Skin

Acclaim Motion Capture | .amc, .asf | NOCHK | CHK | NOCHK | NOCHK | NOCHK 
	| NOCHK | CHK | CHK | NOCHK 

NOTES-START
This import converter reads in motion capture data from the Acclaim (.amc and .asf) 
file format. This file format  describes animated skeletons in terms of bones, 
hierarchy and angle constraints. 
NOTES-END

---

The PHP back-end programs then parse these tables and create nicely rendered and clean output, as shown below:

Closing Comments

The 2002/2003 redesign was our main chance to throw out the "old" and bring in the "new", in terms of WEB site content, navigation, style, design, look and feel. It was a major redesign that saw everything change, and everything get replaced or revised. All of our lofty design goals that had been set out from the start were all met, and more so. It also made us appreciate the complexity of a typical "modern" WEB site and of the level of commitment required to maintain such a WEB site, and to keep its overall content "uniform" and "clean".

The design, implementation, file format tables and overall content for the new WEB site was done by Robert Lansdale, with the PHP sub-system being implemented by P. Turner and old-to-new content massaging done by T. Ootjers.