Our days can be pretty busy at ZURB. Sometimes we don't have time to stop everything and do a full-blown design critique. Sometimes we just want quick and dirty feedback. That's where in-browser prototyping comes in handy, especially when we've got a design that's nearly there but not quite there yet.
In-browser prototyping came in handy while we were putting the finishing touches on the rebooted ZURBword. The original site wasn't up to snuff. So we put Arthur to work on a swank redesign. As he got closer to the final design, four of us huddled around Arthur and his computer, giving him a speedy design critique in about five minutes. To do it, we simply opened up the Chrome inspector to see some instantaneous changes. How we did it is something we wanted to share with you.
Getting Dirty with Chrome Inspector
The original white background of our nearly-complete page wasn't quite working. So Bryan suggested using gray. That's when we opened up the Chrome inspector, searching the left-hand DOM for the body element. Take a look (click on the image for a larger view):
We then went into the right-hand style box and started fiddling with the CSS, changing the color of the background. Click on the image below to see a larger picture of what we did:
Next we decided to add a drop shadow. So we moved in the DOM to the class we used for each of the containing boxes, to find the box-shadow in the style-box, double clicked on it, changing it to '0px 2px 5px rgba(0,0,0,0.15)' to add the shadow. Check out the larger image of what we did by clicking the image below:
Not An Excuse for Backseat Design
The changes only stick around as long as you don't reload the page. Once you reload the page, the changes will vanish. So you'll have to go into the actually CSS to make the changes permanent. Take for instance the box shadow, we used CSS3 to make it permanent on the actually code. (So that particular change might not show up on older browsers.)
In any case, in-browser design critiques aren't an excuse for backseat designing. It's meant to be really quick, really dirty so you can be scrappy and prototype your ideas instantaneously.