An experiment with grids in a responsive web design

The underlying structure of a grid is rigid – it’s in its own nature to be. A good designer will be able to produce exciting, dynamic compositions with it, but these layouts are built on solid foundations.

It’s no bad thing. Structure brings consistency, which breeds familiarity. This is good for user experience – however the grids rigidity presents a challenge when attempting to reconcile it with a responsive environment on the web.

My approach with this blog was to start by designing for the desktop: specifically a 1024px width. I opted for a nine column grid – each column 80px wide, with gutters of 20px and margins of 40px.

Grid layout of blog at full width

The next step was to work out how the design would downscale. For this I designed in break-points aligned to the screen widths of some common devices, at:

  • 768px
  • 480px
  • 320px

With these break-points in mind, I chose to stick with the dimensions I had already established for the different elements that make up the grid, and instead reduce the column count to fit the available screen space. At 560px the grid has five columns, for example. The break-points needed tweaking a little at this point to accommodate the shifting grid. I then remapped the different regions of content to each reduced grid.

Grid layout of blog at 560px wide

I haven’t dispensed with the idea of fluidity at all – content regions do scale where I felt appropriate, and reflow where it is not. These ‘in-between’ stages do break the rigidity of the grid. One thing that I have discovered in creating this second screenshot is that I have not accounted for the scroll bar, which appears to count as part of the screen (browser) width – this has caused a small mis-alignment, which has been positively resolved by the grids fluidity.

Where the grid has helped is in:

  1. Planning how the site appears at optimum sizes – the break-points.
  2. Maintaining consistency in size, position and proportion of the different content regions, so that the interface remains familiar and behaves as expected.

This implementation isn’t perfect – it is a start. My media queries aren’t quite functioning as expected and there is work to be done restructuring them. As a first stab and in raising points for discussion, I’m pleased.