Grids in Web Design

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 ﬁxed 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-deﬁned grid Diﬀerent layouts need nested grids

960 Grid System 960px layouts Based in ﬁxed-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/ﬂuidgrids 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

http://www.slideshare.net	43
http://paper.li	11
http://www.brijj.com	5
http://static.slidesharecdn.com	1

Grids in Web Design

by distro on Mar 29, 2009

Accessibility

Categories

Tags

Upload Details

Usage Rights

4 Embeds 60

Statistics

Grids in Web Design — Presentation Transcript