Display 2.0: A Look Forward to the High-Definition Web and Its Effect on Our Digital Experience

What Digital Designers Can Learn from the HDTV Transition

The sweeping changes that high-definition technology is bringing to the medium of television can provide us with a basic understanding of how high-resolution displays will change the Web.

First, the transition will be brutal. To accommodate the different grades of equipment viewers have, television companies are currently delivering the same content over multiple channels, which is why we often see the phrase “Broadcast in HDTV, Where Available” on our TV screens. Over time, there has been a gradual increase in the number of shows broadcast in HD, starting with those that have the highest profile and the greatest popularity. However, with the Federal Communications Commission deadline for HDTV transition set in 2006, stations have applied for waivers by the hundreds. Industry observers project that it could take up to fifteen more years for a complete transition to HDTV.

For digital designers, a chaotic landscape with multiple standards is not unusual. The Web is in constant transition, with new technologies fighting for space. And accommodating audiences with varying screen sizes, connection speeds, and technical savvy is all in a day’s work. However, with a greater range of monitor resolutions and sizes, creating experiences that serve both low- and high-res requirements will challenge digital designers.  For instance, designers and consumers may demand that the rudimentary image-scaling functions of today’s Web browsers become more robust, so users can cleanly scale down high-res images to the proper size for their screens. It’s more likely that Web sites and applications will—like television broadcasts and the current high-bandwidth and low-bandwidth versions of some Web sites—need to support two different formats.

The day of high-res displays isn’t far off. Even now, designers are discussing how their interface designs can use the expanded screen real estate—1600 x 1200 pixels and larger—that new flat-screen monitors offer over traditional monitors.

Getting Ready for Production Overload

The key to creating digital experiences for the HDWeb is understanding not just how to design for the extra screen real estate, but for the extra detail as well. The size of the screen is perhaps less important than the number of pixels per inch.

In high-definition television production, the planning of shots has more in common with film than with video. The production methods for a medium that records so much more data require a greater degree of care. So, it’s a safe bet that planning and constructing sites for the HDWeb will draw upon the numerous pre-press production rituals we commonly associate with printing. For example, blemishes and defects in photos are far easier to see in printed media versus on screen. High-quality reproduction of a photograph on screen requires a better grade of photograph at the outset. And the need for this high quality affects every link in the production chain—from lighting the location to scanning the film.

These production rituals are not concerns for digital designers … yet. We should expect workflow changes as high-res displays force digital designers to maintain a higher degree of quality throughout their entire production process and increase their attention to visual details. There will be more emphasis on planning the visual aspects of a Web site or application to deal with the additional complications of higher resolution.

And there will, no doubt, be much learning by trial and error—seeing what established techniques will translate to this new display format. The arsenal of magic tricks designers possess for color correction, balancing, sharpening, fixing, and disguising defects in photographs, illustrations, and other bitmapped content will not work as easily or as well as they did in a low-res environment. Low-resolution displays hide a lot of sins. Just as HDTV exposes bad makeup jobs on actors and news anchors, so will the glaring spotlight of high-res displays expose photo touchups and graphic design sleights of hand. To make ready for the HDWeb, companies may force designers to revisit every single page of their Web sites or screen of their applications.

Vectors Are Your Friends

One design solution for multiple-resolution environments may be to present any non-photographic visual elements as vector data. We could scale page elements in the form of Flash, scalable vector graphic (SVG), or perhaps, better-integrated PDF files to fit new resolutions as easily as vector-based fonts do right now. Things like icons, buttons, menu bars, drop shadows, and background gradients may render more quickly as vector data than as enormous, high-resolution bitmaps. Photographs, which we cannot turn into vector images, would then be the only remaining bitmapped data.

Since fonts, as I previously mentioned, are already vector based, they will easily translate to a new HDWeb format—something our tired eyes can look forward to with eagerness. There will be tremendous benefits. It’s likely that reading online text will approximate the print experience, with no font degradation, a sharper focus, and a reduction in the eyestrain, blurred vision, and headaches low-res displays often cause. We’ll have less difficulty reading long pages of content and be able to read online text more quickly and easily. Could this be the advent of online reading for pleasure?

Changing the Face of the Interface

As we begin to explore this high-resolution digital world, we may find that familiar user-interface models are no longer viable. User interfaces could change radically as people viewing high-res monitors demand better graphic imagery. Furthermore, the extent to which screen resolution shapes the conventions of current digital user interface design is unclear. The windows, tabs, menus, and toolbars that we use today have, to some extent, evolved to accommodate the lack of screen real estate. For example, we stack windows on top of one another in virtual space, pull-down menus, and hide toolbars, because all of this content cannot fit on our monitors at once. When screen real estate is no longer a problem, we may revisit the guidelines we’ve set. With high-resolution displays, we will be able to view our Web sites and applications in new ways.

Just as the proliferation of high-bandwidth connections and the maturation of the Web browser have fueled the Web 2.0 Renaissance, the advent of readily available high-resolution displays will push the Web and digital design forward in ways we can only begin to imagine. As high-resolution displays raise the bar for visual production, the key to creating great digital experiences will continue to be careful planning of our processes and designing for this new medium—to ensure both better-quality source material and elegant ways of displaying that material at different resolutions. 

::: See Jonathan Follett’s companion piece to this article on Digital Web, “Vision Quest: How Low-Resolution Displays Have Changed the Way We Read, Write, and Interact.”