When I first began learning to design websites, I used the brand-spanking-new Adobe Pagemill. Who needs to learn code? I was a designer, not a programmer, and I wanted the freedom of the WYSIWYG tools I was used to using for print. The computer should do the boring work of figuring out how to actually specify it. When GoLive Cyberstudio released, I jumped on it. I continued using that tool after Adobe purchased it, and I eventually switched to Dreamweaver after Adobe acquired Macromedia.
By that time, I had graduated with my Masters and was working for a software development firm. It didn’t take long for me to realize why the developers turned up their noses when they saw the HTML I was handing them. Fortunately, I had been working with it long enough that I had developed enough understanding of HTML to be able to start coding by hand. Once I got my hands on CSS, you couldn’t pay me to go back to a WYSIWYG editor. These days, I’m a huge proponent of Object Oriented CSS (OOCSS), speaking at conferences and leading workshops about working with developers and contributing directly to the production code base.
So, it was with much interest and a hint of disdain that I took a look at Macaw, “the code-savvy web design tool” under development by Tom Giannattasio and Adam Christ. I must admit, I’m impressed with what they have shown so far.
Stop writing code. Start drawing it.
Macaw provides the same flexibility as your favorite image editor but also writes semantic HTML and remarkably succinct CSS. It’s time to expect more from a web design tool.
This tool is pretty slick, and you can tell that it has been thoroughly designed by a designer who understands typography, grid-based layout, and code. You can tell that it has been built to address all those little annoyances we web designer/developers face daily. From readouts that tell you things like the number of characters per line, to supercharged key combos for quickly aligning objects (pudging is going to make your heart skip a beat), the application looks to be chock full of awesome.
And then there’s the code. I’m awed by how intelligent their aptly named Alchemy engine is.
We wanted Macaw to write code you’d be proud enough to hand to developers. Current applications rely on trendy frameworks, export rigid positioning and generate ridiculous IDs. We think designers and developers deserve better. Macaw’s powerful, patent-pending engine is called Alchemy and it can do some incredible things.
Alchemy analyzes every possible selector to describe your document and determines the most succinct way of using them based on logical criteria: applicability, specificity and semantics.
Macaw offers designers the freedom of absolute positioning within the interface but will convert to a static document flow upon export by calculating the necessary margins, padding, floats and clears. It’s the best of both worlds.
There is an incredibly elegant outline palette, reminiscent of Photoshop’s layers palette, that not only serves as a method of hiding and showing elements within your page, but also creates the semantic linking between elements and the classes that will be generated in the CSS.
I’m just scratching the surface here. You really should check it out for yourself. I’m not saying I’m ready to start generating all the enterprise web applications I work on in this way, but it sure seems like an excellent tool for sketching, prototyping, and then moving your prototype to usable code. It’s leaps and bounds beyond any editor I’ve seen before. They say it’s coming to the Mac App Store soon. I’ll be following their progress with great interest.