14 March 2012
Design Practice

Designing in the Browser is Not the Answer

The argument for "designing in the browser" seems very seductive at first glance. The web is an interactive medium that defies the fixed canvas of traditional layout tools, so why not use the browser as your primary design environment?

The reason is simple. The browser was intended as a delivery mechanism with HTML and CSS a means of describing content rather than defining it (a subtile distinction I know, but an important one). As such the browser lacks even the most rudimentary tools like the ability to draw lines or irregular objects through direct manipulation. Instead this process is heavily abstracted through code. As the best design tools are the ones that put the smallest barrier between the creator and their creation (the pencil is a good example of this) designing in the browser adds an unnecessary level of cruft to the process.

Despite the ability to create rounded corners, drop shadows and gradients in CSS 3 (along with even more sophisticated effects using SVG and Canvas) it's still preferable to present your richer design details as raster graphics. So designing in the browser forces you to do graphic production in one tool and then design layout in the other. Not only is this an inefficient process but it's also the wrong way round. As such, "design in the browser" encourages a minimal design aesthetic based on the rendering capabilities of CSS. This may be acceptable for a small number of companies like 37 Signals, but I don't believe this is desirable in most situations.

People seem to be treating "design in the browser" as a new idea, but in the early days of the web this was the norm. So it was only through the act of co-opting existing design tools like Photoshop that the quality of design on the web was pushed forward. Now I'm not saying that "design in the browser" will relegate us to 1999 style websites, as both the technology and our aesthetic abilities have moved on, but I do think it's a step backwards rather than the great leap forwards as many people are suggesting.

This doesn't mean that I believe that Fireworks or Photoshop are perfect tools and I'm fully aware of their inherent problems when it comes to the fluidity of the web. I just think that on balance and in most situations, these tools are the least worst options we have available. That's not to say that all design must happen in Fireworks/Photoshop, or that no design should happen in the browser. After all I work for a company that believes in the power of HTML/CSS prototyping and does responsive design by default, so understand that a certain amount of back-and-forth is inevitable.

Until our tools evolve, traditional graphic design tools like Photoshop and Fireworks will remain the natural jumping off points for the majority of projects for many years to come. Designing in the browser isn't the magic bullet many in the industry want (or are promoting) it to be. However I do think it's a useful sign-post in what should be the true quest for a truly native web design tool.