How to choose: Bootstrap vs. Foundation

Patience is a virtue that Internet users — all three billion of them, according to the International Telecommunications Union—have seemingly lost. With mobile devices rocketing past PCs in terms of Internet usage, the importance of websites that embrace simplicity, ease of use, and compatibility across myriad devices has grown—and it is all done with the help of responsive web design.

Responsive web design, in which a website is designed with fluid grids, flexible images and media queries, was first coined as a term in 2010 by web designer and developer Ethan Marcotte. And now, as the number of mobile devices continues to grow alongside the frustration of Internet users and web design staff, responsive web design is on its way to becoming the de facto design principle; already 11-12% of websites are responsive, according to Guy Podjarny, chief technology officer of Akamai’s Web Experience unit. Though that seems like a low number, the adoption is impressive.

Making the decision to build a website using RWD is easy once you discover its versatility. Still, each web developer or owner must make a more difficult choice: which design framework to use, if any at all.

Front End Frameworks

A framework is a set of files and folders of code written in HTML, CSS, and JavaScript that helps to lay the groundwork for a website. Since many websites follow similar layouts and provide similar functions, using a framework eliminates the need for web developers to sit and code everything from the bottom up.

The most popular front-end frameworks in use right now are Bootstrap and Foundation, but there are many available from which to choose.

The Pros and Cons of Using a Framework

There is a heated debate among web developers and designers over whether or not frameworks are beneficial. The most common arguments for and against them are:

Pros:

Saves time and money: As mentioned, the web developer doesn’t have to spend time writing code. The frameworks are also generally free to use.
Great for rapid prototyping: You can get a functional representation of the site available for review in no time.
Tested: Since the frameworks were created by professionals, the code is tested—and it works in browsers it says it does.
Decision-making made easy: If you can’t decide on a design detail, the framework can help make it.

Cons:

Code bloat: Because there are default styles contained in frameworks, you must write new code in order to override them. This creates lots of unnecessary code.
Unfamiliar code: If you’re an advanced web developer, it can be frustrating to not know your own code.
Updates can wreak havoc: Frameworks are regularly updated and released, but updating can sometimes break a site and require frantic fixing.

Introducing…Bootstrap 3

Formerly known as “Bootstrap, by Twitter” and now just simply “Bootstrap,” this front-end framework was developed in 2010 by then-Twitter employees Mark Otto and Jacob Thornton as a way to refine the social media site’s internal tools. After serving as the internal style guide for Twitter, the idea grew into another entity all together and launched in August 2011 as a standalone, open-source framework. Bootstrap, though open-source, is still maintained by Otto, Thornton and a handful of other core staff.

Earlier versions added responsive functionality, but the latest, which was first made available on the two-year anniversary of its initial release, made it responsive by default. It has also embraced the “mobile first” approach, where design first starts on mobile screens.

According to BuiltWith, 7% of the top 10,000 sites use Bootstrap, but that figure is only increasing. A notable example of a site built with Bootstrap is Newsweek.

Introducing…Foundation 5

Developed by ZURB, an online product design company, Foundation was launched in October 2011 by the company to help web developers quickly get sites up and running on any device. Unlike Bootstrap, the first version released was responsive by default.

The most recent version, Foundation 5, was released in April 2014. According to BuiltWith, only about 1% of the top 10,000 sites use Foundation; like Bootstrap, however, that figure is on the rise. Square, a credit card processing and mobile payment company, is a great example of what the Foundation framework can do.

Before choosing between Bootstrap and Foundation, define your expectations of the website; using those expectations, you can see which framework is the best fit.

The Key Differences

With Bootstrap’s latest rollout, both frameworks embrace the mobile first design practice. They are both built to be customizable and responsive, so there is not much difference in that function. However, they do vary in:

• The Styles

As mentioned, there have been complaints that Bootstrap websites all look alike. This could be due to the number of predesigned UI elements and themes it offers, allowing web designers to pick and choose how the site looks rather than customize it. Foundation, on the other hand, offers fewer styles.

With Bootstrap, you’ll have to override the many default styles if you do choose to customize beyond the scope of what is already offered.

• The CSS Preprocessors

Bootstrap is built on Less, but offers a Sass port. Foundation is built on Sass.

• The Grid

Perhaps the most important feature of the framework, the grid system is what makes a responsive site responsive. With Bootstrap 3, both grid systems are mobile-first, 12-column fluid grids with similar features. Foundation does offer the block grid feature, which evenly splits contents of a list within a grid regardless of the screen size.

• The Units of Measure

Defining the size of typography and pretty much anything that appears on a page is an important part of the web design process. Bootstrap and Foundation define these sizes differently: Bootstrap uses pixels, a static unit, while Foundation uses rems, a relative unit.

Everyone knows what a pixel is, as it is the most commonly used unit of measure on the web. And it’s easy for a web designer to think in pixels, rather than in abstract relative sizes—but it’s not always to the benefit of the user. Screen sizes are no longer fixed; some believe it is in a website’s best interest to follow suit.

• Browser Compatibility

Bootstrap is compatible with Chrome (Mac, Windows, iOS and Android), Safari (Mac and iOS), Firefox (Mac, Windows), Opera (Mac and Windows) and Internet Explorer 8+. Foundation is compatible with Chrome, Firefox, Safari and Internet Explorer 9+ on desktop. On mobile, it is supported on iOS, Android 2 and 4, Windows Phone 7+, and Surface. The only difference here is that IE8 is still supported on Bootstrap and not on Foundation. It’s important to thoroughly review the analytics of your site to make sure you won’t be cutting out a significant portion of your user base that might be using IE8. If you are set on Foundation, there are “fixes” that can be made to the framework to make the experience better on IE8, but these will cost more hours of development to implement.

• Unique Features

Each framework has features unique to itself, but Foundation arguably has larger set of features.

Bootstrap offers: Jumbotron, badges, media object.

Foundation offers: Right-to-left support, off-canvas navigation, Abide form validation, Interchange responsive content, Joyride site tour, pricing tables.

• The Community

Bootstrap has a huge following, especially on GitHub. If you like having a hundreds of people pitching in and sharing ideas, then Bootstrap is the better framework. Foundation, on the other hand, has a smaller active community but features a forum on its website.

Both frameworks are robust and responsive. To simplify a complicated decision, ask yourself some simple questions:

• How fast do you need your website up and running? If the answer is “soon,” then Bootstrap is your answer.
• How skilled are you at coding? If the answer is “very,” then Foundation might be more your speed.
• How customized do you want your website to be? If the answer is again “very,” you might want to opt for Foundation.

Of course, these aren’t be-all, end-all answers. Decide what you want your website to be, and then fit in the framework’s capabilities.