Let’s get one thing straight — I’m a huge believer in the relative and subjective nature of ‘best practice’. In creative(ish) fields like web design, one’s individuality should be considered an asset. So when it comes to the question of workflow and methodology, if you find a way that works best for you, always and unequivocally — it’s the right way.
There’s been a lot of chatter across the interwebs lately about ‘designing in the browser’. Its basic premise is a removal of the middle step in a traditional workflow of website creation. To be crude: Content > Brain > Photoshop > Browser becomes Content > Brain > Browser.
Sounds liberating, doesn’t it? That’s because it is! At least, on the level of our reliance on cumbersome software, tool panels, channels and layers. However on another level — one that’s concerned with the link between our imagination and its realisation — perhaps it’s not that liberating at all.
I’ve read the arguments for and against, and both have really valid points. I frequently work directly in the browser and for some things it’s a much more efficient way to go.
I’d rather have a design that’s challenging to build than a build that’s challenging to design.
But before you throw away your copy of Creative Suite, it’s worth considering that directly using the browser to design websites may affect your process in a couple of ways that might not be immediately obvious.
Speed, or perhaps a better word, responsiveness is really important when you design anything. The importance of realtime feedback is something that can’t be downplayed. The people at Adobe know this, and that’s why wherever possible, changes you make in Photoshop are shown as they’re happening — with tactile controls rather than simply changing numbers. This responsiveness lowers the investment in change. It helps foster experimentation and trial and error.
This disconnect between process and result is something Jack Zerby calls friction and it’s something we’ve tried to reduce as much as possible with Flavors.me for the reasons above.
When this process is lengthened by even a few milliseconds, it can stifle that mad scientist who works ‘on the fly’. It’s not always possible to be calculating with ideas — they’re here and then they’re gone. Sometimes they need to be trialed immediately.
When this rush of inspiration occurs, the fallout is often pretty messy. When it strikes in Photoshop, I rarely label layers or worry about layer groupings. Often I’ll cut corners to see the idea realised while it’s fresh. In this state, I’m more concerned with what I’m looking at than how I get there.
When we move this process to the browser, for me, it’s the code that bears the brunt of this haste. When something doesn’t render how I’d like, I find a hacky solution that makes it look as I want as soon as possible. That’s because in this formative stage, the value isn’t in what you’re typing, but in what you’re seeing when you click ‘refresh’ in your browser window. Ultimately, this results in quite a bit of work in rewriting the CSS to fit the now-apparent design. If we can start writing CSS knowing where we’re going, the ‘Cascading’ nature of the stylesheet is better realised.
Perhaps most important in shortening the chasm between our minds and our designs is maintaining a certain degree of freedom. Currently the new-found wonders of HTML5 and CSS3 have us bedazzled. Rounded corners, shadows, gradients — it’s fabulous.
But let’s not forget. The browser is a box.
It’s a box that is ruled by compromise. Knowing the tricks to elegantly execute our Photoshop creations across different browsers forms a large part of what makes a good web designer. The creativity and ingenuity to work around the limitations of the browser is part of the fun. Rather than meet these compromises right away, I’d rather have a design that’s challenging to build than a build that’s challenging to design.
Even with the new treatments and effects available in CSS3, if we don’t think beyond it and outside it, how can we ever break new ground? Many of these new features and effects may not have even been included in CSS3 had they not become standard fare on the web through image-based sprites and other clever sleights of hand.
Having the means to design free of the limitations of the browser is important. While you need to keep these limitations in the back of your mind, they shouldn’t dictate your vision. It’s understandable that some people have a problem designing websites in Photoshop (I do too), but abandoning it for the browser might not be the solution. Whatever tools you use, having a seemingly open ceiling on where you can take things is key. I strongly advocate testing things in the browser as soon as possible, but only as a means of keeping you on track. Like always, as you squeeze into that box, it will quickly sober you up like a cold fish to the face.
—Published 26 March, 2010