Gird your responsive grids

Yesterday I saw someone struggling to use a laptop whilst standing up. "How quaint" I thought, and realised the seismic shift that has occurred with mobile computing.

Yesterday I saw someone struggling to use a laptop whilst standing up. "How quaint" I thought, and realised the seismic shift that has occurred with mobile computing.

Like it or stick your head in the sand and pretend it's not happening, increasing numbers of people will look at your website on a mobile device.

For a front end developer, it's a very exciting and busy time. I'm reading up on responsive web design, by which one website serves mobile, tablets and desktop, with two riveting reads by Ethan Marcotte and Aaron Gustafson. And then there's the essential work on visual grids and graphic design by Mark Boulton and Khoi Vinh, which have rekindled my interest in graphic design.

The front end dev on my current contract has used the Blueprint CSS grid and framework, which is remarkably easy to use (you simply insert span-x to denote column widths). However, after reading Jeff Croft's blog post from way back 2007, entitled The Myth of Content and Presentation Separation, I was perturbed.

The central issue is that practicality should trump purity, and that by inserting non-semantic markup such as span column widths, then so be it if it's make your job easier. Four years ago, I would have concurred but now the big stumbling block to non-semantic markup is responsive web design.

The reason for this is that your column widths will change; any non-semantic markup becomes confusing out of context.

I mulled over this for a couple of days, thinking that there must be a way of using a CSS preprocessor such as Sass or LESS to define a semantic grid, so that they would do the heavy lifting and working out.

The web is awash with responsive CSS frameworks (see Specky Boy's [15 Responsive CSS Frameworks Worth Considering}(http://speckyboy.com/2011/11/17/15-responsive-css-frameworks-worth-considering/). But a semantic grid for responsive web design, with no HTML cruft? Well, I've found one so far: the Semantic Grid System by Tyler Tate.

There will be plenty of people saying "No Sirreee Bob, plain CSS is for me, I don't want new-fangled CSS supersets with variables and mixins, working out all that complicated math so I can myself a cross platform grid system". But there numbers will dwindle. Responsive web design for all platforms, using a grid system with a CSS preprocessor is the way to go. Honestly.

Newsletters

You have been successfully signed up. To sign up for more newsletters or to manage your account, visit the Newsletter Subscription Center.
See All
See All