Ever since responsive design came onto the web scene, designers and developers have been struggling a bit to figure out not only their roles going forward (should designers code?) but how best to fit responsive design into their web workflows. The days of creating a static web design in Photoshop seem numbered. How do you convey the responsive nature of the design? Create 14 Photoshop files for each device size? Not my idea of fun.
A veritable explosion of visual responsive design tools has come about in the last year or so. The latest to the scene is Macaw. Macaw is billed as a web design tool that can also write semantic HTML and clean CSS. Their clever tagline sums it up (see Figure 1): “Stop writing code, start drawing it.”
Figure 1 The Macaw home page
In this article, we’ll take Macaw for a test drive and see what it is capable of. I’ll even throw in a few comparisons to other tools like Adobe Edge Reflow CC where applicable.
What Is Macaw?
Macaw, as I mentioned earlier, is a visual web design tool for designing responsive websites. One of the first questions I hear is, “Where does it fit in with Photoshop?” or “Can I get code from the design I create?” Macaw, much like Adobe Edge Reflow CC, is meant to be used as a web design tool for prototyping and creating code to be used for the front-end of your site. It’s not meant to be used as a CMS (content management system) such as WordPress, or to add a shopping cart or blog. Although, the code that Macaw creates can be used by a developer to help create those things.
Macaw doesn’t have a monthly subscription; rather it’s yours for a one-time fee. As you begin to work in Macaw, you’ll notice that you need a handle on at least the basics of HTML and CSS because most of the formatting options revolve around CSS properties.
Macaw is currently (as of the writing of this article) at version 1.0.3, which means it’s a bit rough around the edges. I’ve crashed the program more than a few times, and I miss not having basic things we’ve come to expect in our programs like right-click context menus or the ability to zoom, but all in good time. The Macaw team seems willing, capable, and eager to listen to its customer base.