The large-desktop experience in responsive design
A case study on giant monitors
When talking about responsive web design most designers and developers immediately think of websites on smartphones, tablets and laptops. Once in a while however, a client comes along who displays more than half of their traffic on large desktop screens.
In this article I want to share some ideas and 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 desktop is not television:
When thinking of large screen sizes, some argue that it could be more like user interfaces on our televisions, such as game consoles or smart TV UIs. Sadly it’s not the same at all. There are some big differences between large desktop and television which influence the layout to a large degree:
- The context of usage differs a lot. While television is a “lean-back” experience, slumped on the couch munching popcorn, the large desktop is more “lean-forward”. UI-Patterns can be different to the web. Just think of scrolling directions in television layouts.
- The viewing distance to the screen might be two to five meters for a television, while the large desktop user still sits in front of a table and having a similar distance than a laptop user (let’s say 50–80cm). Font sizes, paragraph widths, picture sizes and in result layout formats are different.
- The input method is in most of the cases a 5-Key controller. Some TVs might have a pointing device and even a keyboard. Still television is a lean back experience.
Thus, we cannot adapt from television layouts.
(2) Understanding the user and his device:
When I viewed my client’s analytics data, it showed that most of the visitors had 1920 pixel wide screens, followed by 1680 pixel. It’s likely they sit in front of a Dell-desktop-thing, an iMac or a similar large monitor.
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 his browser window). So the actual size of the website could be a laptop layout while displayed in a scaled window on a super large screen.
Still there is the possibility that the user might want to see the website fullscreen even on large monitors. As responsible designers we take care of that layout size as well.
(3) So what are we exactly talking about:
When I talk about large desktops I mean devices that are bigger than regular laptop size screen, like MacBooks or Windows laptops. Large desktops are iMacs or Dell-Monitors with 20+ inch screens.
The following chart demonstrates where we are heading for:
Interested in best-practices on how to implement large desktop responsive design?
Read the full story on the Boana Studio blog:
