adrian holovaty

August 19, 2002, 11:33 PM ET

Site review: thetriangle.org

The Triangle is the student newspaper at Drexel University in Philadelphia. It's an award-winning beauty of a site, obviously modeled after Salon.com but fresh nonetheless. I'd be hard-pressed to name a news Web site -- college or professional -- that makes better use of white space.

• Sitewide navigation is contained in two horizontal bars near the top. It's a great arrangement. Not only does this present the user with easy navigation decisions (as opposed to assaulting the user with dozens of links), it also frees up the left rails for inter-section navigation. For example, on an entertainment story page, the left rail has a list of all the entertainment headlines in the same issue -- with the current one bolded. This makes for easy perusal...
• ...as long as the headlines are descriptive enough. One common pitfall of such a scheme -- using headlines alone to index content -- is the feature headline, which doesn't really serve any purpose other than to be witty or "featurey." An example on thetriangle.org: Consumer Confidence. That headline may work in a print setting, or even in an online setting with the story right below it, but as a standalone navigation link, those two words tell me next to nothing. A good workaround for this problem is to have producers write a "long hed" and "short hed" -- one for the story, one for standalone links. Washingtonpost.com is one site I know of that does this.
• The site's style sheet is hard-coded into the top of each page. That's 6.47 KB of extra bandwidth wasted per page. The site loads quickly already, but the designers would do well to put that style sheet information in a linked style sheet, so you and I would only have to download it once.
• Speaking of the style sheet, the site's 11-pixel Trebuchet MS looks superb to these young eyes, but because the fonts are set using pixels, they're not resizable in IE for Windows, the world's leading browser. That means people like JD Lasica, with whom I just chatted today about this very topic, will just plain turn around and leave the site. Dive into Accessibility has a solution.
• The more sites I review, the more I realize how relatively unknown CSS shorthand is. In thetriangle.org's style sheet, font-family: Trebuchet MS, Tahoma; font-size: 12px; font-weight: normal; can be shortened into font: normal 12px 'Trebuchet MS', Tahoma;, and color: #000000; can be shortened into color: #000;. These might look like small changes, but they add up -- especially when you're hard-coding CSS into the top of each page, like thetriangle.org does.
• Bylines appear in a strange place -- the right rail, above advertising. Check out this page as an example.
• Right under the byline, there's an e-mail this story feature. But clicking it gives you a JavaScript popup window that says "coming soon". This is like selling a product that doesn't work yet; there's nothing to be gained for the user except frustration. It's like the dreaded "under construction" icon, but worse: Instead of being forthright about lacking the feature, the site presents the "e-mail this story" link as if it's fully functional. It's only after you click it that you find out it's not working just yet. There's a reason "under construction" pages have been banished to content hell.