CommunityDesigning in the Browser with Zoe Gillenwater


writes on May 30, 2013

Zoe Gillenwater, author of Stunning CSS3, sits down with Treehouse’s Dan Gorgone to discuss the effect CSS3 has had on front-end design, as well as accessibility, mobile first design, and learning how to code.

Treehouse Gold Members can watch the full interview with Zoe here.


Learning with Treehouse for only 30 minutes a day can teach you the skills needed to land the job that you've been dreaming about.

Get Started

6 Responses to “Designing in the Browser with Zoe Gillenwater”

  1. Gavin Foster on June 9, 2013 at 11:03 am said:

    The last two projects I worked on were almost exclusively in the browser. The client in both cases was given a choice of Style Tiles to explore their ideas which still allows the client creative input. Designing in the browser was a daunting task to begin with but with a decent CSS frame work to get things rolling (Zurb’s Foundation 4 highly recommended), it’s super easy… and fast! Prototyping/designing this way also helps with client content strategy; content arrived much sooner. One final note is that the project can evolve without having to alter rigid graphic design layouts.

  2. I design in the browser, but I haven’t dropped PhotoShop completely. Of course, before anything else I start on paper. I’ve found the best way (your mileage may vary on this) to reconcile between the medium and your design process is to draw up very rough wireframes for layout ideas, and then build it in the browser. Then you might have another HTML file that serves as a living style guide or pattern library, saving Photoshop for assets you might need along the way. I find it effective because the wireframe serves as a canvas, but isn’t as constrained as a static mockup. And through the use of CSS, you can isolate your components and build them individually while fleshing out a unified design within the context it’s going to live.

    Even better, you can take the styles from your pattern library and apply them directly to your wireframe canvas, ensuring consistency. I find the best part is that a living style guide can be modified on its own without touching the live site for a redesign. And then once you’re satisfied, you can apply your changes to a new stylesheet and just replace a few files on the live site. The boon of designing in the browser is that it can make iterative design a breeze. Again, the effectiveness of this process depends on your skill in writing markup and style, but I honestly think HTML & CSS knowledge is becoming mandatory. I’ve always thought that a web designer should be able to deliver his or her designs to the web. And building in the browser (with a process) may just be that mindset taking root in the industry.

    I don’t think the proponents of designing in the browser are saying, “This is the only way.” They’re just acknowledging that a lot about the industry has changed, and we can’t confine ourselves to 960px canvases. The traditional process isn’t doing so well anymore. It’s the reason why we see the emergence of Style Tiles, living style guides, pattern libraries, and style collages. New processes for new situations. Years ago when designers worked comfortably with Photoshop, the web only existed on desktops, and we fought the fluid nature of it doggedly. Even I started with PSDs and slicing, but it’s becoming less feasible to do things the way we’ve always done them. The web adapts. So should we.

  3. aholsteinson on May 30, 2013 at 2:54 pm said:

    Personally, I am still not convinced about the idea of designing in the browser. I think it confuses the design process by having you entering code while you are still conceiving a website’s layout and overall aesthetic.

  4. ’90s Web Guy talking about CSS3. Wait a second…

Leave a Reply

You must be logged in to post a comment.

man working on his laptop

Are you ready to start learning?

Learning with Treehouse for only 30 minutes a day can teach you the skills needed to land the job that you've been dreaming about.

Start a Free Trial
woman working on her laptop