Interfaces are too vertical

Published on October 9, 2024.

I find that many websites today — interfaces in general, really — are laid out vertically. Most of the time this is fine, but when it’s on pages focused on content, such as wikis, blogs, and even news websites, I’ve started wondering why?

It makes some sense of course, we generally read from top to bottom after all. But if the most important bit of the page is the content, why is a good quarter of the screen taken up by a logo, navigation, and potentially other elements that don’t add any value to the content?

I get this for mobile layouts or other screen sizes where you don’t have a lot of horizontal space. I still think taking up half the screen for a logo and navigation isn’t the best approach, but it’s understandable at least. On wider screens, basically anything other than a phone, you have more space to work with along the horizontal axis. And I think we should use that space!Bring those sidebars back!

This occurred to me as I was listening to an episode of the Arc Browser podcast. They’re working on the next major version of Arc and want to get to the core value statement of Arc. One of those, to me, is the sidebar layout. Having more space to read the pages I’m browsing improves the feel of the browser significantly. And stacking tabs vertically makes more sense to me than laying them out horizontally.

We consume content too-to-bottom, so why have the browser UI get in the way of that by putting it all above the web page you’re browsing? That’s getting in the way of you consuming the content on the page.

This doesn’t apply so much where the first thing someone might interact with is the navigation, but on something like a personal blog it seems to me that a sidebar makes sense. Where the navigation isn’t getting in the way of the content.

New site design

Having had all these thoughts I decided to make a new theme for the site! Again! The navigation is now on a sidebar if the page is wide enough. If not, the navigation appears underneath the content. There’s also a link at the top of the page to skip over the content straight to the navigation when needed.

This makes more sense to me personally. I never pay any attention to the header or navigation on pages I visit. I’m much more interested in the actual content.

I also made some strong stylistic choices with this theme. I’m only using named CSS colors, it only has a dark mode, and using magenta as the accent color is certainly a bit of a statement!

I hope you like it!