Nathan Leigh Davis is a designer and developer who writes about design, technology and things that inspire him.


Going large

Because responsive design offers a holistic solution for optimising websites for mobile devices many of its practitioners are heavily focused on exploring techniques and layouts to best achieve this. Frustratingly though many responsive layouts still ignore users with larger screens. They flex until they reach a width of 960px then stop, even though the content may not only accommodate going larger, but may actually benefit from it.

It's important to remember that responsive design is not simply about optimising content for mobile, but for any device used to access the Internet. This includes desktop computers, televisions and other devices that boast impressive screen resolutions that exceed the "standard" screen size of 1024x768px.

Web designers can now offer users experiences that are better tailored to such devices, however this requires us as a community to ditch the 960px convention and other outdated falsehoods.

The 960px layout is dead

Up until recently best practice within the web design community was to create static layouts that had a width of 960px. While layouts may have been a little larger or smaller, 960px was considered a good rule of thumb, because this width accommodates a scroll bar and reasonable margins on either side of a centered layout when viewed on a screen 1024px wide.

Many developers until a few years ago had expected this screen size to become extinct in the same way that 800x640px monitors had. Despite the belief that we'd be designing for larger screens the explosion of net books, tablets and a refusal by some to simply update their aging monitors has meant that this convention has persisted - until now.

Responsive design makes the question about what screen size to design for arbitrary. Even if you believe that you should develop a separate site for mobile users, there's still no reason why your desktop site can’t flex to accommodate larger screen sizes. So long as you employ responsive techniques there’s no excuse not to experiment with layouts that are 1080px, 1140px or even 1920px wide.

Going large with responsive design

The ultimate challenge for web designers therefore is not to design layouts that accommodate mobile devices, but layouts that also accommodate the other end of the spectrum. Designing a layout the flexes from 320px to 1920px is daunting and for many sites, such as those with long sections of text it’s important to realise that this can be unrealistic.

This is because many sites are not composed of modular blocks of content that can be easily reorganised using robust grid layouts. Sites with long sections of text should never be expanded to a point where lines of text become too long degrading the readability of this content.

However unless your using 11px type you may find that many designs look best at a width of 1080px, 1140px or larger. Essentially the width at which the content looks the best should determine the maximum width of a website.

Start now

Mark Boulton's article "A richer canvas" discusses this very notion and he uses a very apt term to describe this practice - "designing from the content out". Effectively this means that content and its composition should dictate page size rather than vice versa. While you still need to consider how to rearrange content to accommodate smaller screens, there is no need to define a maximum size based on outdated conventions.

What is interesting about this concept is that it marks a coming of age for web design. The need to define an imaginary page that a layout should conform to is rooted in print design, a discipline where the arrangement of content is largely dictated by its relationship to the boundaries of the page. This is why responsive design has gained so much traction within the web design community. It describes a process of designing that is more suitable to our chosen medium.

Ultimately to embrace this way of thinking many designers will have to change the way in which they design for the web. For instance I've found myself using PhotoShop less and less over the past couple of months and turning to Illustrator instead. This is because I personally find Illustrator less constraining as it’s easier to move, resize and manipulate content, without having to worry about resizing my workspace.

Illustrator isn't for everyone, but if your interested in designing responsive layouts I’d encourage you to experiment with alternative ways of working that offer more flexibility than PhotoShop. This of course also means ditching any templates and frameworks that you may be using and starting from scratch.

Even if your not fully sold on optimising layouts for mobile and believe that a separate site is a better way to go, it doesn’t mean you can ignore responsive design altogether. The devices used to access our websites are more diverse than ever and responsive thinking when approaching any brief should still prevail.

Therefore it's time to start experimenting with the opportunities that these larger canvases offer, which will ultimately enhance the experience delivered to their users.