March 18, 2014
I Broke My Grid
to let loose my content

When I first created this site, I intended it to be a personal portfolio and a place to voice my thoughts. Turns out the latter was a bit harder than I thought. Writing is hard work, and I haven't been as prolific as I would have liked to be.

But as the site is crossing its One Year Mark, I’ve learned a lot about coding, and even more about myself. I know that I tend to spend a long time on a thought, only to write, then rewrite, then never to publish that thought. Though prolific writing is not my forté, long-form writing is something I’ll have an easier time with. So my goal for this year is to publish fewer, but more thoughtful posts. And the most wonderful thing about having your own site is: you have total control.

It’s your own site. You can do Whatever you want.

You have full control, and no clients to answer to. The world is your oyster. But when you realize how terrible you are producting content for your “blog” regularly, you realize that things need to change. So as my site crosses its One Year Mark, I’m making a vow to create fewer, but more significant posts.

Fewer but more significant?

So how do I push myself towards this fewer but more significant goal? To start, I hit up mediaqueri.es, and looked at blogs and publications like Ghost, Medium, and the Verge.

The pattern that emerged was a heavy emphasize on content. A specific design around content, to elevate the content into experiences. They share an almost magazine-like layout, where content isn’t just blocks of copy. The content is still responsive, but plays with the grid loosely to emphasize meaning. These pieces of content use the benefits of the screen and borrow from animation, film, and visual arts and design to convey meaning.

It’s a nice refreshing breather from last year’s blockier, griddier responsive sites.

Give a man a hammer and everything looks like a nail

There’s a reason why everything last year looked so blocky: it’s in the tools. Responsive web design had taken over, and its reliance on grid structures made sites clean and established a great framework for laying out content that shaped itself to different screen sizes.

But its strength—the grid— is also its weakness. Let’s take a look at this basic responsive example from Brad Frost:

look, blocks on blocks!

The layout grid is extremely powerful, as it allows pieces of content to shift around in a way that fills the space on the page perfectly. However, if used carelessly, the final output might end up looking like the stacks of boxes, and end up a little stale.

Design is hard. Inspired design, even harder.

I’m complaining a little. Websites have gone light-years from their interactive CD-ROM-influenced brethren from the 90’s. We’ve moved away from poor use of colors, animations, and effects. And with the inception (and eventual passing) of “Flat UI,” we’re collectively aiming towards designing for context and content. Some designs will be flat and uncomplicated (e.g. this site), will others will be warm and ooze character.

And just as with Skeumorphism, and soon with Flat UI, we’ll soon grow tired of our vanilla use of the grid. We’ll want to free ourselves from it, think outside of its borders, and eventually break it.

Break the Grid

The Museum of Design Atlanta recently held a Paul Rand exhibit. A thought kept coming back to me—every layout was based on a grid, and every pattern expertly broke the grid it was based on.

Smashing Magazine has a hugely inspirational article on employing Swiss design, and how to employ spacing, whitespace, colors etc. to make a layout stand out.

To push the boundaries of the grid would be to employ a much larger grid. Instead of the 12 column grid my last site used, I moved onto a 24 column grid. This offers more flexibility to place content in many different new ways that are closer to magazine layouts.

my slightly messier but more flexible 24-column grid. Here's an example of how it will work

We’re already on the cusp on another evolution: many websites are already starting to develop their own character, all based on responsive design. Sites like C|Net, Time, and MSNBC have already taken radical approaches to their designs. We’re on the cusp of another web design ‘revolution’ where many designers will take our current concepts and make their sites uniquely their own. Designers will bring in concepts from Swiss design and art to inspire their layouts.

And we’ll also bring in other aspects, like film, animation, puppetry, and flow to inspire our creations. Here is a much longer thought on the evolution of screens, as visualized by Frank Chimero.

Free Grids and Free Expressions

There is a growing collection of long-form articles that break the traditional grid. It was all started by New York Times’ excellent Snow Fall article. The article isn’t excellent because of its novel use of video and parallax (it’s actually a bit annoying), but it’s excellent because it raises the longform article above a mere clump of copy. Other publications have followed suit, like the Verge’s ‘Fanboys’ article and Ars Technica’s ‘Swimming with Spacemen. These are more than mere articles: they are experiences that transcend mere copy, and make use of the advantages of the digital screen.

I’m guilty of all the things I complained about. Therefore, I resolve that for 2014, I will push outside of those boundaries, even just a little bit, to let my content breathe and stand out.

So here’s to 2014, to freeing ourselves from the grid, one baby step at a time.