Clarifying The 80/20 Hybrid Approach to Designing in the Browser

by Tom Kenny (@tkenny)

You’re risking the quality of your design work if you rely solely on designing in the browser. That’s what I said when I wrote about a more appropriate approach to designing in the browser, called The 80/20 Hybrid Approach to Designing in the Browser:

Unless you think and dream in HTML and CSS, designing in the browser puts an unnecessary barrier between your great design ideas and the most effective way you can actually design them. You can’t manipulate your design directly with code. The HTML and CSS code effectively acts as a middleman between your brain and your design work. Why would you want something getting in the way of that?


I had some fantastic feedback about that article, with the vast majority finding it useful. However, I did spot a fairly well known front-end developer (who I hadn’t heard of at the time) call it a certain word I won’t repeat here. Despite me saying the approach might not work for everyone, he still decided to attack it. If another process works for you, great, but I’m not going to hate the way someone else does something just because I disagree. I welcome constructive criticism as long as it is, well, contructive, but attacking it and using hateful words is pathetic.

I don’t want to link to it due to the foul language but I do want to pull out a few quotes because I don’t really think he understood what I was saying and it will help explain the approach to you too.

“You don’t actually design in the browser”

I’m sure you’ll agree that seems a bit odd so we’re not off to a good start. Apparently, it’s more about “creating browser-based design mockups/comps, as opposed to static comps” which is something you can absolutely do with the 80/20 approach. I didn’t say you can’t. You don’t have to show the client your static mockups. I’m just putting forward the idea that designing in the browser exclusively can harm the creative process. You can absolutely present your work to the client in the form of HTML and CSS if you wish but that’s a topic for another time.

Creating browser-based design mockups isn’t designing in the browser, it’s presenting in the browser which are clearly two different things.

“Creating comps like this puts many designers out of their comfort zones. Many feel they have to learn to code, or “think in HTML and CSS”. Those who know that isn’t true can still feel awkward pairing up with a developer to visualize designs. That said, I think that learning CSS can be a useful addition to a designer’s toolbox.”

I completely agree that web designers should learn CSS as it makes us better understand the environment we design for. Coding knowledge is implied in the 80/20 approach because 20% of the creative process happens when building the site.

“We sure do like our comfort zones”

Comfort zones can be dangerous but there’s nothing wrong with staying in your comfort zone in some areas. If you can stick in your comfort zone with your process, it frees you up to expand out of your comfort zone in other, more important areas. Right now I’m learning how to deliver much more value than the average web designer through more than just design. I’m going out of my comfort zone by learning copywriting to help my clients with another aspect of their websites. Clients don’t really care about your process, they care about results.

The next two points were placed under the headline “Flimsy Arguments”. Everything I write on Inspect Element has to be substantial, so I’ll tell you why he is wrong.

“The author states that the desire to increase the speed of design and development is the driving force behind designing in the browser. While speed may be a factor, it’s arguably not the main factor, and certainly not the only one. More important, for example, is bridging the traditional gap between what the client sees in a comp versus the end result.”

It’s fair to say people want to show clients their designs in the browser which is relatively simple to do if you know HTML and CSS. The real problem is how responsive web design adds a significant amount of time to the process. In my experience of talking to other designers and researching this myself, I’ve found that this is the biggest issue. Like I said earlier, you can present your work as HTML and CSS no matter what approach you take.

“The author then proceeds to make the case for Photoshop instead of code (albeit with an 80/20 split). Nothing wrong with that, but the author’s personal experience with code yielding “dull” designs does not mean that code yields dull designs. It most likely means that the author tried getting into code too soon, or skipped sketching altogether, or is simply not as comfortable in code. I would agree that might not work out well. But in that case it’s the design process at fault, not the fact that code is used at all.”

Code doesn’t necessarily yield dull design but it’s much harder to be creative with the barrier of code. Moving elements on a page and experimenting is so much easier and quicker in a dedicated design tool than in CSS. If working in CSS comes easier to you than in a tool like Photoshop, then that’s amazing and I really mean it because it’s difficult. If you can truly create better work that way then you’ve got a major advantage over other designers in terms of speed.

It’s not just my personal experience. It’s also the experience of other designers I’ve spoken to. I’ve tried many ways to make designing in the browser work and I’m perfectly comfortable in CSS but I, along with other designers, have found greater success desining in a dedicated design tool first.

“Code can support the creative process”

Of course. In the 80/20 approach, code absolutely supports the creative process as you do about 20% of the creative work in CSS. In fact you can decide how much. The 80/20 isn’t set in stone.

It’s All About You

Luckily, I’m not trying to appeal to this one guy. The real goal of writing this follow up is to help you. I know it works extremely well for me and I know it also works for other designers, so hopefully this follow up helps clarify the approach so you can take it, or parts of it, and make it your own to create better work.

Design Inspiration from the World's Best Designers

Learn why the best designers make the decisions they do to design successful websites people love in this FREE eBook with 3 in-depth case studies. I’ve spent hours studying what makes these websites amazing, so you can use what works and focus on your design work. Subscribe now to get it immediately.

100% privacy. No spam. Completely free!

by Tom Kenny

I’m a freelance web designer and front-end developer with over 7 years of experience designing for the web. Follow me on Twitter here.