Rapid prototyping in browser for responsive web design helps to provide a more “real life” explanation to web page behavior. There are quite a few responsive frameworks that are out there in order to help jump start this process. Some of the more popular ones out there right now are Zurb’s Foundation, Twitter’s Bootstrap, Skeleton, and Simple Grid to name a few.
The one I am going to focus on today is Zurb’s Foundation Frameworks. Simply because it is the one that I have the most experience using and find it to be awesome. The framework is now on it’s fourth version and will probably be on the fifth by the time I am done writing this. I started using the setup when it was on it’s third version, and it brought a lot of interesting things to the table.
Like many of the above mentioned frameworks, Zurb’s Foundation has a done a lot of quality control testing. Their cross browser testing and fall back features help to give you a leg up when you are looking to get to the prototyping phase in your project. They also do a great job at explaining it’s 12 column flexible grid system. Once you get a feel for how the grid system is working you can take it from there and further customize it to fit your design needs. Understanding their system allows you to get into the browser and start working up functional wireframes. This is key because it helps to show how page behavior work earlier in the process and helps when making design decisions.
You can check it out for yourself here and see some of what I am talking about: http://foundation.zurb.com/.
In the docs section on the Foundation site they have numerous page templates built out that you can use. I actually took some of the templates that they have offered and combined them into system. View the example here: http://cartertilman.com/wireframes/foundation/home.html. You can navigate to other pages in the template system by using the footer navigation, the top level navigation is not quite functional. This setup is based on the 3rd generation of foundation, but the responsive behavior is generally the same as the fourth. The system I started to build is by no means perfect, but it is based on their templates and features. Feel free to use it, build upon it, correct it, break it, whatever you want to do.
I think one of the best features of what Foundation brings to the table is their documentation. They offer a ton of material, examples, and case studies on how to use their framework. It helps to provide a clearer picture of what you are getting into before you sink any design and or development time into the project.
Some people have also started to create some WordPress themes using Foundation, which is great. You can find an example using the third version here: http://320press.com/wp-foundation/. Also here is a version that is using the fourth version of the framework: http://fwp.drewsymo.com/.