July 06, 2013

Codeless Web Design Tools are like Home Printers

The other day someone showed me webflow. I thought it was neat, and that the demo was really well done. But then I had to wonder if the world needed another tool for code-less web design.

These tools usually span the gamut of everything from simple photoshop plugins that export CSS to full wysiwyg editors like Adobe’s muse. Then there are web based ones like webflow, and squarespace.

They also span a wide range of intended audiences. I know that as a front end developer, my ideal tool is very different from the ideal tool of a photographer who wants to set up her portfolio without having to learn a whole new skill, and different still from a tool a designer who is just learning to code would use to quickly prototype responsive sites.

A problem see a lot is that there’s been a push towards IDE type programs that try to be THE all-in-one tool for designing, coding, and testing. I think this is the wrong approach. Instead of making a single tool that makes web design easier, we should recognize the two distinct halves of web development: design and code. Our design tools and code tools need to remain design and code tools, while at the same time integrating better into a web design workflow.

For example, our design tools need to learn from the cascading and dry principles of CSS so we can reuse classes and dynamically link objects to update a single style in one place. But it shouldn’t necessarily output css, because our methods or best practices may change, or there may be optimizations that only a front end developer could recognize.

For a while I’ve felt that a codeless web design tool was a lot like a home printer: it abstracts away a lot of troubles, but is really only good for a specific use case. You still need a specialist for professional quality work. And, like a lot of home printers, it will be annoyingly frustrating to fix when they malfunction.