adrian holovaty

August 16, 2002, 10:07 PM ET

Screenshot: NewsChannel2000.com icons

Since I'm usually busy Fridays, I'm going to start a weekly "screenshot" feature instead of Friday's site review. (Monday and Wednesday site reviews will continue.) Each week, I'll post a screenshot of a particular feature on one or more news sites. It'll be either a model I think should be followed or an example I think should be avoided. My comments might range from nitpicky to general; either way, I'll try to present features we all can discuss, learn from and be inspired by.

Today's screenshot is of the home page of NewsChannel2000.com, which redesigned this past week. It's their list of links that appears in the right-most column:

I want to point out two things about this list, one good and one bad.

The good: Those icons are styled with style sheets; they're not hard-coded in. This is accomplished here by wrapping the link in a DIV tag and setting the DIV's background image to the icon. Here's the relevant code for the first item in the list:

<div class="computerlink"><a href="http://www.link.com/" class="iconed">Get Cool WESH Merchandise</a></div>

The div class="computerlink" corresponds to this piece of CSS code:

.computerlink {background-image: url('http://images.ibsys.com/2001/0126/435589.gif'); background-repeat: no-repeat;}

Note that this can be rewritten to background: url('http://images.ibsys.com/2001/0126/435589.gif') no-repeat;.

The background-image attribute sets the icon, and background-repeat is set to "no-repeat" so that the icon only appears once. Otherwise it would be tiled under the link repeatedly, looking like this:

The class="iconed" code pushes the link text over to make room for the icon. Here's the relevant CSS:

.iconed { padding-left: 22px; }

Without that left margin, the text would overlap the icon, like so:

The advantage of using style sheets this way is: If the NewsChannel2000.com producers ever want to change that computer image, all they'd have to do is change one CSS file to make the change sitewide. Plus, it saves bandwidth, because the code is more compact.

The bad: OK, so the icons are styled in a relatively innovative way. But what the heck do they mean? What's the difference between the computer, the file folder and the page with a corner bent? And what's that globe pointing to? The question mark is obvious, as is the envelope, but the rest of the icons are blatantly unusable. This is an entry for the Interface Hall of Shame if I ever saw one. In the name of fairness, I tried to find a site FAQ page of some sort, but I couldn't find out, anywhere, what those icons mean. If anybody has any ideas, please post a comment and enlighten us all.

Comments (3) / Permalink

August 16, 2002, 12:47 PM ET

Friday's lunchtime links

A List Apart: 10 Tips on Writing the Living Web -- Everyone's talking about this article. Not necessarily design-related, but it definitely applies to online journalism.

Interview with Curt Cloninger -- The author of "Fresh Styles for Web Designers" says "beauty enhances usability" but "HTMinimalism is a style you can use for a newspaper site." (Link seen on WebWord)

New Architect: Making Mistakes Well -- "By improving contingency design, online businesses can help customers recover from mishaps, while increasing conversion rates in the process." In plain English: Improved error pages can and will lead to happier customers. (Link seen on WebWord)

Comments (1) / Permalink