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
A Very Quick Change for a Great Design Solution
For more information on responsive design, check out the links below.
Read on Responsive Web Design
Responsive Web Design Frameworks