Case Study : HotWired
A Behind-the-Screens Look at How the World’s Coolest Web Site Is Produced
By Michael Macrone
In mid-1994, there really wasn’t much of anything on the World Wide Web you could call a “magazine.” Today there are dozens, if not hundreds—nobody, not even the indexers at Yahoo, knows for sure how many. What made the difference?
To cite the Web’s newfound popularity doesn’t explain much, given that it was partly caused by the growth of online publishing. It’s possible, however, to find a few more tangible factors in the Web’s evolution from the beginning of ‘94 and beyond.
One factor was the growing engagement of journalists with the Net. Not only were more articles written about the Internet, but more articles were being written for it in the form of bulletin board postings, Usenet articles, and Web pages. Writers were starting to see the Net as a medium as well as a subject.
A second factor was the release of Mosaic Netscape, now Netscape Navigator, the dominant Web browser on the market. With Netscape, many users were finally able to see the point of the Web; the client was faster, having been optimized for slow connections, and it made pages look a lot nicer. It also offered authors new tools for controlling page design, principally through extensions to HTML, the encoding language of Web documents.
A third factor was the debut, on October 27, 1994, of HotWired.
HotWired (http://www.hotwired.com/) isn’t a magazine in the same sense as its corporate sibling Wired, the unexpectedly successful digital-culture monthly. The paradigm breaks down once you’re prompted for a password or you’re following links in a cyberspace chain. Even HotWired’s producers have yet to settle on the right metaphor for their own phenomenon. The current candidate is television: HotWired’s content areas are called channels, their content programming, and their editors producers. The last term, at least, is hard to argue with; it captures much better than editor the job of assembling and constantly updating multimedia content.
If you had tuned into HotWired at the end of ’95, when the network—um, magazine—was 14 months old, you’d have found seven channels to choose from, plus one special program. Some—such as Piazza (the open forum) and Renaissance (the arts channel)—had been around since HotWired’s birth; others—like Adrenaline (sports) and Cocktail (drinks)—were still very new.
Each channel, listed together on HotWired’s table of contents (see Fig. 1), has its own creative team responsible for content and design. Teams varying in size from Adrenaline’s four to Cocktail’s 12 function independently, much like the separate creative teams behind each TV network’s programs. At this writing, staff numbered over 100, with more being hired every week. Indeed, at this point only two channels—Renaissance and World Beat (travel)—have full-fledged producers running the show. But HotWired, as it moves away from its original model of a single online magazine toward the new model of network programming, will soon hire a producer for each channel.
“The philosophy here now,” says David Pritchard, the general manager of Renaissance, “is to push responsibility down to the channels as much as possible. The feeling is that we are best placed to understand the subject we’re writing about, who out there is going to be interested, and what is going to be interesting to them.” Pritchard, along with World Beat’s Ross Van Woert, is in the vanguard of this push, being one of the first GMs of an individual channel.
Pritchard works with the producer of Renaissance, Michael Small, to formulate the channel’s strategy and to propose budgets to the business side (led by president/CEO Andrew Anker and vice president/COO Beth Vanderslice). At least for now, channels needn’t worry about revenue; advertising salespeople inhabit a separate department and focus on selling the HotWired brand name, far better known than the name of any HotWired channel. Ads in HotWired sell for $15,000 per month, with 16 to 18 ads running each month.
But while HotWired is paying the way for the channels, it’s the channels that formulate budgets. “The dialog starts from us,” says Pritchard. “It’s not a question of HotWired coming to the channels and saying, ‘This is what’s happening, can you live with it?’ It’s a question of us saying, ‘This is what we’d like to do, this is what we feel is the most appropriate thing for us to do.’
“Our role,” he continues, referring to the Renaissance team, “is very much about building audience. That’s the focus: to produce a strong, compelling publication and reach an audience that will keep coming back.” This means deciding where to spend money, and in the case of Renaissance money is now spent principally on improving the look and feel of the channel, making the interface easier to navigate, and paying for the best possible writers.
Additional funds are also directed at marketing, which Pritchard defines as “letting people who aren’t yet aware of Renaissance know that it’s there and may be of interest to them.” While he declined to speak in detail, he did note that in addition to electronic marketing—which could take the form of ads on other Web sites-they’re considering a variety of other media, including print.
HotWired runs the site on SGI Challenge Sand Indy machines, plus two Pentium boxes running BSDI Unix—all with 64MB RAM. They use Apache server software, and the Web servers have 4GB Seagate drives. Storage is handled by the internal file system and one RAID array for the edit tree. They’ve got two T1 links, soon to be four, preferring multiple T1s over one T3 to avoid a single point of failure.
Just Like TV
Editorially, HotWired is overseen by managing editor Chip Bayers and executive editor Gary Wolf, each of whom came to HotWired from a slightly more established field (computer publishing and alternative journalism, respectively). On the day-to-day level they’re responsible for HotWired as a package, but there’s also lots of “back and forth with staff,” as Bayers puts it. He and Wolf meet periodically with producers to review content and consider plans, but when it comes to the mechanics of running the channel, “each producer serves much as the executive producer of a television show or the executive editor of a magazine,” Bayers claims. “Gary and I would then be the executives of the network or perhaps the cable system.”
A producer such as Michael Small of Renaissance certainly has his hands full. Small is responsible for turning out at least one feature per day, generally two weeks before publication. (In the case of HotWired, “publication” means linking the piece to its contents page.) Many but not all Renaissance pieces are written by the in-house creative team who bounce ideas off each other in formal and informal meetings.
“The people here are so talented and have such a broad range of interests that it’s very easy for me to rely on them,” Small explains. Producers in a new medium like the Web tend to be precocious and quick, bringing a range of expertise to the job. HotWired, being full of such people, is an ideal platform for the sort of collaborative creation Small saw so little of in his many years at People magazine, his prior employer.
“It can be hard to find the right balance between collaboration and decisiveness,” admits Small. “You don’t want to slow down progress by insisting on consulting everyone about everything. At the same time, whenever we have meetings where everybody can talk, and the designer can talk about content as much as the editors, really smart things come out of it. All I have to do at those meetings is make sure they don’t go on too long.”
Once the ideas have coalesced and Small has edited a piece, it’s passed on to HotWired’s assistant managing editor, Alexandra Huneeus. Huneeus works on headlines and jumplines, aiming for catchiness and consistency, qualities not always evident at HotWired until recently.
Next a piece will travel to Renaissance production assistant Mary Spicer, who first checks through the HTML markup (code for rendering the page). Once the text is clean, she begins assembling images, sound, and video clips as appropriate, often scouring a lengthy QuickTime movie for one downloadable clip. (Ten seconds of QuickTime can run to hundreds of kilobytes.)
Spicer then hands her work off to production manager Jill Atkinson, who works with “three,” the designer of Renaissance, on the final appearance of each page. The process involves some traditional production procedures, such as specifying type, measuring column widths, and sizing graphics. It also includes procedures unique to Web publishing, such as indexing color palettes.
Let’s take a look at one recent result, the first page of the feature “Pastel Sentences,” a collaboration between poet Alan Ginsberg and painter Francesco Clemente (see Fig. 2).
This page exemplifies the current phase of HotWired design, which stresses clean lines and graphic simplicity. Most titles are now set in a Swiss Gothic type, blended in with HotWired’s signature version of Ad Lib. The HotWired logo that marks every page on the site is here, nicely reversed, and the program title (“Renaissance Workshop”) simply presented.
Simplicity is the chief virtue of this screen, but it’s helped by economy. The page loads surprisingly quickly, especially given the size of the graphics. Speed results from two very smart design techniques: breaking down a composition into smaller pieces and designing with a minimal color palette.
Though the “Pastel Sentences” page looks unified and continuous, it’s actually composed of four separate images arranged vertically. The ad banner was supplied by the server, but the other three images were designed specifically for this page. They appear as a composition because they share background color (100% red, 45% green, 26% blue), which is also the color of the window.
Three small images load much more quickly than one large one, especially if you’re a Netscape user. (One of Netscape’s innovations was speeding browser performance by increasing simultaneous connections.) And the images are smaller still because they were designed within a restricted color palette.
Take the title page. The largest image on the page (see Fig. 3) turns out to have the smallest color palette—a mere 16 colors. Even taken together, with lots of help from the ad banner, the total number of colors used on the page is 86, only a third the number in a maximal GIF file.
Thus HotWired’s designers, enjoined to keep browser strain to a minimum, ease the flow by aiming for a constant, and low, product of image size and bit depth. Bigger image: fewer colors. Likewise, backgrounds are set to match the predominant color in the images’ collective CLUT (color look-up table).
It may seem a small thing to balance elegance with efficiency, but that’s the essence of good design for the Web. Some very beautiful sites are scarcely visited because waiting for pages to download gets old. And while functional pages are nice, their very efficient lack of style is boring and thus unlikely to cause much of a stir.
On the Fly
If HotWired offered just enticing content and well-designed Web pages, it would be a respectable feat unto itself. (It’s also a feat replicated by several more recent Web publications—see “Select Web Magazines” on page 32.) But what they do is a lot more interesting than that.
Practically every site on the Web is a collection of static documents: HTML files, image files, sound files, and so on, that sit on a server waiting to be browsed. Most of the components of Hot Wired—such as article bodies and image files—are also static, but not a single finished page is. “All our pages are created on the fly,” boasts Jeff Veen, HotWired’s interface architect.
For example, the advertising banner at the head of the Ginsberg/Clemente piece was not placed there by hand but was added by a script (local executable) whenever the page was called by a browser. The executable itself is hidden from view, but its trace is discernible in the source your browser receives:
What you get from the local “exec” is a hot-linked image file, with HTML written on the fly.
“Ad banners all shift around,” Veen explains, “and basically we have complete control over every document on the site. Just by tweaking variables here and there, we can rearrange stuff like that. The same goes for footers. If we were to add a new feature or take away a feature, for example, we can flip a switch and all the footers change. This makes production a lot easier.”
It also gives HotWired a distinctive advantage over most sites, which hardcode ads onto Web pages. Ads may be moved, revised, or changed simply by updating a database and without rewriting or reloading any page. Thus HotWired’s sales team has a lot of flexibility, which so far they’ve exercised with restraint.
But the possibilities are certainly interesting. For example, you could circulate ad banners in a channel based on a given set of distribution parameters. In other words, you could set the variables so that a certain ad would appear on a certain page with a certain degree of probability. Thus, you could guarantee exposure while minimizing predictability.
More interesting from the user’s perspective are the on-the-fly modifications to the main page for Adrenaline, the sports channel. Every time the page is called, the server embeds a randomly selected splash screen from a directory, so the user gets a different screen every time. For now, it’s just a spin of the wheel, but the process could easily be controlled. “We could base which page is generated on what you’ve already seen or haven’t seen,” Veen explains, “or on what’s popular or not popular with all our users. Likewise, if we want to increase hits for a certain section, we could just tweak the randomness in its favor. It would be possible for HotWired to go in that direction with all its content.”
The most impressive case of on-the-fly page generation so far is the “What’s New” page HotWired offers its roughly 300,000 members. Membership is open to all for free, but it does require filling out a form, choosing a user ID, and remembering a password—tasks unwelcome to a large number of Web cruisers. (We’ll get back to this point momentarily.)
“What’s New” is an overview of HotWired content tailored to each individual member (see Fig. 4). It shows you a table of all new and unread content in each channel, based on a set of preferences you select from a form. This bit of wizardry involves matching data in two separate Sybase databases, one containing a record of every page each member has visited, the other storing user-defined preferences.
This information is gathered at both the front end and the back end. On the front end is the basic mechanism of HTTP authentication, supported by every server and every Web client. When you log into HotWired, your browser prompts you for a username and password; from that point on until you end the session, your browser remembers that this is your authentication data for HotWired.
“Every time someone loads a URL, they have to tell us who they are,” explains Veen. On the back end, a record of every hit is then added to the database. Thus, HotWired has “a profile of every user and what they’ve seen and haven’t seen.”
This data is matched with preference data to generate each user’s “What’s New.” A variety of tools are used in the process: Perl scripts, C code, Sybase programming, whatever suits the purpose best. Similar tools are used to compose pages of user messages, known collectively as “Threads” (see Fig.5). Users register preferences for how they’d like Threads displayed, and that’s what’s generated for them on the fly.
Authenticated & Unauthenticated
Obviously, features such as “What’s New” and interactive areas like Threads are possible only with those two databases—in other words, possible only for members. From the very beginning, membership in HotWired has been a controversial issue. It isn’t just that registering and authentication are a pain. There were also lots of people on the Net who just didn’t like the whole idea—it smacked too perceptibly of a marketing ploy.
Registration, along with HotWired’s frankly commercial intentions, alienated a certain segment of the Net, though not a terribly large one. Things have only gotten worse as the Web has grown more mainstream. Not that new users are alienated; more often, they don’t grasp the concept. For these and other reasons (such as making HotWired’s pages more linkable), mandatory registration was dropped in August of ‘95. (You still have to join, though, if you’re interested in customized pages or interactive content like chat.)
Creation of separate authenticated and unauthenticated spaces is just one way in which HotWired has adapted to experience and learned from mistakes. The most visible adaptations have been in HotWired’s main page, its front door to the Web. At the beginning, this page was graphically quite elegant, easily among the best-designed pages on the Web (see Fig. 6). But it suffered from a certain kind of willful obscurity that many found puzzling. For example, most links were labeled with highly associative names such as “Signal,” or hidden under stylized, rather uncommunicative icons.
Like Wired before it, HotWired had made certain, not 100% accurate, assumptions about its audience’s tolerance for a cutting-edge interface. “One of the things we were wrong about,” Jeff Veen admits, “was in thinking people would come and want to enter this world called Hot Wired and just explore it all. In fact, I think it made a lot of people uneasy to come in and really have no clue how much is behind all these icons and what they all mean. We assumed there would be enough information implied in the icon and in a name like Signal.”
User uneasiness prompted a series of homepage revisions, first in February ’95, when HotWired was four months old (see Fig. 7). You’ll notice the interface is much more explicit: Everything is clearly spelled out and explained. But this too had its problems, being “so functional that it’s overwhelming,” to quote Veen. So in May it was back to a more elegant and understated style, which gave way finally to yet another more easily parsed variation. “The pendulum doesn’t swing as far every time,” notes Veen, “but we just keep going back and forth between form and function, looking for the best mix.”
Balancing clarity and elegance, the all-important cool factor is one of the special challenges of the new medium. Of course, it’s more difficult when what used to be “intuitive” grows strange and unfamiliar. Once upon a time it was not absurd to suppose that users would know how to open a telnet window, which you still have to do to reach Club Wired, HotWired’s chat area.
Jeff Veen: “People are growing less and less experienced with things like telnet as online service providers get bigger and bigger. When America Online puts four million people on the Web, you start realizing that you’re no longer dealing with a Net user but maybe just a general consumer—somebody who would have no idea how to get into Club Wired. I mean no basic idea at all. We get email from users that can’t cut and paste a URL. The sorts of assumptions you once could make are going away.”
Before we get too caught up in nostalgia for the good old days, it’s worth noting that there has been some progress. When HotWired debuted, for example, 28.8kbps modems were still new to the market, and 14.4 was barely standard. (There were even some people still surfing at 2400 baud.) Especially in hindsight, it’s hard to imagine how anyone had the patience, but with the release of Netscape, things became more tolerable.
HotWired’s success would have been unthinkable without Netscape, both because of the client’s more efficient downloading scheme and because of its added hooks for page design. But HotWired has never required Netscape and has set standards of its own for keeping pages manageable, meaning quick to appear on a viewer’s screen.
In the beginning, for example, HotWired’s designers, led by Barbara Kuhr, established a palette of eight colors (eight, not eight-bit) for use in all graphics, including icons, backgrounds, and illustrations. HotWired has loosened this standard a little, relaxing the palette to four bits, but each channel’s designer is still directed to make pages as simple to download and digest as possible. HotWired continues to learn more about how simplicity works on the Web and explore how to implement it. The reason, according to Veen, is “simply because I don’t think people have the patience on the Web. I think you have to earn every click, as opposed to television, which people will just leave on for the sake of being on. There are so many options on the Web as well as so many technical limitations. You know, I’ve got a 14.4 modem and I’m gonna surf for an hour; stuff’s gotta happen, I gotta get a payoff right away.’“
Staying Power & Java
People who spend any significant time on the Web tend to grow jaded pretty quickly, so to keep their attention you need to keep innovating. This means more than refreshing the content, adding channels, or tweaking the interface. It also means playing with new technology.
HotWired has consistently explored every significant new development in Web authoring, though they have rejected some (e.g., Netscape’s server push capabilities) as too bandwidth intensive and others (e.g., Virtual Reality Modeling Language, or VRML) as too undeveloped. Right now the interface and software teams (HotWired builds most of its own software) are looking into such potential enhancements as Adobe’s Acrobat (PDF) file format (http://www.adobe.com/Acrobat/Acrobato.html) and Macromedia’s Shockwave, a Web/Director interface (http://www.macromedia.com/Tools/Shockwave/).
Whether or not HotWired incorporates something like PDF depends on many things: whether it becomes broadly accepted by authors, whether there’s enough bandwidth to support it, whether they can do something cool with it, and so forth. The one tool that’s well on its way to passing these tests is Java, a programming language (akin to C++) developed specifically for the Web by Sun Microsystems. Java applets—small applications built for specific tasks—are compact and platform independent, or rather dependent only on whether your platform’s browsers support the language. (Netscape 2.0 does.) Web developers will be able to link applets to HTML documents, effectively turning the browser into an ad-hoc application window. (See “Building an Internet Web Site,” InterActivity, March ’96 for more details on programming in Java.)
One task HotWired has in mind for Java is to simplify the Club Wired interface. Where now you’ve got to launch an external telnet application to reach the Club, Java will bring the Club into your browser. Clickable buttons and menus will replace the obscure ASCII commands of the telnet interface, making selecting a chat channel much more intuitive.
Primarily, though, and despite exploring new tools like Java, what HotWired does to keep the interface dynamic is, as Veen says, “just pound and pound on HTML and CGI to make them do things they were never intended to do.” (CGI, the Common Gateway Interface, is a protocol for running scripts over the Web.) In this, HotWired has had help from Netscape, which keeps extending HTML on its own initiative, in ways many Webheads will tell you God never intended.
One such new extension is frames, introduced with the first beta of Netscape Navigator 2.0. HotWired uses frames nicely on the new Cocktail channel, allowing users to click an imagemap in the left frame and see the results on the right (see Fig. 8).
The code for frames is more complicated even than that for tables, a proposed HTML extension that’s become common with a push from Netscape. But Cocktail’s markup is relatively simple and thus a good place to start. Here’s an excerpt from the source code:
Anyone familiar with coding tables will note some similarities in the frames syntax. For example, frames are enclosed in a larger structure called a frameset, just as cells are enclosed in a table. Likewise, you can control measurements for frames just as for table cells. This is the function of the tag
which specifies a depth of 56 pixels for the first row of the frameset and an arbitrary depth for the second row. (An asterisk tells the browser to resize the frame to fit the user’s window.)
But framesets differ in many ways from tables, most obviously in taking URLs, rather than data, as contents. In other words, a frameset is both an element of one HTML document (the source or parent) and a container for others; it’s not an array of data but rather an array of Web documents. (You could even write a frameset to present on one screen your six favorite Web sites. Not that it’s a smart idea, given your average monitor.)
When you include data in a table, the code looks something like this:
But in assembling a frameset, you write code like this:
This code arranges four distinct URLs in an array of four frames, with a first row depth of 100 pixels and a first column width of 200 pixels. (Measurements may also be given in percentages of window size.)
Cocktail’s code is slightly more involved. For one thing, it embeds a frameset within a frameset. The outer frameset contains two rows, the first occupied by a single frame and the second occupied by a two-column frameset. In schematic form:
This produces a browser window whose structure looks like that shown in Fig. 9.
HotWired does a few other fancy things with the basic code, such as defining frame margins and specifying whether each frame allows resizing or scroll bars. For more on the various possible frame attributes, consult Netscape’s documentation at http://home.netscape.com/assist/ net_sites/frames.html.
More interesting is how the frames function when you click in them. Since framesets are arrays of documents—in effect, multiple windows collapsed into one—it’s possible to refresh one frame without disturbing the others. This allows authors to have a link chosen in one frame and load a document into another (see Fig. 10). Alternatively, links can overwrite the existing (or “parent”) window or spawn a new one.
What happens is determined by how frames are named and links defined. Netscape has defined a new anchor attribute, TARGET, to specify where URLs will be loaded. It looks something like this:
In this case, when you click the word "link" the document "link.html" will be loaded in the frame named "frame2." Frame names are defined this way:
So if "source1.html," displayed in the first frame, contains the anchor defined as
then clicking “link” will load “source2.html” into the adjacent frame (“frame2”).
For a real life example, take the content of Cocktail’s left frame, which renders this source (excerpted):
Notice the base tag on the sixth line: It defines the default target window (in this case, the sidebar frame) for displaying linked documents. Since there is only one anchor in the document, the same effect could be achieved by rewriting the seventh line:
In either case, the link is a server-side imagemap (“mojito.map,” built on the image file “mojito.gif”). Clicking on the map sends a lookup request to the server, which sends back the appropriate document for rendering in the sidebar frame.
Frames would be unthinkable, except as a toy, had Netscape not built in backward compatibility for benighted users of browsers other than Navigator 2.0. This is provided by the NOFRAMES tag, which encloses standard HTML in case the frameset tags aren’t parsable. For example:
Everything inside the <NOFRAMES> container is ignored by a frames-capable browser; everything outside it is ignored by frames-impaired browsers. If you look back at the Cocktail frameset markup, you’ll see that HotWired has used this technique so that older browsers such as NSCA Mosaic or Netscape Navigator 1.1 will still load a nice looking page (see Fig. 11).
On the Bleeding Edge
HotWired isn’t always first to exploit new developments like Java and frames, but it’s usually among the first to do it well. This has been true since the beginning, when HotWired could claim to be the first commercial online magazine, beating Time Warner’s Pathfinder (http://www.pathfinder.com/) by a matter of days. (In any case, Pathfinder merely repurposed print magazine content. HotWired published original writing.)
By getting out in front of trends (advertising banners, Web-based conferencing, authenticated membership, encrypted commercial transactions, HTML extensions, Java, etc.), HotWired often influences what flourishes or dies in the ever-evolving Web medium. Along the way, it’s naturally made mistakes—as in the interface design—but as usual, experience has been a very good teacher.
“Mistakes are important to make when you’re developing media of any form,” observes managing editor Chip Bayers. “And obviously, we learn from our mistakes ahead of everybody else. But the Web being the Web, everyone has been able to watch us through that learning process and learn from us, we’ve in a way functioned as a development property for every other media organization out there. They’ve been able to use HotWired for their R&D.”
If HotWired wants to remain the market leader, it will have to live with this role—the Web being the Web. Bayers thinks HotWired still has a considerable edge, at least by computer industry standards. “We have to keep focused on the lead that we built for ourselves beginning last October, which is probably a six- to nine-month lead in any of the areas you look at: understanding the technology, building an editorial staff, figuring out how to sell advertising—all the things that go into producing a commercial Web site.”
Right now HotWired seems in little danger of resting on its laurels, which would spell death in the demanding new Web market. “We just have to keep focused on maintaining our lead,” Bayers repeats, incanting as much as informing, or get sucked into the morass of the run-of-the-mill Web site.”
SELECT WEB MAGAZINES
WORD : http://www.word.com/
Salon : http://www.salon 1999.com/
FEED : http://www.feedmag.com/
Mediamatic : http://mmwww.xs4all.nl/Magazine/Magazine.html
Buzznet : http://www.hooked.net/buzznet/
Urban Desires : http://desires.com/
Crash Site : http://www.crashsite.com/Crash/
Suck : http://www.suck.com/
HotWired : http://www.hotwired.com/
Michael Macrone designs Web pages and maintains a site at http://www.well.com/user/macrone/. He has also written numerous books on literature and the history of ideas.
– 30 –
First published in InterActivity magazine (April, 1996)