Evolution of the WebReference.com Home Page / Page 5

1998

January 21, 1998 4,000+ 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 4,000+ 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.

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 Kb 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.com 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 WebReference.com.

February 25, 1998 4,500+ 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 2Kb 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 5,000+ 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 5,000+ 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 18Kb to under 14Kb 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 12Kb, 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 that the Internet.com logo created. I also substituted CSS logos for the GIF ones of InternetNews.com and n(ews) h(arvester). This sped up the display, and saves two trips to the server.

Behind the scenes we've improved the scroller code, and also launched News Harvester Phase 2, which is based on this scroller.

July 26, 1998 6,000 links, 90+ awards

Lots of changes here for more speed. There are many ways to speed the display of your home page, two of the easiest are: minimize the number of different graphics, and minimize the HTML file size.

First I eliminated as many graphics as I could, as each graphic requires another trip to the server. I consolidated our logo with the Internet.com logo and used an imagemap to direct users to either Internet.com, or our about page. Notice that the microbuttons on the bottom of the left column have now changed to text links for more speed.

I then shrunk the HTML file size by removing the news scroller from the top and moving it to the left column as static headlines (updated constantly by the new Perl version 3 of News Harvester), removed the many hard spaces from the right vertical nav bar (Experts...) by increasing the cellpadding to 4, added two more expert columnists (HTML and e-commerce), and went to normal capitalizaton from all lower case. These changes reduced the HTML file size to a mere 11,864 bytes.

Three items of note, we added an Internet.com highlights section below WebRef's highlights in the main center column, added an "advanced search" link to the search form (with a redesigned search page), and won our 8th PC Magazine Top 100 award.

October 14, 1998 6,500 links, 90+ awards

Added a text version of the nav bar to the top table, for quick access to the site. This text nav bar loads fast and first so users don't have to wait to gain access to the major parts of the site. The hits have already shown an improvement in flow-through traffic.

The other big change is the first appearance of the Perl/DHTML news scroller in the What's New bar. The Perl/DHTML version 3.1 of News Harvester combines the best features of the Perl version (universality of static HTML headlines) with the DHTML version (attention grabbing, space-saving animation) and gracefully degrades from the scroller to static headlines for older browsers, so everyone sees some headlines.

I modified this Perl/DHTML version of News Harvester to display the current date, and then overlay the top WebRef stories, for a dual function status bar.

CSS Logos - After extensive testing, I found out that some platforms did not display the CSS logos properly (too wide) so I went back to GIFs for the internetnews.com, nh, etc. logos.

November 25, 1998 7,000 links, 90+ awards

A pre-thanksgiving day snapshot showing the latest changes. I removed the WebRef scroller for now, and inserted a news scroller with a twist on the left side (see animated GIF on the right of this paragraph). The scroller is a modified version of the Perl/DHTML news harvester scroller which defaults to static links and overlays a scrolling layer for DHTML-enabled browsers. We've developed a new command-line installer that makes the installation process relatively painless. This version is a sneak peek of things to come and is now pausable! Just click on the VCR-like pause button, and the scrolling stops, and the pause button changes into a green play button. Click again and the scrolling resumes.

Yesterday, internet.com was acquired by Penton Media Corp. and Mr. Meckler bought back 80% of Internet.com's sites (including WebReference.com) and formed Internet.com LLC, thus the change in copyright at the bottom of the front page.

New Expert - Put your hands together for our newest expert columnist, Dan Giordan, our new graphics expert. Dan has authored numerous books on Photoshop, teaches, and has a gift for making the art of making art come alive. His new site design features JavaScript-enhanced nav bars and frames in his columns for his graphic illustrations.

New Server - Due to a recent increase in hits you may have noticed a slowdown in WebReference.com's load time recently. To meet our increased traffic demands we've moved WebReference.com to a more powerful server, a Sun Ultra 450. The response time is now greatly improved.

Find a programming school near you