Challenge your assumptions, break out of old habits and discover what’s newly possible with layout on the web.
When the web was first invented, there was no technology for page layout. Every background was grey. Every page was a single column of text, filling the whole space from side to side. Over the years, we’ve created one hack after another to tackle page layout.
The hacks have become far less messy, but everything we do today is still a hack. To hand-code a page layout, you must master the art of clearing floats, using negative margins to rearrange order, and dodging browser quirks. It’s painful. Many of us have given up and instead use a third-party framework; Bootstrap, Foundation, or one of their many competitors let us outsource the pain.
We’ve shipped a lot of work using layout frameworks. We’ve been more efficient and suffered through fewer bugs. But now every website feels the same. Every website reaches for an identical 12-column symmetrical grid. Every site uses the same user experience, shapes and patterns over and over. And we are totally bored.
A new era
But there’s good news. Finally, we are getting real tools for page layout. Instead of hand-coded hair-pulling or boring formulaic frameworks, we can get creative. Flexbox, CSS Shapes, Masks, Clip-path, Initial Letter, Rotation, Multicolumn, Viewport Units, Object-fit and more are already opening up a world of new possibilities.
Most profound of all, CSS Grid Layout will arrive sometime in the next year, completely changing how we approach page layout on the web.
We should start asking ourselves, what kind of page layout will best serve this project?
The question will no longer be ‘which framework should we use?’ We aren’t going to need them any more. In fact, once CSS Grid arrives, using a framework will be much less efficient than hand-coding your own layout in vanilla CSS. Third-party frameworks – even new frameworks based on Flexbox or Grid – will just get in the way.
We should start asking ourselves, what kind of page layout will best serve this project? How can we tap into a hundred years of graphic design practice to communicate through our layout?
Fighting the code will no longer be the hardest part of creating a layout. Our biggest challenge will be fighting the limitations of our imagination. We developed powerful habits over the last 10 years. We squashed our creative ideas under piles of ‘the web doesn’t work that way’ and ‘you can’t do that’. Well, things have shifted. The boundaries between possible and impossible have drastically changed. It’s time to let go of long-held habits and myths.