Horizontal Scrolling

What's the Problem?

The internet has been around a long time. HTML was first created in 1993, and the basic layout of webpages has remained the same since. Elements flow in the block direction (top to bottom) and the contents of elements flow in the inline direction (left to right). When the end of the current screen is reached, more block elements are added below, and the user scrolls down to see them.

The ways we access the internet, on the other hand, have evolved dramatically. Screen sizes and aspect ratios have changed and become more varied, mobile devices have separated from desktop ones. HTML has in some ways evolved with those, but I think we could take those changes further.

The contents of most websites today, depending on their age, seem either designed for a fullscreen, 4:3 monitor, or a mobile device. Page elements are restricted to the middle half of the screen with large empty margins on the sides. This leaves vast amounts of screen real estate on modern 16:9 monitors unused. This problem is worsened by monitors with higher resolutions or ultrawide monitors with aspect ratios ranging from 21:9 to 32:9.

Making the page margins significantly smaller means paragraphs become unreadably wide and processing large amounts of text becomes a hassle. Skimming a page becomes almost impossible. But wasting so much of the screen means pages are two or three times the size it seems like they need to be. So how do we fix this?

The Solution

Older monitors were much closer to square than monitors are today, and their layout was similar to a page of a book. Text flowed from left to right, top to bottom. But at the bottom of the screen, since only one "book page" could fit at once, it made sense to simply continue scrolling down. Modern monitors, nearly all being widescreen, are shaped more like a page spread. So much extra horizontal space naturally lends itself to a second or third page of contents without the need to scroll. Enter columns!

Breaking page material into columns (using the very handy 'columns' attribute in HTML/CSS) allows us to fit two to three times the amount of text on the screen at once, dramatically decreasing the amount of scrolling needed to view the entire page.

What about mobile devices?

Dynamic page layout is already widely used for nearly every webpage. Elements can be resized and rearranged depending on the clients screen size, or a whole different layout can take over if the device identifies itself as a mobile one. Vertical scrolling may still make sense for narrower screens such as phone or vertical monitors on desktop computers, but the page can still use columns when on a standard computer without sacrificing that.

What's Stopping Us?

Several problems do still exist with this idea.

1. Width is limited. Using columns limits the width of any individual element to the width of a column. While there are ways to span an element across multiple columns, it doesn't work very well. This means larger elements would require wider columns, or some other workaround would be needed.
2. This is a massive change to the layout of a site. Getting all (or at least many) major websites to follow even current basic style guides is practically impossible; convincing them to convert to a completely different design is out of the question.
3. HTML wasn't designed for this. While the columns attribute and several related ones do exist, they're not very fleshed out. Targeting individual columns through CSS isn't possible, so styling opportunities are limited. Lack of system awareness of columns also means that controlling where the content breaks between columns is hard. As mentioned above, spanning elements across columns is only barely implemented: currently an element can either be the width of one column, or span all the columns, no in between. Columns as a whole mess with the idea of inline versus block direction. Additionally, column behavior is somewhat inconsistant across browsers, and different browsers (Chrome, Firefox, Safari) use different versions of the CSS attributes.

Conclusions

Columnated page layouts do offer an interesting opportunity for web designers, but ultimately a catch-22 arises. Not many developers will opt to use this design because it's so poorly supported by HTML and CSS. The HTML and CSS standards are unlikely to change because of the amount of extra work it work take to implement well, and not enough people are using it as is to justify that effort.

With HTML's longstanding history, a rewrite capable of making columns a primary or even secondary choice for page layouts is unlikely. However, I'll still be dreaming of whatever alternate timeline could have lead to a more book-inspired design for the web. And who knows, maybe that timeline could be ours someday? Maybe your next website could use columns!

Additional Notes

• This page is (partially) dynamic! Try resizing the page: the number and width of the columns should adjust to fit your screen size. Note that when viewed on a mobile device the contents remain horizontally scrolling, rather than switching to vertical. As mentioned previously this is possible, just not implemented on this site.
• While researching for this project, I found this site that implements horizontal scrolling as its only direction of additional page contents: http://mashup.ikm.gda.pl/. It is in Polish, so unless you happen to speak Polish you won't get much from the actual content. I think it's about... education? Or something? Anyway, the scrolling is the relevant part, so you can see another example of how this could be implemented. It even works with the scroll wheel on your mouse! If you want to use your scroll wheel on this page, hold Shift while scrolling.

---