Drawing Code with Macaw

I’ve been playing with Macaw for a few days, and it’s pretty impressive. Macaw is a visual design tool for creating websites, but unlike other tools like Photoshop, it actually writes html and css in the background as you work on the canvas… and it writes surprisingly smart and succinct code.

Responsive design with Macaw

In a Nutshell

Macaw supports smart, modern design practices like designing on a grid system and responsive web design. You can begin by defining a custom grid or stick with the default twelve-column grid. You then drag-and-drop or draw elements on the canvas almost like you would in Photoshop. The difference is that Macaw exposes the HTML elements and their attributes in an inspector, allowing you to tweak their appearance, assign class names, create global styles and even define reusable components—the same way you would if you were hand-coding.

Also, unlike Photoshop, the canvas is fluid. Once you have some elements on the page, you can grab the edge of the canvas and begin shrinking the width of the page. When the layout starts to break, you hit ⌘ to insert a breakpoint and then adjust the styles/sizes/layout of your elements. Repeat this process until you get down to the smallest screen you want to support. This is nice because is supports a natural style of responsive design—one in which you allow the content itself to dictate the breakpoints, not the width of whatever the most popular devices are at the time. As Stephen Hay said…

Start with the small screen first, then expand until it looks like shit. TIME FOR A BREAKPOINT!

Stephen Hay (as tweeted by Brad Frost)

But, but, but… Mobile First, Right?

The problem is, as of this writing Macaw doesn’t support a mobile first approach. It does just the opposite—starts at the largest breakpoint and adjusts downward. Right now that’s a deal-breaker for me and apparently a lot of other people too. I’ll continue to play with the tool for small personal projects or one-off pages, but until it supports mobile first, I can’t consider it for anything serious. The good news is that the Macaw team plans to support mobile-first in a future release (although it seems to be in the works for a long time now).

Real web designer hand code their designs

self-important design hipsters

…And for the haters that say “real designers hand code,” you’re right, to a point. I would never recommend a new designer start out using a visual tool like Macaw. Learn HTML and CSS first. Learn good design practices first. Learn to write modular, reusable code. Once you’re proficient in your craft, though, why not take advantage of a tool that speeds up your process and alleviates some tedium. As long as it supports the good design and coding practices that you adhere to, go for it.

Hear Jeffrey Zeldman interview Tom Giannattasio (the founder/CEO of Macaw) this past spring.

comments powered by Disqus