Creating a horizontally scrolling website

A few weeks ago we launched our new website. One of the striking aspects of the new site is the fact that it scrolls horizontally. A lot of thought went into choosing this kind of layout, and in making this choice we also faced a couple of technical challenges. And so we decided to write an article about it.

Our previous website had some neat ideas but it didn’t really tell a coherent story. The old website jumped straight into showcasing our latest projects, and other than citing our slogan, it didn’t really tell the user anything about what we actually did. We decided to change that. Instead of just showing cases, we wanted to explain to the user what we do, and what we’re good at.

We wanted to improve our website by creating a website that offers a unique experience and tells a story. Our story.

Why a horizontal layout?

In our initial conceptualisation stage, our design team was using all kinds of sources for inspiration. Because the story was an important aspect of the new website, they were looking at typographic inspiration from an early stage. They always say a picture is worth a thousand words and books such as “How to” by Michael Bierut and “Typography: Exploring the Limits” by Wang Shaoqiang confirmed it. A few of these examples were from art and design books. These featured large and bold typography along with beautiful imagery while telling a story. This matched the goals of our new site pretty much to the T.

We saw many advantages to a horizontal layout. Such a layout makes optimal use of the screen real estate of modern widescreen monitors, which are wider than they are high. Horizontal layouts work well with large typography and large typography helps us in telling our story. A horizontal layout is also a unique way for a user to interact with a website and for showing off our technical front-end prowess.

With bold typography and beautiful pictures we created the website that proves what we can do. We made multiple mockups and design sketches to transform the book designs into a website design and to see what works best when designing a website horizontally.

Fit content on different screen sizes.

The first challenge that we encountered was how to fit the content on all different screen sizes. Inherently there’s a limited vertical space where all your content should fit. If you don’t want columns in your content, you will need to keep your text short and concise.

This is something every website should already have anyway. In the many years of making websites we’ve noticed that in many cases, people don’t read website copy that’s too long or unreadable. According to this typography article on smashing magazine you should keep the line length to a maximum of 75 characters in addition to a large font-size and a large line-height. The large line-height is to prevent you from reading the same sentence twice.

How about mobile?

On mobile screens our website does not scroll horizontally. These screens are taller than they are wide, so the widescreen reason for horizontal scroll does not hold up here. On mobile the height of the screen is larger than the width, which was one of the reasons to design a horizontal website on desktop. This reason to use horizontal scrolling is not valid for mobile users.

Another reason for not making the website scroll horizontally on mobile is the navigation bar. On mobile the navigation bar of the browser is always visible, except for when you scroll down. But when the website is designed and created to scroll horizontally it means that the navigation bar of the browser won’t disappear. So the navigation bar is always visible, which means that there is even less space to tell your story. Eventually we’ve decided to just keep it vertical on mobile.

Show that you can now scroll horizontally

The next challenge was how to communicate to the people who are exploring your website that they are able to scroll horizontally. Users aren’t used to scrolling horizontally. A small solution like showing the images only partially to indicate scroll was used in the website. On the homepage we’ve added an indicator that suggests that you need to scroll horizontally. These are just small reminders that scrolling here works differently.

Users tend to scroll down. We intercepted the scroll event to convert it into horizontal scrolling. We also used the Pythagorean theorem to calculate the scrolling position for scrolling diagonally. This makes scrolling feel natural on both mouse and trackpad.

What about the other ways of scrolling? Scrolling with page-up / page-down, scrolling with spacebar and scrolling with the arrow keys are some other ways of scrolling that needed to be supported without undermining the performance of the website.

Implementing the Horizontal Scroll

We have created a package that handles the scrolling. There are a couple similar packages and articles like for example horizontal-scroll that appear to be doing the do the same thing as this package. However, what separates this package from the rest is that it doesn’t do any translateX tricks, the actual scrolling is still done by the browser itself.

Because users will use their normal means of navigating through a website, we will catch mouse wheel and keyboard events and translate them to the X-axis — this is essentially all that this library does.

You can use the package by creating an instance of HorizontalScroll:

import HorizontalScroll from '@oberon-amsterdam/horizontal';
new HorizontalScroll();

Optionally, you can provide a container element if you don’t want the whole page to scroll horizontally.

And lastly, there also is a react hook you can use: (sandbox link)

import useHorizontal from '@oberon-amsterdam/horizontal/hook';

const Component = () => {
    useHorizontal();
    
    ...
}

You can find our package here.

Conclusion

Creating a website that scrolls horizontally is an option for better storytelling with large typography and creates a unique website experience. If this is what you want, horizontal scrolling creates a better user experience by making better use of the screens real estate. Of course, it’s not for all websites, but you can use our package to easily give it a try. It really helped us to brand our site the way we wanted it.

Our website is currently live and you can see our horizontally scrolling website at www.oberon.nl