Grids in Web Design

4,284 views

Published on

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

Published in: Technology, Design
1 Comment
13 Likes
Statistics
Notes
  • Hi ,Distro
    I am participating in a contest and your slide I liked very much,because in my company we work with web design and SEO, so I invited, to visit my slide and if it likes, please addme to your favorites, thank you very much

    Check out this SlideShare

    http://slidesha.re/5Td1I5

    Please Addme to your Favs ’♥’ bye bye
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
4,284
On SlideShare
0
From Embeds
0
Number of Embeds
81
Actions
Shares
0
Downloads
263
Comments
1
Likes
13
Embeds 0
No embeds

No notes for slide

  • É UM GUIA QUE DISPONIBILIZA UMA SERIE DE HIPOTESES PARA O DESIGNER CHEGAR AH SOLUÇÃO QUE MELHOR SE ADAPTA AO SEU TRABALHO















  • Grids in Web Design

    1. 1. Grids in Web Design @braposo
    2. 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. 3. Why grids in Web Design?
    4. 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. 5. Fluid layout design
    6. 6. Fluid layout design Adapts to any browser window Based on relative units (% or em) Users control the design Limits designers’ creativity
    7. 7. Fixed layout design
    8. 8. Fixed layout design Resolution independent Based on fixed units (px) Designers are in control Multi-column grids
    9. 9. CSS Grid Systems YUI vs 960
    10. 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. 11. YUI CSS grid Unfriendly naming conventions Pre-defined grid Different layouts need nested grids
    12. 12. 960 Grid System 960px layouts Based in fixed-width columns 12 column and 16 column versions Versatile layout Easy to understand
    13. 13. 960 Grid System Rigid layout Layout changes need more code rewriting Not recommended for small resolutions
    14. 14. How to choose a grid?
    15. 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. 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. 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

    ×