Web design and development tools tend to focus on a code based approach to building websites. However there are some tools emerging that aim to challenge this convention, claiming to make design & build a faster process than can be completed manually. I was dubious to say the least, my initial concerns included; code quality, ease of updates, scripting, usability and everything that as designers and developers we have to consider on a daily basis. Let’s see how some of these pretenders actually perform.
Macaw is not a content management system and does not have any ecommerce capabilities; Webydo on the other hand does content management and can integrate its own ecommerce platform to create an online shop.
Webydo tries to do all it can for the user from design and build, content management and some ecommerce to actually providing a mechanism for billing clients, customising the interface to your own branding and actually setting the site live on your own domain. Whilst Macaw appears to just replace a PSD to HTML service with WISIWYG capabilities for the more code shy of us. A code review comparison of the two would be a good place to gauge the quality of these software packages, however Webydo does seem to win in the capabilities stakes.
There are existing IDE’s that purport to ‘read’ Photoshop files and create HTML and CSS directly from the PSD, this will test a company’s internal processes and a company that does not concentrate on properly presented PSD’s will struggle with this approach.
Using These Tools
Having tried a few tutorials I am finding that all browser based design tools such as these tend to place restrictions on the widths of websites that you can work with. Toolbars etc take up screen real estate and don’t leave enough preview area to manage assets and tools. It quickly becomes obvious that someone without HTML and CSS knowledge will find using these tools very hard, no experience of responsive design will also hold you back here. CSS breakpoints are very easily applied but editing every element for each breakpoint seems to be an extremely laborious process that is further hampered by the fact that nesting elements correctly is virtually impossible in the visual interface.
Naming of elements is extremely poor, element-1, element-2 etc with Macaw, this will cause code that is difficult to debug and has no semantic meaning whatsoever. This un-semantic code would also be a nightmare to integrate into a CMS by the very nature of the way it is generated, verbosely.
The process of creating elements or pages is not very quick at all, this could be improved with experience, but to gain that experience one would have to invest time perfecting workflow and learning the intricacies of this particular interface, I have to ask, as they currently stand whether it’s worth the time and effort. Surely it would be more time efficient to just learn HTML and CSS, it would certainly produce websites whose updates were performed more effectively.
Opening an HTML file that has already been created is impossible, Macaw just does not understand properly written code, and this is a massive drawback in that only projects created using Macaw can be edited by Macaw. Very poor, this lack of functionality seriously limits its usefulness.
On the plus side, should you have bothered to create a project in one of these browser based IDE services and then look for client approval, it is reasonably easy to move elements around and change fonts, colours etc on the fly. This will be very useful for customers who believe that a fully built website is time to start tweaking and fiddling with it, to the detriment of the codebase that they are going to pay for. Although this not quite as easy as it may initially seem, there is quite a bit of fine-tuning that may be better handled through code that can then be deployed in a normal way.
o Looks more sophisticated than Macaw and includes Angular, Bootstrap and Foundation integration, but yet again no content management or ecommerce, this functionality still has to be developed.
o Primarily intended for designers, Edge Reflow helps them produce quick responsive mock-ups to show clients, has a workflow integration with Photoshop
o More of a CMS really, but has a browser based IDE, with a custom templating engine
o Documents as websites, an interesting concept; proposals, quotes and estimates can be presented as websites. More investigation may be beneficial but essentially these are all microsites.
o Yet to be released but appears to have potential, integrated content management and ecommerce and very nice ‘coming soon’ website, however potential is just that and until release we simply cannot gauge its effectiveness
o Create in Adobe Flash and export directly to CreateJS timeline CSS/JS animations, the author of this utility is involved in the creation of The Grid
These tools are not quite production ready yet. The Grid(.io) advertises itself as a more intelligent solution; however this may be based on its standing against other such tools rather than as an alternative to the current process of design then build, using code.
Responsive tools exist within these products, however this does not mean that they are easy to use, they aren’t. Literally every element has to be manually replaced at each breakpoint, very time consuming and very fiddly.
There are other drawbacks, fonts are limited to Google fonts without a paid Typekit subscription. Tables are not available at all, there is no scripting available, you have to write your own.
I still haven’t found a way to format text as heading tags, this again reduces the capabilities of these products to that of web design toys, I’m really not sure that there is a place in a crowded marketplace for products such as these. Adobe Muse was one of the first of these kinds of products but has failed to gain any traction in the marketplace despite being backed by Adobe. Edge Reflow (above) appears to be its successor.
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.
is a pro version of Macaw which is now re-named to Macaw Indigo, this version was not part of this test.