Web design: Stuck on the grid?

Web design: Stuck on the grid?

Summary: There is a welcome and wide-scale adoption of grids in website creation, particularly with the advent of responsive web design. But don’t be too hasty in squeezing your designs.

SHARE:

"Rules are for the guidance of wise men and the obedience of fools." Thus spake sweary pilot Douglas Bader. Replace 'rules' with 'grids', and you'll get the gist of how I approach CSS grid systems.

Mark Boulton has a most excellent introduction to grid systems, and his book Designing for the Web is available free online. However, I do take issue with his logic first, feeling second approach to grids.

In the past couple of years I have tried using a grid from scratch. However, I inevitably create the design until it feels right and then apply a grid retrospectively. Invariably — well, the half dozen times I've tried it — there is a grid that fits. And once you have a grid in place, then it's a breeze to create further pages and add additional elements.

Laurence Wood desktop site
An example of a grid having been applied retrospectively to a design.

Take, for example, a responsive portfolio site I created for the artist Laurence Wood. I created it in Fireworks until it seemed right, and then added a grid using the excellent Grids extension for Fireworks. There is an equivalent extension for Photoshop called GuideGuide. Turns out I was using a 27-column, 24-pixel column width and 12-pixel gutter, and I didn't even realise it.

So my advice is do what feels right. If that means starting out with a grid, all well and good. But don't be shy of trusting the inner feeling of something being correct. Heck, you could even do some sketches with a pencil.

Topic: Software Development

Jake Rayson

About Jake Rayson

A web designer since the 20th century, I am a pragmatic advocate of Free Software and I use proprietary software when appropriate. I made the full-time switch to Linux back in 2007, and my desktop tools of choice are Linux Mint, Inkscape, GIMP and Sublime Text.

As a Front End Developer, my core skills are HTML5, CSS3 and jQuery, and my working life reflects my commitment to open standards and accessible websites (ie accessible by everyone, regardless of browser, platform, ability or technology).

For web publishing platforms, I use WordPress for ease of use and Drupal for more complex solutions.

I am also learning about Ruby, Rails, Sinatra and CoffeeScript. I like the minimalist Ruby Way. To this end, my personal portfolio website is built with NestaCMS.

Kick off your day with ZDNet's daily email newsletter. It's the freshest tech news and opinion, served hot. Get it.

Talkback

1 comment
Log in or register to join the discussion
  • Website Designing Company in Delhi, Website Company in Delhi

    good design
    We are a website designing company in Delhi. We offer Website Designing and Development and SEO services work in very affordable prices. We have been working for the last many years.
    websitedesigning