Thoughts on Horizontal Scrolling Web Design in a Mobile World

Having published two roundup lists devoted to horizontal scrolling WordPress themes, the first in September 2012 and the second in March 2013, I have begun to appreciate the idiosyncrasies of the “sideways” approach to Web design.

In this post I want to share some thoughts on why I think horizontal designs are worth taking a look at and what makes them a product of our time.

Coming of Age?

Horizontal designs seem all the more justified in an age of smartphones and tablets. This is partly because the form factor lends itself well to mobile touchscreen interfaces (particularly swipe gestures), but partly also because horizontal designs tend to work best with “interactive” and narrative-driven content such as photos, video, audio and short text-based conversations. More on this in a moment.

It’s no coincidence that one of the big three social media platforms, Google+, opted for a horizontal scrolling presentation on tablets and smartphones, marking a clear distinction with the vertical timelines of its two main rivals, Facebook and Twitter. But what is it exactly that makes successful horizontal designs tick? Let me try and break this down…

Form Factors: X vs Y

First of all, one of the key differences between vertical and horizontal web designs is content organization or content management. Vertical designs facilitate multiple content columns and therefore make optimal use of screen real estate. As long as we interact with content in a 2D environment (i.e. on flat screen surfaces), the grid/column model will likely remain the most adept form factor for organizing large amounts of data. Think, for example, of any major online newspaper, wiki or blog. Content is organized on a modular basis with clear spatial delineations between data sets. The user experience in this sense is geared towards fast and efficient retrieval of information.

In contrast, horizontal designs work well with what I want to call “content clusters” or narrative-driven content. That is to say, content that is organized around a theme or driven by a story and that tends to be “immersive” and subjective rather than “pragmatic” and objective. Think, for example, of a series of photographs, a comic strip, a novel or a design portfolio. Here, the emphasis is less on quantitative data retrieval and more on providing a qualitative experience for the end user.

Having said this, I don’t want to put too much weight on the boundaries this distinction inevitably creates. The relationship between form factors and content presentation is more open and fluid than my short comparison acknowledges here. It’s perfectly possible to create an immersive experience with a vertical presentation of content, just as it’s possible to create a pragmatic, informative presentation in landscape form. All I’m doing here is drawing attention to tendencies.

More to “Sideways” than Merlot

Nevertheless, let’s dig a little further around this question of content narratives, since it seems central to understanding the horizontal form. Simplistically put, a narrative is the deliberate juxtaposition of scenes/images/ideas to generate an emotional response from an audience. To the extent that horizontal designs are more cinematic, more montage-like than their vertical counterparts, and to the extent that we have emerged from a past century dominated by the “big screen”, I would argue that there is a strong psychological relationship (perhaps culturally/generationally specific?) between landscape/horizontal modes of visual presentation and the understanding and experience of narratives/stories. This is by no means exclusive to movies, it also works this way in our experience of books.

How does this relate to our use of tablets and smart-phones today? On the one hand we “consume” content on mobile devices: we browse, read, watch, listen, play, and from time to time post updates and messages. On the other hand, we also “create” content: we capture and upload photos, videos, audio and status updates to the social Web. In other words, we create the very elements that form the “cinematic” experience of the mobile Web. Anything complex, lengthy or cross-referential, we tend to reserve for our laptop, keyboard and mouse.

So I think the interest in horizontal design, aside from an aesthetic appreciation of form (a subject I’ll have to leave for another blog post), lie in this fundamental relationship between the form factor of the mobile devices we use and the types of social content we consume and produce. This is not a one-way relationship; technology dictating content. It is a two-step evolutive dance in which I see horizontal designs playing an increasingly prominent role.

Prime Examples

In order to back up some of the claims I’ve made here and before closing this post, I want to take you on a short tour of some of the best examples of horizontal scrolling web design. First, I want to highlight some professional websites that use horizontal designs and then I want to point to some interesting horizontal WordPress themes.

Let’s start in the UK with the light and airy portfolio of senior web developer, Peter Pearson. Note the tongue-in-cheek opening message: “Let’s go that way … gasp”. Staying with portfolio sites, but moving a little closer to chaos, let’s jump into Belgian designer, Damian Delire’s website. While the design aesthetic of Damian’s site might not be everyone’s cup of tea, it helps highlight the immersive quality I mentioned a moment ago. Let’s move on to some photography. This is where I find the horizontal form factor really comes into its own, and this series of personal photos by Tom Hoops demonstrates how.

Now let’s move on to horizontal WordPress themes. One of my favourite designers in this field is Greg Ponchak who specialises in this form factor over at HorizontalWP. His themes are built for people looking to showcase photography and design work. They are ultra minimal and always put the images front and centre. I also like the way Greg tackles the biggest stumbling block in horizontal design: navigation on desktop computers. Next, I want to move on to an elegant theme by New York based theme developers, Graph Press Paper. Their Sideswipe theme is what I would call a “hybrid” design, making excellent use of horizontal and vertical layouts. The portfolio and blog streams are sideways oriented while the single post and page views are vertical. This gives users the best of both worlds. I also like the way they frame their images in “polaroid” form, I think it gives a distinctive feel to the visual content.

Finally, I want to end this post with my all time favorite horizontal theme, which is the Shelf theme by Drew Strojny and the Theme Foundry gang. I just love the way it divides up content types, giving each one its own unique design treatment. A lot of work has gone in to weighting the elements in this theme and I think they’ve got the balance just right!

I had a question. I am envisioning a mobile friendly, but not mobile specific .asp site for a permanent cosmetic client.

It would employ two 411 pxl columns that would form a side by side mobile presence, and a full view on a PC. The left column would have the textual content and a vertical fly-out menu. The right column would have a photo gallery of pictures, sized to fit the screen. No back and forth horizontal scrolling to read. Just the normal up and down for either side.

In theory, one would just hit a button for gallery (horizontal scroll all the way R), and another for back (horizontal scroll all the way L).

My clients are mostly heavily PC user base, so I am a bit un-savvy on mobile. Would you have a clickable method that would scroll the right column over to left and back to the right?

Participate in this conversation via emailGet only replies to your comment, the best of the rest, as well as a daily recap of all comments on this post. No more than a few emails daily, which you can reply to/unsubscribe from directly from your inbox.

Full Disclosure This post may contain affiliate links, meaning that if you click on one of the links and purchase an item, we may receive a commission (at no additional cost to you). All opinions are our own and we do not accept payments for positive reviews.

Exclusive deals

SiteGround: 60% OFF

About WPKube

WPKube is an online WordPress resource which focuses on WordPress tutorials, How-to’s, guides, plugins, news, and more. We aim to provide the most comprehensive beginner’s guides to anything about WordPress — from installing plugins, themes, automated installs and setups, to creating and setting up pages for your website.

We have over 500+ tutorials, guides, product reviews, tips, and tricks about WordPress. Founded by Devesh Sharma, the main goal of this site is to provide useful information on anything and everything WordPress.