9 Reasons to Use a Grid-Based Web Page Design Framework

(575)

Look around the design slice of the blogosphere and you’ll see several discussions promoting the use of grid-based design/ framework for web pages. Grid-based design isn’t really new, as the concept has been long-used by desktop publishing for print design. But as you probably know, it’s been hard for many years to have any modicum of control over the look of web pages.

CSS (Cascading Style Sheets) helped changed that somewhat, and the new standard, CSS-3, will further that effort. There are still the stragglers, such as Microsoft, who refuse to use real standards and make up their own. They make page design a pain.

Without CSS, however, grid-based design for web pages that makes liberal, innovative use of visual content would be very hard if not impossible. (Table-based design means larger file sizes for pages.) If you’re considering a redesign for your site, here are a few reasons to consider grid-based design.

  1. Formulaic technique.
    If you can add, subtract, multiply and divide, and understand basic CSS elements, you can set up your own grid framework. Or just simply tweak an existing framework like Blueprint.
  2. Versatility.
    A grid-based design affords an enormous amount of versatility and position control of page elements.
  3. Subtle visual impact.
    Being able to position design elements on the web page where you actually want them will of course allow your pages to have the visual impact you want. And because of this, the visual impact can be a lot more subtle and less blocky than the alternative (non-grid framework).
  4. Portability of framework.
    Since a grid-based design framework is accomplished using standard CSS code, it’s portable. You can re-use it for any website you like.
  5. Easy customization of framework.
    Port your existing framework to a new site and make easy customizations by tweaking the grid parameters. Some people prefer a grid column of 50 pixels and gutters of 20 px, others like larger columns. Use what works for you, but remember that if you want standard column widths for page elements, to satisfy common ad and banner sizes, there are only a few combinations of grid column and gutter widths.
  6. Minimized development time.
    Once you have a framework in place that is versatile for common column widths, it becomes very easy to develop new page templates. Together with the last bullet point, this could mean reduced website project costs.
  7. Workaround CSS hacks.
    There are some stinky browsers (*cough* Internet Explorer *cough*) that refuse to play nice, even after 11 years or so of development time. Instead of using real browser/ CSS standards, they make up their own. This is a serious source of hair-pulling and headaches for designers. A framework allows you to define consistent CSS browser hacks for reuse.
  8. Reset elements.
    A grid framework can ease the mass reset of CSS elements.
  9. General consistency.
    Both visual elements and typography can be consistent, which adds visual coherence.

Despite these benefits, that doesn’t mean everyone likes or recommends grid design. Some people feel it’s restrictive. My feeling is that grid-based design can hardly be as restrictive as not having any framework for web pages at all. You’ll have to judge for yourself.