My Barcamp PT Spring '09 presentation about CSS grids and how to use them in web design.

1. Grids in Web Design
@braposo

2. 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

3. Why grids in Web Design?

4. Why grids in Web Design?
Guide for the designer/developer
Keeps overall coherence
Usability matters
Avoids rendering errors across browsers
Enables quick layout changes

5. Fluid layout design

6. Fluid layout design
Adapts to any browser window
Based on relative units (% or em)
Users control the design
Limits designers’ creativity

7. Fixed layout design

8. Fixed layout design
Resolution independent
Based on fixed units (px)
Designers are in control
Multi-column grids

9. CSS Grid Systems
YUI vs 960

10. YUI CSS grid
Based in relative units
Multiple pre-defined document layouts
Different layouts with same structure
Useful for fluid layouts
Grid Builder

11. YUI CSS grid
Unfriendly naming conventions
Pre-defined grid
Different layouts need nested grids

12. 960 Grid System
960px layouts
Based in fixed-width columns
12 column and 16 column versions
Versatile layout
Easy to understand

13. 960 Grid System
Rigid layout
Layout changes need more code rewriting
Not recommended for small resolutions

14. How to choose a grid?

15. How to choose a grid?
YUI CSS grid 960 Grid System
Fluid layout Rigid layout
Flexible grid Versatile grid
Resolution free Lots of illustrations

16. 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/

17. 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