Menu Search
Jump to the content X X
Smashing Conf Barcelona 2016

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

Next-Generation Responsive Web Design Tools: Webflow, Edge Reflow, Macaw

To prepare for a talk about the changing roles of designers and developers, given at HOW Interactive a few months back, I interviewed 20+ web shops. Validated by my own experience, I found that many of them faced challenges fitting responsive design into their workflow, and the role of most web designers had changed to include coding in some form or another.

At least half of the designers knew HTML and CSS well but wanted a more visual way to get at it. Well, a new generation of visual responsive design tools has arrived. These responsive design tools are for anyone who understands HTML and CSS (or is willing to learn) and wants to visually design a responsive website — and have code to show for it.

Some of the newest and most notable visual responsive website builders are Webflow, Adobe Edge Reflow CC and Macaw. Yes, a million others are out there, including Squarespace, FROONT and Easel, but we’ll focus on a few in this article. My intention isn’t to champion these tools, but rather to familiarize you with them and discuss their strengths and weaknesses.

For the record, I’m a front-end developer who hand-codes responsive websites using several frameworks and my own code as a starting point (along with WordPress). I’ve always been leery of generated code, for good reason (remember GoLive?), but I also understand that tools like these have a time, a place and, yes, an audience. You could use one of these tools in the design process to create responsive comps, regardless of whether you intend to use the generated code. I’ve even taken to using a few for quick prototyping. Blasphemy!

So, let’s have a look, starting with Webflow.

Webflow Link

Like all of the tools we’ll discuss, Webflow1 is a relative newcomer to the scene. It’s an in-browser drag-and-drop editor for creating responsive websites without having to stare at code. It requires a monthly subscription and has multiple pricing levels for individuals and teams.

Included in all of the subscriptions is hosting on a content delivery network using a subdomain (, unless you want to pay a few dollars more for custom domain hosting. But you may also simply export the generated code and take it where you want. How’s the code that Webflow generates, you ask? It’s based on Bootstrap 3.0, and, yes, some of us could write cleaner, lighter, more semantic code, but all told, Webflow’s code is relatively clean.

After you sign up and log in, you get to Webflow’s dashboard. This is where you control your account, manage website settings and start your website. By default, there’s not much except a big blue button staring you in the face, urging you to create a website. You can either use a template or start from scratch. There’s even a marketplace for templates, paid and free, where you can sell your own Webflow templates.

Getting started with Webflow2
Getting started with Webflow (Large preview3)

Building Blocks Link

Once you’ve started a website, you’re taken into Webflow’s designer, where the magic happens. In the designer, currently supported only in Chrome and Google Canary4 (which is basically Chrome for developers, with new features being added almost daily), you’ll be staring at your first page in the browser, with a toolbar on the left and several panels on the right.

Generic operations (such as adding pages, publishing and previewing) are on the left, and the nitty-gritty content and formatting options are on the right. From the “+” panel on the right, you can drag layout elements (divs or HTML5 elements set to a max-width or a width of 100%) and a customizable grid into the default desktop layout.

With your basic structure in place, you can begin inserting page content. Webflow comes with a set of standard web components (including lists, links and text blocks) and a series of customizable widgets (like social media icons and responsive sliders) that you can drag into the page’s structure. For images, you can use GIF, JPG, PNG or SVG, as well as images optimized for Retina and Hi-DPI displays. You can also drag the “Embed” widget into the design to add your own code.

Webflow’s designer5
Webflow’s designer (Large preview6)

Design Link

While Webflow is drag and drop, the experience isn’t quite like designing in Photoshop or Illustrator. The content you build fits together more like a jigsaw puzzle and is positioned using typical CSS properties such as padding, margin and position.

As a coder, I appreciate how effectively Webflow visually displays the HTML structure and CSS properties. As a result, working knowledge of HTML and CSS is necessary, and first-time website builders might be a bit perplexed by a few of the options, but that’s what the video help is for, along with the inline help icons (“?”) everywhere.

To be honest, the style panel on the right, where you adjust most of the CSS properties, is relatively intuitive, and the way it handles CSS properties such as padding and margin is pretty clever. CSS coders might feel it lacking and want to see the code. Sharing content between pages is pretty simple, and some SEO-related content, such as titles and descriptions, can be set per page.

Edit styling7
Edit styling (Large preview8)

Defining Your Responsive Design Link

When it comes to how the content actually responds to browser size, Webflow follows how the industry originally approached responsive design: for three devices or breakpoints. As you add and design your content and areas, you can determine which device sizes (of three) they will appear on.

You can also easily preview the design in the three sizes from within the interface. Currently, the breakpoints aren’t editable in the designer, unless you add your own code in the dashboard or export the code and edit the CSS elsewhere.

Switching between breakpoints9
Switching between breakpoints (Large preview10)

Fonts, Media, Forms and Linking Link

  • Fonts
    These days, hosted fonts are a must for any self-respecting designer. Integrating Google Fonts or a kit from a Typekit account can be done in the dashboard, and those fonts will then be accessible in the “Font” menu in the design area.
  • Media
    Adding media (including video from Vimeo and YouTube) is pretty easy, too. Webflow uses Embedly to embed content from a long list of providers.
  • Forms
    Simple contact forms are also available and can be set up and designed pretty easily. You can have the data sent by email: Just grab the form’s captured data from the settings in the dashboard, or hook the form to another script (or just insert your own form code).
  • Linking
    Aside from the typical linking options (like between website pages, email and phone), Webflow allows for linking to sections of your pages, with smooth scrolling between automatically inserted anchors. You can also insert a link block, which is an area of content with a single link applied to it. You can also easily adjust the appearance of your links by styling them.

Working With the Code Link

As with most other tools, some of the more advanced HTML and CSS features are hidden by default in the workspace but can be toggled on. If you’re feeling adventurous, you can also assign your own classes to content and rename and delete them in the Style Manager. If you’re handy with code, you can insert your own in the head and body tags in the dashboard. This opens the door to adding custom components, like jQuery plugins and a lot more.

Inserting code11
Inserting code (Large preview12)

Integrating With a CMS Link

Webflow is currently a static website builder and isn’t tied to a content management system (CMS) or blogging system. You could export the code from your Webflow design to use as a starting point for a WordPress (or other) project or even as a flat-file CMS. But once the code is exported, it loses its connection to the original design in Webflow.

A useful feature of Webflow is the ability to save website versions. These days, most of us who develop websites for a living use some sort of version control, so that, in its simplest form, we can revert to earlier versions if a problem occurs. When designing in Webflow, you can either manually create a version or leave it to Webflow to create one automatically every 20th save.

A restore point will be created in the dashboard’s website settings, and you can add a note at each restore point. Then, if something happens, you can restore the entire file (i.e. website) to a previously saved version. So, writing yourself a note at each restore point to explain where the website is at is a good idea.

Restoring versions13
Restoring versions (Large preview14)

Publishing and Exporting Link

Publishing to Webflow’s content delivery network (included in the cost) is pretty simple, as is exporting if you prefer to take the code elsewhere. I can imagine several uses for this: people using it to create their own static responsive website; designers using it to demo a responsive design or to hand off the exported code to a developer; and developers using pieces of the generated code in their projects. Webflow also enables users to work collaboratively (which costs more), including by sharing templates, transferring websites to clients and more.

Exporting code15
Exporting code (Large preview16)

Adobe Edge Reflow CC Link

Edge Reflow17 is part of the family of Edge tools and services that Adobe has introduced in recent years. The family includes Edge Reflow, Edge Animate and Edge Inspect, and it is a part of the Creative Cloud, which is subscription-based. Unlike Webflow, which is browser-based, Edge Reflow is currently an application that you download and install on your hard drive. Because Reflow is still technically in public preview mode (like a beta that’s available to the world), it isn’t fully baked yet, and things will most likely change in future versions based on user feedback.

Edge Reflow is a design tool that captures the “in-betweens” of a responsive design, which are often difficult to convey when handing off a project to a developer or when presenting design concepts to a client. In other words, Edge Reflow makes Photoshop files more responsive-friendly.

Building Blocks Link

When beginning a project in Reflow, you can follow one of several methods. You can create a Reflow project that contains the pages of your website and start from a blank canvas, so to speak. You can import web images and Photoshop content and then build your design; doing this, you could even import the content into your Reflow project directly from a Photoshop CC file (version 14.1+ only — CS6 and earlier will not work) if the Photoshop file (PSD) has been set up properly.

A third method is to export a Reflow project from Photoshop CC (14.1+) as the starting point for a responsive design in Reflow. This allows you to import shapes, text and assets that you’ve defined in the Photoshop document. Using the generator technology built into Photoshop CC (14.1+), web-optimized images are automatically generated based on the layer names in Photoshop. This connection is one of Reflow’s big selling points for those of us who rely on Photoshop for web design.

The Photoshop connection in Edge Reflow18
The Photoshop connection in Edge Reflow (Large preview19)

Design Link

When it comes to design, Reflow is fairly similar to Photoshop and InDesign. You reposition elements visually, rather than edit the CSS and HTML to move them. Reflow also requires you to draw containing elements in the design space, rather than drag them in (like in Webflow). The float: left declaration is applied to all elements in Reflow by default, so dragging content that is on the page can be painful in the beginning. Once again, though, the application requires you to understand HTML and CSS concepts because most of the layout-related functionality is based on them.

To aid your designing, Reflow comes with an editable grid that allows you to edit columns, gutters and opacity. Each responsive breakpoint can have a different grid setting. You can create multiple pages, and the closest thing to adding CSS is to copy and paste the visual styles from one element to another. Reflow also allows you to access base CSS options for the body style (called the “page”) and the containing div (which all Reflow pages have).

Defining Your Responsive Design Link

Because responsive design is Reflow’s purpose in life, the one thing that really stands out is how you define breakpoints visually. In Reflow, the entire responsive spectrum is represented (not just three device sizes, as in Webflow). If parts of your design break between mobile and tablet, for instance, you can easily add a breakpoint by clicking a button and making the necessary changes. Reflow even allows you to set maximum and minimum breakpoints, which means you can design mobile-first, if you like.

Defining breakpoints in Reflow20
Defining breakpoints in Reflow (Large preview21)

Fonts, Media, Forms and Linking Link

  • Fonts
    Fonts from a Tyepkit account can easily be used in the interface when you connect your kit. Reflow also comes with access to Edge Web Fonts (a collection of hosted web fonts from Adobe, Google and others).
  • Media
    Because you can’t inject your own code unless you edit the generated code, adding media in Edge Reflow isn’t possible. You can set a placeholder for media (such as images), using it as a visual cue for the production website.
  • Forms
    In Reflow, you can add a series of typical form elements, such as buttons, text fields and radio buttons (among others). Inserting these form elements in the page won’t add a form tag to the generated code; so, the form elements are not meant to be functional out of the box. This reminds us again that Reflow is currently a mockup tool, suitable more for creating a proof-of-concept design than for generating production-ready code.
  • Linking
    In the latest release of Edge Reflow CC, you can link to pages within the project and to external URLs, as well as control states like hover and active on any object in the design.

Integrating With a CMS Link

Reflow currently has no way to integrate with a CMS unless you take the code that is generated and do it yourself outside of the application.

Working With the Code Link

Editing code is not the purpose of Reflow because it’s meant to be used as a visual design tool. Nevertheless, using the Elements panel, you can name elements and organize the code (i.e. for the DOM) in a hierarchy that makes sense to you (and maybe to your developer). If you’re looking to add things like a jQuery slideshow, smooth scrolling or a video or insert your own HTML code, then you’ll need to edit the generated code in another application.

The Elements panel22
The Elements panel (Large preview23)

Publishing and Exporting Link

Keep in mind that Edge Reflow currently has no exporting or publishing functionality. When previewing the website in a supported browser, Reflow generates the HTML and CSS, but inline comments warn you against using the code in a production environment. Judging by the response in Edge Reflow’s forums, this hasn’t stopped people from trying24. Reflow does enable you to copy and paste the generated CSS to use further downstream on your actual website.

Copying CSS from Reflow25
Copying CSS from Reflow (Large preview26)

For an inside look at how Reflow came about, check out Aaron Shekey’s account of the process27.

Macaw Link

The latest application on the scene is Macaw, which was just released to the public as version 1.0 on March 31st. Macaw28 is positioned as a web design tool that also writes semantic HTML and CSS. I think the tagline says it all, “Stop writing code, start drawing it.” Like Edge Reflow, Macaw is also an application that you download and install on your hard drive and is tied to a registered account. But unlike Webflow and Edge Reflow CC, there is no monthly fee. You pay only a one-time price.

After spending a few days with Macaw, I can tell you that it has great potential as a responsive web design tool. That’s a nice way of saying that it’s a pretty impressive 1.0 version, complete with some bugs. Coming from a web background, I can say that the interface is pretty intuitive, although I find myself missing basic features like right-click context menus and zooming. But considering that a handful of people kicked this thing off, not a large corporation, I’m impressed.

Macaw’s interface29
Macaw’s interface (Large preview30)

Building Blocks Link

When you start a Macaw project, you are faced with a blank page, which is your design canvas. You can begin adding design elements to the page by importing images and adding text frames and the formatting to go with them, or you can jump right into adding breakpoints that you might expect to use. Macaw’s interface is pretty simple, and the average designer really won’t take very long to decipher where things are — that is, as long as they have working knowledge of HTML and CSS.

Like Reflow, Macaw is fairly similar to Photoshop and InDesign in its approach to design. You draw and reposition elements visually, rather than having to edit the CSS and HTML. Stream is the name of the engine that calculates all of the properties that place your design elements in the flow of the static document. As with Webflow and Reflow, you’ll need to understand HTML and CSS conceptually because most of the layout functionality is based on them.

Layout elements in Macaw31
Layout elements in Macaw (Large preview32)

Design Link

Macaw has what appears to be a pretty useful feature, called view mode, which shows you the design elements on the page as “normal,” “outline” or “wireframe.” Because many of us will be using Macaw as a wireframing and mockup tool, seeing the content as black outlines (“outline”) or gray boxes (“wireframe”) will be helpful.

Macaw’s view mode33
Macaw’s view mode (Large preview34)

Defining Your Responsive Design Link

Having worked in Edge Reflow for a while, I was surprised at how similar Macaw’s workspace is. Like Reflow, Macaw lets you define breakpoints visually, although its interface is not as slick as Reflow’s in my opinion. The entire responsive spectrum is represented (not just three device sizes, as in Webflow).

If parts of your design break between breakpoints, you can easily add a breakpoint and make the necessary changes. Sadly, Macaw currently doesn’t allow for mobile-first design because you cannot set max and min breakpoints. The DOM is also locked at smaller breakpoints, preventing you from adding content (the tools are even grayed out). But people are chattering in Macaw’s forums that min-width breakpoints (for mobile-first design) are coming.

Setting breakpoints in Macaw35
Setting breakpoints in Macaw (Large preview36)

Fonts, Media, Forms and Linking Link

  • Fonts
    Google web fonts are integrated in the workspace, and you can also access Typekit fonts by connecting your account in the “Font” menu of the design area.
  • Media
    Currently, Macaw offers no easy way to insert media such as YouTube videos. You can, however, insert a placeholder element and tie some JavaScript to it, using the “Scripts” panel.
  • Forms
    Macaw has a variety of typical form elements, including buttons, text fields and radio buttons, that can be added to a design. As in Reflow, these are for visually representing a form, not for creating an actual working form. If you are feeling adventurous, you can group form elements together and change the tag to form in the Outline editor. This will at least give you the building blocks for a functional form if you intend to use the generated code on your production website.
  • Linking
    You can link to pages created in a project, as well as type in links in the “Links” menu.

Working With the Code Link

The closest thing to working with code in Macaw (aside from editing the published code) is editing elements in the Outline panel, which is a representation of the DOM. In the Outline panel, you can change HTML tags, nest and reorder content, apply CSS names and more. You can also create global styles (CSS) that can be applied to your content.

Editing tags in the Outline panel37
Editing tags in the Outline panel (Large preview38)

Integrating With a CMS Link

Like Reflow, Macaw does not integrate with a CMS. Some people in the Macaw community are trying to figure out a workflow from Macaw to WordPress (and others platforms), but there is no direct connection yet.

Publishing and Exporting Link

Macaw has a publishing option that leads to a preview window. Unlike Reflow, Macaw offers options for exporting, under “Publish Settings.” In the dialog box there, you can choose which pages to export, inject code (such as for Google Analytics) into the head or body, tailor the CSS to your needs (by writing shorthands, adding vendor prefixes, consolidating styles, etc.), generate optimized images for high-definition screens and more.

The settings tell you that the generated code isn’t just for show. Once you publish, you are taken into a preview window, where you can view all of the code (HTML, CSS, JavaScript) and even go to preview the page in your default browser. Of the three applications, Macaw’s code is the most concise and the closest to what a front-end developer might actually write.

Options for publishing code39
Options for publishing code (Large preview40)

Wrapping Up Link

Below is a quick roundup of the most important features of each application. It doesn’t include everything we’ve discussed (or else I would have just slapped a table on the page and called it a day).

Webflow Edge Reflow CC Macaw
Price Monthly subscriptions starting at $1441 in Webflow Reflow, Part of Adobe Creative Cloud (monthly subscription42) $17943 (no monthly plan at Macaw)
Hosting Included (each plan has different features) in Webflow Five websites are included with Creative Cloud subscription, but Edge Reflow currently can’t export to Adobe web hosting. None at Macaw
Code quality Production quality: Webflow currently uses Normalize.css (version 2.1.3), Modernizr and jQuery (version 1.11.0), along with its own library. The code is relatively clean, with classes used instead of a ton of IDs. A base CSS file is used, and your modifications are saved in a separate file. Testing quality: Reflow’s code is currently optimized only for WebKit browsers (Chrome and Safari). The CSS from HTML5 Boilerplate is the base, and no JavaScript libraries are used. The code has a lot of IDs and doesn’t allow you to easily reuse styles when you’re editing the code directly. After being cleaned up, the code could be used as a starting point. Production quality: in Macaw, Normalize.css (version 2.1.0) and jQuery (version 1.8.3) are used. The code is relatively clean, with classes used instead of a ton of IDs. A base CSS file is used, and each page has a separate CSS file for grid settings. Your modifications are saved in a separate CSS file.
Responsive Design Webflow has three devices (or breakpoints) that you design for. As you create content and areas, you can determine which device sizes of the three they should appear in. Currently, the breakpoints aren’t editable within the application. Adding and editing breakpoints to Reflow is visual. The entire responsive spectrum is represented. Adding a breakpoint is as easy as clicking a button and making the change. You can even set max and min breakpoints, which means you can design mobile-first. Macaw lets you define breakpoints visually, and the entire responsive spectrum is represented. You can’t set max and min breakpoints, and so mobile-first design is not supported. The DOM locks at low breakpoints, preventing you from adding content.
Fonts In Webflow, Google Fonts are integrated, and a kit from your Typekit account can be connected in the dashboard. A kit from Typekit can be integratedin Reflow. It also provides access to the Edge Web Fonts collection. Google Fonts are integrated in the workspace in Macaw, and you can access Typekit fonts by connecting your account.
Media Adding media (Vimeo, YouTube, etc.) is pretty easy in Webflow. Embedly is used to embed content from a long list of providers. Because you can’t inject your own code in the application, adding media isn’t possible in Reflow. Inserting media, such as a YouTube video, is not easy in Macaw yet. You can, however, insert a placeholder element and tie some JavaScript to it, using the “Scripts” panel.
Forms Simple contact forms are available and are easy to set up and design for Webflow. You can send the data via email or hook the form to another script (or just insert your own code). You can add typical form elements, but a form tag will not be added to the generated code. The form in Reflow is just a placeholder and is not meant to be functional. You can add typical form elements in Macaw, but they’re more for visual design, not an actual working form.
Working with the code Advanced HTML and CSS features are hidden in Webflowby default but can be toggled on. You can assign classes to content and rename and delete them in the style manager. You can also insert your own in the head or body tag. Editing code is not an option in Reflow. You can name HTML elements, generically assign CSS styles and organize the DOM into a hierarchy. External code cannot be injected into a project within Reflow. The closest thing to working with code in Macaw is changing HTML tags, nesting and reordering content, applying CSS names and the like. You can also apply global styles to content and generate classes.
CMS integration Webflow is a static website builder and doesn’t tie in with a CMS or blogging platform. You can, however, save website versions. No integration yet in Reflow No integration yet in Macaw
Publishing and exporting Publishing to Webflow’s content delivery network (included in the cost) is pretty simple, as is exporting if you prefer to take the code elsewhere. Edge Reflow CC currently has no exporting or publishing support. HTML and CSS are generated when you preview, but they are not intended for production. You can copy and paste the generated CSS. A publishing option in Macawis offered, with various settings. The code is the most concise and the closest to what a front-end developer might actually write.

These responsive design tools are probably here to stay in some form or other. Ever since mobile devices came on the scene, we’ve been trying to configure our workflows to accommodate responsive designs. These tools could potentially bridge that divide when used either as a starting point for front-end design or simply for wireframing and prototyping.

As you would expect, I’ve already seen people attempt to build a large CMS-based website using Reflow and then complain when they can’t inject their favorite responsive slideshow or bemoan that the code isn’t what they would write. Keep in mind that Macaw and Reflow are meant to be a part of a workflow, not the beginning and end. By using these tools as they are intended (and not forcing them into our workflow), we can cross the threshold of responsiveness, potentially saving ourselves and our clients time and headaches.

(al, il)

Footnotes Link

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20
  21. 21
  22. 22
  23. 23
  24. 24
  25. 25
  26. 26
  27. 27
  28. 28
  29. 29
  30. 30
  31. 31
  32. 32
  33. 33
  34. 34
  35. 35
  36. 36
  37. 37
  38. 38
  39. 39
  40. 40
  41. 41
  42. 42
  43. 43
SmashingConf Barcelona 2016

Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf Barcelona, on October 25–26, with smart design patterns and front-end techniques.

↑ Back to top Tweet itShare on Facebook


Brian Wood is a freelance web developer, the author of 8 books including Adobe Illustrator CC Classroom in a Book, Adobe Muse Classroom in a Book (published by Peachpit Press), and the author of numerous training titles for, HOW Design University, and others including Muse, Dreamweaver, InDesign, Illustrator and more. In addition to training many clients, including Nordstrom, REI, Boeing, Starbucks, Nintendo, and many others, Brian speaks regularly at national conferences, such as HOW Interactive, HOW Design Live, Adobe MAX, as well as events hosted by AIGA and other industry organizations. Brian also runs a YouTube channel based on InDesign, Dreamweaver, Photoshop, Acrobat, and Illustrator tips and tricks.

  1. 1

    Ricardo Diaz

    May 23, 2014 11:43 pm

    Not sure how I feel about this. Its like having Dreamweaver make a comeback. I understand the whole making things easier for designers but its not that hard to code things. Also how does the code look in all of these? I remember Dreamweaver promising all of this as well and always ended up writing bulky code every time. Just my two cents though

    • 2

      yes, In my opinion its not the right time to put our hands on these editors. I tried two of them. Macaw has lots of bugs. Edge Reflow is producing ugly code and its not Semantic. About webflow, I am not interested to make my site in an online editor. “Codesign” tools are the future maybe, but we have to wait for better functionalities.

    • 3

      Matthew Trow

      May 24, 2014 5:06 pm

      I totally agree.

      The basics of responsive coding are simple. For the most part, it’s a copy & paste exercise.
      What is more difficult, is optimised, re-usable, modular code – that’s absolutely an *essential* part of modern web development.

      I’d have to investigate the code generated. If outputs sass in a beautiful, modular, logical and semantic fashion, I’ll pack my css code editor away right now.

      For the last few projects I’ve worked on, I’ve been able to re-use 80% of my own custom framework on entirely different designs. 20% has been bespoke to each project.

      Don’t fear the code, embrace it and the power it delivers.

      • 4

        One of the greatest, and most beneficial things I’ve been able to do for my coding was to reevaluate earlier sites (including my own) and institute simple, yet effective custom RWD framework without relying on a workflow tool.

        As many have mentioned, the coding itself is easy (it’s what we do). The real challenge is focusing on the site itself and actually considering where things will break and move, or the efficiency of the user’s experience. That challenge can prove to be the most rewarding aspect due to increased familiarity with the existing quirks and design flaws through the process. Having your own (validated) go-to RWD framework ensures you’re at least a few steps ahead once you start on the project.

        It’s made be a better designer across the board to approach RWD the hard way, so I have to agree. However with any tool, it may even be helpful to try a demo and compare the code output to see how the same elements are generated differently, just for the added knowledge.

        • 5

          *me not be

        • 6

          Valid points but i think you maybe missing the point or the purpose of these tools. For those teams or product managers who work in an agile/lean methodology e.g. who need to validate your hypotheses(ideas) with stakeholders/users upfront and fail fast and move onto the next idea these types of tools are a godsend, I am a product manager and the quicker you can get prototypes out and gain instant feedback the better, they don’t have to be semantic or code that is best practice etc, concept is key when you go on to build then 100% these are not the tools and I would love to have people like you on my team to build correctly, but for rapid prototyping in a lean or agile development world you should consider these. I know I will.

    • 7

      So, in other words, you haven’t tried any of these programs. You’re just prejudging them based on you Dreamweaver experience? Excellent.

    • 8

      Especially when you read stuff like “The float: left declaration is applied to all elements in Reflow by default”. Great to start off with a bad practice and make your first steps in to Float Hell.

      Frontpage/Dreamweaver all over again..

  2. 9

    Aaron Martone

    May 24, 2014 12:00 am

    I was just looking online for some RWD and wireframing tools (loved’s look/design) Very simple but great quality. I’ve heard a lot of good things about Macaw, and if I had to make a purchase on the spot, I think it offers the closest feature set to what I need.

    Traditionally, I would have look at Adobe’s products, but ever since they rolled out with their exorbitantly overpriced ala carte system (1 item for $20/mo, 2 for $40/mo or all 17 for $50/mo), I’ve pretty much ignored Adobe and have stopped upgrading my software or doing business with them. I have the CS5 suite right now and will run it into the ground until it stops working on the OS I’m using. Adobe earned my lost business with their new business model.

    This article does bring to light how lacking we have been until recently, to have good RWD tools. Inherently, there never is a substitute for testing a design on an actual devices, but this meets a nice middleground where you can flesh out the content structure strategy you have for your design and provide a great visualization that traditional apps like Photoshop simply were never designed to handle.

    • 10

      colin wiseman

      January 1, 2015 3:07 pm

      $40 a month for all their products is less than $500 a year. It includes all updates and upgrades for life of subscription. It used to be $2000+ for Photoshop alone and no free next versions. Well done to Adobe for changing.

  3. 11

    ioannis pelelis

    May 24, 2014 1:29 am

    I am currently also testing all those things, and I think that I fall in love with macaw.

    Well its code is pretty clean, but also a bit messy some times, if you start adding
    It has a living community, asking, helping and supporting bugs..

    I would totally recommend it for building mock ups to show on clients, or use it right away as a base html/css code!

  4. 12

    Alexys Hegmann

    May 24, 2014 2:02 am

    I don’t know… I think that a good website, whether it’s responsive por not, should have a hand-tailored code. Designers should be able to do the HTML + CSS part, it’ not that hard.

  5. 13

    Worajedt Sitthidumrong

    May 24, 2014 2:58 am

    I think youcve missed another good one…


  6. 15

    Justin The Designer

    May 24, 2014 7:47 am

    Thanks for breaking these down for us.

    I’m looking to start learning one of these and this article really helps narrow down my choices to Reflow and Macaw.

    – Justin The Designer

  7. 16

    why were all the comments deleted from here?
    mine as well:
    Nice article!
    I always wanted to make to make such comparison. Doing a whole template in each software and then analyze the output. Also invite others into the party (Dreamweaver, Tumult Hype maybe even Google Web Designer), it would be fun.
    Maybe I should do it sometime.
    Anyway I think there is room for such a software for a particular type of project.
    Like static sites for small businesses, whose market and product is not fast changing and thus not requiring a CMS. Or turning a mockup really fast into a working prototype and after approval leaving it in production until the hand coded version is ready. But that would only work for smaller projects.
    I’m curious about what future brings us.

    • 17

      Janis Graubins

      May 27, 2014 1:29 pm

      Yup, mine too. I was wondering why the author did not include FROONT in review.

      • 18

        My comments were deleted too – odd. Anyway, I had a list of several other tools that I would include in an article like this, but it would get way out of hand. I tried to pick a few that were representative. Like other commenters are pointing out, there are more and more of these types of editors out there almost daily.

    • 19

      colin wiseman

      January 1, 2015 3:10 pm

      Small businesses need better websites than a dreamweaver style build. They are more reliant on cheap Seo work and good quality html google friendly code is the perfect place to start. These tools won’t give that…?

  8. 20

    Froont should have been included in this review also.

    • 21

      I agree, and it is important to know that Froont is free for public projects (as github for public repos).

  9. 22

    Come on, you forgot about the best of them – Pinegrow Web Designer – which runs off-line, supports Bootstrap, Foundation, 960 Grid System and more using extensions, and you buy once use forever.

    I am not affiliated with them, I just enjoy using Pinegrow.

    • 23

      I tried all 3 from the article and found them all lacking compared to Pinegrow, which is not perfect, but is being improved frequently. For all the buzz on Macaw I was greatly disappointed by a painful experience. I think you could style the CSS Zen Garden with Pinegrow, which would not be possible with the 3 mentioned.

  10. 24

    Heres my biggest gripe with ALL of these. Tools Menu bloat visual noise.
    All I want is a code view that slowly adds tools as I add them. Sliders are annoying. number up/down Buttons are annoying. Dragging is fun.

    Stop thinking for me, just let me have a canvas and a small code view.
    I know when I want text align right, I don’t need a tool bar with a bunch of other options that I don’t use always sitting there asking me to press them. Collapses and tabs don’t help clean a menu up.

    IF reflow had a code editor it would be sliced bread! But they refuse to do it.

    • 25

      You have to remember that reflow is just an alpha. There isn’t even a real export-function.
      But there is also Edge Code, which is a pretty and simple editor. I think, when Adobe releases the final Version of edge, there will be a bridge between Animate, Code and Reflow. I’m that this will be a great Suite. Preparing in Photoshop, export to Reflow, combine with Animate and optimize in Edge Code. Sounds good! :)

      • 26

        I hope so. I plan on sitting around for a few years waiting for that to happen (and actually work). They should also buy up Webflow and utilize all of their goodness.

  11. 27

    It’s definitely an interesting read, but if reflow isn’t production ready what’s the point of using it? Should be used as a fast “mockup” creator with some functionality? I was entertaining this idea for big projects, and it’s always a better selling point with clients if your designs “move”:)
    I agree that best code is hand coded but still I am definitely going to try out webflow. If webflow runs on bootstrap with a good cms like modx (templates-clean html+css) you could easily shorten the production process at least with simple sites.

  12. 28

    Matthew Trow

    May 25, 2014 6:31 pm

    A random thought came to mind when revisiting this article.

    How about a web design tool that produces designs? You just point and click, and *pop*, the app creates a design for you!


    You feed it some custom created CSS & HTML, you’ve spent hours/days/weeks crafting and out pops a design – that’ll do, does the trick.

    After all, anyone can do design, right? All that pushing of pixels – tedious stuff. Choosing colours, type, getting the balance just right.

    Or perhaps, just go and buy a theme?

    Like I said, it was just a random thought that came to mind. After all, there’s no creativity in code, right? An app can just spit it out, job done …

    • 29

      that’s it. with programs like these (for designers) and nice templates available out there (for developers), designers and developers never have to work together again… seeing how they hate each other so much.

  13. 30

    Some guy said Dreamweaver. Well thats great if you live in the 90s. Or if you still think steamboats are the fastest way of transpostation. But last i checked 2014 called and asked for rapidly deployable responsive websites that could turn and burn in one day. Built on solid foundation. I think the old school devs are getting washed out with their green terminals and being replaced by the mac kids that actually have a good sense of design and a demand for the right tools to do it. Yup, design not code. The ones who went out to skate at the local mall or started a punk/ska band. Listen code has its place and will always be at the root of the technology tree, but web design has evolved so far that now an artist/designer can finally push its visual limitation to take it even further. These tools are all amazing, I use them all on a dialy basis. Yet I code too. But why put together bricks when i can stage buildings in the same amount of time? The building blocks allow for so much more. Particularly Webflow (I am not endorsed by them, its simply my go to preference) . I know first hand that these tools are redefining roles in the industry.

    • 31

      Considering you use these tools ‘on a daily basis’, do you have a site or example of something you’ve personally created with one of them that we can look at? I want to see how the ‘Mac kids’ (literally cringed when I read that) do things these days.

      Can you also enlighten us as to how we can convince clients that the ‘turn and burn’ approach is better? Stuff all that planning + making it functional + testing + making it look great by incorporating their brand + clean, easy to read, easy to modify, semantic code. Instead let’s pump it out ‘in one day’ with garbage code because we can.

      Here I was thinking we could design *and* code things to the highest of standards. But you certainly won’t get that with any of these tools.


      • 32

        Honestly, I would rather see more local businesses make their websites less shitty by using tools like these because at the very least they would be somewhat semantic and would actually display well enough for mobile devices since people hardly ever look up places to eat or entertain themselves on a desktop computer anymore.

        The tools have a place in the world. Not being able to see that is ignorant.

  14. 33

    There is one big elephant in the room: Internet Explore. Yes it sucks and everything. BUT! There’s still about 10% of older IE users out there. Most front end solutions (like Macaw) simply ignore older IE. (Check their forum for complaints). When your payoff is: “Stop writing code, start drawing it” people will get burned by IE as they can not code the solutions. As such all these tools are simply an enhanced design, not a client-ready product. I hope Macaw will become IE compatible in the near future. I love what they’re trying to accomplish.

    • 34

      I think by the time these tools have matured enough to be used for creating production websites, IE 6, 7 and 8 will be out of the picture. Also, adding support for these old, broken browsers would complicate the apps and the generated code. So I actually appreciate these apps being forward-thinking, and I’ll just postpone using either one until IE8 can be ignored and the apps themselves (betting on Macaw mostly) have sorted out their remaining issues.

  15. 35

    Michael Geissler

    May 26, 2014 11:07 am

    I think a lot of you commenters are confused by this tools shiny marketing-speech. Ever thought about the idea, that those tools aren’t there to make our lives easier? For me personally these tools only add a new component, a new possibility to our responsive workflow. None of them is meant to replace your well-crafted, handwritten code. BUT they give us opportunity to explore, to try (and show) possibilities of responsiveness in our designs in a way that was not possible before. This does not mean, it makes my workflow easier, I still have to hard-code the CSS in production-stage. But it helps me with that tiny step, the “exploration”-component of design – and this (hopefully) raises the overall quality of my work.

    Aaaand finally I surely know, that everyone of us has his own workflow. I just wanted to let you know, that MACAW and Reflow are working for me and my style of work :)

    • 36

      Good to hear you’ve found the right place in your workflow for these tools already, but I do expect more. I do expect a tool like this to do 80-90% of the coding work for me. Some hand-coding may be inevitable, but a smart enough app could do most of the work for us. Macaw is at the top right now in terms of code generation and if it keeps improving, I think they could succeed in delivering more than just a “between design and code” stage kind of thing. I’m not satisfied with these tools being a minor part of the workflow, because I’m convinced that they could do more once they get smart enough to handle the complicated front-end world.

    • 37

      yeah think so too. I work in a web company (as a design trainee). My boss is a good old print designer. He has a lot of VERY good ideas and he designed some amazing stuff. BUT he has no idea of Responsive design, HTML and CSS. He has so much stuff to do, that he has not the time to learn it. I think Webflow is a great opportunity for all those designers who learned a lot of print-stuff at school but have no idea of web. Those tools are a big help for our developers, because they see exactly what our designer what to have. And of course, they take his design from webflow and build it by hand in html and css and they will always do!

  16. 38

    These programs are for creating ‘somewhat’ interactive mockups to show to clients, instead of drawing static wireframes in e.g. Balsamiq or static .jpgs from Photoshop.

    Think of it as a way of presenting your design thoughts to clients – Show what a menu that goes “swoosh” really looks and acts like :-) This is important because now all meeting attendees (especially the client) will not have their own vision on how it will work when finished. Show it, don’t tell it.

    As a digital designer I absolutely love the concept behind Macaw, Webflow and similar software, because all though basic coding with bootstrap and LESS can be relatively easy, it will still be faster to click, edit and drag things around in these programs in the starting phase of a project rather than editing HTML and LESS. All the small things add up, like changes in gradients, border-radius, shadows etc.

    When I design I change my mind ALOT, and doing this through HTML and CSS directly can be a huge pain in the butt because of the trial and error that is usually done faster in Photoshop.

    We are not relying on Macaw to output production-ready code, but our frontend team can certainly reuse the global classes and such when doing their thing and that’s way better the relying on them having Photoshop installed and their knowledge to extract what they need.

    Life just got a little easier for both designers and frontenders, in my humble opinion.

  17. 39

    Like many, I have 2nd thoughts about these tools. Sure, there is a place for them in a prototyping phase, but usually that is where it ends. And that is quite unfortunate, for 20 years already we have been trying to abstract ourselves away from the low-level coding of the web, but we keep failing at it. It’s not just Dreamweaver, also frameworks like ASP.NET Webforms, Lotus Domino and so many other technologies failed at it.

    Producing lean, semantic, reusable, responsive code from such abstractions seems like a mission impossible. You know why? Because if you’re really honest about it, our web technologies suck. Big time. I totally love the web and everything about it, but at the same time I know it is just a bunch of hacks piled together, it doesn’t make much sense in hindsight, and we can’t change it because that would break the existing web.

  18. 40


    May 27, 2014 3:05 am

    I think these are all scrap!!! Today’s day, every thing is moving into a “most sophisticated technology”, now a web site has to be able to seen in your monitor, cellular phone, sun glasses and key holder as well?. You know, I wonder if there is any room for good design behind all these scrap and new technology? Now art is being replaced by technology, by technician and none artist, because your forced to make a good design layout fit in everybody tiny little as or on a monkey banana!!! PLEASE YOU HAVE NOT AN IDEA OF THE WORLD YOU ARE CREATING!
    the discipline of good art and design is going away form human king. so when there is not good and bad your soul is dead and you become more easy to be manipulated!

  19. 41

    guy van bael

    May 27, 2014 7:37 am

    I’m always interested in tools that can make our workflow better, more efficient etc, but as stated before… when it comes to “visual coding”, all attempts fail (dreamweaver, but also newer tools like reflow). My roots are in print design and believe me it’s not difficult to learn how to code properly. Just pick a great framework to start with (i personally use foundation with sass) and apply you own designs by changing settings and adding custom css. I already did dozens of projects all with their own unique design. It’s not difficult at all and code can be easily converted to a cms theme. You can use it to prototype, take it a step further by apllying desing and show it to your client IN THE BROWSER (where it should be). All tools like macaw, reflow etc don’t export production-ready code so what’s the use? You (or a front-end developer) have to start over again and rebuild it properly with html, css and javascript. You could just as well keep on using photoshop then. I agree that it takes some time to learn but it’s definitely worth it. And by the way, as a former print-designer, the world of html,css and javascript openend an new world for me. It added more ways to be creative (because of all the ways to design interaction an motion) instead of limitations (as a lot of print designers use as an excuse not to learn how to code their own designs). So my advice… use photoshop or illustrator or whatever software to create design elements, but do not create full page mockups. Go to the browser as soon as possible. It will make your life a lot easier. And if your lucky to have fantastice designers, but bad coders. Ask them for input, collaborate more during the process. It will lead to a better result.

  20. 42

    Question: are there any tools like this that DO support CMS like WordPress?

    • 43

      Philipp Schöfer

      May 27, 2014 7:23 pm

      Excellent question. I don’t remember when I last built a static website. There is no use for it if I can’t use it with WordPress.

      Some comments here mention the drag and drop approach is faster than writing actual code. That might be true for the first couple of elements but keep in mind:
      > Coders use code templates to write whole blocks of code by typing a small abbreviation and hidding the tab key or another way to have macros.
      > IDEs can support you a lot when typing code.
      > After you drag ‘n’ dropped 20 elements in your reflow and want to make gobal changes, all that it takes me to do that is to change one SASS variable. How do you do it? Click on all of them and adapt the style? My hypothesis is that coding is faster on the long run because if you’re developing smartly, you will have defined connections between elements rather than individual boxes on “pages”.

      Lots of things have already been said about semantics and code quality. There is always a compromise.


↑ Back to top