Evolution of the WebReference.com Home Page / Page 4

1997

Jan. 3, 1997 - 55 awards (experimental)

New minimal scrolling layout, version 1 (not used). Analyzing our statistics showed that users were following the links on the first screen about four times more than the links on the second. This confirmed Sun's study that concluded users don't like to scroll. We eliminated the large spider-like logo and reduced it to an abstract spider head. To reduce this full color graphic we again turned to HVS Color which reduced it to 128 colors. Other graphic programs created noticeable banding, even at 256 colors. See Optimizing Web Graphics for details.

To maximize the use of screen real estate we fixed our table width to 600 pixels wide. This is a good maximum, since most PC's come with 640 x 480 pixel monitors, and the scroll bars etc. leave about 600 usable pixels. We used a 5 column grid with each column using 120 pixels of width. The left cell is a navigational column with the major areas of the site. The center cell column uses 3 column widths and highlights the new content in the site. The right cell uses one 120 pixel column and houses our new services area, where webmasters can find useful free Web-based services.

This design was an attempt at aligning a background graphic with a foreground graphic. It works on Macs, but the offset varies across some platforms and different browser versions. We considered dynamically generating the offset and/or using the hidden frame trick to account for this, but shelved the idea. The yellow background seemed too lemony, so we darkened it for the next version.

Jan. 4, 1997 (experimental)

Same as above, with a darker yellow background and lines. The yellow lines you see are actually one pixel GIFs that are scaled using width and height. This works on Netscape and Internet Explorer, which are the browsers we design for mainly.

Feedback from our current (and future) content providers convinced us that the next, more open design, was a better one. This "railed" design with two vertical raised rails surrounding the yellow column on the left broke up the space of the page, and effectively shrank the usable space. This, combined with the metallic logo that looks like an old Kai Straus filter, convinced us to lose the rails.

Jan. 10, 1997 (experimental)

This is an alternate to the current design. We've simplified the logo to just the spider head and some text. The yellow background column still gives the page some structure. We overlapped the ad with the background to give it some dimension, but this forced us to move the logo down the page. This reduced our usable first screen space in our yellow column.

Jan. 21, 1997 - 58 awards - Before Web Review Article

This is the design we settled on. It uses the 5 column grid we referred to above, but uses a flat yellow column on the left. This leaves the page more open and lets the page "flow" more easily. It leaves room for a full sized 468 x 60 pixel ad (one of the most popular ad sizes on the Web) and a small logo side by side, while fully utilizing the rest of the first screen.

In keeping with our new philosophy of emphasizing our original content we put our expert columnists in the upper left, and highlighted our newest content in the center. Our new "services" section gives quick access to useful webmaster-related services.

Structure: We grouped our main navigation bar in the left-hand column under three broad categories: experts, contents, and new. Our experts are specialists who write columns periodically on their respective specialties. "Contents" highlights the site's main areas and "new" shows what's new on the site.

We put this design up with more work to accomplish on it, but felt it was sufficiently ready to use. We knew we needed a logo with more "pop" and had to redo our popup menus (which didn't match our left column), but we used our small company "deploy and learn" method, instead of the typical large company "learn and deploy" method.

Jan. 26, 1997 - 2,500 links - After Web Review Article

We volunteered our site for a review by Web Review's Web Architect, Lou Rosenfeld. We did this with the intent of improving our site, and getting some free advice. He had some cogent comments about our site, some we knew about, and some we didn't. This is the front page after we addressed some of his comments.

We added a short description about the site, for new users. We changed the wording and organization of the left menu for clarity and made the popups consistent with this organization. We changed the "new content" to "highlights." To emphasize our extensive links (now over 2,500) we added a "start here" with an arrow, pointing to the "toc."

We also duplicated the services menu in the main left menu. The "about" section didn't belong under contents, and we'll put it in when we find a good place for it.

April 1, 1997 - 3,000+ links 65 awards

Extensive changes behind the scenes. We've adapted the metallic logo and included the site's name below it. This continuous-tone logo was reduced in HVS Color to 128 colors and still looks smooth. The related popup menus now work in some fashion for all browsers. For Netscape 3 they are related, for JavaScript 1.0-enabled browsers they are live and for all others the go button is a redirect script. The key to this technique is the return false in the action of the form. We are working on an ActiveX version that is related for Internet Explorer 3+.

We've added AltaVista as a site/Web search service (Excite is still available through the Table of Contents page). Notice the square (125 x 125 pixel) ad on the right side of the screen. We moved this ad higher on the screen, to increase its clickthrough.

July 7, 1997 3,500+ links

The evolution continues. Design-wise we added a weekly newsletter subscription form below the square ad, color coordinated with the yellow (255, 204, 0) background. Added the search capability to include both Excite and AltaVista co-branded searches residing onsite, for both local and Web searches. Moved duplicate services link menu off right column (now resides in popup and on left). Added two new service sections, reference and validation. Started small network of high quality Web development sites, cross linking at bottom of home pages. Gained one new Internet expert, Richard Wiggins and lost one old one, Reviews by Robert Mullen.

October 15, 1997 4,000+ links, 80 awards

Cleaned up the front page to save vertical real estate. Split the logo so the two menus butt up against the banner ad, and align vertically (without a separate table, they don't). Moved and simplified the search form and subscription forms to top right column. The idea was to move the new parts of the site ("what's new") higher on the page. Dynamic HTML Lab marks its debut with an honest-to-God Athenian, Peter Belesis.

Changed the "highlights" colored text to a "what's new" cutout graphic. Added an automatically updating text date (October 15, 1997 etc.) next to this graphic (updated by a cron job and a simple <DATE></DATE> updating script). The yellow vertical line now automatically adjusts to the length of the middle column, as it is a 1-pixel wide table cell, not a stretch single pixel GIF.

Rotating text banner - For Netscape/Internet Explorer 4 users, added a DHTML/JavaScript rotating text banner in place of "about these menus" in upper right-hand corner of the screen that cycles through the experts and "menu info." See Doc JavaScript for text banner, and date script details.

Cosmetic changes: added a More... link for archived past weeks (the weekly newsletter section), and a "Top" graphic which jumps to the top of the page through an internal named link.

December 15, 1997 4,000+ links, 84 awards

To celebrate our recent acquisition (the site is now on Mecklermedia's servers), and practice what I've been preaching, I redesigned our front page to be more appealing and accessible. The page has a more rounded look, and is held together with rounded single pixel yellow lines, that surround the highlighted content. I moved the most frequently visited links from the left to the right column, for easier access.

To emphasize the importance of our expert columnists, I put them in their own two-color table (it looks a bit like a TV screen), with the remainder of the site's main sections in an identical screen below. The top and bottom of these TV-like screens are rounded (non-antialiased) yellow GIFs, while the rest are created with table cell background colors and text, for fast display.

The page also automatically adjusts to the width of the browser's window, using percentages for the center column. The apparent one pixel lines stretch in both directions as more content is added (using a one-pixel vertical table cell), or the user resizes their screen (using WIDTH=100% for the rounded top and bottom GIFs). To speed the apparent response time, the page also features a cascading load, using a series of separate tables, which load one after the other. When you use one table for your entire page, Netscape waits for the entire table to load, slowing the display.

I branded the page with a small version of the Internet.com and Mecklermedia logos, plus small text links to each site. The page is an example of "above the fold" design, where most of the important content/links are viewable within the first screenfull.

Find a programming school near you