In the typical discourse of the evolving interactive design frontier, I hear a lot about the 960 grid. In a recent attempt to adhere to this framework with a very ambitious responsive web design project, I realized it fails to address a still very important space: the widescreen laptop and desktop, most often beyond the dimensions of 1024 pixels wide.
I have, more often than not, seen the screen real estate beyond 960 treated as dead space with very little thought. Usually I see a solid color or a repeating background extended over it with the boundaries of the framework preventing any further utility. The 960.gs site itself makes little attempt to acknowledge this space, but is it that insignificant? Should we herald the dawn of the 1024×768 tablet dimension as the end-all of our screen-width and height optimization efforts?
In fact, the case is the exact opposite. At least for now: According to W3 Schools, the most popular screen widths are beyond 960, beyond 1024, and have been increasing steadily over the years with one exception: 2011, which saw the rise of tablet computing and specifically the iPad. However, according to the statistics in the above-cited link, 85 percent of the W3S demographic remains a considerable majority when deciding what our canvas dimensions are for any given interactive design project.
Within the interactive world, responsive design has leapt to the forefront of our passion. We eagerly go to websites like bostonglobe.com and scale in our browser windows to witness with awe the magic of responsive style-sheet substitution, at least for myself and my geeky colleagues at Brown Bag. An entire slew of responsive templates have arisen in a very short amount of time, and yet very few have given any thought to the idea of optimization, utility, and aesthetics outside of the 960 grid space.
There’s also something else affecting the premature abandonment of the widescreen dimension: the switch to the mobile-first design methodology. Now mind you, I’m a huge fan of this school of thought, usually attributed to Luke Wroblewski. In the long forgotten past (i.e., a year ago), before mobile-first, those of us working in the responsive space would come upon uncomfortable in-between states where elements of a given design simply wouldn’t cooperate. There would be too much horizontal space for two columns, but not enough for a third, and this state used to be the tablet space. Things started with a desktop design, then a complementary mobile design was added, and the nascent tablet space had to deal with that wonky two-column spread that was too far apart.
As we move towards mobile-first design methodologies, the tablet is less of the uncomfortable in-between space. The choice is instead made to alienate the more popular widescreen desktop, creating large aspect ratio “gutters” on the left and right side reminiscent of 4:3 content on a widescreen, 16:9 TV. In an aesthetic sense, this is still a far better place to be. But unlike TV, we can actually do something with this extraneous area of often 300 pixels or more on each side. We’re interactive designers and the web remains our creative, exploratory space. Where the tablet was our undiscovered country, the widescreen desktop and laptop space is our forgotten land, rich with untapped utility and creative opportunities.
In fact, at least Facebook is utilizing the widescreen gutter the right way. Stretched out beyond 960, we find our friends’ latest activity and an extension of the chat utility. One finds that the gutter is ideal for support content; i.e., things not necessary essential to the core experience and done away with when brought to the tablet and mobile level. Facebook, to this degree, has a pseudo-responsive nature that comes from treating itself like an application more so than a website following a responsive fad. It does what works, and explores ways in which to enhance the user experience for its specific audience.
And on that note, I would like to encourage getting off the responsive bandwagon purely as a cosmetic exercise that benefits developers by not having to create multiple sites. In the end it’s about the user, and smart design is concerned with the much larger picture of enhancing the user experience. Screen real estate is only one of the factors in the larger-picture approach that brings greater value to consuming content on the web. Let’s not waste those precious pixels! Despite the rise of the mobile and tablet spaces, responsive design can and should exist beyond the world of 960 pixel wide screen sizes. Statistically there remains a huge audience for it.
