I’ve spent my month knee-deep in web design projects, and I’m married to a developer. Avoiding the silent treatment during the coding phase of my projects is my obvious motivation for using coding grids. Beyond marital bliss, though, there are a few reasons why coding grids are so meaningful to the design process.
Designers use grids in web design to create visual balance; they serve as an invisible skeleton on which to lay out our designs. Developers use grids to help organize and automate the way a site collapses by screen size, not only making the site visually appealing, but also creating a framework for purposeful responsive design.
Grids as tools, not grids as chains
Using a visual framework to create order in a design isn’t a new concept. The Golden Ratio, the Rule of Thirds and other design frameworks date back hundreds of years, before the Web was even a twinkle in Tim Berners-Lee’s eye. These principles have stood the test of time because they can create an unspoken sense of tension, emphasis, movement and balance on the page, depending on how you use them.
Note that I said principles, not laws. Grids are to design as grammar is to writing. They aren’t Ironclad, Never to Be Broken. But if you do break them, Do It Intentionally.
Who cares? Who should care?
Even within the realm of design, there are so many facets that it’s possible to spend a lifetime and not master it all. So it’s tempting to file coding grids under the “Developer Concerns” heading and call it a day. But grids are to design as rhythm is to music. They help your band play together. That doesn’t mean great musicians (see: jazz) don’t play around with the beat, rather than sticking to it. They do it in the right context, though, and they take care to differentiate from a beginner’s popcorn tempo.
Sticking to a coding grid in design doesn’t solve all your development problems, but it does minimize them. The most popular grid system for web design is tied to the Bootstrap framework, a popular scaffolding for creating flexible, responsive sites. You can see how the Bootstrap grid works in this video.
Playing for team responsive
Truthfully, designers have had to adapt to the realm of responsive as much as the developers in the crowd. How do you create a visually compelling design when your canvas size is “best-guess breakpoint”? Moreover, how do you do it so that the designs adapt gracefully, rather than some turning out stunning and others a sloppy afterthought?
The secret is paying attention to how the grid will operate and how its fluidity plays out on different screen sizes. This is why I like to start thinking about grids at the wireframe stage. As I’m laying out the content and deciding on emphasis points for the full-screen, tablet and mobile versions, I make quick notes about where a particular page element is likely to move and how much screen real estate it occupies in each size. This way, I can quickly see where things are misbehaving and adjust accordingly, so there aren’t any surprises down the line in development.
If you check out these Bootstrap examples, you can see exactly how different classes behave as you shrink the browser window down. Don’t like the way it works? You can ask the framework for a different number of columns at a different screen size, just remember to do the math and make sure you’re adding up to 12 (or the total number of columns your framework uses, if you’re not using Bootstrap).
End product matters
Ultimately, designing to coding grids makes for a better custom web design experience. The process (and thus the client experience) is smoother because we’re on the same page through the design and development stages. Grid designs have visual balance and appropriate proportions at all sizes, allowing you to wow your audience on all devices.