by Ann Schecter

Choosing A Responsive Design Framework


What responsive design framework are you using? The web community has been talking about Responsive Web Design a lot in the past couple of years. It’s become a hot topic among web designers and everyone wants a piece of it. But the question is where do I begin? There are so many responsive design frameworks, which one is the best for my application? Before we review the various options, I have to give credit to Ethan Marcotte who coined the term Responsive Web Design (RWD) in his article on A List Apart.

The Concepts of Responsive Design Frameworks

There are two main components for any responsive design based website. The first is the flexible or fluid grid and the second is media queries.

1. The fluid grid

Most of the flexible or fluid grids in each responsive grid and framework use the concept of a 12 column grid with the widths assigned in percentages numbers. Think of it in the concept of a table. Tables need rows and columns to create grids, the same is true in a tableless 12 columns grid. To create a row, we need a series of columns that add up to 12 columns.

1 + 1 + 1 + 1 + 1 + 1 + 1 + 1 + 1 + 1 + 1 + 1 = 12
2 + 2 + 2 + 2 + 2 + 2 = 12
3 + 3 + 3 + 3 = 12
4 + 4 + 4 = 12
5 + 7 = 12
6 + 6 = 12
8 + 4 = 12
9 + 3 = 12

You get the idea. In a single row, we need the sum of the percentages to equal 100% or as close to it as possible. In the CSS file, you will find the percentages given to each column like in the example below. Each responsive design grid framework will have slightly different numerical values depend on the spacing concept and how much spacing is assigned for the gutter (the spacing between columns). Some of the responsive design grid frameworks use percentages while others use fixed pixel values usually between 20 to 40 pixels.

.one { width: 8.33%; }
.two { width: 16.66%; }
.three { width: 25%; }
.four { width: 33.33%; }
.five { width: 41.66%; }
.six { width: 50%; }
.seven { width: 58.33%; }
.eight { width: 66.66%; }
.nine { width: 75%; }
.ten { width: 83.33%; }
.eleven { width: 91.66%; }
.twelve { width: 100%; }

As an example, given the above CSS classes, here is the basic HTML markup needed for the responsive design grid framework to render one row.

2. The media queries

Media queries were added in CSS3 and became a W3C recommended standard in June 2012. It allows content rendering to adapt to the screen dimensions it’s being rendered upon. It’s supported by most modern Web browsers currently.

@media screen and (max-width: 480px) {
/* CSS rules set that will be applied to the browser window with a current width of 480px or smaller */ }

Choosing the Right Responsive Grid or Framework

I have used many different responsive design frameworks on various projects. However, for me it comes down to two options Bootstrap from Twitter and Foundation from Zurb. You have probably heard a lot about the Bootstrap framework. It has a large user base and is backed by a big company. Now before you jump to the conclusion that you should use Bootstrap by default because everyone else is, I think you will find it helpful to review the questions below.

What is your HTML/CSS skill level?

If you’re a beginner, I would suggest using The 1140 Grid from Andy Taylor and get to know it first. If you’re a middle level CSS practitioner, try Foundation. If you’re an advanced web designer, go for Bootstrap.

How fast do you want to put together your responsive website?

If you’re in a hurry and want to learn and put together your website fast, go for Foundation. It will take less time to figure out than Bootstrap and it comes with great UI tools out of the box. The online document and templates are also very helpful in empowering you to create great looking responsive design based website in no time.

Which stylesheet language do you prefer?

Your stylesheet language preference should also be considered when making your responsive design framework choice. If you want to utilize LESS in your responsive design based website, Bootstrap is the answer. If you prefer SASS as your stylesheet language, then you will probably want to go for Foundation.

Does your application require IE7+ support?

A lot of people are still using IE7+ (forget about IE6 support). If this a requirement of your application, go for Bootstrap or you can try Foundation 2.2.1. Foundation 3 integrate the “box-sizing: border-box” to help simplify the construction of its grid so it will work on IE8+.

How much support do you want from the framework?

Bootstrap and Foundation both have good online documentation to guide you. Both of them are backed by a company so pick either one of them really, you will have good support in the long run with either. With a large user base for both responsive design frameworks, their github repositories are updated frequently.

Which framework has grid construction and naming conventions that make the most sense to you?

The first thing I look for from all the responsive design frameworks is the grid system. I will look at the logic behind the grid system and how advance they are. Both frameworks offer nesting, offsets, push-pull, etc. in their grid systems so they’re advance enough to meet most any requirement. The second thing I look for is clean HTML grid markup and logical CSS naming conventions. I prefer “.one, .two, .three, …” rather than “.half, .third, .quarter, …”. Foundation using “.one, .two, .three, …”, however I also don’t mind the Bootstrap convention of using “.span1, .span2, .span3, …”.

How easy is it to modify the UI elements?

Both Bootstrap and Foundation have a lot to offer for interaction with the HTML UI elements. However, don’t forget that everyone else is also potentially using them so your website may look too much like other websites out there if you rely too heavily on the framework to provide this. Back to the question at hand, which framework provides the most convenient UI interaction? Foundation is easier to customize than Bootstrap.

Does your application require scalable embedded video?

If the answer is yes, Foundation might be a better choice than Bootstrap. Unlike Bootstrap, Foundation will properly scale your videos iframe embedded from YouTube or Vimeo by simply wrapping your video with:

This can be a real time saver on projects that are heavy on embedded video.

Which responsive design framework do I typically use?

Currently, in general prefer Foundation over Bootstrap. I find the grid construction system and CSS naming conventions to be more logical and easier to work with than those in Bootstrap. This enables me to get more done faster and it also fulfills all of my typical web application requirements.

We have now covered both the basic components comprising a responsive design framework as well as some pros and cons of each of the two most popular responsive frameworks available today. I hope you have found this review of responsive design frameworks helpful.


Leave a Comment

Your email address will not be published. Required fields are marked *