Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Design > Voices That Matter

The Next Generation Responsive Web Design Tool: Macaw

  • Print
  • + Share This
With the advent of responsive design on the web, workflows and roles have been changing on web teams. Because of this, a flood of responsive design tools has come about that can also write semantic HTML and clean CSS. Macaw is one. Adobe expert Brian Wood dives into Macaw and explores a typical responsive design workflow using it.
Like this article? We recommend

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.

  • + Share This
  • 🔖 Save To Your Account