Evolution of a Home Page [con't]
2000
- August 30, 2000
- As you canimagine there have been many changes both on and off the screen here at WebRef since our last update, most of which are designed to make your and our lives easier. (Er, does that mean some make our lives harder? Hmmm...) I'll use this space to highlight the site's evolution as well as the home page.
The most dramatic difference is also a more subtle one, we've gone RSS crazy around here. Thanks to Jonathan, our Perl expert, we now use a modified version of his RSS channel manager script to update the front page. Instead of editing messy HTML, with all its downloading and uploading, we just go to a Web page, enter our headline, URL, and blurb, press "build RSS" and voila! The script does the following:
- overwrites the RSS file (webreference.rdf); and
- overwrites the matching HTML include.
A cron merge script (we have over 13 of them now) does the rest and scoops up the various inserts (WebRef and internet.com highlights, JavaScript of the day, stats, news, etc.) and reassembles a composite HTML page every few minutes. So updating the front page and our RSS file takes just one step. You can use our RSS file to display what's new on WebRef (and our JavaScript expert) on your site. Feel free to try the channel manager for your site, as always, it's open source. Speaking of RSS....
News Harvester goes RSS
You'll notice a few new services and tools on this latest front page. The most important is the RSS News feature under services. This page shows all of internet.com's available newsfeeds in one place. News Harvester has been modified to accept RSS as inputs and also output RSS, among other formats. We're working on other formats for the future so stay tuned. You can display any of these RSS feeds on your site using scripts like Jonathan's (see tutorial 8).Stats
In keeping with our open everything policy, we've beefed up our stats area, now showing the top 100 and 20 pages from yesterday's logs. Doc JavaScript's Tip of the Day (also available as RSS) has skyrocketed in popularity and is currently the most popular page on the site. Ah, the wonders of RSS and daily content....
Cosmetics
We changed the front page cosmetically a bit, used larger lettering on our logo (for magazine shots, etc.), "contents" changed to "sitemap" for clarity (though technically not a site map, it seems to be the convention now), along with "subscribe" changed to "newsletters" in our toolbar. Speaking of toolbars....
New toolbars
Our overall traffic and subscription rate has shot up recently with the addition of these site-wide nav toolbars. While still being deployed, these toolbars make it easier for you to find your way around the site, highlight the latest content, and search and subscribe to our newsletter.
The bottom nav toolbar, now being deployed site-wide, is a dynamically created SSI that shows the popular areas of WebRef, and highlights the latest content, driving more traffic throughout the site. A recent check of the logs shows these toolbars are having a definite effect on the hits, while making it easier for you to find your way around the site. Hit-wise and usability-wise it's a good idea to make it is easy as possible for users to navigate to the key areas of your site. Until next time.
- November 15, 2000
- We start a usability phase, in order to improve webref's usability, and speed. First up, I added "submit & win!" to the top toolbars, sitewide, in an attempt to increase the newsletter subscription rate. It works, the raw subscription rate moves up to over 300 per day on weekdays. Unfortunately, the net subscription rate (subscribes less unsubscribes)
has dropped to negative territory after the move to a new list server, and moving the lists. Each time our list is moved we find we lose subscribers. My advice, keep your list location fixed if at all possible.
After reading Jakob's and Steve Krug's new book I decide to do some more usability improvements. You'll notice the search is in the upper right-hand corner of the page, and has been simplified to the defacto Web standard. The "go" button has been changed to "Search" and the Search > link removed. This is just the start of our usability improvements, I'll have more in our next installment.
Other highlights
We've added a new tool, Doc JavaScript's nifty "Mailtool" that automatically creates compound mailto's that you can cut and paste into your pages. On the upper left-hand side you'll notice we've launched two contests, to boost our newsletter subscription rate, and gather content for our Thursday text newsletter. Contests and giveaways like this where you give away software etc. for e-mail or articles are a win-win for everybody. The manufacturer gets free PR, we get more content/subscribers, and our users get a chance to win the software. And of course, the code is open source.Speed
The front page has become even smaller, for maximum speed, weighing in at 2,4168 bytes total for the HTML portion. I've got some more ideas on shrinking the page even further, I'll keep you posted. Note that the news flipper script is at the end of the page, so it doesn't slow down the page display.
- November 30, 2000
- The usability improvements continue. The top toolbar's been revamped for usability, with major sections listed (experts, tools, services), a search, a sitemap (also now listed on the right vertical section bar), a way to contact (about), and a home/id link that includes our logo. For consistency we've done this for the front page, and the interior pages, both using a similar toobar. The look is cleaner (now proper case single words) and just lists the essential areas of webref. This is the basic formula for site-wide toolbars/navigation, see Krug's book for details. To summarize, for persistent site-wide navigation include:
- a Site ID (logo/name);
- a way home ("home" link, sometimes combined with site ID);
- a way to search (upper right is current convention);
- major Sections (products, downloads, support, etc.); and
- atilities (about, help, contact, faq, news, site map, etc.)
I plan to try Peter's Hierarchical Menus 4 on the top toolbar, stay tuned....
Top Toolbar
Bottom Toolbar
We've tweaked the bottom toolbar a bit, added the new internet.com-branded "Email a Colleague" script, and moved our universal "contact" link to the bottom toolbar. Notice I've moved the search up to the top toolbar, as it is on the front page, for consistency, and the browser live popup (with improved code) to the bottom toolbar (users tend to want to jump around after they are done reading a page).
Speed
In my never-ending quest for the fastest possible front page load, I've tweaked our RSS Channel Manager to remove any extraneous spaces/returns, and also started a merciless "Yahoo-like" redirect/abbreviation campaign to shorten our links. We now use webref.com instead of webreference.com, and I've started using serverside abbreviations/redirects to shorten URLs ala Yahoo.com (notice I use "
r/pg" for /programming/). I'll add more of these abbreviations in the future to minimize front page file size. To create your own on Apache, just edit one of the server config files. The followingsrm.confcommands show where to look for your rewritemap, and what the rewrite rule is:Next enter the abbreviations you want separated by tabs in the above-referenced rewritemap file (
"/www/misc/redir/abbr_webref.txt"in our case). The following is an example from our current redirects:So to link to
/programming/all I have to do is now type<a href="/r/pg">programming</a>saving a few bytes. To add more abbrevs I just edit the rewritemap file, and run "create_dbm abbr_webref abbr_webref.txt" in the above directory. Remember to use aTABto separate the two fields. Yahoo uses redirects like this on their home page to great effect (load time is nearly instantaneous). See Extreme HTML Optimization for more details. I also removed unnecessary links/text etc. from the front page. According to Krug, take the words you currently have, cut them in half, and then cut them in half again. User's don't read on the Web, they skim. Now, if I could only find a way to shorten the anchor tag.... Until next time.
Find a programming school near you