Design in the Browser: Use CSS to Stop Lying to Ourselves and Our Clients

Time slot: 
March 10th, 1:00 PM - 2:00 PM
Chicago 10
Design and UX

Call it "Hard Boiled" web design, Agile Design, or simply Design in the Browser, we now have the tools to create, present, and get sign off on design without resorting to creating an endless series of static images that are at best an approximation of the site we'll eventually build.

Designing web pages as static images is usually a time-consuming exercise and produces a lie we tell ourselves and our clients. We're not designing pictures of websites, so why ask clients to sign off on one? Web work is dynamic, and needs to be seen and evaluated as early and often as possible in many browsers.

By designing in the browser we're able to solve a number of issues we face as people who make and sell web sites. Our mockups behave like web pages because they are web pages. We don't accidentally design features that are impossible to code. Any troublesome css technique will be discovered and addressed at the beginning of a project rather than in it's final days. We can experiment and implement the latest and best html5 and css3 techniques. And maybe most importantly, clients are never asked to sign off on a static facsimile of a web site that we all know will be at least slightly different from the final site we deliver.

Video at

Intended audience: 

web designers, themers, front-end developers, project managers

Questions answered by this session
Question 1: 
What are the problems involved in the traditional web design and client presentation practice of using image editing tools like photoshop as a primary design tool?
Question 2: 
How can we use CSS and markup as creative tools?
Question 3: 
What are the benefits in presenting designs to clients as html in browsers in terms of showing designs in the proper context, getting constructive feedback, and ushering speedy sign-offs?
Question 4: 
Why should we be browser-testing early and often? / How do we make it much less painful?
Question 5: 
How do we actually do this? From the creative, tech, and project management point of view.
Design in the Browser: Use CSS to Stop Lying to Ourselves and Our Clients has been selected and voting is closed.


I've seen Mason present on

I've seen Mason present on this topic before at last year's Drupaldelphia, and it's well worth sharing with the wider Drupal community.

this is such a great talk

Mason gave this at D4D in Boston is it is how we should be "comping" our sites!

Diamond Sponsors


Platinum sponsors


Gold Sponsors
Drupal Connect
Chapter Three
Treehouse Agency