Using Foundation CSS Framework for Responsive Site Design

Mobile users are becoming increasingly difficult to ignore. And in fact the rate of website optimization for mobile versus the number of mobile users is absurd. The visitors are flocking to sites in droves via their mobile devices, but only a fraction of sites are at all optimized for mobile. This realization recently sent me searching for a solution.

One of the challenging aspect of optimizing for mobile is that there are so many different screen sizes and dimensions. A fixed-width approach probably won’t work, unless you cater to the smallest possible size of screen. So the search is on to find a way to make fluid sites without losing the structural control we need for design purposes. Enter Foundation, a CSS framework that promises to be easy to use, powerful and flexible for building sites for any device. Yes, ANY device. As the collection of screens on the sites homepage showcases, Foundation provides a grid system that can adapt readily to smaller screens.

I for one like CSS frameworks and have used 960.gs on several recent projects. The problem with most CSS framework however, is that they are focused strictly on making sites for online viewing and have little or no benefit in mobile site optimization. Some even make scaling sites more difficult than not using a framework at all. I like the idea of Foundation because it could take some of the guesswork out of the process of mobile optimization.