Responsive Design in Less Than a Day

As a must for 2013, responsive design is on every developer’s list of web standards. For our February Hackathon, we decided to run a quick test on how we can implement responsiveness.

Good design means designing for a canvas, it means breaking free from constraints that we carry with us because we come from a different perspective. Having to design for more and more different viewports is designing in proportions rather than in fixed widths.

Responsive design includes three aspects: a fluid grid, flexible images, and media queries. While fluid grids offer many possibilities for manipulating content display options such as size and style, we went with a simple approach to quickly validate the responsive design concept. In this case, we chose to use the fluid grid to reposition content within our existing structure only.

The Right CSS Fit

There are various frameworks like Twitter Bootstrap, Bourbon Neat, and Skeleton just to name a few, that all meet slightly different requirements.

We decided to do our test with a modified version of 1140 CSS Grid because it’s a very slim solution for our specific need of responsiveness and something we were familiar with.

1140 CSS Grid is based on a 12-column grid. We eliminated the gutter that does not suit our layout needs by taking out the margins and adding the missing width to each column. In addition, we took out the maximum width in order to design a full-view experience of SumAll's web application.

Finding the Layout Grid

The graph is SumAll’s center piece and remained untouched for the test. In our sliding panel we had the page navigation in the left column and different types of pages for the main content section which each required a different amount of columns.

We assigned columns according to our layout, this example shows the Setting’s page:

A Fluid Grid

The grid itself groups content into cells and assigns an order for how those cells should be placed or stacked when folded. The fluid part is responsible for maintaining the proportions when content is shown on different sizes of screens.

Before and After

Screen 1: Smaller screen
Screen 2, before: Wider screen
Screen 3, after: Wider screen with responsive CSS
Looking at the wider screen, the white space feels to be about to be the same amount as in the small screen. The sidebar and form fields stretch out to keep more of their proportion as well.

A Very Quick Change for a Great Design Solution

Setting up responsiveness took less than half a day! The most complex part was figuring out which grid system to use and how to adapt it to our layout requirements. Adding the surrounding container divs for the rows, assigning the column classes to the existing code, and taking out widths specifications for elements in CSS is a simple but valuable process.

For more information on responsive design, check out the links below.

Read on Responsive Web Design

http://www.abookapart.com/products/responsive-web-design

http://electricpulp.com/notes/you-like-apples/

Responsive Web Design Frameworks

1140 CSS Grid, http://cssgrid.net/
Bootstrap, http://twitter.github.com/bootstrap/
Bourbon Neat, http://neat.bourbon.io/
Skeleton, http://www.getskeleton.com/