<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=1639164799743833&amp;ev=PageView&amp;noscript=1">
Diagram Views

Designing for Large Screens

Dan Rose
#Design, #Responsive Design, #Design Advice
Published on August 29, 2013

In a world where mobile has been hogging all the spot light,
Diagram has taken time to shine some light on the intricacies of designing for
large screens.

Mobile devices have been the talk of the town for some time now. The rat race seems to be centered around how small a screen can you shove as many pixels as you can into. High-density displays (think 'Retina') are nothing new, if not expected now. As we clamor for more gadgets we can fit in our pockets and use anywhere and everywhere, seemingly forgotten are those massive widescreen displays sitting on our desks.

Is it possible that in focusing on optimizing web design for every small device, we've inadvertently ignored the biggest ones?

This much we know: Responsive Web Design has introduced a huge shift in not only the technical side of design, but the conceptual side as well. With concepts like Mobile First, we've considered content hierarchy, touch-friendly elements, and more usable design patterns in ways we probably should have a long time ago. Everywhere you look you'll find fellow web designers, myself included, describing what sites will look like at "narrow", "tablet", and "desktop" widths. There are plenty of resources for designing sites 1200px and below, but I'm not sure we've done diligence to exploring what we can do above that.

My daily experience on the "desktop" consists of using a 27" Apple Thunderbolt Display (connected to my 15" Macbook Pro), which is set to a resolution of 2560x1440 pixels. If full screen apps can take advantage of all that real estate, why not websites? Let's take a quick look at how one in particular approaches both the small and wide screen.

There's an App for That

In general, mobile and desktop interface designers have an important job, which is to provide you with the necessary tools to accomplish a task and get out of your way. Your email is the app you demand superior usability and layout from, seeing as how it's so integral to daily communication. Naturally, Mail for the iPhone uses a single column layout to display content, in a convention thousands of apps use referred to as the "Nested Doll". Each view (accounts, folders, email list, email details) relies on back/forward navigation, creating an extremely linear experience of big picture (accounts) to extreme focus (email detail).

What's even more interesting, on the desktop Mail app, if you resize the frame to about 650px, the left-most column, "Mailboxes", disappears. Clearly, Apple has thought through what content needs to be prioritized and "in view" at different screen sizes. However, at full-screen, the ball is put in the user's court. The columns are all fluid and can be resized based on preference, yet, there is seemingly no reward or additional column that appears beyond that 650px threshold. Should there be? Perhaps not. Perhaps it'd be too clunky, too much information, too many columns, etc. But the opportunity exists for a fourth column of frequently-referenced items to appear. Maybe instead of a window overlaying the app when you compose a message, another column appears. Who knows?

Again, I won't pretend to know the best usability practices of email apps (a daunting practice if there ever was one), but the point I'm trying to make is that opportunities exist when screen real estate avails itself.

Answering the Calls of Context and Delight

We might find ourselves looking at "what else can we shove into view" if we approach this too casually, so let's bring this conversation back to the web. Let's use the all-too-familiar blog post as an example. The typical post layout ranges something like you see here. One column devoted to the title and post itself, and perhaps a sidebar with related links. Some sites display a single column, even at wide views, but will allow ample margin left and right as to consider the readability of line width.

What else exists on the page? Well, there's usually branding at the top and comments at the bottom. Creating a column for the branding is an interesting idea, but that might not add value to the experience. The comments, however, can have greater contextual impact when placed alongside the main post (arguable, since many of us consciously avoid them on particular sites). Maybe not the best for every blog, but for some, it would allow a faux-annotation and eliminate the need to quote someone out of context.

This convention might become more useful on retail sites like Amazon.com. Wouldn't it be great to have those handy reviews in a column to themselves, instead of scrolling down, then up, then down again to figure out what feature the review addresses? Frustrated because you're having problem completing a task? How helpful would customer service information or a chat option be? Or how about a sports site like ESPN.com, where you can view the box score and videos of a game, all within context to the main content: the recap. If the game is still in progress, a column devoted to Twitter that displays fan reactions might give you a closer sense of being at the game.

Granted, these concepts are rough and much elegance escapes them, and they're not without their pitfalls and counter-arguments, but the opportunities to make our websites become richer experiences on wider screens does indeed exist. As designers, I think we're just as responsible to the smartphone users we've accommodated as the ones with ginormous monitors. Is it worth the extra effort, knowing the majority of the web doesn't go wider than 1280px? Knowing this, we might tend to keep our browser windows half of our screen and inadvertently miss these experiences. Or perhaps the multitasking facet requires us to have multiple windows up, adjacent to one another… there are certainly any number of reasons why designing for large screens might not sound like the best idea, but the opportunity exists to be a pioneer of sorts, and in doing so, create curiosity for those of us with humongo screens to stretch out a little bit and take it all in.