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

By Jonathan Follett

Published: August 14, 2006

“In the next few years, the adoption of high-resolution displays—with 150 or more pixels per inch—will significantly alter our conception of what the Web and networked applications can potentially be.”

In the next few years, the adoption of high-resolution displays—with 150 or more pixels per inch—will significantly alter our conception of what the Web and networked applications can potentially be. As the price of high-resolution displays comes down to earth and early adopters make way for mass consumers, beautiful visualizations of data will enrich the digital realm. High-resolution displays will allow us to chart greater depth in financial data on screen, render finer lines in maps and illustrations of technical designs, and show greater detail in photographs. In specialized areas of medicine, where the price tag of these displays is unimportant, this transformation of the online world has already begun. To describe the enhanced online experience high-resolution displays will make possible, I’ll build on a term from the broadcast, cable, and satellite industries—high-definition television (HDTV)—and coin the term high-definition Web (HDWeb).

“Digital designers will face numerous possibilities and challenges that huge increases in screen real estate and depth of detail will bring.”

The computer displays we use for viewing our digital world have evolved relatively slowly in comparison to other types of computer hardware and Internet infrastructure—processor speed, bandwidth, and storage capacity have all made leaps forward in the past decade. While such improvements have shaped the way designers create and what they create—affecting everything from visual style and site architecture to interaction flow and overall functionality—these changes have been incremental and manageable. However, our move to high-resolution displays will be transformative, because it will affect designers’ entire working medium. Digital designers will face numerous possibilities and challenges that huge increases in screen real estate and depth of detail will bring. Instead of a somewhat blurry and indistinct 72-pixels-per-inch working environment, high-resolution displays will provide richness and clarity. As high-resolution displays become more readily available, digital designers will find themselves at the forefront in navigating this new world.

Envisioning the Technology

As early as 2001, IBM sowed the seeds of the HDWeb when the company released, for limited distribution, the 204-ppi (pixels per inch), 22.2-inch T220 monitor, with a suggested retail price of $22,000. ViewSonic and IDTech subsequently licensed the technology, and by 2003, the cost of a 204-ppi display had come down to the somewhat less outrageous price of $8,500—making the monitors affordable for specialized corporate use, but still years away from arriving in the average home. At that time, IDTech Japan announced the arrival of the “Era of New Visualization,” saying “A monitor displaying huge amounts of digital data on one screen and near reality images is now realized….”

Usage in the Field of Medical Imaging

High-resolution monitors are already in wide use in the field of medical imaging. Both doctors and technicians use three- and four-megapixel grayscale monitors to evaluate x-rays and other monochromatic images. And remote evaluations using secured connections—across the country and even across the globe—are becoming a regular, if not commonplace, part of many hospitals’ workflows. According to “Medical Imaging” magazine, Positron Emission Tomography (PET) scans, ultrasound, and 3D-imaging software are driving the demand for high-res color displays as well.

Back to Near Reality

There are some high-res options for those of us who lack the IT budget of a major hospital as well. The 23-inch, 2.3-megapixel (1920 x 1200) Cinema Display from Apple is $1299, and the price of the Planar 21-inch, nearly 2-megapixel (1600 x 1200) flat-screen monitor is under $900. Display resolutions are increasing, and the price of the high-res display technology is falling.

Designing for the Low-Res World

“The visual requirements of low-resolution displays have both burdened and spoiled designers.”

Digital designers have a love/hate relationship with 72-ppi screens. The visual requirements of low-resolution displays have both burdened and spoiled designers. The constraints of low-res displays can be frustrating—blurry font rendering, lack of sharpness in photographs, and disappearing detail in graphics. People viewing large volumes of financial data—and other applications in which detail is critical—must use multiple monitors or print out files. On the other hand, the low-resolution environment has been freeing for digital designers as well. Photos and other graphic elements—for example, a small JPEG file—that would be completely unsuitable for print media might serve very well on a Web site.

But high-res displays will soon take away these limitations. What does 9 megapixels of screen real estate look like? Rather than create user interfaces for 800 x 600 screens or even the increasingly popular 1600 x 1200, digital designers will face a whopping 3840 x 2400 screen. What will we do with over ten times the detail of our current displays?

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.”

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 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.”

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.”

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.”

6 Comments

Interesting article. I certainly am looking forward to an HD Web.

Couple inaccuracies though. The references to the current 72dpi standard are pretty misleading. While that is what many computers use to do their math, it hasn’t actually been accurate for a decade or more. The actual resolution has everything to do with the monitor and how many pixels actually are in an inch and nothing to do with how many pixels the microprocessor wants to call an inch. Apple’s current display standard has been 100 pixels per inch for a while now, and you can get much higher resolution screens from many manufacturers. I bought a 150 pixel per inch laptop from Dell four years ago.

While I love high resolution, I have to say the experience of using a 150ppi screen doesn’t quite match up to the promise of your lead paragraph. The differences are nice, but quite subtle. As resolutions per inch slide up we will indeed start to see some interface changes, but I suspect they will take quite a long time to emerge. These are innovations that literally need to take place at the borders of what an eye can actually perceive, they won’t come fast, and they may require a lot more than just 150ppi to come about in a major way.

I’d also be a bit wary of equating higher resolution screens with larger screens. A 200x200 screen can be high res if it is only an inch across. The high-res interface is actually spearheaded in the realm of smartphones where display resolutions are getting close to 200ppi already.

Next few years?? It’s almost a year now since I bought my 140dpi laptop. And it’s bugging the living hell out of me that people use px to specify font size. I set my fonts to large, but layouts get screwed up :(

ugh

Hi Abe. Your points are well taken.

Regarding the 72ppi standard: I would like to mention that, while many industries—including Web and software design, high-end healthcare, biotech, and a host of others—have spent dollars improving their computer hardware, there are many industries that lag behind. Government, especially at the state and municipal levels, runs older systems everywhere. Small businesses—that are not tech focused—and non-profit organizations face a similar situation. The lower resolution screen lives on for a great many people. And while monitors built in the late nineties may seem like ancient artifacts to us, you’d be surprised just how many remain in service. :-)

I’m intrigued by your experiences with the 150ppi screen, which sound largely positive. And I look forward to picking up a better laptop so I can see what you’re seeing. I thought that 150 ppi would be the minimum starting point for an HDWeb, but from what you’ve said, perhaps 200ppi or higher is more likely.

Joris’s post raises one of the issues with which designers and developers must contend in this era of widely variant screen resolutions: How can we create content—both text and art—that scales appropriately? We’ll all come up against this challenge in the near future, I believe.

Thanks to both of you for your feedback.

Where’s the beef?

I bought my Viewsonic VP171 LCD display back in 2003 when it was top of the line. It’s a 17” diagonal screen with 1280 x 1024 pixels, coming out to about 100 ppi. Well, guess what, genius? It’s now 2007 and Viewsonic top of the line models are still exactly 100 ppi! The most advanced Apple display, the enormous, mammoth Cinema Display, weighs in at only something like 135 ppi, and it’ll still set you back two thousand dollars.

I personally think computer display monitors will continue to evolve at a snail’s pace up to about 300 dpi, so we’ll have about a 3600 x 2800 display on a 17” screen, which seems about right. But I wouldn’t hold my breath waiting to see a screen over 200 dpi for under $500 until at least 2020 or even 2030.

Hi Corey. Thanks for the comment. You could be right about the continued snail’s pace of evolution of computer monitors, but given the rapid improvements that we’ve seen in the past few years in the technology for products from digital cameras to hard-drive storage to computer processors, I fall into the optimist’s camp when it comes to this issue.

There are market forces at work in the display space that weren’t present even three years ago. For instance, the race is definitely on when it comes to HDTV. Sharp just announced a 4096 x 2048 (8.3-megapixel) ultra high-res display on January 15 of this year. One of their selling points is that you can show on screen all those great pictures you took with your high-res digital camera. It will take awhile for the price to come down to a more affordable level. But, as our computers and entertainment devices continue to merge, I wouldn’t be surprised if we’re using Web applications in our living rooms sooner than we think.

There are also advances in technology like e-ink that open up the possibility that high-res displays may be more similar to thick paper than today’s flat screens. Granted, those advances may be further off than a few years.

At any rate, I can envision this high-res environment gaining traction and wider adoption closer to 2010 than 2030.

Thanks for the comments, everyone.

I’d say we’re definitely on track to see low-cost high-resolution screens available for general public consumption in the next five years. You can see a good example of how quickly the technology for manufacturing these types of displays is evolving in the XO, a $100 laptop the MIT Media Lab designed for children in developing countries. The laptop features a 1200 X 900, 7.5-inch LCD, which is 200 dpi. Granted, the color mode is said to be more blurry than the monochrome mode. However, the XO, currently in beta testing, is an amazing technological achievement, nonetheless.

Join the Discussion

Asterisks (*) indicate required information.