Evolution of the WebReference.com Home Page / Page 6

1999

May 20, 1999 7,500 links, 100+ awards

Over the past few months we've been adding a number of features, this is the point where they all ended up together in one large page (more on that later). We've added a browser stats area to the toolbar, an HTML newsletter, and a quick poll feature.

The front page is now becoming a collection of content modules, merged in and SSI'd. It's now assembled every ten minutes automatically from the initial index-template.html file in four stages using a CRON job, two for news harvester (insert static headlines and javascript array of headlines for the scroller) two Web find-and-replace scripts that insert two text files of daily browser stats and a random HTML newsletter ad. Each of these text files is generated by another CRON job.

We now use SSI's for the internet.com toolbars, to make site-wide changes easier. The new quick poll is inserted into the page using an exec SSI:

<!--#exec cgi="/cgi-bin/pollssi.cgi" -->

Nav Bar: We've changed our site-wide nav bar again. To boost subsciptions we changed "update" to "subscribe" and added a new tell-a-friend script, to let users e-mail other users about WebRef.

May 24, 1999

Speed-optimized version. The problem with the previous version was with all those wonderful features the file size was a whopping 26.25Kb. I hand-optimized the page to removed extra code and unnecessary features, combined multiple adjacent graphics into one (see above), removed unnecessary www.'s for domains with the right c-names, and used ISMAPs to create shorter URLs. The new optimized page is a mere 13.4Kb, half as small, and loads twice as fast. I removed the scroller, with a new improved one on the way.

Dec. 15, 1999

Dual news flipper version. Grouped a number of new features into this update, both visible and behind the scenes. The most noticeable design change is a new, more integrated look. We've used the lighter yellow behind the top ad, and wrapped it around the top/right-hand side of the page in an inverted "L" shape. With Doc JavaScript's new tip of the day poking out from under the What's New divider it appears to be a hanging sign (click me!). The lighter yellow appears to flow under the darker yellow around the page.

I tightened up the left column considerably, removing the poll and search boxes, adding smaller contest boxes (very effective for your raising subscription rate btw), so the net effect is that the new dual news flipper appears above the fold on most screens (more on the flipper later).

We've added a free scripts section, where you can download open source scripts we use on WebRef, a new XML expert, and two new tools (news fader and RSS editor).

The dual news flipper we use on this front page (working version included in above mockup) is a custom version of the Perl/DHTML display by Peter Belesis and myself. It displays two static news harvester news feeds (top Net news from InternetNews.com and top product news from Internet Product Watch) and overlays two dynamic layers (one for each feed) that flip through two headlines at a time, so it works on all browsers in some form or fashion. You can easily add your own news fader/flipper to your site now with Peter's new tool.

The RSS editor, by Jonathan Eisenzopf, allows you to easily edit RSS XML file for news feeds.

After reviewing Jakob Nielsen's new book (Designing Web Usability) I moved the search box from the left to the upper right corner (the new convention in 1999), and made it wider (encourages multi-word searches, which are more accurate). To accomplish this thin upper nav bar I had to violate HTML 4 (form tags outside tds). If anyone can think of a way to do the same thing that's HTML 4 compliant, let me know. I also shortened up the blurbs, and took another look at our page size. With the new dual flipper the HTML is 24.9Kb, without the flipper it's about 18Kb, so we'll need to trim something soon. The HTML code has been hand optimized though, and with the layered tables and delayed flipper code load, it displays key info pretty fast.

The internet.com nav bars continue their inexorable growth, though I can do some things to minimize them (remove the "www").

Behind the scenes there are now five cron jobs, that assemble the page every 10 minutes (stats, news, etc.). The internet.com toolbars are now merged in with crons instead of SSIs for maximum speed and compatibility with the automatically sent HTML newsletter (the front page). The flipper code is generated dynamically with a CRON and SSI'd in at the end of the page, which doesn't slow down the initial display.

Find a programming school near you