The World Wide Web

If you've bought a new monitor, TV, or laptop in the last couple of years, then the chances are it's significantly wider than it is tall. This trend has stretched lines of text beyond comprehensibility.

Losing Height

Let's do an experiment, maximize your browser and head to Wikipedia. Try reading it. Now, shrink the window until it takes up a horizontal half of your screen. Try again. Doesn't that just feel better? Maybe it's because this is how we've been casually reading for centuries.

16:10 widescreen

A modern screen has an aspect ratio of 16:10, that means that it is 1.6 times wider than it is tall.

4:3 fullscreen

The older standard is 4:3, or 1.33.

3:5 paperback

A pocket paperback book is 3:5, or 0.6.

That's dramatic, but it gets worse. In general, desktop environments are not optimized for wide screens. By default, Firefox maximized in Windows 7 at 1680x1050 has about 132 pixels above the content and 62 pixels below the content, squeezing the aspect ratio to around 19:10.

Window Managers

Mac OS X, Gnome, and KDE all default to give less vertical real estate. The effect of the desktop can be mostly mitigated with vertically oriented panels, auto-hiding, and transparency. Some window managers do these things better than others. Microsoft's panel works beautifully on the left side of the desktop. Gnome's panels do everything wrong, but Avant Window Navigator is an elegant solution for Linux. I'm not an expert, but I believe Mac users are eternally stuck with the menu bar.

Browsers

Google know about the wide problem. Because they decided to render their windows themselves, the top height of Google Chrome is about half that of Firefox, with Internet Explorer falling somewhere between the two. Chrome also saves 64 pixels at the bottom because its status bar is usually hidden. Hiding your bookmarks toolbar regains some vertical space. On Firefox, you can customize you toolbar to use small icons and there are many themes that try to minimize the user interface.

Designing Wide

A wide screen can be ideal. The human eye sees an aspect ratio somewhere near 1.75 so it's not surprising that films usually have high aspect ratios. Wide screens can also be ideal for reading. If you turn your monitor 90 degrees, it would have a 10:16, or 0.625, aspect ratio, amazingly close to that of a book. In an ideal world all screens would rotate. Until then, let's adapt.

typical content

Web sites almost always grow downwards. A single column produces very long lines.

traditional css columns

Using CSS to create columns is a popular technique for managing excessive width. The drawback is that space is underutilized by the actual content of the page.

css3 columns

CSS3 provides support for natural multi-column layouts. By default, these columns expand to fill the width of the screen before getting longer. Notice that reading these columns requires excessive scrolling.

Turning the paradigm on its side

horizontal columns

We can force CSS3 columns to fill a fixed vertical height before growing horizontally by setting the height attribute. If we set the column height to 100% then the columns will grow no bigger than the window height. Vertical scrolling is eliminated.

This format closely follows the archetypes in print media. Screen space is utilized optimally without sacrificing readability.

Because content grows to the right it transforms the notion of scrolling; JavaScript can be used to conform behavior to natural expectations: scrolling on column increments either left or right. JavaScript is in fact used both to set the height of the columns as well as change scrolling behavior since one without the other is useless.

Enhancing Progressively

CSS3 isn't finalized and implementations of it differ or do not exist. Without CSS3 or JavaScript, this site is acceptable (but not optimal). This layout looks good in resolutions from HVGA upwards with a single style. Try resizing your browser to see how well it copes.



This article rubbed some people the wrong way on reddit. Someone even wrote a rebuttal.