Your SlideShare is downloading. ×

CSS Frameworks for Rapid Prototyping

810

Published on

Published in: Design, Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
810
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. CSS Frameworksfor Rapid Prototyping Josh Nichols Twitter: @MrBlank Email: nicholsjc@missouri.edu Web Communications University of Missouri
  • 2. CSS frameworksWhat is a CSS framework?A CSS framework is a set of CSS rules, conventions, and best practicesthat attempt to abstract routine tasks into generic modules that canbe reused.Pros Cons• Increased productivity • Learning curve• Consistent code • Excess code• Easier collaboration • Non-semantic• Fewer browser bugs• Standards-based
  • 3. CSS frameworksPrerequisitesA working knowledge of CSS and XHTML is required to begin using aCSS framework.No framework will contain every rule needed. They will require editingand additions specific to the site. Even with the help of a framework,browser bugs still appear requiring the ability to troubleshoot andcorrect them.
  • 4. CSS frameworksUse what you needBe selective in what CSS rules you use. Some sites may only need afew reset rules while another may benefit from a modular grid system.Research what’s available. Mix and match rules with your own and onlyuse what you need.
  • 5. CSS frameworksSome CSS frameworksBlueprint CSShttp://www.blueprintcss.org/960 Grid Systemhttp://960.gs/Fluid 960http://www.designinfluences.com/fluid960gs/YUI Grids CSShttp://developer.yahoo.com/yui/grids/Reset Reloaded by Eric Meyerhttp://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/
  • 6. Site prototypingThe grey box methodA site prototype is an interactive wireframe to represent the structure,content and functionality of a website.It’s a grayscale mock-up that focus on content and does not includegraphical elements or imagery.
  • 7. Site prototypingMU Web Communications’ workflowWe design from the content out.1. Define goals2. Content inventory3. Information architecture4. Wireframes Wireframes, prototyping5. Prototype and design come after6. Design content organization.7. Production
  • 8. Prototype exampleExample siteMU Biochemistry prototypehttp://webcom.missouri.edu/presentations/css-frameworks/biochem/Benefits• No need to create all new CSS rules for each site• Fast development ― Dreamweaver templates and library items created in less than an hour• Changes to the templates are easier and faster• Information architect can create pages from templates• Writers can format content as XHTML for placement in the final site
  • 9. Prototyping demoExample frameworkBlueprint CSShttp://www.blueprintcss.org/• Reset rules that eliminates the discrepancies across browsers.• A flexible grid that can support complex layouts.• Every XHTML tag already has a style rule.
  • 10. CSS framework resources5 Popular CSS Frameworks +Tutorials & Tools for Getting Startedhttp://www.noupe.com/css/5-popular-css-frameworks-tutorials-tools-for-getting-started.htmlA Closer Look At the Blueprint CSS Frameworkhttp://net.tutsplus.com/tutorials/html-css-techniques/a-closer-look-at-the-blueprint-css-framework/A Detailed Look at the 960 CSS Frameworkhttp://net.tutsplus.com/videos/screencasts/a-detailed-look-at-the-960-css-framework/
  • 11. Thanks! Josh Nichols Twitter: @MrBlank Email: nicholsjc@missouri.edu Web Communications University of Missouri

×