internet.com
Developer's Forum
Magazines

webreference.com

Java Boutique

Search Engine Watch

PC Webopedia

The Web Developer's Virtual Library

Sponsored by Oracle
Design Diary

HotWired 4.0: Inspired, Tired or Mired?

by Heather Champ

On July 1, HotWired launched 4.0, the latest "face" of the high-profile site. Version 4.0 introduces two new sections: RGB Gallery (original online art) and Synapse (commentary on the intersection of technology and culture). Some of the existing sections have been remodeled (Netsurf) or given a face lift (Dream Jobs, WebMonkey, and the Beta Lounge).

HotWired had never shied away from the controversial--pushing the envelope with each new iteration, incorporating the latest technologies for a full frontal assault. Lurking on the WWWAC (World Wide Web Artists Consortium) list, it was not surprising to see that the commentary ranged from flowery congratulations to rabidly scathing points of view.

Online publications have been struggling to come to terms with which metaphor to use to deliver content. Some, like Slate, have merely transferred a print metaphor. Others, like Word, are striving to acknowledge that the Web is its own medium and incorporate the inherent interactivity into the content.

It doesn't make much sense for HotWired to aim for a distinct print look, after all isn't that what Wired is for? It's important to strike a balance between form and function so that while a site may gain kudos for the overall look and feel, its real task is essentially delivering information in such a manner that makes it an enjoyable user experience.

The redesign brings together strong, supersaturated color combinations, sometimes within complimentary (e.g., purple and yellow) or analogous (e.g., blues and violets) groupings and fonts specified with the <FONT FACE="Arial,Helvetica,Verdana"> tag. The new color combinations are about as far away as one could get from David Siegel's (Creating Killer Web Sites) preferred "minty green" backgrounds.

It's a bold and progressive move. Designers are far too concerned with absolutely, positively assuring that what they design is what the user will see by using type set in GIFs. Many sites rely on an incredible amount of this "set" type, which is really antithetical to the Web as a medium and doesn't take into account the HTML's elasticity.

Unfortunately, specified fonts look better on a PC as they have the ability to anti-alias screen fonts. On the Mac it's a different story. The fonts appear crunchy, but given "Today's HotStats" Platform use listed with the top frame of the front door, Macs account for only 10% of traffic to the site. The combination of the somewhat strenuous color choices and sans serif fonts can create documents that are downright difficult to read.

The navigation tends to fall apart once a user has drilled down into the actual content. Small text links at the top of documents link back to the section headings, but there is no global navigation to enable easier lateral movement.

Splash Faces
HotWired has always used the Web and HTML in innovative ways. The initial splash screen for the launch "Splash Faces" is a rather elegant way to create a large, bandwidth friendly slide show. While it appears to be a large file, the GIF itself is on a small, 54 pixel square.

<IMG SRC="http://static.wired.com/frontdoor/97/26/stuff/splash_faces3.gif" width="100%" height="100%" border="0">

The tagging enlarges the image by setting the height and width attributes to 100%, which will force an elasticity to fill any browser window size.

It's difficult not to want to create something that appeals to the bell-and-whistle crowd in an effort to attain "cool" status. However, the simplest of solutions, such as the "Splash Faces," are usually the most compelling.

Past installments of Design Diary

http://www.internet.com/
Web Developer® Home Over a dozen topics in detail Live Chat Downloads Book and Product Reviews Threaded Discussions How-To/Articles/Links Developer Daily News Subscribe Search Corporate Information Advertise Events Publications internet.com Home