Macaw Web Design Tool Tutorial

When I worked as a web designer, I'd daydream about a program that would eliminate the hassles of coding by hand. I longed to draw and style elements directly onto a page, as easily as in Photoshop. Macaw 1.5.15 offers that tantalizing promise—but its attractive plumage conceals a bird that needs more meat on its bones.

Macaw 1.5.15 interface — Macaw's slick, appealing interface will come naturally to Photoshop users.

A beautiful specimen…

If you've used anything Adobe lately, you'll feel at home in Macaw's somber, elegant interface. Pick tools—including containers, buttons, text, and input elements—on the left. Adjust a selected element's settings on the right.

A customizable grid keeps designs tidy. Elements can snap to the grid lines or to each other's heights. As you move a text block or container around the page, Macaw will show you the numbers that dictate its position relative to other objects on the page, which you can subsequently fine-tune at the top of the screen. You can lay out your page with static, relative, and/or absolute positioning.

Macaw 1.5.15 breakpoints — Macaw makes it admirably easy to create breakpoints that restructure your design at various screen sizes.

I enjoyed how Macaw simplified many aspects of CSS styling. Well-designed controls let you adjust fonts and their kerning and spacing, change padding or borders, or add drop shadows and other styles. A menu at the bottom left creates and customizes style classes, either from scratch or from a single element you've already styled. Once you've copied its characteristics, a few clicks will apply them to any other element.

It's also easy to specify each element's ID and class, or give it a variable name for scripting. Despite my beyond-rusty jQuery knowledge, Macaw's scripting support impressed me. You'll have to write your own code, but Macaw keeps track of any element to which you've assigned a variable, and any color swatches you've created, and lets you drag them right into the script as you write it.

Macaw's support for responsive design deserves particular plaudits. Since webpages now need to render well on a variety of devices and screen sizes, responsive design lets you alter a page's look and layout based on the width of the display. Macaw lets you drag the edge of the screen in and out, set different pixel-width breakpoints with the command key, and then change the styles and layouts for each. As the screen width changes, Macaw remembers your choices and shifts to them on the fly. (The program does impose some limits—you can't set a new breakpoint within 40 pixels of another.)

In addition, I liked Macaw's handy preview feature. Once found—it's disguised in the menus as Publish—it brings up a full-featured window whose address you can type into any other browser on your network. It's an easy way to see how your site will look on any devices you have handy.

Macaw 1.5.15 global classes — You can create global classes from scratch, or copy their parameters from an object you've already styled.

… that occasionally bites

For all the things it did well, Macaw also showed a lot of rough edges in ways big and small. The bumps begin as soon as you open the program: Macaw dumps you right into a new blank file every time, without even the choice to open an existing project first.

As of this writing, Macaw's online documentation is lamentably incomplete. (Its GitHub fork includes a to-do list of aspects its creators have yet to cover.) I wouldn't have even known about its aforementioned scripting features, buried inconspicuously in the menus, if I hadn't carefully watched all the tutorial videos on Macaw's site.

Some of the existing instructions are lucid and useful, but others prove confusingly incomplete. For example, the section on adding links encourages you to add them only to <a> tags, but only shows you how to add them to every other kind of tag—a practice it just specifically suggested you avoid. Questions I sent to Macaw's support email received answers within 24 hours, but most of the polite and friendly folks who wrote me back could only shrug and apologize courteously for the absence of features I asked about.

Macaw doesn't yet incorporate many useful HTML and CSS features, including lists, tables, or columns. You can embed your own code in a block on the page, but you won't be able to see the results until you preview that page, and there's no other way to hand-adjust code directly within the program. I also couldn't find a way to edit global styles for individual tags—to specify, for instance, that every <a> tag in your document should be boldfaced and dark green.

Macaw offers an extensive list of Google-made web fonts, but its selections felt boringly similar. Rival Blocs, targeted more at beginners, offers a smaller but more varied roster; Macaw also lacks Blocs' multiple icon libraries. And while it's easy to find plenty of free, open-source, web-ready fonts online, Macaw won't let you add them to its library. You can use your own system fonts in your designs, but you'll have to package them up and code them into your final site on your own. The only other way to expand your font selection in Macaw requires a paid subscription to Adobe's Typekit service.

Finally, Macaw promises to turn your designs into spotless code, but I wasn't a fan of the odd, seemingly superfluous classes it appended to just about every tag in the pages I built.

Macaw 1.5.15 web fonts — Though it boasts an ample list of web fonts, most of them look boringly similar to one another.

Bottom line

I intended to test Macaw by building a small site with it. But after tearing down and rebuilding the same page four times, I threw in the towel. That's partly my fault; Macaw's aimed at experienced designers, and it shows little patience for handholding.

Earlier this week, Macaw's creators announced a new incarnation of the app, Macaw Scarlet, with advanced support for CSS and other powerful improvements for pro designers. The current program will be renamed Macaw Indigo; the company says it's better for early prototyping, while Scarlet—which has no release date as of this writing—is designed to actually produce sites. Though that message seems to contradict how the current version of Macaw initially pitched itself, I can't deny that Scarlet seems poised to fill in a lot of the gaps I found in the original.

Though I used to wish for a program like Macaw, the current version left me longing for my days of coding by hand. If you end up feeling the same, take heart: Among its promised features, Scarlet prominently advertises a text editor for your code.