| home / scripts / sidebar |   [next] |
|
|
By Dan Ragle (dragle@internet.com)
When Netscape 6 was released, a new feature was added to the browser interface called "My Sidebar," or "sidebar tabs." The sidebar is a thin column running down the left of the browser window, which itself contains multiple, sliding tabbed entries; each of which is generally provided by a separate Web site. As downloaded, the sidebar column contains a few pre-loaded tabs including news, stock checks, and search functions; which (of course) refer directly to information found on the Netscape site.
|
Though designed primarily for use in the thin Netscape/Mozilla Sidebar, our Multi-Feed tab page can be viewed by all later-version browsers. The downloadable example discussed within this article can be viewed here, and the actual full implementation of our tab--complete with access to all of our internet.com news feeds--can be viewed here. |  |
Sidebar tab entries are not, however, limited only to Netscape information. Individual sites can also offer their own sidebar tabs to surfers, allowing then to keep a small "sample" of their site available for quick access by simply clicking the appropriate tab. As shocking as it may seem, site visitors will at some point leave your site to surf elsewhere; creating a sidebar tab gives your visitor the opportunity to keep your information--and especially your links--that much closer to their wandering mice. While most sites offer the latest updates and/or key links to their site via their sidebar tabs, other sites are more creative; offering reference lookups, or localized information targeted to the specific user. Our own Doc JavaScript, for example, provides a Netscape 6 sidebar tab for his popular JavaScript Tip of the Day feature.
With this column, we introduce our new WebReference/internet.com Multi-Feed sidebar tab, which leverages RSS files created by several internet.com sites. The tab initially presents a listing of available content "feeds," i.e., the individual sites and content categories within internet.com for which we generate RSS files. When the user selects a specific feed, the recent articles and links for that feed are loaded into the tab. You can then scroll through the available articles; and clicking on a specific article loads that Web page into your main browser window. Each specific feed also includes a link back to the main feed listing, allowing you to move back and forth from the menu to the individual selections--all within your sidebar entry. (For those of you who may be unfamiliar with the term, we'll provide further RSS information a little later in the article.)
|
Netscape6 and Mozilla users can install our fully loaded tab in their own sidebars by clicking here. |
If you have site information stored in an RSS formatted file (v0.90, 0.91, and 1.0 currently supported), you can use our Multi-Feed sidebar tab script to provide your own tab to your visitors. Download the zipped sidebar script package here, and read through the rest of this article for helpful information on installing and configuring the script for use on your own site. And if you are a Netscape 6/Mozilla user interested in adding our new multi-feed tab to your browser, you can do so via the side-panel at the right.
Even if you don't have RSS files, or aren't interested in creating your own sidebar tab, you may find the rest of this discussion interesting and/or helpful. Our sidebar tab ended up being a mix of JavaScript, Perl, and CSS-based XHTML layout; so there's probably something of interest here for just about everyone. Even though the application is targeted primarily to Netscape 6/Mozilla users, we've purposely designed our tab to work properly in many browser platforms.
Netscape's My Sidebar Documentation provides plenty of information for you to get started with your own sidebar tab design. We'll quickly review the major points and add a couple of our own thoughts here. If all this pre-analysis stuff bores you, feel free to move on to the next page and start getting your hands dirty.
The primary thing to keep in mind when designing your sidebar tab is that the tab itself is simply a Web page. Pretty much anything you can put into a standard Web page you can also load into your sidebar tab, which leaves your design possibilities wide open. HTML, CSS, JavaScript, and CGI scripts are all fair game; if you've ever created a Web page you can also create a sidebar tab.
Before your imagination gets the best of you, however, there are a few sidebar specific design points that should be considered. First and foremost, sidebar pages should be displayable in a very narrow column. Netscape's documentation states that the default sidebar width is 144 pixels with a scroll bar, and 162 pixels without. However, the sidebar width itself can be made smaller or larger by the user (by simply clicking and dragging the sidebar border), thus your designed page should look decent in a narrow 144px column, but expand and contract gracefully to be as user-friendly as possible.
 Our Sidebar tab, displayed in Mozilla 1.0 |
|
Secondly, and perhaps too often overlooked, you must keep in mind that your tab will not be the center of attraction for the user--it is intended to be a quick reference, something the user can see and use quickly when they want to, but that will stay out of their way when they are surfing to other sites. Use JavaScript or other potentially machine-intensive elements only at a minimum; so as not to adversely effect the user's browser experience. Providing a script intensive tab that sucks up all of a surfer's CPU resources, preventing them from enjoying other sites, will not impress your site visitors.
Finally, since your tab will be used as a quick reference, it becomes especially important to keep the overall size of your page (i.e., the number of bytes downloaded) as small as possible. All the rules you already know and practice when designing full sized pages are amplified even more when applied to the small sidebar tab area. Use only optimized graphics, if any at all; and keep your HTML as lean and trim as possible.
With these points in mind, we set out to create our own Multi-Feed tab. We'll shoot for a total page size (HTML and JavaScript) of about 5K, and use JavaScript (sparingly) to enable us to rotate through a flexible amount of information in a small space. We'll also try to make our tab functional on multiple browser platforms, and not just Netscape 6/Mozilla. Though useful today only for sidebar tabs, who knows what use we might find for a condensed site page in the future? To that extent we'll target our JavaScript to the latest IE versions as well; and additionally include provisions so that headlines can still be rotated in non-JavaScript browsers. Finally, as an added challenge (and to make the article more interesting) we'll attempt to make our final page XHTML compliant.
Enough theory. Let's get into the gory details, with a look at the HTML.
| home / scripts / sidebar | [next] |
| ||||||||||||||||||||
Created: May 17, 2002
Revised: May 17, 2002
URL: http://webreference.com/scripts/sidebar/
