Foundation

With the explosion of smartphones, tablets, and other web-enabled devices, more and more people are using mobile devices to hop online. The mobile traffic is expected to leave desktop traffic in the dust by 2013.

Consider this — mobile users are expected to triple to a whopping one billion. Websites can no longer afford to be stuck in 960px Photoshop templates. Not designing for mobile would be suicide, we'd be closing the door on a potential one billion customers. Our designs can't be trapped in only Firefox, Chrome, Safari, and Internet Explorer. They have to look spectacular on smartphone and tablet operating systems, such as iOS, Android, and Windows.

One thing is certain — the old ways of web design no longer apply.

There has to be a fundamental shift in the way we design and how we prototype. We delved deep into this problem and came up with Foundation, but it didn't start life out as a responsive framework. Far from it.

Prologue to Foundation

Foundation, believe it or not, had its origins in the ZURB style guide. Years ago, we decided that it was time to wipe the dust off our boiler plate of code and our old framework grid, giving them a nice polish. We wanted to make it crystal clear on how we used CSS in our design work. However, as we really got into it, we figured we'd better do a little bit more than give it a new sheen.

We decided that what we needed was a coding framework that allowed us to rapidly prototype. To that end we took all of our best practices, global CSS, jQuery plugins and common elements from around the web and Frankenstein'ed it into Foundation. At the time, Foundation a was fixed grid, and wasn't responsive one bit.

And then something wonderful happened …

Second Foundation (or Foundation 2.0)

Hal 9000: What is going to happen, Dave?

Dave: Something wonderful.

Hal 9000: I'm afraid.

Dave: Don't be.

"2010: The Year We Make Contact"

That something wonderful wasn't Jupiter being ignited into a small star. It was the brave new world of mobile devices. The landscape of devices had changed and we knew we needed to have a more functional design, where the way we comp works on different screens, in different orientations. We had to transform Foundation 1.0 into something wonderful, something better than just a fixed grid. We had to make it fluid and responsive.

That meant it had to be a rock-solid, 12-column grid foundation (pun fully intended) that adapted to different screen sizes through precentage-based widths as well as media queries. We had to be able to quickly lay out complex pages without fretting that they would degrade on an iPhone or Android tablet. We had to have a prototype to see exactly how our designs would look on all these different sizes and devices. That's because everything changes once you can see and touch your designs.

With that in mind, we went a hacking and came up with Foundation 2.0. However, for designers to prototype faster than a speeding bullet, they need more than a grid. That meant typography, buttons, tab, pagination, image grids, forms and more had to be included.

Foundation And Code

Foundation couldn't just be all about prototyping. It had work equally as well for coding up an entire site. We've used Foundation to build several of our own sites, such as our blog. Foundation was a big help when building the sites for a few of our apps — Spur, Reel, Axe, and Influence, to name a few. Foundation also came in handy when we built the Word Dynamo site from Dictionary.com.

We really put Foundation to the test during last year's ZURBwired design marathon, where we built the site for Rebekah Children's Services within 24 hours

.

On Foundation's Edge

Since releasing Foundation, we've continued to refine and update the framework, using Git to keep track of versions and comments, but also using Github to keep on top of bug reports, feature requests, discussions and contributions. We've deployed many updates, including a fancy mobile grid.

Foundation and the World

We've also been making the rounds, speaking about Foundation and how it helps people with responsive prototyping. Take a look at Matt, our lead engineer, speaking at SF HTML5 Meetup :

Bonus points for guessing what science-fiction book series inspired the titles in this post.

Check out more of Foundation's features on the Foundation website, foundation.zurb.com. You'll find examples, case studies, documentation, Github repo and a downloadable scaffold to start from.

Check out Foundation »