Apapted from Wayne Bremser in Newmedia Magazine, April 14, 1998

DHTML or Flash? CSS or Downloadable Fonts? Netscape or Microsoft?

The Web hasn't been a very friendly place for high-end, interactive graphic design. Complaints about long waits, useless animations, ugly type, and the plug-in scavenger hunts could discourage all but the most dedicated of the next generation of Roger Blacks out there. But fear not; the tide is turning. Netscape's and Microsoft's 4.0 browsers are out there in mass quantities; the 386s and 486s are giving way to Pentium-based systems; and the price of RAM has plummeted, so you can count on your users having enough RAM to drive a copy of Netscape 4.0 with a full hand of plug-ins.
      Of course the news isn't all good. Cruising a media-rich site with a 56Kbps modem is still like sucking a McDonald's shake through a straw -- it's sweet, but is it worth the wait? Your job is to make sure it is -- to choose carefully from the available technologies and then use them wisely. Here we examine Java, Dynamic HTML, Cascading Style Sheets (CSS), Plug-ins, ActiveX, and channels. And we talk to designers in San Francisco's multimedia gulch who have been finessing the technology to keep their customers and their clients' customers entertained, not exasperated.
      Most of the designers had one rule: "Don't use a technology gratuitously, just for the sake of it. The most important rule for technology and design on the Web is appropriateness," says Jeffrey Veen, the interface director for Hotwired and author of the book Hotwired Style: Principles for Building Smart Web Pages. "We use technologies to enhance a page, but we don't rely on them." But on the Web, there's a lot of room for enhancement.
      Interestingly enough, the main problem the designers we contacted complained about was compatibility. There is no question that the Netscape and Microsoft battle has slowed down Web designers' work. Even though there are tricks that developers can play, such as browser sniffing (using scripts to determine the user's browser), developing and maintaining alternate versions is a huge inconvenience. The second complaint has to do with over-hyped technologies. A record of false promises from a multimillion-dollar PR machine has taught these developers not to put all their clients' eggs in one technology basket.

DHTML: The Holy Grail

Dynamic is a word thrown around a lot in our business, but Dynamic HTML (DHTML) -- a combination of JavaScript, regular HTML, CSS, and new code -- really delivers. It brings exciting interactivity such as rollover buttons, animations, and responsive charts to the Web without your user having to click and wait for your server to deliver a new page. Previously this type of interactivity was only possible with Java or Shockwave.
      Unfortunately, while the World Wide Web Consortium (W3C) is working on a specification for the Document Object Model (DOM), which would standardize DHTML, the two 4.0 browsers differ radically in how they address DHTML. Netscape injected its own Layer tag, while Microsoft's Internet Explorer uses the W3C's DIV tag. (The Layer tag, while nonstandard, is slightly more pleasant to deal with in raw-code form.) This confusion means designers have to test and retest when they want to reach both 4.0 browsers. For some applications, however, it is more than worth the trouble.

      "What I like about DHTML," says Dan Harrison, director of innovation at Plastic, a San Francisco Web-design firm, "is that you have control of the whole browser, not just a tiny area as with plug-ins. When I worked with Java and Shockwave, all the interactivity and excitement was confined to one area on the screen. With DHTML, flashing exciting things can happen all over the browser." Plastic's clients include Pacific Gas and Electric, Joe Boxer Jeans, National Public Radio, and Microsoft. After creating a full-bandwidth video for Microsoft, the company replicated it in DHTML for a demo of Site Builder. "The second half of the demo is a complete tour of the Site Builder Network," says Harrison. "Throughout the demo there are links to go visit that part of the site."

      DHTML can even bring a "killer" Web site to life. The most common complaint about movie Web sites is that they are boring compared to the big-screen blockbusters they promote, but the Replacement Killers site is an exception. Using DHTML, Akimbo Design delivers a trailer that includes flashing weapons, gunfire, moving type with synchronized sound, music, and large images of the film's stars. It also has an Assassin game (which craftily asks for your e-mail address and the addresses of the friends you want to "kill"), access to the store, and movie-theater schedules, all in a graphic package that responds like a CD-ROM. Sony Pictures hired Akimbo to create the first real DHTML-based movie site after it saw the fictitious movie Web site Akimbo made as a demo for Macromedia's WYSIWYG HTML tool, Dreamweaver.
      "Because of that demo we got involved with DHTML early," says Akimbo co-founder Ardith Ibañez, who says the company was completely up to speed with the technology in less than a month. When pressed, her one complaint is minor. "We use transparent GIFs to animate, and sometimes you get a halo around some of your objects against certain backgrounds." She says she's already reading about work-arounds for that problem. "DHTML is a powerful tool, and currently there's a misunderstanding of what it is, so people are hesitant to use it," she says. They also have run into browser-compatibility problems. "Because the syntax in JavaScript can be quite different, we have to constantly test on both browsers," says Rigby.
      "We want to make the Web like a TV experience," explains partner and CEO Ben Rigby, "with a lot of full-screen motion, but interactive at the same time. DHTML is one step toward that -- of course there are 100 more steps to go." Rollovers are an important part to the look and feel of The Replacement Killers site. Each button has a visual and aural cue, which Rigby says really enhances the experience. "You don't notice things like that until they're not there," he says.

      Even shopping can be enhanced with DHTML. Style-oriented Web-design firm Fabric8 has an "online boutique" that sells clothes, CDs, and art. It uses DHTML to show off its lines. The difference is obvious when you choose between the site's paths: experimental DHTML or universal version. With DHTML, the models displaying the "Dollop Toppy hats with the faux poodle fur trim" zip across the screen. In comparison, the nondynamic selections do a slow redraw.
      "We try to put out a site that's not cookie-cutter," says CEO and Web designer Olivia Ongpin. "We try to push the envelope partly because of who our audience is and partly because of who we want them to be." Ongpin says she likes the element of surprise that DHTML gives her site. "When you mouse over the page, our background changes, and when you go over the buttons the models spin." But incorporating surprises makes download time an issue. "Corporate sites assume that their users are coming in over ISDN; we can't make that assumption. We find that the tighter the JavaScript, the smoother the download; also, we try to coordinate downloads by using tricks like onLoad and timeout," she explains. To deal with compatibility, testing on both browsers is essential, says Ongpin.
      Plastic has chosen not to try and juggle browser-compatibility problems; instead it's sticking to Internet Explorer. "Over a year and a half ago we bet our company on Microsoft's vision," says creative director Shane Ginsberg.

Java: An App of Choice

The way Sun's PR juggernaut hyped Java, it had many believing that soon every toaster and OS would be Java-powered. Of course most of those people have had to wake up and smell the... Well, never mind.
      Java started in 1990 when a Sun employee complained about code compatibility and portability and was allowed to start his own in-house group to create a language that would solve these problems. Java applications (applets) are launched off a server rather than a local hard drive, and they work on any platform. Unfortunately, Java's promise of true compatibility and its implementation differ greatly, and it has been pretty unstable in the browsers. The final kink is Microsoft, which is kicking and screaming to prevent Sun from having complete control over the language. Currently Sun is suing Microsoft over incompatible Java implementation in Microsoft's Internet Explorer.

      When CNN wanted more graphically compelling content on its site and Intel wanted to show off its new processors, San Francisco-based Construct was happy to oblige. The demo had to run in multiple browsers and run like a software program. They chose Java for the job. Construct built applets that would create effects such as morphing, warping, and swirling on pictures of space from the Hubble telescope. The tough part, says Web engineer Cynsa Bonorris, was ensuring that there was a noticeable difference, not only in the actual frame rate, but in how the difference appeared to the eye. It wasn't easy, but Construct was successful in getting solid cross-platform results on three operating systems and four browser versions.
      "The trick, if there is one," says James Waldrop, Construct's chief technical officer, "is to just be persistent and try alternate approaches when you get stuck." He warns to avoid using the Abstract Windowing Toolkit (AWT) part of the Java Foundation Classes (JFC), the standard GUI API, because that's where the cross-platform performance starts to breakdown. "We try to stay away from Java for complex media pieces," says Waldrop. "Though it's good for interactivity and some image manipulation, DHTML beats it as a multimedia solution." He says the multimedia situation will improve with Java 1.1 and 1.2, but he still thinks Java needs a streaming- or compressed-audio protocol.

      The folks at Plastic have used Java for client projects but aren't as interested in it as Waldrop is. "Java has lots of promise, but we are struggling to find good uses for it," says Harrison. "Some clients come to us and say 'give us Java!'; we ask them, 'why?'," adds Ginsberg. But the company does use it when it makes sense. When the utilities company Pacific Gas and Electric wanted an interactive tool on its Web site that would help people embarking on construction projects figure out the varying costs of energy options, Plastic built a Java applet. Ginsberg says that the resources required to create this applet included two months of development time (much of the programming was outsourced), which produced more than 13,000 lines of code. For this reason, he believes Java's main focus in the future will be applets that act more like full-featured applications rather than multimedia.
      Construct's Bonorris agrees with some of Ginsberg's issues concerning development time and resources. "One of the problems with Java is that not everyone is able to write the stuff. It's not like JavaScript where you can steal the code." She says that the ability to copy code, as with JavaScript and HTML, helps developers learn and aids in a Web technology's popularity. "Using Java also represents the difference between the salary of a Webmaster and a C++ coder," says Bonorris.

CSS: Form Follows Function

Designers, especially those with print backgrounds, have been extremely frustrated with the typographic limitations of the Web. Choosing font sizes is easy, but standard HTML provides no way of setting leading and kerning. While HTML does allow the designer to specify a few typefaces, there is no way to determine which fonts the user will have, so a designer must stick to the most generic system fonts. Two technologies aim to change this situation radically: CSS and downloadable fonts.
      First presented in 1995, the CSS level 1 spec offers some vital typography control such as color, size, and spacing. Style Sheets, while not meant to control layout, allow designers to attach rendering information to HTML documents. The first taste Web users had of CSS1 was the partial implementation found in Internet Explorer 3.0. As IE 3.0 had a minority user base, developers resisted using CSS, but now that both of the 4.0 browsers support CSS, this is changing. Compatibility is still a major issue however, and designers will see wildly varying results between the two browsers, which defeats the whole purpose of CSS.

      Hotwired's Veen says that Style Sheets are certainly one of the great technical breakthroughs on the Web, but he has reservations. "When you think about the history of typography and how it has evolved, basically it just doesn't work very well on the Web," says Veen. "There are just unbelievable variables. The Web is really about the users' interpretation of the information, based on what their computers can do. I see so many sites that want their type to look a certain way, and they have all these graphics packed with words. You can't read it; you can't search on it. It's not really even type anymore. At Hotwired we take almost a deconstructionist's view. We set parameters instead of setting rules."

      Todd Fahrner, design technologist at Studio Verso, is an Invited Expert to the W3C, working on CSS and bleeding-edge XSL, but ironically, Verso's use of the technology has been extremely limited. Because of the compatibility issues, Fahrner believes that relying completely on CSS for a site's typography is "suicidal."
      However, Verso, whose recent projects have included a commerce site for Office Depot and an employee-recruitment site for Lucent Technologies, uses CSS in minor ways on its company site -- to pick typefaces and leading as well as to turn link underlines off. Incidentally, Fahrner points out that CSS performs better in Netscape 2.0 than it does in Internet Explorer 3.0, because no support is better than partial support. Verso is wary of using new technologies such as CSS because it wants to reach the broadest audience possible and does not want to rely on browser sniffing. Its clients maintain the sites themselves, and Verso doesn't want them to have to maintain three or four different sites.
      "Browser companies treat CSS like an add-on technology, rather than an evolution or revolution," Fahrner says of the many problems with CSS implementation. He also says that browsers have been designed to render HTML for speed rather than quality, often at the cost of glitches and bugs. Layering CSS on top of this legacy creates a new group of problems. Finally, Fahrner contends that the rush to bring the next version of browsers out of beta has caused corner-cutting. But that doesn't mean he doesn't believe in CSS. "CSS will become the way to go -- it's just a question of when the curves cross." He says the buzz on the W3C message board predicts that there is enough in the CSS2 spec, due first quarter, "to keep browser developers busy for years."
      Other developers haven't been as cautious with CSS. Fabric8's Olivia Ongpin agrees that compatibility is a major issue but remains optimistic, "CSS is the best solution thus far; it's both typographic and searchable on engines, which text graphics are not." She predicts that within 18 months to two years, every designer will be relying on CSS.
      The second promising technology for curing the Web's typography ills is downloadable fonts. As users may not have specific fonts, developers can embed those special Web fonts in the page so users can download and display them on the fly. Of course, the two browser companies are backing different solutions.
      OpenType is an initiative created by Microsoft and Adobe that lets designers create custom font sets. These font sets contain only the characters that a site's pages use, which makes for smaller file sizes. Microsoft offers a free tool to create the Web fonts called Web Embedding Fonts Tool (WEFT). To prevent users from owning these "free" fonts, WEFT forces designers to specify the URLs on which the font will be used. After this selection is made, people will not be able to use the font on other pages.
      Netscape is betting on a different technology: TrueDoc, created by Bitstream. Using a tool from HexMac, designers go through pages and capture the characters used from specific fonts to create a Portable Font Resource (PFR) file.
      All the designers we spoke with had strong opinions about downloadable fonts: Plastic's Harrison is a fan of WEFT and says using the tool to create Web fonts is simple; Akimbo's Rigby says he has experimented with downloadable fonts but has found the screen redraw of those pages to be slow; Studio Verso's Fahrner is not a believer, pointing out that headline graphic text is around the same size as the font being downloaded; and Construct's Waldrop says downloadable fonts will have a chance once they are built into tools like Adobe's Photoshop.

Pulling the Right Plug

Plug-ins have been around for more than two years, first introduced with betas of Netscape 2.0 in the last part of 1995. There are countless plug-ins that do almost everything regular software applications do, handling a slew of non-Web-native file types. With the plug-in API software, developers can enable Netscape to read a wide range of file formats. Some use existing formats, while others create new file formats designed for Web viewing.

      Microsoft originally embraced the plug-in concept in IE 3.0 but later offered another option, ActiveX. ActiveX's main advantage is that it solves the biggest problem with plug-ins: an ActiveX control downloads automatically and installs instantly, so users don't have to go through the trouble of going to another site, downloading, installing the plug-in, and restarting the browser. The problems with ActiveX are that its controls do not work in Netscape without an ActiveX plug-in and that several major security issues have been identified.
      But what is that critical mass? When can a Web producer feel comfortable that a plug-in has an installed base worth going after? Also significant are the kinds of resources required to develop the specific content. Finally, bandwidth is also an issue -- both the bandwidth to deliver the content and the bandwidth required to download the plug-ins or Active X controls. How can you avoid sending 75 percent of your customers away in disgust?
      There are a few easy choices: Macromedia's Director Shockwave, which now features audio compression and streaming downloads of cast members, was one of the first plug-ins and is still one of the most popular. Millions already have the plug-in, and Macromedia says that 150,000 users download Shockwave per day. Other popular plug-ins include Real Networks' RealPlayer, which plays streaming video and audio, and Apple's QuickTime plug-in.
      Plug-ins that are popular but a little more risky include Macromedia's Flash, Microsoft's NetShow, Headspace's Beatnik, and Silicon Graphics' CosmoPlayer for VRML files. But the Web sets its own standards, and the right site could decide what will be the next major plug-in. (For instance, Macromedia noticed a huge spike in downloads when the Winter Olympics page required Shockwave.) Unfortunately, that popularity contest can also work another way.

      Two years ago many companies, such as Silicon Graphics, were betting on the second 3D VRML Web. Now, instead of expecting it to be ubiquitous, developers are examining VRML for its best uses. Even though exciting content was being created in VRML, the 3D rendering was slow on many machines and, with the handful of plug-ins available, compatibility was an issue. "The plug-in competition was fierce, and it divided the small-developer community," says Construct's Bonorris. Despite a dry spell, Bonorris says VRML is on its way back: Both 4.0 browsers are shipping with a VRML 2.0 plug-in, and more people have the powerful processors needed to render 3D animations. Construct, a VRML pioneer, is sticking with the technology. Its VRML output is a mix of cartoon avatars, scientific models, and spaces with animated objects.
      Akimbo Design's current plug-in of choice is Macromedia's Flash. The advantage of Flash over Macromedia's popular Director Shockwave is that the graphics are vector-based, so its large eye-popping animations have minuscule file sizes. With Flash, Akimbo produced 780-by-580 movies for its client PhotoDisc that showcased both images and full-screen animations.
      Being tight with Microsoft means that Plastic has had lots of experience with the company's NetShow streaming-video plug-in. It has been producing examples of NetShow that control other ActiveX controls on a single page. The most compelling example of this is a demo featuring a fashion show in streaming video. When the user clicks on a model walking down the runway, text appears to describe her clothes. Ultimately, Ginsberg says, plug-in multimedia must deliver a return on investment for clients. "To legitimize multimedia, we want to look beyond games and entertainment and use it to better sell products and services," he says.

A Change in Channels

Push and Channels are probably the best example of over-hyped Web technologies. The basic idea is that users subscribe to a channel and content is "pushed" to their desktops, so that when the channel is viewed the content already exists on the users' hard drives. Microsoft and Netscape, along with the media, aggressively sold channels as the answer to the bandwidth problem. Witness the cover story of the March 1996 issue of Wired magazine, which proclaimed that the browser is about to "croak." That same month Microsoft submitted the Channel Definition Format specification (CDF) to the W3C. But the channel hype moved too fast for standardization, and little CDF activity has taken place at the W3C.

      "Channels can individualize the Web experience," says Plastic's Harrison, "but there is very little content out there which is truly for individuals, meaning there are very few projects that should be channels."
      "Push equals e-mail," says Hotwired's Veen. "When it's all said and done they were just trying to come up with a new interface for what we've all been doing for years. We've had great luck with the HTML e-mails we've sent out."
      Some developers were burned by channels, but a few haven't given up. Two developers that have had good experiences with channels are Construct and Plastic. While Construct created channels for Netscape, Plastic explored them with Microsoft.
      "Channels have disappointed everybody involved in developing them; I wish they'd taken off, because we're very well-positioned to produce them," says Construct's Waldrop. Bonorris and others at Construct worked closely with companies for eight months to build about 30 channels. She claims channels flopped because users are not willing to give up control of their desktops and the media hype never convinced Web designers. Waldrop adds that, despite the new format, content is still king: "If you have a boring site, turning it into a channel is not going to make it interesting."
      While working with Microsoft's channel format, Plastic had a very similar experience. "We have to stop considering the TV notion," says Ginsberg, "because from the user perspective it is a massive letdown."
      On the bright side, both developers say that creating a channel isn't such a challenging process -- the real work is maintaining and updating it. Bonorris thinks that channels have a good chance of coming back as the majority of Web users adopt 4.0 browsers: "The cool thing that nobody really explored with channels was making them into stand-alone apps on your desktop." The other hint that channels may come back is the popularity of customized Web sites, such as My Yahoo.

A Designers's Design

      "The best thing about online is the accountability," says Hotwired's Veen. "We watch our traffic down to a fine grain. If something isn't working, we know it." He says that Hotwired is always testing its design. "We have three different ways to register and we randomly throw them up there and see which ones get the best response." But he cautions that with that kind of testing, it's a fine line between research and just finding the lowest common denominator. However, you can put your results to work immediately. "Online you can make decisions in a couple of hours based on what's preferred, what's better."
      "We focus on the content," says Akimbo's Ibañez. "Everything we do -- from choosing a color palette to the technology we use to animate -- it all depends on the message of the site." Her partner agrees. "The primary focus is design," says Rigby. "Make the technology work for you. Be consistent and clean; don't confuse people with 3000 things on a page."
      When Veen is asked to name the worst use of design he's seen on the Web, he's very diplomatic. "Whatever the last version of Hotwired was before we redesigned -- and that happens every six months," says Veen. "Whenever that new version comes out we look at the last one and say, 'what were we thinking?' That's not a reflection on our designers; it's a reflection of how unbelievably fast everything is changing."