This piece is a bit of a rant and a bit of advice. If you are not in the mood to read this, there is a TL;DR at the bottom.

If you had told me last year that I’d write not one, but two blog posts about web design, I would not have believed you. Alas here we are, and I’m going to tell you about another pet peeve of mine and how to fix it.

I view at least half the written content I consume via my mobile phone, which belongs to the class of phones with a slightly smaller than average screen. In fact, it’s width as reported by the Firefox and Chrome viewport simulators is 375 pixels wide, small but not tiny. And yet many websites I visit hinder my mobile viewing experience because of a rather simple issue: horizontal scrolling.

There I am, happily reading a blog post or article from the front page of $NEWSAGGREGATOR. But suddenly I’m not scrolling down, but down-right and constantly have to scroll back to the left edge in order to read full sentences. My experience is even worse if the site for some reason has a minimum width larger than my screen is wide.

Reading articles on those sites really cumbersome and more often than not I decide that it’s not worth the hassle to continue reading and move on to the next article. I find that quite sad, since the author invested time and effort to produce it, and the only reason I’m not reading is because of its subpar layouting.

Two types of scrolling madness

The smartphone browsers I have used in the past had two scrolling modes when scrolling is possible in both horizontal and vertical directions.

One of them is to always allow the user to scroll in both directions. This makes thumb-scrolling a tedious task, as the natural scrolling motion is not completely vertical, and leads to horizontal displacement¹.

The other one locks a scroll direction at the start of the scroll and restricts movement to that axis. This seems like a good idea in practice, but it does not work well for small adjustments. A slight horizontal movement on the initial scroll can lock the wrong axis, and there is a small cooldown time until the lock releases.

Finally, there’s the problem that horizontal scrolling is already used for navigation, at least on iOS Safari: scrolling horizontally triggers history navigation, which makes for a smooth user experience. Except when I unintentionally trigger the movement options when navigating a horizontally scrolling site. Most sites handle accidental navigation cleanly and return to where I left from, but some² sites don’t, and that’s another source of annoyance for me.

My conclusion is that both scrolling behaviours suck, so it’s best to avoid them as much as possible. So let’s fix it! Here’s a bunch of tips that hopefully help you understand and prevent horizontal scrolling. I will concern myself with mobile design tips, as this issue is not as prevalent on laptops and desktops.

Use viewport scaling

Some sites do not have viewport scaling enabled. This is a browser feature which accounts for pixel density and screen size differences between low and high resolution screens. For example, even though my phone actually has a screen that is 750px wide, displaying the site for a 750px wide screen causes the content to become tiny and unreadable. Readers then have to use zoom and use horizontal scrolling to read the content.

Using viewport scaling accounts for this discrepancy, and ensures that the page is rendered at a sane size.

Vertical design is superior

When designing a site, make sure that the mobile version is designed with verticality in mind. Smartphone screens are narrow so information rarely, if ever, fits nicely side-by-side. Instead use the infinite vertical space you have available and stack it on top of each other.

Sometimes it might be better to outright remove some features of the full-width site. Is a navbar really necessary when viewing a blog post on a mobile screen? Probably not. There should still be some navigation which allows you to go back to the index, for example. It is important to strike the right balance of feature and layout here, and some experimenting might be required.

Be conservative about minimum width

When I was still in high school a few years back my best friend used to have an interesting metric for selecting his mobile phones: more durability equals better. He was, in fact, quite clumsy³ when handling his phone so it made a lot of sense to him to choose a cheap and durable phone. I do not quite recall what the actual model was, but it was an LG phone similar to the Optimus L3 E400, with a whopping 256MB RAM and a 320x240 display. He used it as his daily driver, as it could do everything he needed: play music and browse the web.

I do not know whether he was as annoyed as I am about horizontal scrolling, but every time I work on mobile web design I think of him and his phone, and that he and others with really narrow screens would like to enjoy my content as well. Thus I try to design everything to be as usable as possible, even on a 320x240 screen⁴. Starting at 360px is fine for most purposes as well – it is definitely an improvement over doing nothing.

Dealing with wide content

Paragraphs of prose have the neat property that they are easily compressed horizontally, and still look nice on small screen sizes. Unfortunately, this is not possible for very long words, as the default CSS behaviour is to let them overflow to the side. The CSS property word-break can help here: setting it to break-word allows the browser to break very long words. It is not a very nice way of breaking words (no hyphen is inserted to indicate breakage), but it makes the page fit nicely without horizontal scrolling, which is more important. You can see an example of this happening here: Donaudampfschifffahrtsgesellschaftskapitän. Try viewing it in 240px or 360px width⁵ and note how only the offending word is broken apart.

There are two other content types where I frequently encounter overflow: images and source code.

Images are easily handled: make sure they are always at most 100% wide. Sometimes the image loses detail on very small screens, but that is totally fine. Make sure users can still access the raw image, for example by its URL.

Source code poses a bigger problem: line wrapping for code straight up sucks, so it has to be presented as is. Here we cannot nicely avoid horizontal scrolling, but we can ensure that we only scroll what is necessary, and not the entire page. There are 1001 different ways to achieve this, on this blog I set the overflow-x property on the <pre> tags.

This is the thing most blogs or articles I read get wrong: Most of the content neatly fits into the screen width, but overflow of one code block spills over and ruins the scrolling experience on the entire page.

Test it!

Finally, all theoretical discussion is useless if you do not test your design! All major modern browsers have some responsive design testing mode which allows you to set the viewport’s dimensions and see how your site behaves. On Firefox and Chrome it is part of the developer tools, which can be accessed by the keyboard shortcut Ctrl+Shift+I.

And if you have some unwilling test subjects friends, ask them to check out your site on mobile and give feedback! As an added bonus you get a wider browser coverage this way. There are a lot of subtle compatibility issues between web browsers, and the only way to figure them out is to test everything.

Conclusion

Hopefully this post explained why I think we should abolish horizontal scrolling, and give you practical tips on how to avoid it. If you have any questions or comments feel free to reach out to me on Mastodon or via my public inbox.

TL;DR

• Horizontal scrolling sucks
• Vertical composition is superior
• Be conservative about minimum width, support at least 360px, if not 240px
• If you need wider content then scroll locally
• Test your site using the devtools supported by all major modern browsers