Build responsive websites more easily

Instead, the intent of this post is to share my experience working with the grid system, to explain some tips and tools I found helpful along the way. I have worked with several "responsive" web applications that didn't always follow the same principles and made responsiveness a nightmare.

Some Background

Grid design is not a new trend, it has been used in graphic design and printing since the 10th century.

Source: Wikipedia

Grid System Benefits

• It reduces the gap between designers and developers and simplifies communication between people from different backgrounds.

• It provides a structure to follow across all the pages. It's a way to enforce consistency.

• It makes it easier to build responsive websites and target several devices without too much effort.

TB Grid Debugger

A couple of months ago I developed a small tool to help me find design and implementation problems. I was working on a project which:

• Already had a first desktop (fixed width) version.

• Several designers had passed through the design team, and there were many design inconsistencies throughout the application.

• Designers were not working together with the development team.

This small tool I created helped me identify those inconsistencies and communicate them better to all the people involved in the project. The library is pretty easy to use/install. It gives the possibility to show Twitter Bootstrap columns and find which elements are not following them.

As you can see in the image above, paragraph blocks are aligned following TB grid system. There are three rows:

• The first row has two paragraphs of 6 columns width.

• The second row, three paragraphs of 4 columns width.

• The last one has an offset of 3 columns and two paragraphs of 3 columns width.

Here is the GitHub repository if you want to use it to debug your own responsive websites.

The tool has buttons to:

• Show/Hide the debugger component.

• Change the guidelines to use the fixed or fluid TB containers.

• Manage debugger grid z-index property (send it to the front/back of the page content).

Complex user interfaces

The grid system seems really easy to use, but when we have to create complex UIs it becomes tricky. I have seen several websites using different rows, columns, nested rows and so on. When the interface gets complex, we (developers) tend to implement it without thinking about the page structure.

Common problems:

• One big ‘row’ to wrap all the elements in the same page.

• Several nested grids. This could lead to design problems if developers don’t know how to handle column paddings.

• Row/column elements used in places where it’s not needed.

• Row elements without columns inside. Or the other way around.

Useful tips:

• Think about the whole page structure. Which components need to be aligned to the grid and which do not.

• The grid is a guide to align elements and to have a consistent design. Pay special attention to padding/margins, this can help you realize you are using the grid in a wrong way.

• Use TB mixins to create more semantic elements. Favor mixins .make-lg-col(); over classes col-lg-4.

Demo

This is a demo I created some time ago for one of our clients.

Custom Extra Large version of the demo page. Product items are 2 columns width, six products per row.

Small version of the demo page. Product items are 4 columns width, three products per row. 

This demo shows several interesting things:

• It has the grid debugger tool integrated.

• I extended Twitter Bootstrap to support high resolution screens. The prefix is xl, it stands for ‘Extra Large’ devices. You can test it out on bigger screen or using ctrl + and ctrl -.

• How to define a ‘CSS component’ to re-use it in different contexts.

• Use advanced CSS3 selectors like :nth-child() to produce more elegant solutions.

• Handle nested grids.

I hope you find this article useful. Please let me know any comments or improvements you may have.