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.
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.
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.
Sign up for CIO Asia eNewsletters.