Richard Nantel

Middle-aged eyesight led me to a computer store in search of a monitor that provides crisper, easier-to-read text. What I found there were shelves stacked with relatively inexpensive, high-resolution, wide-screen monitors ranging in size from 19 to 30 inches. Given our consumer lust for electronics, the affordability of these screens, and our aging population, many people will soon be upgrading their monitors.

What these people will find when they plug in their new wide-screen monitors is that they will be browsing a vertical Web through horizontal eyes. Thanks to the writings of usability gurus such as Jacob Nielsen, almost all Web sites have been designed to eliminate horizontal scrolling. According to Nielsen:

We know from user testing that users hate horizontal scrolling and always comment negatively when they encounter it. Customer satisfaction is surely reason enough to avoid horizontal scrolling.

Anti-horizontal scrolling dogma has created a vertical Web. Because Nielsen, et. al. approve of vertical scrolling, almost all Web sites use a set page width (often about 800 pixels) but a variable page depth. The result is that the Web looks ridiculous on new wide-screen monitors. For example, here’s my Facebook page using my new 22-inch monitor set to a resolution of 1680 x 1050:

Here’s a screen showing the results of a Google search:

Here’s a page from the BBC News site:

Clearly, these pages are best viewed on a screen oriented in portrait, rather than landscape, format.

The reason computer monitors are overwhelmingly being designed in a wide-screen horizontal format is almost certainly because many of the same hardware companies also produce televisions. The dimensions of modern digital televisions are driven by the aspect ratio of movie screens. So, modern computer monitors are better designed to watch full screen video than to browse the Web.

As high-resolution, wide-screen monitors gain adoption, Web designers need to redesign their sites to better work in these formats. It’s tempting for Web developers to address the screen width problem by making the width of their pages variable. But, this can create significant usability problems. Typographic best practices dictate that a column width of text should contain about 60 characters. Any wider, and the eye has difficulty tracking the line. So, wider columns of text may significantly reduce readability. Here’s an example of what not to do:

A better solution is to design pages so that text columns are constrained to a maximum width but other elements are elastic and able fill the white space. Amazon does this brilliantly. Here’s the same Amazon screen at three different resolutions.

Resolution 1680 x 1050:

Resolution 1024 x 768:

Resolution 800 x 600:

At 800 x 600, some horizontal scrolling is required to see the information at the far right of the page. But, usability doesn’t suffer because this right-hand information is secondary. The core components, the left-hand navigation menu and the important information in the middle of the page, are visible without horizontal scrolling.

All Web and instructional designers should study the Amazon site for a crash course on usability.

Web developers should also investigate design solutions that allow users to move components around on the page. iGoogle, Facebook, and Netvibes are three technology platforms that are built this way. With each platform, users have some control over the order and placement of the information on the screen. Here’s an example of moving content around an iGoogle page:

Until Web designers complete the redesign of their sites to better display on high-resolution monitors, consumers may want to consider monitors that pivot from landscape to portrait mode. Originally, pivoting monitors were expensive and restricted to graphic design and typography applications. Now, inexpensive models are becoming available to consumers. HP makes monitors with this feature, as do others.

Here’s a demo of one of these pivoting monitors:

You can also achieve a portrait mode orientation without changing your existing monitor. Portrait Displays Inc. provides Pivot Software, and Ergotron sells mounting hardware, which, together, will convert landscape monitors to vertical format.

Switched to portrait mode, the Web makes visual sense. Here’s my Facebook page again:

And here’s the BBC News home page:

Browsing in portrait mode significantly reduces the need for scrolling. (The BBC News page above requires no scrolling at all.) Consequently, you spend less time moving a mouse pointer around and more time reading what’s displayed.

From now on, I’ll be looking at the vertical Web in portrait mode.