Life Beyond 960px: Designing for Large Screens

The premise behind a responsive web isn’t purely that websites be built in a mobile-friendly way. It’s about setting our content free so that it can be experienced by whatever means necessary - and that includes at large scale. Let’s take a look at the design considerations behind the often neglected huge desktop screen.

What’s the Big Deal?

Those of you who enjoy playing with flexible layouts will (like me) undoubtedly get a weird kick out of seeing your designs adapt comfortably to small viewports. What was once a beautiful multi-column layout becomes an equally beautiful, snug pillar of readable text, free of clutter and unnecessary nonsense. But how many of you think of your layouts beyond the comfort of a 960 grid?

Believe it or not, there are people who view your work at hi-def cinematic wide-screen glory (even Apple’s 27" iMac and Thunderbolt displays enjoy a resolution of 2560x1440px). Computer screens are getting bigger, so where does that leave your 960px responsive layout? Floating adrift in the middle of an ocean, is where.

Over five percent of Webdesigntuts+ visitors last month did so on a screen like the one above, not a figure to be sniffed at. And before you jump down my throat about the layout of this site, rest assured a solution is in the works!

Why 960?

We seem to be stuck at 960px, a width which has become standard through use of grid systems. For a long time it was unsual to find screens larger than 1024x768px, so our fixed width layouts certainly couldn’t exceed that. 960px is actually a great figure to work with because:

It allows whitespace (and chrome) either side.
It divides nicely into a wide range of columns (2,3,4,5,6 and 8) with all relevant combinations.

Problems appeared when accessing the internet on smaller devices became common. Larger layouts are awkward to view properly through tiny viewports, so, neccessity being the mother of all invention, our attention was logically turned to address this issue. A 960px layout will still look fine on a larger screen, so designers often think of responsive web design as a way to make their layouts mobile friendly.

Mobile Last

We’re used to designing mid-sized layouts. For that reason it’s easier (though many of you won’t admit it) to visualize and design just as you always have done, then trim things down for mobile. Your first venture into RWD will likely involve degrading media queries like this (taken from the Skeleton boilerplate):

	/*all your initial styles go here..*/
	body {
		width: big-ish;
	}

	/* Smaller than standard 960 (devices and browsers) */
	@media only screen and (max-width: 959px) {}

	/* Tablet Portrait size to standard 960 (devices and browsers) */
	@media only screen and (min-width: 768px) and (max-width: 959px) {}

	/* All Mobile Sizes (devices and browser) */
	@media only screen and (max-width: 767px) {}

	/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
	@media only screen and (min-width: 480px) and (max-width: 767px) {}

	/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
	@media only screen and (max-width: 479px) {}

Start big, then work your way down to smaller devices. This is awkward for a number of reasons, not least being that you’re often committing yourself to a maximum layout width before venturing into other potential screen sizes. Going back to account for larger screen sizes means rejigging your media queries.

A mobile first approach, on the other hand, means that you’d first cater for the smallest possible screens, then build your media queries as viewports become larger. Tacking another media query on the end, because you notice a breakpoint at 2000px, is straight-forward.

Fill ’er Up!

The obvious solution is to allow our flexible layouts to spread the full width of whichever screen they’re viewed on. Easy! But there’s a reason you’ll often see max-width cropping up in responsive css; designing for large screens requires careful consideration.

Leaving technical hurdles aside for a moment, how do we actually design for larger screens? A few approaches spring to mind, so let’s work our way through them in a logical fashion.

Open the Floodgates

Assuming we’re dealing with a fluid grid, we can just allow our columns to spread proportionately and fill the available screen space.

The glaring issue with this approach is having super-wide columns of text. A body of text 30cm wide isn’t going to do your layout any favours aesthetically, but, more importantly, the readability will also be reduced.

The width of a line of text is typographically referred to as the "measure", and in order to preserve readability should aim to be around 45 to 75 characters in length. Too many characters and it becomes difficult for the reader’s eye to move back across the text and locate the beginning of the next line. This can be combatted by increasing the line-height (leading), easy enough to implement at the appropriate moments through media queries, but it’s not a complete solution.

The CSS3 multi column layout module looks promising in this respect. Once a body of text reaches a certain width, splitting it into an appropriate number of columns would solve readability issues. We’re getting ahead of ourselves though. Browser implementation of CSS3 columns is still inconsistent and falls short on a few typographic details.

I think we were getting warm when we mentioned increasing line-height, which leads me to the next approach..

Size Matters

Bear with me on this one - how about we just scale everything up? Certainly, as a far as type is concerned, it would make sense. Readability is once again at the heart of this; larger screens are generally viewed from further away. We view screens most comfortably with a viewing angle of around 30°.

Which effectively means;

The larger the screen, the greater the optimum comfortable viewing distance.

This translates to an optimum viewing distance of 3-6 screen widths. Note: these figures apply specifically to televisual viewing, but the principles for desktop monitors remain the same. Apple recommend that you sit between 18" and 24" from your display, depending on its size. They suggest 15" from the newest iPad, 10" from an iPhone 4.

That’s a significant range, so it would seem sensible to alter font-size in relation to the distance from which it’s being read.

Ems are our friend here. By setting your type, line-height, indeed the whole baseline grid (there’s a challenge), using relative units of measurement (ems or rems) it’s very easy to scale the whole thing up.

/*set initial value*/
html {
	font-size: 100%;
}

body {
	font-size: 0.875em; /*14px*/
}

	/*boost it when the time’s right*/
	@media only screen and (min-width: 768px) {
		body {
			font-size: 1em; /*16px*/
		}
	}

I’m a fan of large, readable type, but if you’ve ever been wary of setting your body copy at 16px, maybe a large screen layout is just the place to get your hands dirty!

Reorganizing

Advanced CSS layouts are a fair way off yet, but even in our world of floats we can reorganize layouts without too much difficulty. If the aim of this exercise is to make the most of unutilized screen real estate, why not simply bring hidden content back into the picture?

Take the footer, for example. More often than not it finds itself hidden offscreen, at the bottom of the page. That’s not a problem; it’s not exactly the place for highly important content, but a page footer can contain useful information, so consider tacking it onto the side of your layout as an additional column.

Semantically it’s still a <footer>. The markup is still stating where its content belongs in relation to the page’s hierarchy, but we’re free to put it where we please. Working to a grid and working to a modular layout structure will make this more easily achievable.

You could also shift body content upwards by repositioning horizontal elements such as primary navigation, transforming what was a vertically biased layout into a more horizontal orientation.

Wrap it All Up

I suggest a combination of all these approaches would set you in good stead; build for mobile first, allow your layout to flow widthways, boost scale (slightly) and reposition modular elements.

Take a look at how that all comes together (I’ve even thrown the CSS3 multi-columns in there for good measure).

But

There are always buts..

Don’t forget whitespace. Whitespace at the edges of a page layout is what defines that very layout. The empty areas of a screen lend focus to areas of content and help direct the user’s eye. Don’t eagerly fill whitespace just beacuse you can.

This is particularly true with respect to our “repositioning” approach. A modular layout can happily be rearranged so that hidden content is brought into view. But presenting the user with more information to process can dilute what you’re trying to achieve.

Take this example from recent sneek peeks of Windows 8. On smaller devices the tiled interface is very effective:

On larger screens it can best be described as confusing:

So the concept that "space is there to be filled" isn’t necessarily true. Still, I hope this gives you food for thought and I look forward to hearing your own experiences when designing for large screens.

Further Resources

All The Screens: Cross Platform Design Strategies
Responsive Typography: The Basics by Oliver Reichenstein
320 and Up The "tiny screen first" responsive boilerplate
gridsetapp.com Create advanced grid systems on the web.
Multi-Device Layout Patterns by Luke Wroblewski
Responsive Layouts, Responsively Wireframed by James Mellers
Ideal line length for content by Russ Weakley
Computer Screens Getting Bigger by Jakob Nielsen