• 1 minute Read

A Web Dev Tool For Pro Designers Who Want Everything WYSIWYG

Macaw is a powerful design-to-code web app that lets the Photoshop-savvy have their design and code it, too.

A Web Dev Tool For Pro Designers Who Want Everything WYSIWYG
[Image: Flickr user Emily]

What You See Is What You Get (WYSIWYG) editors take the guesswork out of developing a web page but routinely trim features and customization to get the user interface usable by the unskilled Internet layman. Unfortunately, that leaves experienced web designers far outside the WYSIWYG demographic–but a new web design editor hopes to change all that with Macaw, a Photoshop-esque visual editor and algorithmic code-simplifier all wrapped into a WYSIWG web app that experienced web designers will love.

To be clear, this is a web-design tool, not a website-creating code editing platform: It translates your visual alterations into HTML and CSS code. The visual editing tools are diverse and accessible, with layer-style grouping and CSS3 shading and background options. The app is designed with fluidity in mind, respecting responsive web design: the page (and background grid) adjusts as you pinch and pull the base field. Full-screen mode visualizes end-stage “browser view,” illustrating implemented changes and orientation of elements: Whether they move with page scrolling or stay anchored in position, objects and elements appear as you styled them.

Perhaps the strongest feature is the powerful algorithm that consolidates the produced code into the most succinct language possible. For that, the Macaw developers created the Alchemy design-to-code engine from scratch, which ditches the standard chunk-by-chunk code processing in favor of making rapid associations across the entire body of code–resulting in orderly, logical code that a developer would want to use.

Key to user control of this code is the Overview macrotab on the editing panel: consciously based on the cascading list of layers in Photoshop, the Overview lists groups and allows you to rename them to either HTML-recognized terms (e.g. “header,” helpfully colored green to indicate HTML compatibility) or semantic terms (colored white). The end code is appropriately styled and grouped in HTML and CSS.

Macaw is powerful and, at a $99 Kickstarter price point, is comparable to Flux 4,yet far more powerful, and easier to use than the problematic Adobe Muse (which becomes more expensive than Macaw after seven $15 payments for its monthly license). As it’s already raised over $50,000 toward its $75,000 goal within two days of launch, Macaw will likely be in your hands by January 2014, but only for OS X–Windows users will have to wait a few more months.