Which Responsive Framework is Right for You?

It’s pretty much impossible to find a mobile website discussion today that doesn’t include Responsive Design. Responsive Design ensures the pages of a website adapt to the size of any device that a person might use to browse that site. Instead of displaying a specific web page based on the device, the web page adapts and optimizes itself based on the devices capabilities.

Elements on the page can resize, reorder, shift positions, or hide based on what device is viewing them.  In order to leverage these capabilities, many developers have begun utilizing Responsive CSS Frameworks to drastically reduce the level of effort needed to become responsive.  For somebody setting out to create their first responsive site, using a Framework makes a ton of sense.  But one question often remains; which Responsive Framework should I use for my site? 

Among the most popular Responsive CSS Frameworks today are Twitter BootstrapFoundation, and Skeleton.  I’ve spent a good deal of time researching each Framework and have used each of them to at least some degree.  There are several similarities, but also a handful of differences that may end up making one better for your particular circumstance.

WHAT YOU GET

All three of these Frameworks work off of a basic grid system.  This means that each page consists of rows, and every row contains the same number of columns.  Bootstrap and Foundation contain 12 columns per row, while the Skeleton grid uses 16 columns.  Any element on the page is able to take up as many of these columns as it needs, with the only caveat being that all of the elements in a given row must take up a total of 12 columns (or 16 if using Skeleton).

 

A Default 12-Column Bootstrap Grid 

SKELETON

While the Bootstrap and Foundation frameworks have loads of additional components that can be used alongside the grid, Skeleton has a much more “bare bones” approach.  I assume that has something to do with the name?  Skeleton does include a couple of pre-built responsive components, but it offers far fewer of these than Bootstrap and Foundation.  Instead, the goal of Skeleton is to provide a tool that fits into any design or style while providing a quick-start tool for rapid development.  This will be a good candidate for you if you already have some prebuilt components that you use and just want your framework to adapt to these, without adding any of its own styling.

Key Features:

  • Rapid deployment
  • Bare bones (pun completely intended) and lightweight
  • More flexibility to fit into existing or prebuilt projects

The Bad:

It's a very light framework, and doesn't provide much besides the basics. 

BOOTSTRAP

Bootstrap includes buttons and form elements of its own, but also includes a plethora of additional CSS components for navigation, progress bars, pagination, etc.  Additionally, Bootstrap includes several Javascript components such as carousels, modals, alerts, and tabs.  These additional pieces could go a long ways towards getting your site up and running with only minimal styling required.  In addition to these components, Bootstrap adds the ability to hide elements within its grid using a pretty intuitive convention of adding class names like “visible-phone”, “visible-tablet”, and “hidden-phone”.  

With all of these components and grid features, it might seem like there could be a steep learning curve for developers new to Bootstrap.  Fortunately, the Bootstrap site provides excellent documentation as well as several examples to get you up and running.  Additionally, developers can very easily customize their instance of Bootstrap by selecting only the components they wish to use for their download.

Key Features:

  • Additional components for navigation, progress bars, pagination etc
  • Javascript components including carousels, modals, alerts and tabs
  • Class names for intuitive identification

The Bad:

All the features, and capabilities could mean a steep learning curve for some.

FOUNDATION

In my opinion, Foundation provides the best grid system of the three.  For starters, Foundation was built using the mindset of “Mobile First”.  What this means is that when you’re building your site using Foundation, the grid classes account for mobile devices first, and treats larger devices as the exception.  If you’re using the “Mobile First” philosophy on your site, you should really consider this framework.

In addition to the “visible”/”hidden” type of capability that Bootstrap provides, the Foundation grid provides a couple of other niceties as well.  One of these features is the ability to reorder elements within a given column based on the size of the visitor’s device.  On mobile devices, it’s often important to display the most important elements of a page towards the top so that visitor’s see them without needing to scroll down the page.  Foundation’s “Source Ordering” feature makes this easy to do, while enabling these components to display in the most natural location on the page when viewed on a full-sized monitor. 

Calls to Action on Full-sized Monitor (Mobile Maturity Model displays last)

Calls to Action – Reordered for Mobile Viewing (Mobile Maturity Models displays first) 

Another aspect of the Foundation grid is the ability to use different layouts based on the size of the browser.  This lets you align four elements side-by-side when viewed on a full-sized monitor, and then use a completely different layout on mobile browsers – perhaps 2 rows of 2 elements each.

Similar to Bootstrap, Foundation provides loads of documentation for both their grid as well as their additional components.  Additionally, Foundation provides periodic online training courses for those developers who want to learn directly from the creators of the framework.

Key Features:

  • A framework built around the "Mobile First" mindset
  • Visible/Hidden capabilities
  • Source ordering to optimize content is seen based on device

The Bad:

Again, it might be a steep learning curve.  However, Foundation provides periodic online training courses for developers who want to learn

CSS PREPROCESSORS

One final thing to consider when comparing these frameworks is whether or not you’re already using (or would like to use) a CSS preprocessor language, such as LESS or SCSS. For the uninitiated, CSS preprocessors provide enhanced capabilities for your stylesheets, such as the use of variables or nested styles.  While I won’t cover the differences between LESS and SCSS here, it’s important to note that Bootstrap uses LESS while Foundation supports SCSS. 

While there is no “one size fits all” framework that works best for every site, one of these three frameworks will likely help out anybody who is open to the idea of using a Responsive Framework.  The good news is that all three provide great documentation and are really easy to get familiar with quickly.  If you haven’t tried one already, it’ll be well worth the time spent to take one for a test drive and see how it can help with your next mobile website.

Corey Hamilton

Corey Hamilton