Grids in Web Design

@braposo

The grid system is an aid, not a guarantee. It permits a number of possible uses and each designer can look for a solution appropriate to his personal style. But one must learn how to use the grid; it is an art that requires practice.

Josef Müller-Brockmann

Why grids in Web Design?

Why grids in Web Design?

Guide for the designer/developer

Keeps overall coherence

Usability matters

Avoids rendering errors across browsers

Enables quick layout changes

Fluid layout design

Fluid layout design

Adapts to any browser window

Based on relative units (% or em)

Users control the design

Limits designers’ creativity

Fixed layout design

Fixed layout design

Resolution independent

Based on fixed units (px)

Designers are in control

Multi-column grids

CSS Grid Systems

YUI vs 960

YUI CSS grid

Based in relative units

Multiple pre-defined document layouts

Different layouts with same structure

Useful for fluid layouts

Grid Builder

YUI CSS grid

Unfriendly naming conventions

Pre-defined grid

Different layouts need nested grids

960 Grid System

960px layouts

Based in fixed-width columns

12 column and 16 column versions

Versatile layout

Easy to understand

960 Grid System

Rigid layout

Layout changes need more code rewriting

Not recommended for small resolutions

How to choose a grid?

How to choose a grid?

YUI CSS grid 960 Grid SystemFluid layout Rigid layout

Flexible grid Versatile grid

Resolution free Lots of illustrations

The Grid Systemhttp://www.thegridsystem.org/

ALA: Fluid Gridshttp://www.alistapart.com/articles/fluidgrids

YUI CSS Gridhttp://developer.yahoo.com/yui/grids/

960 Grid Systemhttp://960.gs/

Grid Based Design Toolboxhttp://www.fuelyourcreativity.com/grid-based-design-toolbox/

More information...

Imageshttp://www.sxc.hu/photo/944563http://www.flickr.com/photos/45848020@N00/3026837925/http://www.flickr.com/photos/psousa/2841204262/http://www.sxc.hu/photo/992585http://www.sxc.hu/photo/777662http://www.flickr.com/photos/martin-kulakowski/3055870213/http://www.sxc.hu/photo/214770

ContactsEmail: braposo@gmail.com Blog: http://nowiknow.wordpress.comTwitter: @braposo Portfolio: http://braposo.carbonmade.com

Thank you!