When talking about responsive web design, most designers and developers think of websites on smartphones, tablets, and laptops.
But once in a while, you might run into a client who gets more than half of their traffic on large desktop screens.
I’d like to share some ideas and user interface (UI) patterns I found useful while designing a website large desktop first—while of course still making it scalable down to mobile screens.
Some things upfront
1. Large desktops are not televisions
Some argue that large desktops’ UIs should be more like the UIs on our smart televisions and game consoles.
“Adapting large desktop UIs from television layouts doesn’t make sense.”
But those things are not at all the same. There are some big differences between large desktops and televisions that influence layout:
- The context of usage differs. While television is a “lean-back” experience (you might be lounging on the couch munching on popcorn), the large desktop is more of a “lean-forward” experience. UI patterns can be different than what’s used with web applications. Just think of scrolling directions in television layouts.
- The viewing distance to the screen might be 2 to 5 meters for a television, while the large desktop user still sits in front of a table with a similar distance to that of a laptop user (let’s say 50–80cm). Font sizes, paragraph widths, picture sizes, and, as a result, layout formats are different.
- In most cases, the input method is a 5-key controller. Some TVs might have a pointing device or even a keyboard. Still, television is a lean-back experience.
So we can’t adapt large desktop UIs from television layouts.
2. Understand the user and their device
When I viewed my client’s analytics data, it showed that most of the visitors had screens 1920 pixels wide, followed by screens 1680 pixels wide. It’s likely they sit in front of a Dell-desktop-thing, an iMac, or another large monitor.
“Most analytics don’t show us how large the user scaled their browser window.”
When we design for these screens, we have to understand that most analytics don’t show us the actual viewport size—meaning how large the user scaled their browser window. So the actual size of the website could be a laptop layout while displayed in a scaled window on a large screen.
Still, there’s the possibility that the user might want to see the website fullscreen—even on large monitors. As responsible designers, we should take care of that layout size as well.
3. What exactly is a large desktop?
When I talk about large desktops, I mean devices that are bigger than regular laptop-sized screens on MacBooks or Windows laptops. Large desktops are iMacs or monitors with 20-inch screens or larger.
The following chart demonstrates where we’re heading:
Enabling the large-desktop experience
One of the first layout decisions to make: how will your website make use of the given screen real estate? There are generally 2 options for how to deal with that in a responsive layout:
- A fixed layout limits the width of the page in every breakpoint and keeps the layout to a set width
- A liquid layout stretches over the whole screen width, always using the maximum space of the current size of the viewport
I find this tough to explain, so I’ve included a demonstration below:
See the Pen Responsive Wrapper Matrix by Johannes Holl (@johholl) on CodePen.
Above: first, select a layout option. Then drag the handle and resize the layout to see it behave in different screen sizes.
When a website wants to offer a large desktop experience, employ a liquid layout in order to make use of the whole screen rather than including left- and right-page margins.
The return of left-hand navigation
When I started exploring layouts, it quickly became clear that there’s a lot of scope when it comes to width. Using some of that width for navigation could leave more height for content and the page itself. One responsive pattern seemed most appropriate:
A good reason for left-hand navigation lies in its responsiveness.
Webpages can only grow in width to a certain length. Paragraphs get harder to read when the line-width becomes too long. Too much content next to each other makes a page look crowded and awkward to scroll, while adding more white space may make the layout look too sparse.
However, as the width of the actual page stays almost the same compared to the contiguous breakpoint (laptop layout), only a few adaptations are needed to make the content fit the screen.
The layout blow-up
A large screen offers a lot of space for the layout, and that space can be used for more functions, more details, or more content at a glance. Besides making use of that extra space in this way, we might want to slightly scale the whole layout. This can enhance readability and provide the user with a stunning experience that fits the screen size and accommodates the larger viewing distance.
A straightforward implementation involves using an elastic approach where all margins, paddings, font sizes, and other values are in relation to the default font size (using the units em or rem).
This structure enables us to blow up the whole layout by changing one parameter: the font size in the body tag. In my project, I changed the font size from 16 to 19 pixels (118.75% of default font size). I applied this layout blow-up when the viewport got bigger than 1600 pixels (100em). So, the large desktop experience offers a slightly scaled layout with better readability.
Johannes is co-founder at Boana design studio based in Berlin. He designs interfaces and manages software projects for international enterprises and startups. Previously he has worked in the creative direction of Deutsche Telekom Product Design. As someone who's studied design and software development since his teenage years, he challenges the boundaries of design and code in his daily work. He writes about design and the creative process in his Medium blog.
