The ubiquity of responsive design has a direct correlation with the rise of frameworks. Frameworks made responsive design easier to grasp and get started with by producing simple patterns users could follow. Lowering the bar of complexity was necessary to allow engineers and designers to grasp responsive design concepts. If frameworks didn't drive the responsive web, we'd have far, far fewer responsive sites on the web today, and the ones we did have would be far less performant.
Make no mistake, frameworks didn't invent responsive design, but they gave everyone the ability to design responsively with ease. Without frameworks, we wouldn't be where we are today.
We Needed a Framework of Rules
Ethan Marcotte blew the collective minds of web engineers and designers in 2010 with his A List Apart article, Responsive Web Design. Long before thousands of articles written in publications ' such as Business Insider or Forbes ' we were introduced to the rather unheard of idea of using media queries to style sites differently based on screen size. What a wonderful idea then and now. Five years later, the concept is still capturing the interest of developers everywhere.
While the idea of responsive design seemed like an easy one, it quickly became clear that there were still hurdles. Some engineers did great and began by writing simple sites. They took media queries into account while designing so those sites looked spectacular on mobile devices. Meanwhile, other devs began quickly retrofitting older sites with media queries for smaller devices. Often this ended up with tons of messy overrides and piles of fixed width media queries. Responsive design seemed so easy: the thing on the right goes under the thing on the left, but then how do I handle navigation, or image galleries, or modals?
We needed a set of best practices, a framework of rules — a foundation in which we could build all of our responsive sites on.
Along Came Foundation
ZURB was having the same trials and tribulations as many of these developers in 2010. We were drawn to Ethan's post. Being a Design Studio we had struggled with the same ideas and problems with our clients. How do we prevent the need for three different websites with three different codebases? We began building our ZURB coded style guide and quickly decided this was something other people needed.
We eventually launched Foundation, a fully-responsive framework that provided to developers a structure to build responsive sites. A responsive grid was the perfect tool to teach the concepts of responsive design whilst having components with built in styles for different screen sizes. ZURB was rapidly producing responsive sites, members of our open source community were too, and even other frameworks later went responsive. More frameworks supporting responsive design meant more sites being built responsively. That made it easier and easier to get larger and larger companies to buy into responsive design as a viable option.
We also wrote our own A List Apart article nearly two years after Ethan's article and received tons of positive responses. For many, it was the first time they'd seen the ease in which somewhat complex designs could be created.
This article is fantastic and I really like the approach you are taking with Foundation. This can really enhance the workflow for responsive web design and conceptualizing breakpoints is the hardest part not just for designers but clients as well.
Also, semantic grid system looks really cool. I am working on a framework that does something similar but totally agree preprocessor output can get messy. Sass 3.2 with silent selectors and @extend makes things 'much cleaner':https://gist.github.com/2184518
It was great helping designers with the aha moment of responsive design and wonderful creating a dialogue with people attempting to do similar things. We've created three more versions of Foundation since that article, but with every release we still hear from people who have finally had responsive design click for them. With every release we feel we're getting closer to a web in which responsive isn't an if but a must.
From the Responsive Web to the Responsible Web
Frameworks are great for pushing important ideas out to the masses. They give people a system in which to use ideas scattered across parts of the web. Frameworks create a community that further nurture people, and they allow a code base where the code can be discussed. We're once again inspired by the work of so many amazingly passionate people in all parts of the web and want to use Foundation to further push web standards.
We're focusing the next version of Foundation for Sites on making websites more responsible in the way they handle markup, export code and handle accessibility. We've dabbled in these areas over the years, with our accessibility push for 5.4 and our Sass overhaul in Foundation 3, but are committed to making these the next big changes for framework users. We'll be better helping our users rapidly prototype using presentational classes, but stress the importance of using our Sass mixins to create semantic markup prior to launch.
We've always offered the ability for users to selectively import our Sass files, but are giving people more options to be even more selective and a build system where they can ensure their exported code is only the code they used. Last, but certainly not least, we're re-coding Foundation so that every component and code snippet is accessible to users with impairments.
We're very excited for the next version of Foundation for Sites and the next versions of the other Foundation Family members as well. We're thrilled where Foundation is now and excited to make it even better. And with Google making a huge push on April 21st to give responsive sites a little extra search engine juice, frameworks are needed now more than ever.
If you have a thought or an idea on how to make Foundation better than ever, then we want to hear your voice. Comment on this post, shoot us a tweet or comment on one of the many feedback threads we've created on our Github. You can help us build the best Framework in the world.