Connect

Case Study Article

How grids help overcome the challenge of responsive design

Grids are the backbone of responsive websites.

And for the foreseeable future, grids are necessary to build cost-effective websites that render effectively in all browsers and any number of known and unknown resolutions. There are just too many devices to account for everything.

A grid creates a method for organizing and placing content so that the design will appear consistently across devices and have a feel that resonates with users. There’s nothing worse than opening the same website on a different device only to find that it looks and functions differently than in other environments.

Grids can also help creative teams and designers think about how to plan for a responsive website design. (If you aren’t building responsive websites in 2017, you need to rethink your strategy.)

Grids 101

Grids are the key to consistency and harmony in website design. A good grid can set expectations for the user, help streamline the design process, and provide a set of reasonable constraints to facilitate design and development across device types.

Designer Ed Wassermann defines a grid as “a basic structure, a skeleton for your design. They consist of invisible lines upon which your design elements can be placed. Doing so ties them together in an overall system and supports your composition — rationally.”

This definition encompasses the importance of a solid grid system in developing website projects. A grid should be one of the first considerations when planning a project.

When thinking of a grid for website projects, vertical columns should come to mind. The space between each of these columns is referred to as a gutter and functions as white space within the design. (The gutter is almost always empty with an exception for elements that span multiple columns, and in those scenarios where you are deliberately breaking the grid.)

Most projects account for a grid system that spans the entire width of the canvas, although some designers use a grid system only for the main container and treat the sidebar, if applicable, separately. The best plan of action though is to include the entire layout in grid planning, so that the sidebars size is consistent with the rest of the design.

Establishing a grid is “an important part of making the content accessible, and helping the viewer understand where to find the next piece of information within the layout,” says designer Sam Hampton-Smith. “It sets expectations and defines the rules, timbre and — in some cases — voice of the design. Think of a grid as providing the roadmap along which your viewers travel.”

5 Reasons to use a grid system for responsive design

The top reason designers don’t use a grid system is that they worry it will hinder creativity and visual flow. That’s no excuse not to use a grid. Creativity isn’t just dumping idea into a design; it should come with purpose. The grid sets a guideline for the creative process, providing valuable constraints that force organization and can even result in a quick build, saving time and money.

If that isn’t reason enough to encourage grid systems in your team’s project, here’s a little more support for using a grid in responsive design.

A grid:

  1. Allows developers to build mobile-first, even when the design was conceived in a desktop aspect ratio.
  2. Shows how elements will break at different layout sizes (you can practically see the breakpoints) as the browser decreases or increases in size.
  3. Allows you to stop thinking in pixels, and focus on percentage-based design, a concept at the root of the responsive movement.
  4. Gives you the ability to build standards and apply those standards to frameworks, such as Bootstrap and Foundation, which are grid-focused.
  5. Creates guidelines that you can apply to revisions later, so website tweaks won’t look out of place or inconsistent.

How grids work in responsive projects

So how does all this grid stuff work? Will you have to change the way you design websites?

It’s possible. Using grids for responsive websites does change your mindset. You should start to think in percentage and proportion rather than straight pixels. (It can be a challenge at first.)

Here’s how Google’s Material Design documentation describes it: “This grid creates visual consistency between layouts, while allowing flexibility across a wide variety of designs. The number of grid columns varies based on the breakpoint system. … The responsive grid focuses on consistent margin and gutter widths, rather than column width.”

The simple version of how it works is this:

  • The design starts with a certain number of columns (typically 12).
  • The gutter width (space between columns) is static.
  • Column widths flex and flow with the size of the browser (fluid grid), or …
  • Column widths are a set size and center on the browser canvas (centered grid).

So why a 12-column grid?

Wassermann explains: “For starters, because they break nicely into three, four and six columns, which is flexible enough to handle all sorts of content rather easily. On top of that, you can make them symmetrical or asymmetrical — which gives you plenty of options to either play it safe or to create some dynamic layouts that go beyond simple symmetry.”

You don’t have to use a 12-column grid, you can select any number of columns that works for your project. But the 12-column option has become the dominant style because it is flexible and allows designers to start every project on the same frame, with the same idea of scale. (This can help every project get off the ground quicker.)

Grid resources

Whether you can see them or not, grids are at the root of most design systems. This foundational element is important to understand as you move forward with projects and will make using frameworks easier and more intuitive.

Here are some great grid resources to help expand your thinking:

The key takeaway

The most effective website projects start with a grid system. If you aren’t using a grid or talking about the grid in the early stages of a project, go back and rethink your team’s design process.

A grid system can help you create better, more usable websites. Plus, a grid can help you design more consistently and efficiently, saving time and budget dollars.