Evolution of a Home Page (banner study)
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
- 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.
- 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
- 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
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.
Designing a web site is not a one-time affair. The design, layout, and even content can change over time. Here's a summary of what we've learned going through this process:
- Design a clean, simple logo
- Use it and/or a metaphor throughout the site
- Avoid forcing users to scroll where possible
- Use text for text, and graphics for graphics
- Minimize the screen height of your graphics and layout
- Maximize the screen width of your layout (600 pixels max, 544 for WebTV)
- Carefully crop and optimize all graphics, and minimize bit depths
- Create a scaleable site structure (directories vs. .html files)
- Think carefully about your site's organization
- Use short, descriptive labels
- Group site areas logically, preferably in groups of 5-7 items
- Use white space where possible
- Test on multiple platforms and browsers
- Use HEIGHT and WIDTH to speed display
- For major changes, use a test page, don't play with the live page
- Add new technologies and features if they are truly useful
- Don't just link, create original content
- Experiment, invite feedback, and have fun
Comments are welcome
Created: Jan. 26, 1997
Revised: Apr. 15, 1997