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