After reviewing the material provided on TLearn2 and the badge page describing CSS Frameworks, I decided to select 960 Grid System version of CSS Frameworks. Many sites suggest that the 960 Grid System is the most established form of CSS Frameworks and therefore the most generally applicable. I cannot get enough of programs that make design more straightforward and easy to plan out (see my post about Wireframes), so my experience with CSS Frameworks was enjoyable.
Thomas Cannon’s 2011 article entitled “Using the 960 grid system as a design framework,” was incredibly helpful while learning how to use the Grid System. Cannon provides the appropriate amount of background information about the CSS Frameworks landscape without overwhelming designers or developers looking for an informative and easy-to-follow guide to frameworks. Jeffrey Way’s 2009 video called “A Detailed Look at the 960 CSS Framework” provided a more in-depth account of the existing status of frameworks in the web design and development industries, and it would be helpful to those who prefer visual learning by following videos to basic written follow-along directions.
What works really well about frameworks is definitely the cleanness of the templates provided. Because the grid organizes the space on the 960 pixel area, it becomes very easy to understand different ways to approach a design. I also thought it was very helpful to already have selected the items that I wanted to include in my design, so that the process was analogous to filling in a puzzle in which the user gets to determine the ultimate outcome. Using CSS Frameworks definitely seems like it would improve relations and communication between designers and developers, because it is so easy to understand the number of square pixels that each item on the page would take up and where exactly images or content would be located. This also provides a way to show clients what designers are thinking in terms of design before starting all of the necessary coding to complete the web pages. It’s also much easier to mess around and change designs inside of Photoshop with a wireframes grid than in the actual HTML or CSS.
I only used the 12 grid approach, as opposed to the 16 or 24 because I wanted to keep my design as streamlined and essential as possible (because I have a tendency to over design) but the more grids, the more specific the designs could theoretically be. I would be interested in trying out the different framework templates in more designs sometime.