Evolution of a Home Page | 19 | WebReference

Evolution of a Home Page | 19

Evolution of a Home Page

This article shows the evolution of webreference.com's home page over time. Unlike other user interface studies it shows the actual pages, not screen shots. Versions are shown at key dates when major changes were made. The intent is to give a peek into the site's design and architectural process, and the choices that were made. Along the way, I'll explain what happened and why. My hope is that you can learn something here you can use on your own home page.

Note that all the links within each page point back to this page. I did this due to past and future site-wide changes. The pages are shown exactly as they appeared on the date shown. Long-time users will remember many of these designs. I enjoyed seeing how our logo evolved over time.


Sep. 27, 1995 - 550 sites
I changed the name a number of times, and arrived at the Webmaster Reference Library. The earliest version I could find was from September of 1995. It's a humble little page, with links to other pages of links and some of my own articles. Still part of my home page. It uses HTML 2, and is readable by all browsers.

Nov. 25, 1995
Decided to go ".com" and bought a new domain name, webreference.com.

Nov. 30, 1995 - 630 sites
New logo, a spider-like creature with interlocking legs. Have some initial awards and am soliciting feedback here. Start working with Robert Peyser on site (future partner).

Dec. 11, 1995 - 690 sites
Switch to domain name webreference.com. In anticipation of the press making screen shots of our site, we created a large "webreference.com" banner and put it at the top of our page. This actually paid off and it was seen in a few magazines. This version used a minimalist splash page approach.

Dec. 30, 1995 - 700 sites - 5 awards
Our Zen period. We had some fun brainstorming in the early days, and this version is the result of one of our more creative sessions. We thought "candy" was like freebies or goodies, and invited people to "yak bak" and read about the site's "lore." Note the graphics-heavy treatment, and graphical text versions of the spider heads. The second page instructs people to "BEGIN HERE" and "GO THERE" and finally "BE HERE NOW." This page went to a randomly generated Zen Koan. Ohhhhmmmm.

Jan. 14, 1996 - 11 awards
This version is a speed-optimized version of the last one. Note that the compound logo has been consolidated into one graphic (still too tall vertically), and the graphic text is now text with one cached spider head used as a pointer. Feedback from users caused us to put "Enter here" as the first option as people were unclear where to enter the site proper. This is the first appearance of Web Headlines, an automated daily news feature run by a "newsbot." Won Cool Site of the Day on New Year's Eve and our hits went through the roof.

Jan. 21, 1996 - 17 awards
Screen height optimized version. Note how we've removed the large graphic text "Webmaster Reference Library" and combined it (using Chicago 12 aliased) with our banner. Our usage studies showed us that people didn't like to scroll, and were not clicking on links below the first screen nearly as much as the first. The cool interlocking logo remains, and we've changed our main categories yet again. "This just in" is Web Headlines and "Local news" is what's new on the site. Cool Central makes its first appearance here as a hotlist of picker sites within webreference. Old Internet Connect employees will recognize our old logo at the bottom of this page.

Feb. 2, 1996 - 23 awards
Free speech black version. I really liked this version, as it looks quite sleek. Our logo has changed, with a couple legs trimmed off. Web Headlines is back, and Feature Articles makes its first appearance on the main menu. "How can you be in two places at once" is a teaser for our new remote search capability using Excite for Web Servers. We start to experiment with tempting titles to new articles and features to draw people into the site. The JavaScript ticker makes its first, and last appearance.

Mar. 2, 1996 - 800 sites - 27 awards
Developer's corner makes its first appearance. To attract attention to Cool Central we put an animated blue spider head above the link. It works. Cool Central becomes one of the most popular parts of the site. Removed the ticker by popular demand and replaced it with a Marquee for Explorer users.

Mar. 3, 1996
Name changed to AA webreference.com. We started to concentrate on how we appeared in the major search engines. Using AA (for Athenia Associates) would lift us higher in alphabetical lists. It works in some cases. This version has a new description. We refined the description over the next few months to include keywords.

Apr. 5, 1996 - 29 awards
Our first ad from Adobe appears. Note the white on white keywords at the bottom of the page, this is called keyword spamming, it seemed like a good idea at the time. Now a no-no (spiders actually penalize sites that use it).

Jun. 6, 1996 - 39 awards
Our logo now has extruded text plus our drop-shadowed spider. This logo was optimized using HVS Color and is only 16 colors and 4090 bytes. At the high shading setting HVS Color can reduce continuous-toned drop shadows and graphics 1 to 2 bits beyond conventional techniques.

Sep. 18, 1996 - 45 awards
We now highlight new content with a thumbnail graphic and a dated description below the first screen. This marks the debut of JavaScript Tip of the Week on webreference and an increase in the original content regularly added to the site.

Nov. 3, 1996 - 50 awards
Book excerpts start. For outstanding books we feature them on the front page with a thumbnail graphic and a link to chapter excerpts.

Dec. 16, 1996 - 52 awards
Speed optimization, new look. In response to user feedback we eliminated the thumbnail for each article and use colored text. We used alternating pastel colors using FONT COLOR= SIZE= text. Started reporting on key events on the Internet and the Web (Internet World).

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 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 - 2500 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 2500) 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 - 3000+ 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 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 3500+ 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 cobranded 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.

what's newOctober 15, 1997 4000+ 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/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 4000+ 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.

January 21, 1998 4000+ links 85 awards
New line stretching method. After extensive testing with a number of browsers I discovered that the above "stretch the GIF" method did not work consistently across platforms. This redesign uses a one-pixel table cell with a matching yellow background color, bookended with fixed sized corner GIFs. The technique takes more table code, but the lines now stretch consistently as the window is resized.

This front page marks the start of our use of in-context animated teaser graphics, that simulate the code in use. Peter's expandable/collapsable outlines were a perfect subject for this technique.

February 23, 1998 4000+ links 85 awards
Redesigned/reorganized/simplified the front page for speed and looks. Simplified the surrounding lines to only go on top and right sides of main content cell, while still keeping the top right corner "tunnel" there. This change got rid of three graphics, and 3-4 K of table code. Thickened the line to 2 pixels, to make the yellow more visible, per Dmitry's suggestion.
 table of
 contents ->

  3-D Animation

The main change in this iteration is the right site nav column was redesigned and reorganized, along with corresponding changes to the related menus. We adopted a tabbed look, with rounded tops, and open on the right. This change greatly simplified the tables, which saved an additional 1-2 K in file size. To make navigation through the entire site clearer, we put the Table of Contents at the top of the nav tab bar, in its own tab. A later refinement was the right facing yellow arrows, which we later made live, that point to the main site areas (toc, experts...). (People naturally associate arrows pointing to the right on the right side of a screen with turning a page of a book.)

One tricky part I ran into was getting the light yellow on the rounded top graphics to match the yellow of the table cells. The workaround I came up with was by using transparency where I needed the yellow BGCOLOR="#FFF3AC" of the table cell holding the graphic to show through. This ensured that the light yellows matched exactly, and did not dither.

Forum Another major addition, the new WebReference Forum! We installed a freeware BBS called Ultimate BBS for user discussions, with forums for the site, and each content provider's subject. The forum, plus our newsletter, are an effort to start building a community around the site, and give you, gentle user, another reason to stay longer at webref.

February 25, 1998 4500+ links 87 awards
New logo! We simplified our old, mainly "finish" logo, to our trademark spider head and some aliased Chicago text. The logo can now be used on any background as it is transparent. To pop the logo we used a small drop shadow (blurred on the triangle and non-blurred on the text). The new 16 color (vs. 90 color) logo saves over 2K in file size, and one trip to the server, as the old logo was a two-parter. We may enlarge the logo/text later to better fill the wider yellow band behind it.

Redesigned the left column to accommodate 125x125 "button" ads. The increased width dictated a redo on the light yellow search and subscribe forms, as they appeared too wide when separated, so I joined them together into one ad-sized table.

March 20, 1998 5000+ links 90+ awards
Added a live DHTML news scroller, integrated into our right nav bar (it's actually been up since just before Spring Internet World, first version went up March 5, 1998). This scroller displays the top Net headlines from InternetNews.com. Each headline is a live URL linked directly to the story, wherever it happens to be. By integrating it into our colored nav bar, the scroller delivers the latest news to users without distracting them too much from the rest of the page. We think it will act as a hit attractor, as it appears that things are always happening on the home page.

Scroller Details - The scroller is completely configurable, and uses a cronned CGI back-end "news harvester" that grabs the headlines from InternetNews.com every 15 minutes (with their approval of course) and creates a special executable JavaScript text file with headlines and matching URLs (named appropriately "news.js").

Every time someone loads the home page, this text file is read in as an external JavaScript SRC file, along with the "banner.js" code, that scrolls the headlines. All settable parameters are in the .html file. The news and scrolling code are in modular external files.

The scroller can be set to scroll indefinitely (set maxLoops to 0) or stop at maxLoops. The scroller's dimensions, timing, font size/face/color, and background color, can all be tweaked by changing the corresponding variable in the .html file. The scroller is positioned on the page using a named "holdspace" transparent image (can be any graphic, we just made ours transparent), and does its magic using layers and DIVs (for Netscape 4 and IE 4 respectively).

This is a modified version of Doc JavaScript's "Scrolling JavaScript Banners." This version features styled text, a CGI back-end headlines grabber, smaller optimized code, and it now stops on the first headline. It also has been modified to read in our standard "news.js" file, compatible with Peter Belesis's fader, which is what we'll tackle next. For more details on the scroller, see the Doc's article.

Other Changes: Moved the hot e-commerce section to the front page, and launched Net Buzz with Rich Wiggins.

May 5, 1998 5000+ links 90+ awards
New Logo - To better fit the color scheme of Internet.com's red, black and white logo we've redesigned our logo! The new logo retains the same spider head shape as the original, and uses a glowing red for the spider's eyes. No drop shadow is needed, as the back recedes while the red eye seem to float over the black head. The red we chose is actually a lighter non-dithering shade (255 0 51 in RGB) of red than the red used in Meckler's Internet.com logo, but appears to be nearly the same red. This is because the red is surrounded by black, which makes any color within the head appear darker than it actually is.

Thin Scroller - The second big change in this design is that we moved the news scoller to the what's new yellow bar/divider. There wasn't enough room for the date here, so we moved the date under the new logo. It turns out there wasn't enough room for the scoller's headlines also, even at the smallest font size (9pt). More on how we solved this in the next iteration.

Simplified Layout - I also simplified our page layout to eliminate the graphics used to create curves, and substituted colored tabe cells instead, for the vertical site nav bar on the right. The JavaScript related menus are history, as their functions were duplicated in the site nav bar on the right anyway. These changes, plus elimination of the table code necessary to render all these curves got us down from 18K to under 14K for the home page.

Home Page Strategy - The home page of any site is usually the hardest hit page on your site, and should display as fast as possible to keep users from straying. I'm always looking for ways to bum a few more bytes from our home page, and this change made a dramatic difference. Yahoo, the busiest site on the Web, has a home page of only 12K, and makes spare use of graphics, so it pops on the screen. Like us, they also employ a layered table approach (a top table to load first, and a second table to display links). This gives the appearance of a more responsive site, as the user sees something almost immediately.

May 12, 1998
More speed tweaks and a better scroller. We found that some Windows users were seeing the headlines wrap to two lines, so we moved it to the blank space at the top of the page the Internet.com logo created. I also substituted CSS logos for the GIF ones of InternetNews.com and n(ews) h(arvester)