Design in the Browser

Process Before Photoshop Mockups

Photoshop Mock-ups

frustrating experience, non-interactive

  • what happens when I mouse-over..

Hard to Change w/ photoshop easy w/ CSS

  • fonts, color pallete
  • Last Minute Panic
    • browser support, interactions, type rendering

CSS Mockup

the design they approve is the same they get.

Discover technical issues right away.

Decide together how to go about the design

Present in Browser

Who does it

dribbble

andy clarke: hard-boiled web design

@owltastic

Design Thinking in CSS

Play and Experiment

  • Experiment in Firebug

Hard to do in Photoshop

  • What to do if this headline wraps?
  • Have you designed for all possible list types? Tables? Form Elements?
  • Fluid Layouts

Tools

Firebug, Webkit Inspector, Firebug-lite

Sass & Compass

sass-lang.com

  • Firesass
  • SCSS
  • Variables, Nesting, Mixins,

Compass

compass-style.org

  • Stylesheet framework built around Sass
  • built in mixins for CSS3

Define css variables

Livereload

  • Chrome and Firefox extension
  • will refresh browser or css when file is modified

Modernizr

Selectivizr

A Coding Designer's Survival Kit