Your SlideShare is downloading. ×
0
Using Grid-based Web Design to Optimize Content Authoring and Presentation<br />Matt Gipson and Charles Moad<br />Indianap...
Why This Talk?<br />
A Common Language<br />
What We Will Cover<br />History<br />Benefits for<br />Designers<br />Developers<br />Content Authors<br />Case Study<br /...
History of Grid-Based Design<br />Emil Ruder<br />Swiss typographer and graphic designer, who with Armin Hofmann helped to...
History of Grid-Based Design<br />Josef Müller-Brockmann<br />Grid Systems – The first detailed publication to show how th...
History: Josef Müller-Brockmann<br />Early Josef Müller-Brockmann Poster Designs<br />http://www.flickr.com/photos/blankap...
History: Josef Müller-Brockmann<br />Early Josef Müller-Brockmann Poster Designs<br />http://www.flickr.com/photos/blankap...
Benefits for Designers<br />A grid framework automatically defines the number of, padding, and margin of columns.<br />Cle...
Benefits for Designers<br />Dramatically cut the time devoted to creating CSS - style sheets to define.<br />
Benefits for Designers<br />The grid allows designers to spend more time on style, less on math &coding. <br />
Benefits for Designers<br />The grid also provides a template that can easily be replicated, customized, and rapidly imple...
Grid Fallacies<br />Some designers avoid the use of a grid-systembecause they believe using it will limit their design opt...
Benefits for Designers - Tricks<br />Use negative margins to pull elements out of the grid boundaries.<br />Abandon the gr...
Benefits for Designers - Tricks<br />Use background Images that bleed outside of the boundaries of the grid.<br />Wrap gri...
Benefits for Designers - Examples <br />Unique examples of grid design<br /><ul><li> Notice the generous use of white spac...
Benefits for Designers - Examples <br />Note the scale of the site logo and the intentional offset from the grid.<br />
Benefits for Designers - Examples <br />Note the use of a large scale image and it’s placement fitting it to the grid.<br ...
Benefits for Designers - Examples <br />Note the use of a liquid header background image that spans the whole page behind ...
Benefits for Designers - Examples <br />Note the use of a large header background image and how it is pulled out of the gr...
Benefits for Software Developers<br />A clear set of CSS rules to follow<br />
Under the Hood<br /><div class=“grid_12”><br />	<div class=“grid_6alpha” /><br />	<div class=“grid_3” /><br />	<div class=...
Benefits for Software Developers<br />Tools are easier to build.<br />Predetermine image/content sizes; layouts<br />
Benefits for Software Developers<br />5 developers vs. 1 designer<br />(How’s that work?)<br />
Benefits for Content Authors<br />Easy to understand concept<br />
Benefits for Content Authors<br />Indirectly enforces consistency<br />
Benefits for Content Authors<br />Enables rich layouts<br />
Benefits for Content Authors<br />Simple tools<br />
General Benefits<br />Works well with new-age devices<br />
IMAmuseum.org: A Case Study<br />
IMA: All CSS Enabled<br />
IMA: All Except 960.css<br />
IMA: Just 960.css<br />
IMA: All CSS Enabled<br />
Image Specs Before the Grid<br />Old imamuseum.org style-guide – A list of image names and sizes.<br />
Image Specs Before the Grid<br />Old imamuseum.org style-guide – A list of image names and sizes.<br />
WIKI Markup<br />Before<br /><div class="bodycopy first"><br />	<div class="copyleft"><br />		<h3>Hours</h3><br />	</div><...
Authoring Helpers<br /><ul><li>Fill in the blanks
Reference guide</li></li></ul><li>Authoring Helpers: Images<br />
Authoring Helpers: Flickr Set<br />
Grid Tools for All<br />The web is full of grid system frameworks.<br />Several online web apps exist<br />Grid calculator...
Why 960?<br />Most modern monitors support at least 1024 × 768 pixel resolution. <br />960 is divisible by 2, 3, 4, 5, 6, ...
Tools – 960 frameworks<br />960 Grid System<br />Fluid 960 Grid System<br />960 Gridder<br />
Tools – 960 themes<br />Drupal<br />WordPress<br /><ul><li> 960 Robots
 Omega
 + many more
 960 Blank Canvas
 960wp
 + many more</li></li></ul><li>Tools – 960 Grid Alternatives<br />The Square Grid – 28px baseline-grid. 1 square = 28px.<b...
Tools – 960 alternatives – jQuery Masonry<br />“Whereas floating arranges elements horizontally then vertically, Masonry a...
Tools – 960 alternatives – cssgrid.net<br />Mobile view<br />Desktop monitor view<br />“Scrap 1024! Design once at 1140 fo...
Tools – 960 alts – Fluid 960 Grid System<br />775px wide<br />1840 px wide<br />The Fluid 960 Grid System templates have b...
Tools – 960 alternatives – Roll Your Own<br />Tiny Fluid Grid<br />The 1Kb CSS Grid<br />A fresh take on the CSS grid. (lo...
Tools – 960 alternatives – Roll Your Own<br />.grid_1 { width:60px; } .grid_2 { width:140px; } .grid_3 { width:220px; } .g...
Sustainability of Grids<br />In the same way that grid principles transfer from print to web, they stand a much better cha...
Upcoming SlideShare
Loading in...5
×

MW2011 Grid-based Web Design presentation

2,845

Published on

Published in: Technology
1 Comment
3 Likes
Statistics
Notes
No Downloads
Views
Total Views
2,845
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
35
Comments
1
Likes
3
Embeds 0
No embeds

No notes for slide
  • Emil Ruder helped found Swiss Style. This style of design uses san-serif typography and a grid-system for structure.
  • The grid-system is not a web technology, but a tried and true design technique stemming from typography and print design. It has been around roughly since WW2. It applies very well to web design.
  • These are a few early examples demonstrating the grid-system in action. These are event posters created by Josef Muller-Brockmann.
  • More early examples of Josef Muller-Brockmann’s designs. Notice on the left he is clearly utilizing a vertical and horizontal grid. The Beetoven poster is probably one of his most famous pieces. There are some great videos on youtube if you search his name + the term ‘grid’
  • Starting off with a grid-system with your design, buys the front end designer a lot. Your margins are automatically defined. Figuring out image and content widths becomes a snap.
  • With a grid-system in place, designers can quickly create prototypes and wireframes. I have created some templates with grid guidelines which gives me a big head start with page layout.
  • I think of grid-based web design systems as a set of layers. Traditionallyyou might have the layout structure and style all in one cssstylesheet. This is confusing. We will show an example of this in our case study.
  • Again, prototyping and creating wireframes for designs using a grid dramatically speeds up the process. Charlie will show you some examples in our case study.
  • These are common arguments we hear against using a grid-system. It boils down to, how you use the grid. There are techniques to alievethese beliefs.
  • Using negative margins in the style layer can buy you a lot and make your design more unique.Another way to break loose from the grid is to use it sparingly. (as seen in the beethoven poster)
  • Background images can easily alleviate the rigid structure of a grid.Another technique I’ve employed is to use wrapping divs which span the entire screen for instance.
  • Now I’ll show several good examples of website utilizing a grid-system. In this first example, at first glance you don’t see a grid. This is due to the generous use of whitespace.
  • Here is a good example of a website using a grid where they abandon it within blocks of content. The featured content can be unique and it doesn’t clash with the surrounding grid. Also notice how they are using negative margins to pull out the next/prev slideshow buttons.
  • This is an example of using a large offset background image breaking out of the boundaries of the page grid.
  • Using large images is another good technique for breaking out of the grid.
  • Here is an example of wrapping divs thatI talked about earlier. The header background image spans the entire width of the page.
  • Another good example of using an offset background image to alleviate the grid structure.
  • For your most common visitors, 960 is perfect
  • Specify number of columns, gutter percentages/width and the minimu/maximum width.
  • Grids exist for joomla, drupal, wordpress.
  • Transcript of "MW2011 Grid-based Web Design presentation"

    1. 1. Using Grid-based Web Design to Optimize Content Authoring and Presentation<br />Matt Gipson and Charles Moad<br />Indianapolis Museum of Art, USA<br />MW2011 Mini-Workshop<br />Philadelphia, PA<br />April 9th, 2011<br />
    2. 2. Why This Talk?<br />
    3. 3. A Common Language<br />
    4. 4. What We Will Cover<br />History<br />Benefits for<br />Designers<br />Developers<br />Content Authors<br />Case Study<br />Looking Ahead<br />
    5. 5. History of Grid-Based Design<br />Emil Ruder<br />Swiss typographer and graphic designer, who with Armin Hofmann helped to found a graphic style known as the Swiss Style.<br />The Swiss Style was defined by the use of sans-serif typefaces, and employed a page grid for structure, producing asymmetrical layouts.<br />
    6. 6. History of Grid-Based Design<br />Josef Müller-Brockmann<br />Grid Systems – The first detailed publication to show how the grid is constructed, applied and learned.<br />
    7. 7. History: Josef Müller-Brockmann<br />Early Josef Müller-Brockmann Poster Designs<br />http://www.flickr.com/photos/blankaposters/sets/72157605199393277/<br />
    8. 8. History: Josef Müller-Brockmann<br />Early Josef Müller-Brockmann Poster Designs<br />http://www.flickr.com/photos/blankaposters/sets/72157605199393277/<br />
    9. 9. Benefits for Designers<br />A grid framework automatically defines the number of, padding, and margin of columns.<br />Clear and logical pattern which helps organize a wide range of dynamic content scenarios.<br />This alleviates micro-managing content level design with a defined structure for organizing content.<br />
    10. 10. Benefits for Designers<br />Dramatically cut the time devoted to creating CSS - style sheets to define.<br />
    11. 11. Benefits for Designers<br />The grid allows designers to spend more time on style, less on math &coding. <br />
    12. 12. Benefits for Designers<br />The grid also provides a template that can easily be replicated, customized, and rapidly implemented.<br />
    13. 13. Grid Fallacies<br />Some designers avoid the use of a grid-systembecause they believe using it will limit their design options.<br />Designers worry that a grid will force creativity into a rigid structure leaving little room for unique style.<br />
    14. 14. Benefits for Designers - Tricks<br />Use negative margins to pull elements out of the grid boundaries.<br />Abandon the grid inside or outside content areas.<br />
    15. 15. Benefits for Designers - Tricks<br />Use background Images that bleed outside of the boundaries of the grid.<br />Wrap grid divs with container divs which can span the entire page for example.<br />
    16. 16. Benefits for Designers - Examples <br />Unique examples of grid design<br /><ul><li> Notice the generous use of white space.</li></li></ul><li>Benefits for Designers - Examples <br />In the example above the grid is abandoned in the main content area as well where they have embedded a blog.<br />Note the grid can be abandoned within the interface such as seen in the slideshow feature. <br />
    17. 17. Benefits for Designers - Examples <br />Note the scale of the site logo and the intentional offset from the grid.<br />
    18. 18. Benefits for Designers - Examples <br />Note the use of a large scale image and it’s placement fitting it to the grid.<br />Also note the products centered in blocks.<br />
    19. 19. Benefits for Designers - Examples <br />Note the use of a liquid header background image that spans the whole page behind the grid. This can be achieved using a wrapping div.<br />
    20. 20. Benefits for Designers - Examples <br />Note the use of a large header background image and how it is pulled out of the grid on the left hand side.<br />
    21. 21. Benefits for Software Developers<br />A clear set of CSS rules to follow<br />
    22. 22. Under the Hood<br /><div class=“grid_12”><br /> <div class=“grid_6alpha” /><br /> <div class=“grid_3” /><br /> <div class=“grid_3omega” /><br /></div><br />grid_12<br />grid_6<br />alpha<br />grid_3<br />grid_3<br />omega<br />
    23. 23. Benefits for Software Developers<br />Tools are easier to build.<br />Predetermine image/content sizes; layouts<br />
    24. 24. Benefits for Software Developers<br />5 developers vs. 1 designer<br />(How’s that work?)<br />
    25. 25. Benefits for Content Authors<br />Easy to understand concept<br />
    26. 26. Benefits for Content Authors<br />Indirectly enforces consistency<br />
    27. 27. Benefits for Content Authors<br />Enables rich layouts<br />
    28. 28. Benefits for Content Authors<br />Simple tools<br />
    29. 29. General Benefits<br />Works well with new-age devices<br />
    30. 30. IMAmuseum.org: A Case Study<br />
    31. 31.
    32. 32. IMA: All CSS Enabled<br />
    33. 33. IMA: All Except 960.css<br />
    34. 34. IMA: Just 960.css<br />
    35. 35. IMA: All CSS Enabled<br />
    36. 36. Image Specs Before the Grid<br />Old imamuseum.org style-guide – A list of image names and sizes.<br />
    37. 37. Image Specs Before the Grid<br />Old imamuseum.org style-guide – A list of image names and sizes.<br />
    38. 38. WIKI Markup<br />Before<br /><div class="bodycopy first"><br /> <div class="copyleft"><br /> <h3>Hours</h3><br /> </div><br /> <div class="copyright"><br /> <p><imgsrc="/images/size-g/open.png"/><br /> The museum is open from 9am to 5pm.</p><br /> </div><br /></div><br />After<br />=== Hours<br />[img:open.png|width=1]The museum is open from 9am to 5pm.<br />Stein, R. and E. Bachta. "Breaking the Bottleneck: Using Pseudo-Wikis to Enable Rich Web Authoring for Non-Technical Staff Members". MW2010 http://www.archimuse.com/mw2010/papers/stein-bachta/stein-bachta.html<br />
    39. 39. Authoring Helpers<br /><ul><li>Fill in the blanks
    40. 40. Reference guide</li></li></ul><li>Authoring Helpers: Images<br />
    41. 41. Authoring Helpers: Flickr Set<br />
    42. 42. Grid Tools for All<br />The web is full of grid system frameworks.<br />Several online web apps exist<br />Grid calculators, bookmarklets, etc. <br />Several open themes are popping up using a grid system.<br />Push for 960 WordPress base theme<br />Drupal<br />Joomla<br />
    43. 43. Why 960?<br />Most modern monitors support at least 1024 × 768 pixel resolution. <br />960 is divisible by 2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 240, 320 and 480. This makes it a highly flexible base number to work with.<br />
    44. 44. Tools – 960 frameworks<br />960 Grid System<br />Fluid 960 Grid System<br />960 Gridder<br />
    45. 45. Tools – 960 themes<br />Drupal<br />WordPress<br /><ul><li> 960 Robots
    46. 46. Omega
    47. 47. + many more
    48. 48. 960 Blank Canvas
    49. 49. 960wp
    50. 50. + many more</li></li></ul><li>Tools – 960 Grid Alternatives<br />The Square Grid – 28px baseline-grid. 1 square = 28px.<br />jQuery Masonry<br />978.gs – Another popular framework<br />1140px, 12 column grid. Fluid all the way down to a mobile version.<br />
    51. 51. Tools – 960 alternatives – jQuery Masonry<br />“Whereas floating arranges elements horizontally then vertically, Masonry arranges elements vertically then horizontally along a grid. The result minimizes vertical gaps between elements of varying height, like a mason fitting stones in a wall.”<br />
    52. 52. Tools – 960 alternatives – cssgrid.net<br />Mobile view<br />Desktop monitor view<br />“Scrap 1024! Design once at 1140 for 1280, and with very little extra work, it will adapt itself to work on just about any monitor, even mobile.”<br />
    53. 53. Tools – 960 alts – Fluid 960 Grid System<br />775px wide<br />1840 px wide<br />The Fluid 960 Grid System templates have been built upon the work of Nathan Smith and his 960 Grid System using effects from the MooTools andjQuery JavaScript libraries.<br />
    54. 54. Tools – 960 alternatives – Roll Your Own<br />Tiny Fluid Grid<br />The 1Kb CSS Grid<br />A fresh take on the CSS grid. (loosely based on Nathan Smith’s 960 Grid System). Its mission is to be lightweight.<br />A lightweight customizable tool for building base<br />
    55. 55. Tools – 960 alternatives – Roll Your Own<br />.grid_1 { width:60px; } .grid_2 { width:140px; } .grid_3 { width:220px; } .grid_4 { width:300px; } .grid_5 { width:380px; } .grid_6 { width:460px; } .grid_7 { width:540px; } .grid_8 { width:620px; } .grid_9 { width:700px; } .grid_10 { width:780px; } .grid_11 { width:860px; } .grid_12 { width:940px; } .column { float: left; margin: 0 10px; overflow: hidden; display: inline; } .row { width: 960px; margin: 0 auto; overflow: hidden; }<br />The 1Kb CSS Grid<br />Lightweight base cssstylesheet for the grid structure. Leaves it up to the designer to define a ‘reset’ stylesheet and style.<br />
    56. 56. Sustainability of Grids<br />In the same way that grid principles transfer from print to web, they stand a much better chance of remaining relevant on new device.<br />Open-source content management system adoption of grids will further broaden their reach.<br />
    57. 57. Sustainability of Grids<br />Grids are an established design tool based on a long history of documented knowledge.<br />Grids are everywhere in our society, and have been for centuries. The Grid is a classic tool that won’t be going away anytime soon.<br />
    58. 58. The Future of Grids <br />Watch for this book:<br />A Practical Guide to Designing Grid Systems for the Web<br />By Mark Boultonmarkboulton.co.uk<br />
    59. 59. Thanks<br /><ul><li>Matt Gipson and Charles Moad
    60. 60. Indianapolis Museum of Art, USA</li></ul>MW2011 Mini-Workshop<br />Philadelphia, PA<br />April 9th, 2011<br />
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×