Designing for Big Screens

An Experiment in Adding More

I've always wanted to see what was possible on the web when we use all the space we're given. Today we look at my take on how to add more for those who have the extra real estate.

The Idea

There's that old, inaccurate saying, "we only use 10% of our brain". As terrible as it is, it's stuck with me over the years for some reason and it popped into my head the other day while working on this site.

I was trying to decide how to handle extra large breakpoints and was settling on containers with a max-width so that the content stays centered and predictable. It works well, but when using a ultra-wide screen or ultra-high resolution screen there's a lot of blank space just hanging around. So I started trying to think of a way to make the site more useful for people with all that extra real estate. After all, more and more people are using UHD screens.

Note: For the rest of this post, I'm going to use the abbreviation UHD to refer to anything that's got enough screen space to end up in this category where there's usually a lot of blank space. Typically, I'm thinking of screens that are over 1440p. So something more in the 4k range, but not necessarily. A ultra-wide 1080p screen might also be considered UHD in this context just because it has much more horizontal space than a typical 1080p screen.

Researching the Problem Space

Naturally, I started by going to the internet to see what prior art was out there, but I found surprisingly little on designing for UHD screens. If UHD screens really are becoming more prevalent, why aren't we seeing any new design trends for applications to use the extra space?

I can think of a few reasons, most of which end up coming back to the return on investment for design and engineering. Even though there are more and more high resolution displays with lots of space to use, we have to design for the smaller, more common screen sizes — we can't just leave those users in the dust. So designing for a different, smaller group of users with large screens is always going to extend timelines and add to the cost of development.

We're also in the age of mobile computing and the collective mainstream of development effort has only just started to focus on the experience of the mid- to small-sized screens we have in our pockets. If the delay in adoption for mobile devices is any indication, we're going to have to live for quite a while before we see any new trends for UHD screens.

That said, here are a few tips that I picked up that are worth sharing.

Scale Text Appropriately

UHD displays can have a high pixel density. This means that your standard 15px font on an average screen is a good size for readability and accessibility. When you crank up the pixel density though, it gets smaller and smaller, becoming unreadable.

This is a tricky thing to do right. Most of the time at large viewport widths we can assume there's a high pixel density but these two numbers aren't technically connected. We can have a big panel with many pixels at a low density. So scaling the text up there would make it unnaturally big.

On the other hand, large panels with lower density are likely to be viewed from further away (think TVs and wall mounted monitors). So it's probably safe to increase the text size anyway.

Use Images and Video

If you're at a huge breakpoint, it's more likely that the user is on a desktop with a faster connection than a slow phone. Again, this is an assumption, but one that's pretty safe to make. So if you have the screen real-estate, go for it on those big pictures and videos. Use the bandwidth and space to make a high fidelity visual experience for the user. Just remember to have good fallbacks for loading and don't go overboard and make the site unusable if they're on spotty WiFi or a metered connection.

Know When to Contain and When to Expand

Different types of content need different containment protocols. Reading text should be kept between 50–75 characters. Combinations of specific max-widths and width: 100% are particularly effective when combined with scaled text because we can get down to the minutiae of characters and word count for lines in our text containers.

On the other hand, images, app layout, and other content can be expanded to fill the whole screen. There's definitely a balance to strike with sensory overload though.

This bit is exactly what I was hoping to get more examples and research about. Unfortunately, the data here is scant. I only found two valuable articles about large screen layout. One didn't have much depth and just recommended bringing back the left nav pattern. The other was decent and actually got into different ideas for what other content could be displayed on an e-commerce site.

Let's Take a Stab at It

If there's not much guidance out there, then it's up to us to build something for ourselves. Remembering how valuable it was when I was redesigning the blog last year, I wanted to start with some sketches.

It ended up being a lot of fun to try out different approaches and see what worked. The goal was to incorporate good first-principles thinking but also come up with something fresh and new. I hope we struck that balance. The UHD layout is live on this site, so let me know what you think.