A review of Macaw's "code-savvy" web design tool from a front-end development perspective.
I realize that I am a little late to the party when it comes to reviewing the functionality of Macaw. I was not on the list of users for the Early Bird Release months ago. This may have been for the best because, from what I hear, my view of what Macaw has to offer is not tainted by past frustrations. However, now that Macaw has been officially released for a few months, bugs have been fixed and I am able to take a good look at its functionality, I believe I may still be able to catch that proverbial worm.
Macaw shows its wingspan
Let's discuss the interface. This is what I feel Macaw has gotten completely right. It’s truly a simpler version of photoshop that translates those settings flawlessly to properties in the stylesheet. For instance, there are no blending modes and insane layers upon layers that cannot cleanly be carried over to the website. You can add multiple backgrounds, reorder them and it all comes out as clean, compressed styles. The same goes with the CSS properties associated with any HTML element. The font, box model and other aesthetic properties are easy and intuitive to find and manipulate to make a truly appealing website.
While there are many great features to highlight, one of my favorite attributes is the ease at which someone can make breakpoints for their website without knowing anything about CSS and media queries. I can add as many screen/device sizes that I think are necessary for the design to break down properly and the actual canvas can be toggled to a preview of that size simply by clicking on that breakpoint.
That option, coupled with a resize bar on the right-hand side of the canvas for constant quick-checks, makes the complicated concept of responsive design much, much easier.
Another aspect that I feel deserves to be emphasized is the ability to view a published, local version of the website. Any concept designed in Macaw can be viewed by any other device on the same network.
By simply publishing the project, Macaw creates a web address that others can use for testing and review. This is not a new concept and not even the first piece of software to supply this type of testing environment, however the simplicity of the “Remote Preview” (as Macaw refers to it) makes this a very convenient feature.
Additionally advantageous are the shortcuts provided by the software and it is one of the first things I recommend learning. This might seem like putting the cart before the horse, but I found that working in Macaw without using shortcuts is very tedious. The developers have dispensed great shortcuts for snapping to the grid, moving elements around solely based on the grid structure, visual copy/paste and numerous other actions that can increase your productivity significantly. To view a complete list of the shortcuts, go to Help > Keyboard Shortcuts or check out this post of 17 Macaw Keyboard Shortcuts You Should Memorize.
If you are attempting to learn this software, I would also try to get my hands on as many videos as I could before actually digging into the product itself. A video that I found very helpful was the Sneak Peak video by Tom Giannattasio found all the way at the bottom of the list. Tom is the Founder/CEO so he obviously knows his way around the product. Tom’s tutorial isn’t for a complete beginner as he does not take the time to explain the execution of his actions or how he performs those tasks. It was however the most helpful video that I saw surrounding how Macaw was intended to be used and traditional projects created. I liked his workflow and when I started using some of the techniques I saw throughout the video I was able to re-create a page that originally had taken me 2 hours in about 30 minutes.
Macaw’s Fowl Play
While I do see great value in Macaw, I also see some serious shortcomings that worry me as someone in the industry that attempts to provide clean, readable and semantic code. There are poorly coded websites everywhere. In fact, as I was learning this trade I probably contributed to that group on a regular basis. As my skill set has grown, I try to think about what I’m coding and why I’m coding it that way. Let me show you what I mean and where I believe Macaw falls short.
When I create a text element in Macaw, the default element is p.text. I can change that to a h1, etc. if I believe that to be the correct element, but I'm not required to. I can simply change the aesthetic properties and move on. What I end up getting is a semantically <i>incorrect</i> website. I know, I’m carrying that legalistic, puristic attitude. Maybe, but what is HTML? HyperText Markup Language. The whole concept is centered around structuring content in a meaningful way. How does this type of website carry with it any relevant structure? If you do use Macaw, please try to think about what you’re doing. If you don’t know, ask. If you can’t ask, then at look at resources like HTML5 Doctor for help. It’s fine if it’s not perfect, but at least try!
I feel a little nerdy saying this, but I love styling websites. I love creating a project that is clean, concise and reusable. Unfortunately, I do not believe that Macaw is any of those things when it comes to the CSS that it outputs, aside from possibly concise since the code is minified. Here is an image of the CSS that it output for a small project I created to test the software.
Can I simply say that I would never want to maintain this type of code, let alone provide this to one of our company’s partners (that's what we call our clients). I realize the code is minified and that’s a good thing, but it is quite possibly the only good thing about the image above. The styles have no meaning, a minimal representation of DRY coding at best and really no structure. If this was a large site, it would be a nightmare to decipher.
Now, you can argue that no one should ever look at the code and if you ever have to update this website, you simply open Macaw and go from there. Okay, I’ll buy that. Yet, I guarantee that at some point a project will get out of hand and require something that Macaw either has a hard time doing or simply cannot do. At which point, some developer somewhere will need to dive into the code. I pray that developer is not me.
There are so many other things we could discuss, but I will end with a few thoughts. I was not a big fan of Macaw at first, but once I dove into the product and looked at some of the resources I outlined above, it made a huge difference. I was still interrupted by some bugs and small issues inconsistent with the workflow that I prefer, but that isn’t Macaw’s fault (at least not the workflow issues). If you are a designer, this could potentially be a great tool for you. Personally, I will have to keep waiting and watching until some of the issues I described above are cleaned up. I’ve read that some believe this tool will remove coding entirely, but I feel that, as it stands today, nothing could be further from the truth.