Pencils and oil paintings

Imagine drawing with a pencil and instead of the lines on the paper appearing instantly as you drew them you had to wait five seconds, put away the pencil and flip your sketchbook to see the result of what you just drew. If you wanted to change or add something you would have to flip the sketchbook back again, pick up the pencil and draw some more. Then repeat the whole thing agian.

That would be frustrating, right?

Well, that’s pretty much what working with web coding has been like. Write some code, save the code, switch to the browser, reload the browser, look at the page, switch back to the editor, write more code…

The web sites we used to make were like pencil sketches. And there are tools (Photoshop for example) that are really great for creating sketches like these. It’s like using a real pencil. After you had made a sketch you just needed someone to copy it using the time-shifted code pencil so that it became a website. And for someone with the coding chops that’s not too difficult, if you know exactly how it should look.

But these days, the web sites we are building are more like oil paintings. Much more complex than pencil sketches, with color and structure that you can’t communicate through a pencil sketch. So no matter how nice that Photoshop pencil sketch is, there’s still plenty of work left for the guy making the oil painting. And he still only has time-shifted brushes and pencils to work with.

Designing with code is hard. You basically have to become Cypher from The Matrix to be able to design properly “in the browser”.

Obviously that’s ridiculous and quite naturally people have been working hard to make better tools for us struggling front-end artists.

Now, there are two ways we can improve the tool set here. Either we can make the switch out the pencil for something more like real paint and brushes and we can make the time-shifted code brushes less time shifted.

New tools

Adobe are with their Edge line of tools doing both of these things. Edge Code, built from the open source editor Brackets, aims to connect the code editor to your browser. Changes made to CSS are instantly updated in the browser, without you even having to save. HTML changes requires a file save, but the page is still automatically updated. Edge Code still has some way to go but it’s a promising project. And still, for someone who doesn’t know their code already, using it as a design tool will be like drawing with blindfolds on.

Edge Reflow comes from the other direction, aiming to extend Photoshop and to help create responsive web designs. It allows you to make responsive layouts pretty quickly if you have a Photoshop file to start from, and it will keep assets created in Photoshop in sync with the Edge Reflow layout. You can also export a “real” web page to view in the browser.

However, it’s not more than a set of colored pencils. There’s no support for interactivity. No hover states, no touch feedback, nothing at all more than just static layouts. It adds another dimension to Photoshop mockups

Other tools, like Divshot and Webflow, are attempts to remove the coding blindfolds and make the web pages as editable as the code itself.

There are plenty of projects that aim to improve the coding workflow as well. Mixture for example provides a toolkit to help fix many of the problems with coding, for example it automatically loads all your saved changes into any connected browser (on any device). Neat.

Future

So, what is the holy grail of web design tools? Well, to go back to the painting metaphor, we want brushes and colors that are not time-shifted, that give us immediate feedback without limiting what we can produce.

No matter how good tools like Edge Reflow become, we still have to translate their output to “real” web stuff. We would – at best – be back where we were in the “good old days”. But I think it’s unrealistic to expect them to do anything but play catch-up with web technologies, and that means they will always be limiting what we can create.

Coding tools on the other hand will always be able to produce whatever the underlying technologies allow. That’s where the potential is. If we can make coding tools that give us good enough feedback on what we are doing then they can be used to create things in a whole new way.