Designing in the browser

The “design in the browser” approach has been widely discussed lately. Some like it. Some don’t. I haven’t really thought about designing in the browser as a concept until I found myself doing it a lot unintentionally.

Without even noticing, I’d been transitioning slowly but steady to design more and more in the browser only. Let me tell you why.

The rise of responsive web design

Not long ago, we as web designers had a fairly strong notion about how our work was gonna be viewed. A 1024px wide screen was considered the lowest resolution worth designing for. So we created a 960px grid standard. This was the canvas we had to work with and this was how the end user was gonna see the result. The Internet was considered to be viewed when you were sitting at your computer, and if your screen had a resolution of 800x600px, well too bad.

Things have changed

The Internet today is constantly around us everywhere. You can navigate the web on your phone while you’re on the go, on your 50” TV at home and everything in between. So we can no longer design our websites like it is a canvas. There’s no idea to know what kind of device the website is gonna be viewed on. Web design can’t be fixed anymore, it needs to be flexible. Content and design needs to flow like water and take the shape of whatever container it’s poured in to. We needed a solution, Ethan cracked the idea of responsive web design and it has been widely adopted since.

Adapt to a new way of designing

So the way we coded changed. But Photoshop hasn’t changed. Creating mockups in Photoshop are still fixed comps. We can of course go ahead and create a couple of different mockups for different viewports but that is, in my eyes, to go overboard with things and will require a lot of maintenance. Instead of putting a lot of time to create Photoshop comps, isn’t it better to do the design directly in the browser? The browser is after all where the end result will be.

As I said initially, I myself have transitioned a lot of my work to the browser without even noticing. After experimenting with it for a while I started to see some of the advantages this approach has.

I know what I get. Many are the times when I’ve banged my head against the wall after coding up a design, just to find out that the browser is not even nearly rendering my custom font as nicely as it looked in Photoshop. When designing in the browser I’ll get direct feedback, all the time.

Keep it clean. Before, I usually found myself adding a little too much of the bells and whistles when designing in Photoshop. When designing in the browser I’m keeping focus on what’s important.

Flexibility for all. When it’s required to do some changes, it’s so easily done in code and the changes takes effect immediately. No middle hands. Code is flexible. Photoshop comps aren’t.

Inventing on principle. The most interesting aspect with designing in the browser is that when I do, I can play around with stuff in realtime and find exciting new solutions I’d never discover otherwise. This presentation from Bret Victor shows exactly this:

To the future

Something that is gonna be important for this to be widely adopted is that we have great tools for this kind of workflow. The different web inspector tools needs to be improved, and we need more handy tools like Typecast and ColorSnapper. So is designing in the browser the future? I’m not sure. I can’t tell the future. What I can say though is that I will most probably continue my transition to design even more in the browser, and what do I know, maybe a year from now I won’t even need Photoshop.