Beyond the grid — what’s next for responsive?

The web is expanding. Not only measured by the number of websites or petabytes — each and every website has to deal with a lot more complexity than it had to ten years ago. One reason is the advent of mobile computing, adding a myriad of screen sizes and input methods to the web. The other reason is that we are not simply designing websites an longer. We are working on brands that span dozens of products and channels.

To conquer these complexities we employ design techniques that form abstractions over the page-based-design of the early 2000s: We no longer create mockups, but style-guides and pattern libraries that list design elements independent from their context but very much interlinked with their technical implementation. To fit these elements into unknown viewports responsive grids are used, adding further to the standardization of circumstances allowing us to manage this expanding complexity.

The New York City Transit Authority Graphics Standards Manual (from http://standardsmanual.com/)

This is not the first time that grids, style guides, clean typography and geometric shapes reigned supreme — the web is using a lot of the tools and styles that made international style so successful in the 60s and 70s. Another time when design had to react to the expanding complexity of international brands wanting to retain their visual identity no matter if their design was printed on a 3-inch sticker or a 13-foot billboard. This helped create very efficient design solutions that are still in use today. But the quest for standardization and simple, clean forms also scrubbed away all surprises from design. Which is a good thing when you try to navigate the metro or an airport. But if you have to live in a world completely dominated by Helvetica things get a bit bland.

The Helvetica of the web is probably Bootstrap, which defined how we think about responsive grids these days. And while still allowing us to choose our own fonts and colors it strips a lot of the surprises from responsive design. Which is a good thing if you have to keep a deadline or are looking to keep obstacles out of the conversion funnel. But its starting to suck out the fun from surfing the web, because everything looks the same. So if history is indeed repeating itself and we are currently experiencing peak grid, what’s next for the web?

Know questions asked (from Emigre #34, 1995)

What followed international style in the 80s and 90s was summarized under the awkward title of postmodernism, and did indeed do away with a lot of the grids and legibility of earlier years. This was fueled not only by the shared hatred for swiss typefaces, but also by the possibilities and limitations of new technologies like the Macintosh and the desktop publishing solutions that soon followed.

Where international style tried to find standardized solutions, postmodernism was looking for idiosyncrasy.

So how is more unique design possible on the web without sacrificing cross-device functionality?

By definition there can be no fixed formula for uniqueness, but I think it has to do with how we manage risk and what data is driving design decisions: Using a responsive framework or creating one on known grid terrain is a process that delivers good results on time. Straying from that path of best practice is going to mean more time for design in your project to come up with new ideas — a lot of which are going be bad instead of just mediocre. But it gets you the chance to create something that stands out. Which might not be what you want if conversion is the only metric you are looking at: new and potentially surprising UI and UX concepts are often not what delivers the most short term uplift. Creating design innovation needs a wider outlook that also values how your brand can set itself apart from the competition. Which is easier than ever these days — so why not just try to align your breakpoints to something else than a 12-column grid the next time you start scribbling. Just be sure not to call your concept postmodern.