The Responsive Web Series — Part 2: Responsive Grids
By Dave Roberts on Friday, January 24th, 2014
Welcome back to the Responsive Web Series! If you haven’t yet, be sure to check out Part 1 of this series, Why it Matters, where we discussed the importance of mobile access and how it affects your customer’s perception of you and your brand.
From here on out, things are going to get a little technical. For those of you who read part 1 and are looking for more information about how a responsive website can impact your sales or customer base, you may want to sit this one out.
Your first step to building a responsive website from scratch is to create a grid. In this post, I’m going to be discussing how using a grid-based layout system can set you up for a great responsive site. I’ll be including links to some great frameworks as well so that you can dig in right away.
By creating a grid, we are essentially breaking down our site into columns. Columns allow you to arrange content in a way which can easily adapt to any screen size–With the right CSS, they can become narrower on an older computer with a lower resolution, and can also “stack” on top of each other, creating a single-column layout ideal for mobile phones.
In practice, columns create a functional grid and are excellent for building geometric layouts. The above example uses a framework called Skeleton, which I will discuss in more depth later. It shows how the columns would be laid out in a sixteen-column scheme. The specifics are pretty math-heavy, but thankfully, all you need is one formula to describe your column widths:
Full Page Width – [ Desired Gutter • ( Number of Columns – 1 ) ] ÷ Number of Columns
While they do require a bit of math, column-based layouts are the future of responsive design. Not only will you be able to create sites faster, but when we later introduce Media Queries into the mix, the columns will flow seamlessly from Desktop to Mobile and everything in between. And thankfully, there are lots of great Frameworks out there for you to use. There’s really no need to reinvent the wheel when it comes to the columns themselves.
Using a Framework is a great place to start when you begin creating a responsive website. They offer out-of-the-box responsivity, so long as you build your HTML in line with their styles. In addition, a good Framework will supply you with lots of documentation and code examples to get you started.
Personally, I enjoy and regularly recommend the Skeleton framework. It’s perfect for custom-designed Personal, Business, or Portfolio sites because of it’s clean structure and customizability. It’s meant to be a framework in the strictest sense–A foundation on which to build upon, and meant to be overwritten.
Fun Fact: radius180.net itself is built on this very framework!
On the other hand, there’s more powerful and involved frameworks like Twitter’s Bootstrap. Not only is it responsive, but it also includes tons of UI element styles. It’s excellent for Web Applications and eCommerce sites because it includes rich and beautiful Form, Button, and Table elements, among many others.
Any of the many frameworks which are available to you are great choices, but once you’ve started with a framework, it’s best to stick with it until the end of the project. Trying to switch once you’ve started is difficult and time-consuming because the HTML and classes are already in place. The best thing to do is to test out a couple different Frameworks first and decide which suits your needs best.
Column-based layouts are essential as part of the responsive process. However, we need to introduce Media Queries in order to make them responsive. The frameworks I mentioned already include these for you, but you may find yourself needing to tweak a few things, and an understanding of how media queries work will be essential. I will walk you through everything in the next installment, so stay tuned!