texter samples | text_only

designing the dynamic into dhtml
written for Netscape Communications by gabriella marks

---

It's true. I harbor a certain nostalgia for the early days of HTML. Grey backgrounds, square pictures, endless clunky, inaccessible blocks of text. Pictures of engineers, their cubicles, their dogs, their motorcycles. I was a production artist in a print design firm at the time, in 1994, and observed firsthand the resistance with which the web was first met by many designers. The traditionalists clung tenaciously to their linotype and photostats, keeping their distance from the digital domain. But the slow, costly migration from hand drawn mockups to photoshop storyboards had begun, and digital production for print design was more than a virtual reality for many. But "design" for the Internet? What engineer had the audacity to claim "design" for the "web" when designers couldn't spec type, control dimensions or placement, even wrap text?

The same nagging question cycled through the collective designer unconscious: why hadn't anyone consulted any designers on this so-called standard? HTML 1.0 introduced the integration of text and image over a live internet connection. But that original specification was extraordinarily limited from a "design" point of view, supporting incredibly primitive assumptions about design.

Four years, countless illegal tags and clever spacing tricks later, dynamic HTML presents designers with the robust functionality that qualifies as a true design tool. Web content is shedding its shackles; the screen is no longer the digital equivalent of construction paper cutouts. We can begin to think of it as an active environment, a zone in which content moves, and can be moved.

My first hands-on experience with dhtml was the design and production of the Travelocity channel for Sabre, Interactive. Given the opportunity to choreograph elements, I found that movement, or "interaction design" became a serious new component of the channel concept development. Now, in addition to information architecture, consistent and symbiotic color palette, type choices for images, photographic treatments, and the like, I had new pieces to fit into the puzzle: how do I introduce these elements? How do I bring them on screen, how do I travel between areas on the site? The channel screen became a kind of synthetic stage, in which I could choreograph the entrance of a splash graphic, and usher off the main screen once the user had selected an item of second-level content. The web screen is beginning to emulate the qualities of the other, more evolved media, like "video", or even mere multimedia cd rom functionality. Bout time.

So now we have these capabilities, new forms. But without function, without clear, explicit, useful implementation, these new capabilities quickly become cliche splash tactics or gratuitous animations and actions that detract from the user experience. When designing a channel, there are four main objectives that I want to achieve with the capabilities of DHTML: clean interface design, flexible navigation devices, seamless integration of live push content, and a dynamic, kinematic sense of movement within the content.

I N T E R F A C E   D E S I G N & N A V I G A T I O N   D E V I C E S
Use dhtml to make sleeker, more efficient information designs and navigation devices. Given the new functionalities of layers that appear only when requested [on rollover, on click] we can begin to collapse information and navigation hierarchies. Most of the applications you have on your machine today already use this method. Consider every web site or channel you design as a finite, small piece of software. It is an application which people will use. As such, channels have a broad legacy of software design from which to pick and choose effective interface techniques. Pull down menus, retractable preferences, collapsing navigation devices: these are all tried and true techniques for conserving screen real estate and providing the user with intuitive, familiar navigation devices.

P L U G G I N G   I N   L I V E   C O N T E N T
Seamlessly pushing live content into a channel is a challenge that belongs primarily to the engineers. Using scripts, strings of data, and predefined parameters, the coders create channels that can present dynamically updated information. The channel designer is then responsible for producing a layout which corresponds to the incoming information, as well as conveying to the user through the experience that this information is live.

For the Travelocity channel, there were two areas in which we needed to create a design for dynamic data. Because this data often arrives as delineated text, my task as designer was to identify all of the data types, assign styles to those types, and format coordinates for all elements. The Weather Conditions and Today's Lowest Fares sections of the Travelocity Channel reflect this process.

Actually integrating dynamic content is a question of coding; there are no explicit indicators to the user that differentiate certain channel content as dynamically updated, rather than static or permanent. The burden of living proof, as it were, rests with the designer. Information that is moving, headlines with momentum, that are "on the go", these suggest to the reader that this is live, or current information. For the Travelocity channel, we charted a course for news headlines to move and cycle across the screen. Channels like CNNfn convey the idea of live content with scrolling news tickers; c|net employs a similar strategy, swapping in new headlines and images every ten seconds or so.

P L A Y F U L   K I N E M A T I C S
Create a sense of playful kinematics. with dynamic html we can begin to introduce responsive movement to the channel. Dynamic HTML has much more to offer than the standard fare of animated headlines, news tickers and buttons that illuminate on rollover. These devices have become default tokens in the visual vernacular of dynamic html--nearly every channel published today integrates such features. The challenge for designers is to conceive new ways to exploit the dynamic potential of dhtml.

Dynamic doesn't require actual movement, either. Even when designing a simple, non-interactive web page, i follow the same doctrine: don't just *break" the grid, make it flow. Using the rectilinear layout description language, create screens, sites, experiences that are fluid.

B U D G E T   Y O U R   B I T S
With dynamic HTML, we have exponential new possibilities for channel design, but the familiar gating factors remain. I consider these to be the precious limited resources of a user experience; there is a limited amount of screen real estate [monitor size and resolution], cpu speed, and connection speed at my disposal when i'm designing a user experience. Despite enhanced html and javascript functionality, target platforms and performance metrics are still very real concerns that should continue to define the parameters of your design. New channel design tricks--from buttons that change state on rollover and on click, to animating headlines, all tax these limited user-machine resources. Target a specific machine configuration appropriate to your intended audience and budget your animated effects and changing elements wisely.

S P A R K L I N G   S A M P L E S
A brief tour of the channels already online will provide an excellent overview of effective strategies for publishing dynamic online content. As you may have noticed, when channels are in "webtop" mode, the channels are present on the screen without the familiar netscape frame, or "chrome". Given the freedom of chromeless design, many content providers have chosen to reinvent their own web wheels, exploring new interface designs for web content.

c|net's channel provides one example of this: articles appear in a space that isn't quite a "window", per se, but a space with the suggestion of a frame, and custom-created scroller buttons. For a navigation menu, they've embellished on the visual vernacular of traditional applications-based menu design: each section button, when clicked, reveals the selection of articles available in that subject.

The technology magazine Fast Company has launched a channel that features an alternative route for reading and scrolling through text-based articles. The various iterations of scrolling widgets we've seen are just a scratch on the surface of what we can expect to see in the future. The Fast Company channel also succeeds in hacking away at the corners of the rigid rectilinear grid. A gently curving background, as well as the obtuse angle at which this picture is set, creates a fluidity on the screen. Curving elements, and images and text presented askew from the x.y coordinates contribute to an implied sense of movement on the screen--even when these elements are static.

C O N C L U S I O N
The design of channels is largely uncharted territory. It's an exciting time for content providers; over the ensuing months we'll begin to see developers gain greater comfort with the dynamic new media, and begin to explore and push online publishing in compelling ways.

Print, film, television, even radio are all highly-refined media which inform and influence the ongoing evolution of the "new" web media-form. There are lessons to be learned from these other media about creating exciting user experiences. But the internet media is unique. Despite the overblown early visionary claims, the inflated press hype, the inevitable critical backlash, the Web is truly an interactive medium, a conduit between providers and the audience. This interactivity, the ability to customize information, or even just play a game, should be the goal for the concept development and design of channels. In balance to the benefit of interactivity, web design is reined in by the limits of bandwidth and platform variance. There is an entire new field of possibilities and constraints to consider when designing a channel. My advice to future channel designers: subscribe to a few channels, use them extensively, exploit their features, take note of effective techniques and truly usable interface widgets. Then leave the net. Close your web browser. Launch your favorite production ap, or perhaps shut down your computer altogether. Reach for a sketchpad. Remember concepts like movement, dynamic interaction, fluidity.

And design a dynamic site unlike
anything you've ever seen before.

text_only | written texter samples