September 6, 2018
Bootstrap vs Foundation: Which RWD Framework Is for You?

What is the best responsive web design framework (RWD)? It's a pretty subjective decision. So instead of telling you which one you should choose, let's look at two of the most well-known ones and provide some tips on how to choose the right one for you.

2 Responsive Web Design Frameworks

There are too many frameworks out there to mention in one article. We'll talk about the two most popular (both supported in Ingeniux CMS and its visual designer, Page Builder), plus one additional one that can help get a beginner started.

Bootstrap 

Bootstrap is the most well-known RWD framework. If you are a developer or even just a techie-wannabe, you’ve heard of it. It was created by Mark Otto and Jacob Thornton, a developer and a designer at Twitter in mid-2010, and then released as an open source framework in 2011.

The latest version (4.1.3 as of July 24, 2018) includes jQuery, Bootstrap JS, and Bootstrap CSS, making it a large file size to download. 

Bootstrap is probably the most documented framework with plenty of resources available to help you use it including tutorials and documentation. There are also a lot of third-party plugins, theme builders, and extensions. One place you might like to check out is the Bootstrap theme website where you can buy themes built by the Bootstrap creators.

Some key features:

  • Wide variety of templates available
  • Possess fluid as well as fixed patterns in its grid system
  • Supports the latest, stable releases of all major browsers and platforms. On Windows, it supports Internet Explorer 10-11 / Microsoft Edge.
  • RWD and mobile first
  • Supports accessibility (WCAG 2.0 (A/AA/AAA), Section 508)

Foundation 

Foundation is the second most well-known responsive design framework. The RWD framework is now at version 6.4 and half the file size of version 5. It also provides not only code for building responsive websites, but a codebase for building responsive emails.

The latest version offers developers a lot of customization including Sass Grid, Navigation system, and optional Flexbox grid. Plus, there’s plenty of documentation to help you build your sites including building blocks and templates, as well as quick start projects.

Some key features:

  • RWD, mobile first and semantic
  • Supports Chrome (Mac, Windows, iOS, and Android), Safari (Mac and iOS only), Firefox (Mac and Windows), Opera (Mac and Windows), IE9+
  • A11y Friendly – for accessibility, including Section 508
  • A customizable and modular menu system
  • Lots of templates and plug-ins out of the box

What to Consider When Picking a Responsive Design Framework 

According to BuiltWith, 17% of the top 100,000 websites are using Bootstrap for their websites, and 5.6% of the top 100,000 websites use Foundation. Does that mean that Bootstrap is better than Foundation? Not necessarily. Foundation is considered a bit harder to work with while Bootstrap is known as the best framework for beginners. However, Foundation is used by many organizations including Amazon Jobs and Pixar.

How do you decide which RWD framework is right for you? Ask yourself these questions:

  1. Is the framework well known and is there plenty of documentation and samples available to help you use it?
  2. Are you a beginner? If yes, then you’ll want a framework that easy to use and has plenty of training material and community support to help you work with it.
  3. Is it kept up to date regularly? If the framework hasn’t been updated in the last six months, then you might want to look at a different one.
  4. What are you trying to do with the framework? Each framework provides basic capabilities, but then may add features that make it unique (like Foundation supporting email). Understand why you want to use a framework and what features are most important before you decide which one is best for you.

If your CMS provides a tool for designing your web pages and templates, then it should support one or more RWD frameworks. For example, Ingeniux CMS 10 includes a visual designer that supports responsive web design. It supports both Bootstrap and Foundation.

Note: The below articles are great resources to learn more about RWD frameworks and how to select the best one:

Posted by David Hillis
Subscribe to Blog

Subscribe to the Ingeniux blog for the latest in web experience management. 

Subscribe to Blog