On Designing in the browser

Over the past few years there has been a lot of discussion on designing in the browser, with big names being both for and against the idea (funnily enough at different times these big names have been both for and against).  In theory designing in the browser makes a lot of sense, after-all our designs are not print outs, they are fluid beast that are only “complete” once they address the quirks of the browser environment.  But can we actually design using HTML and CSS? 

I’m going to document my thoughts on the matter (both pro and con), because it’s something I’ve been doing a lot of recently and I don’t think the answer is simple.

Advantages

There is obviously a few advantages to designing in the browser, if there wasn’t the idea wouldn’t be hanging around.  Lets cover the main ones (please tweet me your own thoughts):

• Adaptive design can be more immediately addressed in the browser and on device
• Design packages can be cumbersome but thoughtfully architected HTML & CSS can be a rapid and flexible tool leading to cheaper iterations.
• Designs in the browser can be user tested sooner.
• Designs in the browser will be realistic. Fonts are one example of something that is completely different between design package and browser (thanks @adhipg).
• There is no separation between design and development. Often small usability or scope creep problems are created in design packages that would never be created in the browser.

The argument for designing in the browser can be summarised by the words speed, accuracy and context.  Perhaps you’re sceptical about the argument for speed, I’m not, but I do see that the gains in speed are not limitless and universal.  You might also be thinking that the problems with designing in design packages are not insurmountable.  You’d be right.

Disadvantages

It’s undeniable that designing in the browser has its limitations.  Yes, we can achieve more  with CSS than ever before but we can’t wrangle pixels in quite the same way:

• Even if we can design complex graphics in the browser (I’m on the fence) should we? Probably not.  CSS, SVG and Canvas is good, but not that good.
• Designing in a design package is more flexible as its content can be output to both web and print
• Code is not a visual tool and Im sure for many designers code is not something that comes naturally where as moving pixels around a canvas does.
• Designing in the browser tends to encourage an aesthetic that is based around what can easily be achieved with CSS, rather than relatively limitless possibilities in a  design package.

These are just the main points, so please tweet me your own thoughts.  All that being, in simplistic terms true, I’m not against designing in the browser and heres why.

There is no one size fits all

Unfortunately I dont think its as simple as “design in the browser” or “design in a design package” because the subtle shades of grey that we are ignoring is the project. Paying attention to the subtle shades of grey that varied projects bring can we still make come to a simple conclusion?  Lets try:

Design in the browser if it will be faster without compromising the projects objectives.  Projects where this is true are likely to be less about the brand and more about content or providing tools in a user interface for getting stuff done.

Design in a design package if it will be faster and will better achieve the projects objectives.  Projects where this is true are likely to be mostly about brand.  Brand cannot easily be created using CSS so instead create it in a  design package but keep the final context ( the browser ) in mind.

Dependant on the projects you work on this might mean you only ever do one or the other.  But that’s fine, this industry is too large and too varied for a one size fits all approach.  Thats what makes it so exciting.

Update

With hindsight, I think I over simplified the topic.  I’ve received some very relevant comments on the subject and these add further dimensions to the subject

@martuishere correctly points out that its not really one or the other.  She also comments that she usually pushes herself more when designing in the browser.

@alexhorre commented that larger companies need locked down skills, so you either wireframe, design or develop.  With such separation of skills (something I disagree with) is there even scope to design in the browser? Probably not.