As we all know, the web development world has rapidly evolved since the launch of the iPhone. Apple’s full browser capabilities rid us of text only web surfing on our mobile phones and allowed us to see a website as it was intended, however small the display was. Two-finger pinch to zoom in and out was amazing. WE LOVED IT! It took the world by storm.
The evolution of the full browser smartphone experience then led us to “m.” or mobile only sites where developers had to craft a completely different set of front-end code to display for ease of mobile use. That user experience (UX) was much better than trying to pinch, swipe over, click a link and do it all again. In general it was a much better experience but required us to make changes in two locations and typically didn’t allow for the client’s branding and look/feel to transcend across platforms.
Somewhere after the launch of tablets, the responsive design era was introduced. Sure we could have used media queries to determine screen size, screen type and browser to decide what to display to the user. BUT, that required a ton of code writing and made it truly cost prohibitive, as only early adopters would understand why that investment in their user interface (UI) would be worth the time and money. Then came open-source frameworks like Bootstrap (currently at v3.3.1) and Foundation (currently v5.4.7).
Now responsive design comes up in nearly every meeting, every client conversation and every review. Our clients are more knowledgeable and have begun to ask which framework is better; Bootstrap or Foundation? At this point I’d say that Bootstrap and Foundation are the two most commonly used front-end frameworks. They are different code bases but do similar things. Our team uses both. We’ve gone back and forth on “which one is better?” and haven’t really said one beats the other.
Initially our developers began working in Foundation and really liked the features and simplicity of the code base. A few key elements that we loved immediately in our initial evaluations were the use of rems, the flexibility for customization and their tremendous block grid system.
As a “non programmer” it took a bit for me to grasp these concepts. Not being the one that’s writing the code I couldn’t really provide valuable insight into our initial framework reviews but I did understand the value of these three main differences:
- Rems, ems and pixels: some true code junky value. The ability to set a relative relationship of the size to the size of the default was pretty valuable. As you scale things up and down they grow in size proportion relative to the rem value. It’s really pretty cool stuff and truly helps in the relationship of fonts and other elements as the screen size changes.
- Flexibility of Customization: Bootstrap has a little more structure, seems to be a little more fleshed out to control various situations. That has it’s pros when you are trying to knock out functionality and can go with the default or slightly modified look but creates some minor issues when you want to be able to do what you what, when you want. So Foundation had some advantages there on what we could do stylistically.
- Block Grids: Man the entire concept of responsive design is breaking out the primary viewport into 12 div sections. Trying to get designers to think in 12 slices, 12 evenly spaced zones, 12 grid lines was truly challenging. BUT, that same core functionality also makes it easy if you want to take on-screen data and control how it floats in different screen size relationships. Foundation wins in their grid system. Its one of the areas we truly found more simplistic to implement with far more flexibility and control.
After several projects in Foundation, we were compelled to use Bootstrap for a few ecommerce projects where the shopping cart master templates and CSS were built using Bootstrap. For us to customize the look, feel, onscreen display and responsiveness would have been a complete overhaul to change it to Foundation. So we did what we do using Bootstrap. That led us to far more Bootstrap development over the past year or so. Our team has truly enjoyed working in the framework and has been able control most functions without major issue.
We continue to see more and more people using Bootstrap and so our team continues to be well versed in the code base and how we can use it to create state-of-the-art responsive sites. The development community seems to be significantly larger for Bootstrap and therefore there is far more online “help” for Bootstrap code. One of the sites we frequent is http://bootsnipp.com, which is a central repository for developer solutions for the Bootstrap framework.
Oddly enough, they are both great but have some fundamental differences. One isn’t necessarily better than the other; they just fit better in different situations. I think if you ask our team which one is better they say, “if Bootstrap had Foundation’s block grid system, we’d be all Bootstrap.” Personally I’d at Ed McMahon on the Publishers Clearinghouse envelope and say “Irwin M Fletcher, you choose.”
If you aren’t old enough to know and appreciate that movie line reference you really need to watch Fletch. It’s one of Chevy Chase’s best comedies, from an era before smartphones; when Bootstrap meant funding a business and Foundation was a solid footing for a building or business.