Designing a Responsive Grid in 2016

Responsive web design is maturing. In the past 5 years, front end development techniques have evolved and so should our design approach. I’ve participated in the responsive evolution as a UX Designer, including working on responsive and adaptive websites like lexus.com and oscars.org.

Today, I am working at Gaia in Boulder, Colorado. Gaia is a streaming video platform for conscious media. We are in the midst of a big web redesign which includes a shiny brand new responsive, fluid grid, optimized for any device. On this project, I’ve had the opportunity to be pretty thoughtful about our responsive grid. The following is a rundown of the grid we designed and why.

The False Start

For our first pass at creating a responsive grid we designed templates based on iOS devices sizes with outside gutters that were one half of the size of inside gutters. This approach was familiar and somewhat accepted by industry standards in the past few years.

What We Did Right:

1. My love of 12 columns (vs. 6, 18 or 24 for example) is a bit arbitrary but I’ll stand by it because 12 columns are super manageable because rows of thumbnails at any ratio look nice when they are 5, 4, 3, 2, or 1 across.
2. We did some math and picked a few grid options. We wireframed our site’s core layouts these at low fidelity across the aforementioned options. Quick wireframing at low fidelity FTW!
3. Finally, (or so we thought at the time, ha!) we picked one. We picked one with a good amount of room between content blocks across screens sizes and layouts because we wanted the site to feel light and airy.

What We Did Wrong:

1. There is a very real pitfall of designing to iOS device sizes, especially if those sizes are the upward limit of each responsive range. If your canvas is bigger than the smallest it will ever be “in the wild”, it is highly likely that you will make design decisions that break.
2. We settled on the outside gutter being ½ of the size of the inside gutters. This is a traditional way to build grids but ultimately it isn’t good enough because in a 12 column grid, if your content starts at the first column it gets pretty close to the edges, especially on small screens.
3. Initially, I fell into the habit of setting up mobile and tablet comps at retina resolution but I realized since we aren’t slicing assets to make buttons these days it doesn’t really matter. All of our asset are either images from a media library in the cms or they are svgs. Everything else is live type and css. I’ve found that it is much easier to manage artboards in Sketch for a responsive site when your mobile comps are 320px wide, not 640px wide. That way, every screen is relative.

The Regroup

We learned from our false start. We needed a different, better, more modern responsive grid. We took the following into consideration:

Our front end dev team are so future thinking that they said they didn’t need one grid for the whole site — they said we could have different grids by page or even component. However, I’m a conservative designer in the sense that I want the site to have a perfectly consistent visual language including color, fonts, buttons and spacing. This isn’t some anarchy design team where we lay grids on top of whatever design components we feel like creating based on our mood. So we are moving forward with creating a consistent grid and we will create exceptions if needed.

This round, we knew we had to design at the lowest threshold of each breakpoint range. To be specific, our XL size range is 1070px — 1400px, and our static comps are 1070px wide.

If your canvas is bigger than the smallest it will ever be “in the wild”, it is highly likely that you will make design decisions that break.

Nested Grids. These are awesome. We chose to leverage nested grids because sometimes your design does not perfectly fit with the grid. For example, you might need an element to be a just a little more indented than the rest of the content. You could rely on padding or margins BUT you want it to be part of the fluid grid. Nested grids solve that problem.

Bootstrap 4 has evenly spaced breakpoints by default. We liked that idea. Bootstrap 4, however, has 5 major breakpoints by default and we thought that might be a little more than we needed. For our project, we decided that for each screen, we would have four comps: Small, Medium, Large and Extra Large. Each of these static comps represent a range of sizes. Each range is the same:

Small: 320px — 569px (249px range)

Medium: 570px–819px (249px range)

Large: 820px–1069px (249px range)

XL: 1070px-1319px (249px range)

Content First. There are plenty of articles on this popular concept. I’m not totally in love with the idea of content first because it feels super passive. As a designer I like to think I am controlling when the content will break not just reacting to when it breaks. However, there is merit here and that comes in to play when we prototype our layouts.

We repeated the prototyping process:

• Come up with a bunch (3–5) of grid options that seem good. Our grid options had varying column widths, gutter widths and breakpoint ranges.
• Wireframe & prototype key layouts to see when they break and how they work. This is a true content first approach. For the wireframing / prototyping piece we used a newer Adobe tool called Reflow. The program is super buggy and is not one of our core team tools, but it was truly useful for playing around with different layouts and determining when they break.
• Pick One

The Final Grid

Ta Da! It looks like this and when it launches it is going to be baller.

Final Advice

These are the key things to remember when figuring out your responsive grid:

1. Design at the lowest threshold of each breakpoint range. If you design at the upward threshold of your breakpoint range, it is highly likely that your design decisions will break.
2. Test 3–5 key layouts by wireframing at your proposed grid at a bunch of screen sizes. It’s easy to experiment and it will help you find pitfalls early.
3. More complexity equals bigger scope which equals longer timeline. And time is money. More breakpoints, more problems. This is a pretty simple concept that is easily forgotten by clients and creative alike. Keep it as simple as you can. Did you know that Lexus.com only has two main ranges: small screens and large screens? And that site is beautiful.

Quick Little Responsive Glossary in Case You are Like WTF

Responsive: A website with a fluid grid and one front end code base for all screen sizes. Container widths are often defined as percentages vs. pixels. Reference Brad Frost’s life.

Fluid Grid: A grid that scales with browser size. There are a lot of grid generators out there they are mostly OK. Gridpak is one.

Breakpoint: In responsive design, this is the point at which your site changes layout. As you shrink the browser window down, everything typically scales until you hit a major breakpoint at which point the site reformats. For example, if you look at this site https://cottonbureau.com/ on a desktop browser, then scale the browser down, there are four T shirts, then 3, then 2.

What do you think?

If any designers or developers out there have their own lessons learned while coming up with a responsive grid I would love to hear about it. Gritty details are welcomed.