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


andy clarke: hard-boiled web design


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


Firebug, Webkit Inspector, Firebug-lite

Sass & Compass

  • Firesass
  • SCSS
  • Variables, Nesting, Mixins,


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

Define css variables


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



A Coding Designer's Survival Kit