Responsive Design is the new(ish) buzz phrase right now, and it’s something I doubt will go away anytime soon. And that’s a good thing because it presents what I think is a fine solution to the dilemma we’ve had for some time now, the translation of our content to a variety of screen sizes.

The merits of Responsive Design deserve an article on their own, so I’ll leave it at that for now. But recently I was working on a site for my musical work, FairFlame.com, and I wanted to make it as accessible to my audience as possible. I had done some work with Media Queries before, and though the results were fine I wanted to think about them a bit more from the beginning instead of after the standard view was completed.

I know a few people are talking about designing for mobile first, and I think that can be a great approach too if it fits your path. For me, I wanted to handle them both at the same time to be more efficient with the HTML as well (not to imply that any other path isn’t…)

The 960 Grid System

In the past I’ve relied heavily on the 960 grid system. And while I love that system for fixed widths, it just didn’t make sense to override styles for the site’s many layers of building blocks. And I didn’t want to get into enabling some style sheets in certain scenarios and others in yet another, so I just left them out and went back to life before the 960. Certainly you could use this concept along with the 960, it’ll work, you’ll just have to write declarations like:

.grid_16 { width: auto !important; }

The General Structure of My HTML

So I broke my sites down into layers, the header, the content, the secondary content and the footer. And I determined that the easiest way to handle both the views was to build it based on percentages, mostly 100%. So as an example of the section, I’m going to use the content DIV.

All of the main content goes here.

This is a list of articles, in my case, but it could be anything in yours.

So the general idea is that I have a layer called “content_wrapper” and it spans the entire width of the screen without margins. There is a DIV inside of that with the class “contents”, and it wraps just the content in this section of the page. Then, there are the two sets of content, “content” and “recent articles”.

Now, traditionally, I’d have written all of my style declarations together and then overridden them later as necessary. But in my new method, I use Media Queries almost as an if statement. So the standard declarations look like this:

#content_wrapper {
clear: both;
margin: 0;
width: 100%;
}

#content {
background: #000;
background: rgba(0,0,0,0.7);
}