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 System
Fluid layout Rigid layout
Flexible grid Versatile grid
Resolution free Lots of illustrations

More information...
The Grid System
http://www.thegridsystem.org/
ALA: Fluid Grids
http://www.alistapart.com/articles/fluidgrids
YUI CSS Grid
http://developer.yahoo.com/yui/grids/
960 Grid System
http://960.gs/
Grid Based Design Toolbox
http://www.fuelyourcreativity.com/grid-based-design-toolbox/

Thank you!
Images
http://www.sxc.hu/photo/944563
http://www.flickr.com/photos/45848020@N00/3026837925/
http://www.flickr.com/photos/psousa/2841204262/
http://www.sxc.hu/photo/992585
http://www.sxc.hu/photo/777662
http://www.flickr.com/photos/martin-kulakowski/3055870213/
http://www.sxc.hu/photo/214770
Contacts
Email: braposo@gmail.com Blog: http://nowiknow.wordpress.com
Twitter: @braposo Portfolio: http://braposo.carbonmade.com