You've probably noticed that we're kind of big on responsive design here at ZURB — we've written about it, talked about, we wrote the first framework for it. On top of all that, we design responsively for just about all of our properties and clients. As big as we are on responsive, and as prevalent as responsive design has become recently, it's important to remember that responsive design isn't old.
Ethan Marcotte's article on Responsive Web Design for A List Apart is about three-and-a-half years old now and while that may seem like eons in Internet time, in real world terms that's not a whole lot of time. And certainly not for an entire industry to catch up. Responsive design is still catching on, and being explored while being defined to a large extent.
If you take a look at the top 20 worldwide sites according to Alexa, only one (Wordpress.com) is responsive. While some have mobile sites they direct you to, responsive, device-agnostic sites are not ubiquitous yet and that's okay. We still have some things to figure out.
Patterns, Practices and Patches.
We do have a lot more toys for responsive design than we used to. Frameworks have popped up (including our own — one of the first), pattern libraries have been created. Most of the technology has been put in place within industry specs and browsers to ensure that responsive design works well and solves real problems for developers and users.
Responsive design has even driven interaction patterns that have become common for responsive and even non-responsive sites. Things like off-canvas navigation and the now common "hamburger" icon were either developed for, or popularized by, responsive design and sites using that paradigm. So what's next? What's missing?
Speed, Baby. Speed.
Everyone likes fast stuff. Well, almost everyone. And responsive design, for all its awesome qualities, does suffer from a speed problem — and not just speed of delivery to users. Responsive design does have speed of delivery (read: optimization) issues that are starting to be solved, and we'll talk about those, but we're also talking about speed of development and speed of responsive design education.
The rate of advancement on the Web is accelerating (in stride with the pace of the Web) and in order for us to keep up we need to pick up the pace in all aspects of what we do. We need to discover new tech faster, get it built quicker, and get it to users sooner. That's part of why we built Foundation; to learn responsive design faster and to build things faster. How else were we going to hook our clients up with some sweet device-agnostic sites? Foundation was, and is, a way to standardize around a consistent, effective codebase — something we and others, given the framework's popularity, needed.
Foundation 5, the latest version of our responsive front-end framework, comes out next week — and with this release, speed was the name of the game.
The Fastest Foundation.
Foundation 5 is fast. In all the ways we've been talking about. Check it.
Faster to Learn
For 5, we've worked hard to make Foundation as fast and easy to learn as we could. Starting with the most obvious learning component of any open-source tool, we rewrote the documentation for Foundation with an all-new style and template. There's new and more detailed code examples with entirely new sections that you can browse through and just take it all in.
We also wrote a new "Getting Started" guide that'll take you from having nothing set up to having a complete Foundation environment to build or hack on. We've always had a "Getting Started" guide; but this one ought to help you really get started. Crazy right?
If you have questions about Foundation we're also finishing up a brand new Foundation Forum where you'll be able to post questions, get help, and provide help to the entire Foundation community. We'll be on there, too, answering questions and posting funny cat gifs.
Finally, if you really need to get going in a hurry, we now offer training courses on Foundation as part of our ZURB University. Foundation Basics, Advanced Foundation and Sass are all courses you can take to learn all about how to build with Foundation, right from the horses mouth (the ZURB team that built the framework, including yours truly). And it's an act we'll be taking around the world soon. It's pretty rad.
Faster to Code
While we enjoyed making Foundation faster to learn, we have to write a whole lot of Foundation code here at ZURB. That means making it faster to write was pretty near and dear to our hearts so we bet you'll like it too.
We've added new or updated components that remove some of the manual work you had to do before, including a medium grid (which won't require you to use custom breakpoints and media queries for that) and semantic breakpoints (much easier and faster to use visibility classes and mixins).
We also built all new templates for Foundation 5 so you have a speedy starting point for your projects, if you like that sort of thing. They're all mobile-first, all documented and totally easy to change.
Finally, for the nerd in all of you, we've built a new command line tool that will let you spin up Foundation projects preposterously fast, and those projects will now use Libsass, a back-end Sass compiling library that will dramatically speed up how long it takes for your SCSS changes to take effect while you work.
Faster for Users
If we're writing a lot of Foundation code (and you are too), just imagine how much that code is being delivered to users. Foundation powers hundreds of thousands of sites, and the time and bandwidth required for that in aggregate is pretty extreme. We worked diligently in this release to try and streamline the framework as much as possible, and to give you the tools to optimize your sites like you never have before.
Interchange, our responsive images plugin, has been augmented in Foundation 5 to allow for a whole new level of responsive delivery. In addition to delivering just the right image, you can now use Interchange to deliver entirely different sections of the page to different devices. Just create some different HTML partials and have Interchange swap them in for the right type of device. Want to deliver an interactive but heavy-load Google map to desktops, and a small, optimized image to everyone else? No problem with the new Interchange.
On top of that (and that's a big that) we've also added a ton of support in Foundation for hardware acceleration wherever possible. Smoother animations and transitions across the board that use less power on devices and feel dramatically faster for users. That's a win.
We even redid Foundation's visual style to be simpler, cleaner, sexier and faster to restyle — all with fewer CSS rules and effects to burden devices or the style sheet.
Must Go Faster, Must Go Faster.
There's a lot more to Foundation 5 than speedy things alone, but that was a big focus of ours. Speed is the next great opportunity for responsive design: speed of education, speed of development, and speed of delivery / use.
Many of the most popular sites in the world are not responsive, in fact many have no consideration for mobile at all. Responsive design is, in a lot of places, still ill-understood, slow to learn, cumbersome to write and challenging to test.
Beyond the challenge of just creating responsive site, consider this: the average mobile broadband speed in the US is only 2.8Mbps, compared to a little over 8Mbps on wired or fixed devices. While the US is certainly not the fastest country around for mobile or other broadband speeds, it's still in the top 10. In fact, the global average connection speed is 3.3Mbps, just a bit faster than the average mobile speed in the US.
If Foundation 5, along with other responsive frameworks, can help speed up education for this style of design, we're making serious progress. This will speed up development for small and large businesses and help users get better tailored, readily available, and better designed sites — which sounds like a win to us. Stay tuned for Foundation 5 next week, we hope you like it.