Recently, we converted our company site to a Responsive Web Design, as an experiment to see how hard it would be to convert over.

We first took a stab using some of the techniques in the Responsive Web Design book, which is awesome, and amazing the things they accomplish, but we had trouble working through the fluid grid part. The percents did not workout for us. So we really spent a few hours switching to GetSkeleton, and it worked great.

First off, it is very similar to 960grid, which we use for most of our apps. The naming conventions of the the fluid grid are a little different, but easy to swap out.

Instead of

.grid-6

You place

.six.columns

And you need to wrap everything in a .container tag.

<div class='container'>
  <div class='six columns'>
    ....
  </div>
</div>

Remember, that just because you switch to a fluid grid, your work is not over, you still have to manage the sizing of the images, videos, iframes, etc

In your css add this:

img, video, iframe { max-width: 100% }

This will work in all modern browsers, for legacy browsers there are some hacks. Check out “Response Web Design”

Also, we added fittext.js to shrink some of our headlines as well trim down to a small size.

This process really made our site look great on Web, iPad, and iPhone!

Check it out in all of your devices: http://www.jackhq.com