Designing Responsive Layouts with SimpleGrid

As part of the redesign of our website, I promised to share some of my more geeky notes. The first topic I’d like to cover is our use of the SimpleGrid framework to lay out our website.

SimpleGrid is just one of three frameworks that we actually borrowed from. The first was HTML5 Boilerplate, which is jam packed full of good ideas and best practices, but needs to be thoroughly considered before use. The other was 320 and Up.

For today, I just want to focus on how I made a simple, responsive layout for one page of our site.

Laying Out with SimpleGrid

When you’ve got two weeks (and only a few hours a day) to rebuild your website, you want something simple. For a client website in production, I might not use it, since the design might well be more sophisticated, but it’s the best example out there of how to get started quickly building a responsive design. It’s a great tool for getting comfortable with the concepts.

Everything you’re building is some combination of 4 and 6 columns. You can mix those, to make wider columns, and the structure itself is very obvious and easy to read. In fact, I’m going to show you a simplified example of what the code looks like to the layout of our main blog page.

This is a pretty simple layout, based entirely on four columns, so it only uses a combination of the “slot-6” through “slot-9” classes. When they’re combined, such as in the main post content, you just write “slot-7-8-9” and you get 3/4ths of a page width. So far, it’s not much different from many other CSS frameworks.

But look at what happens when you resize the page. The grid sizes change, and they’re automatically optimized for several widths quite well. But when you fall below a certain threshold, the columns collapse, and you have a single-column layout. But the best part is that it arranges the blocks in a logical order. First you’ll see the title, then the author meta information, then the article, then the four recent blog posts, then the footer. It’s what you would expect if you were to take the time to build an entirely different page layout for the iPhone.

The nice part is that you don’t have to. Conor has done all the hard work for you. You get this single-column layout for free.

Building Mobile First

Now, the last thing we have to do to feel good about this page is to follow the sage advice of Andy Clarke and others. That means emphasizing the mobile version first. We’ve laid the groundwork by making sure that our design loads the layout for the mobile version first – a version we’ve designed that’s a bit simpler, a single column, and without the big heavy slow images that we can take for granted on our computer. When we’re using our phone, we don’t have time to wait for massive images that won’t fit on our screen. We want simple pages that load quick.

By using a CSS3 technology called “media queries,” we can do that. We simply write a rule that says “if our visitor has a big display, then load the fancy stuff.” In this example, we might not want all of those extra fancy circular thumbnail images to load – our visitors with mobile browsers haven’t got time for that stuff, and it’s not necessary. It just looks pretty.

There’s a lot going on here. When you start working with responsive design, you have this aha moment when you realize how many possibilities are open to you. You can find out what device a visitor is using, what size their display is, even whether they’re holding their phone in portrait or landscape orientation.

It’s About the Future

You might be asking yourself why we keep bringing up this “responsive design” stuff. Why is it important? Don’t we just want websites that look pretty?

It depends on your website, and who your visitors are. Every site is different. But in general, the trends are clear. Last year, mobile visitors accounted for about 3% of traffic. Right now, it’s almost 9%, and trending upward. By the time we launch our next website, it will probably be over 10%. By this time next year, 15% is a reasonable minimum. You can see where this leads.

Source: StatCounter Global Stats – Mobile vs. Desktop Market Share

In the business of Web Design it’s critical to know where technology is headed. Browser usage statistics are only one reason to design for mobile, but it’s a good reason. The days of one-size-fits-all websites are over, and the sooner we accept that, the sooner we can start building websites that make all our visitors happy.