Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this


  1. 1. Grid960 Design & Coding By Daleen de la Harpe & Lloyd Africa
  2. 2. Agenda Introduction What is the 960 Grid? Dimensions Benefits of using a CSS Grid framework Grid Comparisons Step 1 - Paper Prototypes Step 2 - Semantic Structure Step 3 - Graphical Interface Step 4 - Final Production Step 5 - Testing Conclusion
  3. 3. Introduction <ul><ul><li>The 960 Grid System was created by Nathan Smith as a way to streamline web development workflow by providing dimensions based on a width of 960 pixels. </li></ul></ul><ul><li>  </li></ul><ul><ul><li>The 960.gs was primarily developed for rapid prototyping, cutting down on repetitive and tedious tasks, but is also more than suited to be used for any web design project. </li></ul></ul><ul><li>  </li></ul><ul><ul><li>It will give your site a structured and solid foundation for you to build and style your design upon. </li></ul></ul>
  4. 4. What is the 960 Grid? <ul><ul><li>The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. </li></ul></ul><ul><ul><li>There are two variants: 12 and 16 columns, which can be used separately or in tandem. </li></ul></ul>Example of a 16 column grid
  5. 5. Dimensions <ul><ul><li>The 12 column grid is divided into portions that are 60 pixels wide.  </li></ul></ul><ul><ul><li>The 16 column grid consists of 40 pixel increments.  </li></ul></ul><ul><ul><li>Each column has 10 pixels of margin on the left and right, which create 20 pixel wide gutters between columns. </li></ul></ul>Examples of a 12 column grid
  6. 6. Benefits of using a CSS Grid framework: <ul><ul><li>Visual links between page elements </li></ul></ul><ul><li>  </li></ul><ul><ul><li>Uniformity and consistency in HTML element placement </li></ul></ul><ul><li>  </li></ul><ul><ul><li>Easier to apply the &quot;rule of thirds&quot; and &quot;golden section&quot; to design - this results in a visually appealing layout </li></ul></ul><ul><li>  </li></ul><ul><ul><li>Easier to apply images and text to produce asymmetric layouts </li></ul></ul><ul><li>  </li></ul><ul><ul><li>Cross-browser support (less screaming and hair pulling when you get around to testing for IE6)  </li></ul></ul><ul><li>  </li></ul><ul><ul><li>Reduced effort for producing slicker web page layouts, compared to coding the necessary CSS from scratch </li></ul></ul><ul><li>  </li></ul><ul><ul><li>Usable with static pages, CMSes and blog platforms </li></ul></ul>
  7. 7. Comparing different grid systems: <ul><ul><li>Blueprint CSS Grid Framework </li></ul></ul><ul><ul><ul><li>Robust despite only being in V0.7, with a lot of support from designers, and numerous tools for generating CSS code (beyond the standard 24-column, 950 px default framework). </li></ul></ul></ul><ul><ul><ul><li>  Supports the use of Blueprint &quot;plugins&quot;. </li></ul></ul></ul><ul><li>  </li></ul><ul><ul><li>Yahoo! YUI Grids CSS, Grids Builder. </li></ul></ul><ul><ul><ul><li>This framework, which predates Blueprint, comes with six preset templates and four preset widths, and the layouts accomodate IAB ad unit guidelines. </li></ul></ul></ul><ul><ul><li>YAML, YAML Builder. </li></ul></ul><ul><ul><ul><li>YAML (Yet Another Multicolumn Layout) has a fair bit of maturity, is built on web standards, and is supposedly easy to use but it doesn't seem to have much use in the WordPress community. </li></ul></ul></ul>
  8. 8. <ul><ul><li>Grid Designer. </li></ul></ul><ul><ul><ul><li>  This is a web tool for generating custom CSS grids.  </li></ul></ul></ul><ul><ul><ul><li>It uses its own CSS classes, so it could be said to be a framework, though it's not as well supported in the design community as some of the others. </li></ul></ul></ul><ul><li>  </li></ul><ul><ul><li>960 CSS Grid System. </li></ul></ul><ul><ul><ul><li>  This system is based on a page width of 960 pixels, which is a number that's divisible by many other numbers, making it &quot;a highly flexible base number to work with.&quot;  </li></ul></ul></ul><ul><ul><ul><li>However, 960 Grid only works with 12 or 16 columns. </li></ul></ul></ul><ul><li>  </li></ul><ul><ul><li>CSS Boilerplate. </li></ul></ul><ul><ul><ul><li>Produced as a stripped down framework by one of the original Blueprint authors. </li></ul></ul></ul><ul><li>  </li></ul>
  9. 9. The Grid in Action A 5 step proposal
  10. 10. Step 1 - Paper Prototypes Pen to paper! Distill the clients expectations using rapid prototyping techniques.  Here we define the overall context and can provide a page-by-page perspective of the entire site. Usability issues are easily identified and we're able to see the feasibility of potential design decisions. A 50+ page fully detailed website can be penned up in a matter of hours. A basic blueprint is in place. Players - Visual Designer, Web Designer, Web Developer, Project Manager etc
  11. 11. Step 2 - Semantic Structure <ul><ul><li>Create an un-styled semantic xhtml version of your basic blueprint.  </li></ul></ul><ul><ul><li>Add in your chosen CSS framework (in this case Grid-960) </li></ul></ul><ul><ul><li>Add in filler text and filler graphics to add weight to the page view </li></ul></ul><ul><li>* fonts in PhotoShop do not port well to the web and managing user expectation early on in the process is important. Clients expect to SEE what they SEE in the PSD!!! </li></ul><ul><ul><li>Make sure to agree on Text, Typography, Colour Scheme and Layout before firing up PhotoShop </li></ul></ul><ul><li>Get the layout right with XHTML and CSS...FIRST!!! </li></ul><ul><li>Players - Web Designer </li></ul>
  12. 12. Step 3 - Graphical Interface <ul><ul><li>Take a screenshot of your newly created semantic structured page and use this as your basic layout for PhotoShop. </li></ul></ul><ul><ul><li>Apply the interface elements, photos, boxes, widgets, plugins, gradients, curves etc that will bring the xhtml mock-up(screenshot) to life. </li></ul></ul><ul><ul><li>Export a .JPG or .PSD of the layout/page-design and forward onto the client for approval. </li></ul></ul><ul><li>* more than likely the client will want changes to this initial iteration. Structural changes are to be ammended directly in the xhtml/css and graphical changes are handled by PhotoShop </li></ul><ul><li>Continue client-feedback iterations until approved </li></ul><ul><li>Players - Visual Designer </li></ul>
  13. 13. Step 4 - Final Production Development is now almost halfway. Slice and export the interface elements created and apply background-image rules to CSS etc. Because we worked directly over the screenshot of the layout, slicing the images to the correct size is more accurate and less tinkering with the CSS is necessary. Develop, Deploy, Demo Players - Web Designer, Web Developer, Web Administrator
  14. 14. Step 5 - Testing Because of this approach, cross browser bugs are reduced to a minimum. Time now should be spent on testing functionality, usability and accessibility throughout the site in a live web environment. It's important that all players test to ensure their contributions are presented in the way it was intended and that inconsistencies can be picked up before a demo URL is sent to the client for review. Test, Test and Test some more! Players - All players!!!
  15. 15. Conclusion It's clear that standardization of web development techniques ensures a more cohesive team effort and eliminates uncertainty when deciding which route to follow when making design or development decisions. CSS Frameworks are a logical progression and community-wide adoption will ensure its continued use and success.
  16. 16. Questions?