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

Advertisement

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

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 (yoursite.webflow.com), 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

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

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

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

  • 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

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

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

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

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

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

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

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

  • 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

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

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

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

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

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

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

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

  • 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

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

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

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

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

  1. 1 https://webflow.com/
  2. 2 http://www.smashingmagazine.com/wp-content/uploads/2014/05/02-BW-lg-opt.jpg
  3. 3 http://www.smashingmagazine.com/wp-content/uploads/2014/05/02-BW-lg-opt.jpg
  4. 4 https://www.google.com/intl/en/chrome/browser/canary.html
  5. 5 http://www.smashingmagazine.com/wp-content/uploads/2014/05/03-BW-WF-lg-opt.jpg
  6. 6 http://www.smashingmagazine.com/wp-content/uploads/2014/05/03-BW-WF-lg-opt.jpg
  7. 7 http://www.smashingmagazine.com/wp-content/uploads/2014/05/04-BW-WF-lg-opt.jpg
  8. 8 http://www.smashingmagazine.com/wp-content/uploads/2014/05/04-BW-WF-lg-opt.jpg
  9. 9 http://www.smashingmagazine.com/wp-content/uploads/2014/05/05-BW-WF-lg-opt.jpg
  10. 10 http://www.smashingmagazine.com/wp-content/uploads/2014/05/05-BW-WF-lg-opt.jpg
  11. 11 http://www.smashingmagazine.com/wp-content/uploads/2014/05/06-BW-WF-lg-opt.jpg
  12. 12 http://www.smashingmagazine.com/wp-content/uploads/2014/05/06-BW-WF-lg-opt.jpg
  13. 13 http://www.smashingmagazine.com/wp-content/uploads/2014/05/07-BW-WF-lg-opt.jpg
  14. 14 http://www.smashingmagazine.com/wp-content/uploads/2014/05/07-BW-WF-lg-opt.jpg
  15. 15 http://www.smashingmagazine.com/wp-content/uploads/2014/05/08-BW-WF-lg.jpg
  16. 16 http://www.smashingmagazine.com/wp-content/uploads/2014/05/08-BW-WF-lg.jpg
  17. 17 http://html.adobe.com/edge/reflow/
  18. 18 http://www.smashingmagazine.com/wp-content/uploads/2014/05/09-BW-ER-lg-opt.jpg
  19. 19 http://www.smashingmagazine.com/wp-content/uploads/2014/05/09-BW-ER-lg-opt.jpg
  20. 20 http://www.smashingmagazine.com/wp-content/uploads/2014/05/10-BW-ER-lg-opt.jpg
  21. 21 http://www.smashingmagazine.com/wp-content/uploads/2014/05/10-BW-ER-lg-opt.jpg
  22. 22 http://www.smashingmagazine.com/wp-content/uploads/2014/05/11-BW-ER-lg-opt.jpg
  23. 23 http://www.smashingmagazine.com/wp-content/uploads/2014/05/11-BW-ER-lg-opt.jpg
  24. 24 http://blog.brackets.io/2013/09/26/reflow-cleaner-extension/
  25. 25 http://www.smashingmagazine.com/wp-content/uploads/2014/05/12-BW-ER-lg-opt.jpg
  26. 26 http://www.smashingmagazine.com/wp-content/uploads/2014/05/12-BW-ER-lg-opt.jpg
  27. 27 http://www.aaronshekey.com/reflow/
  28. 28 http://macaw.co/
  29. 29 http://www.smashingmagazine.com/wp-content/uploads/2014/05/13-BW-MC-lg-opt.jpg
  30. 30 http://www.smashingmagazine.com/wp-content/uploads/2014/05/13-BW-MC-lg-opt.jpg
  31. 31 http://www.smashingmagazine.com/wp-content/uploads/2014/05/14-BW-MC-lg-opt.jpg
  32. 32 http://www.smashingmagazine.com/wp-content/uploads/2014/05/14-BW-MC-lg-opt.jpg
  33. 33 http://www.smashingmagazine.com/wp-content/uploads/2014/05/15-BW-MC-lg-opt.jpg
  34. 34 http://www.smashingmagazine.com/wp-content/uploads/2014/05/15-BW-MC-lg-opt.jpg
  35. 35 http://www.smashingmagazine.com/wp-content/uploads/2014/05/16-BW-MC-lg-opt.jpg
  36. 36 http://www.smashingmagazine.com/wp-content/uploads/2014/05/16-BW-MC-lg-opt.jpg
  37. 37 http://www.smashingmagazine.com/wp-content/uploads/2014/05/17-BW-MC-lg-opt.jpg
  38. 38 http://www.smashingmagazine.com/wp-content/uploads/2014/05/17-BW-MC-lg-opt.jpg
  39. 39 http://www.smashingmagazine.com/wp-content/uploads/2014/05/18-BW-MC-lg-opt.jpg
  40. 40 http://www.smashingmagazine.com/wp-content/uploads/2014/05/18-BW-MC-lg-opt.jpg
  41. 41 https://webflow.com/pricing
  42. 42 https://creative.adobe.com/plans
  43. 43 https://secure.macaw.co/

↑ Back to topShare on Twitter

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 Lynda.com, 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.

Advertising
  1. 1

    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

    18
    • 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.

      6
    • 3

      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.

      11
      • 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.

        2
    • 6

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

      15
    • 7

      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
  2. 8

    I was just looking online for some RWD and wireframing tools (loved wireframe.cc’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.

    7
  3. 9

    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!

    3
  4. 10

    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.

    3
  5. 11

    Worajedt Sitthidumrong

    May 24, 2014 2:58 am

    I think youcve missed another good one…

    PineGrow
    Mac/Win/Linux

    http://www.pinegrow.com

    11
  6. 13

    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

    -3
  7. 14

    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.

    1
    • 15

      Janis Graubins

      May 27, 2014 1:29 pm

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

      0
      • 16

        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.

        1
  8. 17

    Froont should have been included in this review also.

    1
    • 18

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

      2
  9. 19

    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.

    11
    • 20

      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.

      2
  10. 21

    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.

    -2
    • 22

      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! :)

      0
      • 23

        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.

        -1
  11. 24

    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.

    1
  12. 25

    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!

    Awesome!

    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 …

    -4
    • 26

      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.

      0
  13. 27

    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.

    11
    • 28

      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.

      Thanks

      -3
      • 29

        Phill,
        I’m not a Mac kid. Far from it actually. Regardless of hardware preference my reference intended an approach to Design first, rather than code. Here is an example I made with webflow http://ogenkidetheme.webflow.com/
        No one said turn and burn is better. It works great however on showing more than just a wireframe if necessary when needing to constantly prototype functional responsive templates/mockups for various projects. It allows for fast web design or rapid implementation of design for web. As far as convincing your clients I think Anthony Robbins might be able to better help you with that. And for planning, functionality, testing, etc, it falls slightly outside of what these apps are designed to do but word has it that JIRA can better help you manage your working hours and clients. Garbage code? I don’t take insult to that, but I’d be happy to hear what the Webflow/Macac Developers have to say about that…
        And what about you? Have some custom shiny code or js you care to expand my mind with?

        6
        • 30

          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.

          2
  14. 31

    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.

    1
    • 32

      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.

      3
  15. 33

    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 :)

    5
    • 34

      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.

      3
    • 35

      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!

      2
  16. 36

    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.

    19
  17. 37

    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.

    4
  18. 38

    Angel HERNANDEZ

    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!

    -11
  19. 39

    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.

    4
  20. 40

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

    1
    • 41

      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.

      4
  21. 42

    Chasz Rainsford

    May 27, 2014 4:41 pm

    If you are going to take the time to learn these “code-less code writers” designers should just learn basic HTML and CSS. To repeat one commenter: “It’s not that hard.”

    0
  22. 43

    I agree with all the comments stating that one should just hand code.

    I am a self-taught web designer that started out with Dreamweaver, but now I find it simpler to hand code from scratch building up from very basic to more complex. I’ve developed a simple 10 column grid that I reuse when prototyping or creating wire frames. Then I change those grid classes to semantic ones in my production code.

    I think any designer can learn HTML and CSS (IMHO).

    As someone who enjoys drawing, I look at hand coding the same way. My sketch is the HTML markup and only CSS borders and background colors using my prototyping grid for my wire frame. I then will add more CSS as the design process flows forward. Easier to add more complex layers of styling then take away.

    Essentially I use minimalism as a design methodology applied to code development.

    That is something I have yet to see a WYSIWYG editor accomplish. It is also why I tend to avoid using complete Frameworks like Boostrap or Foundation except as a learning tool or for inspiration.

    1
  23. 44

    folks,
    I m interested to learn web design. Not an IT guy!
    And I saw that many of the so called tools/software is replaced by new coding techniques now a days.
    Can anyone suggest here, where shall I start with?
    HTML/CSS/photoshop?
    There are people in market who simply teach some drag and drop technique to give u an idea that u have learnt web design and I would not like to fall into this trap.

    Thats why better to have some expert views.
    Thanks and cheers

    0
  24. 45

    As has been said, codesign tools may get there eventually, in the mean time I believe we just need a better web design tool. I’ve been using Sketch 3 for my interactive design projects and I love it.

    0
  25. 46

    I work as the (sole) designer at a web company with a team of eight developers. I’ve been using Edge Reflow to build a prototype for a large scale site redesign, and it’s been great. Yeah, there are a handful of bugs/annoyances, but they’re minor. While the output isn’t at all production ready, it wasn’t intended to be. That’s what the developers are for. Within the context of its intended purpose, it’s actually quite good.

    I preordered Macaw and I was extremely excited to use it. Then 1.0 was launched, and it all came crashing down. As soon as I realized that doing something as simple as floating an image to the left or right while text wraps around it was impossible, it became completely useless. At least a) I got the $50 preorder discount and b) my company reimbursed me for it. It definitely has potential, but it wasn’t at all ready for public release. As far as I can tell, it still isn’t.

    1
  26. 47

    thanks for share .

    0
  27. 48

    After reading the above comments i think we should not rely on these editors. Many told that they have bugs….. they help us to create quick development and save our time but hand coded material is still far better than these.

    0
  28. 49

    The BEST fluid layout design app that ever exsited has been Pages App from Apple. But it has never been ported to a web design app. The iCloud and iWeb apps don’t count. Dragging and moving things is so fluid and simple to just get done. If it just had the next nuances of margin padding etc.

    But all this talk about hand coding hand holding to the metal etc. Just get the job done right, thats whats necessary.

    -1
  29. 50

    Pinegrow Web Designer ( pinegrow.com ) Definitely worth checking out.

    3
  30. 51

    Nice article. I tried some of these tools but I wasn’t convinced. For me it’s much easier to simply code and improve my coding skills by doing so. I thin every web designer should know how to code.

    0
    • 52

      While that may be true, if you get really good with these tools, then I could see a person being able to quickly mock something up much faster than manually coding it.

      You don’t really want to put too much time into mocks or fall in love with your code too early on in the process since it could go through multiple iterations before a client is happy.

      I see the value in these tools but I don’t see they as replacements for actual programming skills.

      1
  31. 53

    As a designer with a good knowledge of code (and a memory of the horror of Dreamweaver), these seem interesting.

    I would like a tool where I can create a framework of responsive design & later move back to Notepad/Expresso or hand over to a dev to add more complex php etc to the project. These tools feel like they are trying to be a one-size-fits-all & thats not what I’m after. Its a murky line to draw between design and dev without compromising, its certainly the designers, in my experience, who are bridging the gap & blurring the lines

    0
  32. 54

    Only in the Webflow review is there any mention of widgets or reusable elements – without them complex page components have to be copied & pasted instead, and if you want to add a new subcomponent to them (e.g. a link) then you need to add it manually to each of the copies, which is prone to human error & design inconsistency.

    For example, imagine creating a product grid page like http://www.asos.com/men/t-shirts/cat/pgecategory.aspx?cid=7616 in WebFlow then having to change it to include a chunk of new text under each product image (and reshuffle the other elements already there) – this would be a tedious, repetitive task.

    At least Axure has “Masters” which partially address this need for re-use, especially as they can be nested (i.e. masters can contain other masters) plus the new (v7) “Repeater” widget lets you populate (and control the display of) instances of a repeating element according to underlying data, making designing & refining the product grid page much easier. But even so the experience of actually trying to do so is pretty frustrating, thanks to the lack of a live populated preview as you edit the underlying/instanced elements.

    It seems like WebFlow provides a few simple widgets but doesn’t let you create & refine your own in the way I outline above, and the others don’t support the creation of such things at all, so right now I’m not seeing how WebFlow & co offer me much (other than HTML & CSS generation) that’s of practical benefit to UX and digital designers over what Axure is able to provide, given that it now supports fixed (rather than fluid) breakpoints.

    0
  33. 55

    The issue with many of these tools is that they don’t empower the average user. At our shop, we have clients of all sizes requesting the ability to edit their pages after we’re done with the project.

    With that said, this lineup reminds me of my Dreamweaver days years ago. Days that I would rather forget :)

    Like many developers these days, we build on a CMS, WordPress being our CMS of choice. The issue with many CMS’ is that they don’t really do a good job of empowering the average user either (other than letting them edit a basic page or post).

    That’s why we created our own “Page Builder” plugin for WordPress. If you’re looking to create advanced custom layouts with a UI that makes them easy to edit for your clients, it’s worth a look… http://themes.fastlinemedia.com

    0
  34. 56

    I’d like to add Dimensions Toolkit to this list! It’s a fantastic Chrome extension that really helps with testing responsive designs.

    1
  35. 57

    One program you overlooked was CoffeeCup Responsive Layout Maker. They have been around longer the Macaw and have far more features/functionality.

    http://www.coffeecup.com/responsive-layout-maker-pro/

    4
  36. 58

    Some comments here are arguing that “why not just write code?” Well, for someone like myself who comes from a graphic design background and then transitioned to web it isn’t that easy for us. My brain hates coding. I am a right brainer. I am more visual and learn by shapes and colors and placement…when I got my design degree in the late 90s I learned to code through books in the beginning with html and javascript, then transitioned to xhtml and css, all while learning ActionScript (Flash) and Lingo (Director), then transitioned into just learning to code everything in css 2-3, and then as of current I’ve been transitioning into html5. This was all within just 7-8 yrs. I find it is such a waste of time because learning to do something is very “short lived” in the developer world. Something in the near future will probably surpass both css and html5, and it’s back to the beginning…which sort of reminds me of what doing laundry is like. It never ends.

    I see people spending their valuable time and money into learning to create apps in iOS or Android and it may be worth something today, but in three or four years that knowledge will be obsolete.

    4
  37. 59

    First and foremost, FIX YOUR TAB INDEX FOR THE COMMENT FORM ON THIS PAGE. Tabbing while in the “Your Name” field takes me back to the top of the page and puts my cursor in the search bar!! Annoying as hell!

    Now about the article itself. I just wanted to mention that I found it interesting that you didn’t also mention these other two solutions:

    Webydo: http://www.webydo.com/
    Squarespace: http://www.squarespace.com/

    1
  38. 60

    Nice Article!

    0
  39. 61

    I’m always amused by the silliness of these kinds of conversations. I wish that coders would stop calling themselves web DESIGNERS. There seem to be so many coding geniuses, and yet so many horrifically designed web pages, with bad fonts, bad colors, no relation to the product, bad search options, etc.

    I know dozens of designers that are making a fortune re-designing badly designed web pages from some coding magician, that simply have no real function for the client. I encourage all REAL designers to ignore the arrogant coder screeds, pick a program or two, and redefine what it means to be an actual designer. Sorry; but it’s just a matter of time before coders are as irrelevant as press-type paste-up artists.

    5
  40. 62

    Thanx for clearing the sky a bit Brian. I had plans to find an alternative for Freeway pro 6 (Mac only) and was curious at Reflow, Muse and Macaw… But they’re not. I need a productiontool from start till end. So I think I’ll stick with Freeway and its upcoming upgrade to 7, with responsive design included finally.

    0
    • 63

      Andries, I’ve been using FP for several years now but have not really made the effort to learn FP in a comprehensive way. Even so, I’ve been able to design and publish a number of sites. See livingmemorial.us . I doubt that I will ever get much beyond the level of a “pro-sumer” at web design although I feel that I need to reconfigure the sites I’ve done so they are responsive. Backdraft impresses me in the Softpress world. Joe Billings at Softpress has indicated that FP7 will show up very soon. Because Softpress support is exceptionally good at dealing with low end plodders like me, I definitely have a bond with FP. My challenge is that I will have to hand over livingmemorial.us to a PC-type person at some point…and so, I guess I’ll have to re-do this website for responsive design using an online program––maybe Webflow, for instance. As a fellow FP user, do you have any suggestions as to what program might work “best” for me? Thanks, Jud Blakely

      0
  41. 64

    Death To Code.

    Cant wait till this coding shit is a thing of the past.

    Design = Fun

    Coding = Hunchback and Crossed Eyes

    0
    • 65

      Code code code – not everyone likes code.. yeah all you young tech guys have been stating that code is EASY.. and that everyone should be able to do it.. well if that were the case EVERYONE would be doing it and all of you would have a harder time getting work.

      I am a DESIGNER, not a coder, programmer tech dude or what ever.. as the statement above goes – “death to code..” as much as that is a ridiculous statement as to have a site is to code a site. Maybe some of you will agree and maybe some will not, but Developers do not alway make good designers and Designers often can not code for sh*t.

      In my opinion – these tools allow a bridge for the two to work together OR allow Designer a chance to build a site without the help of a developer.. this is only my opinion – as a designer, I like that I can design a site, build the site the way I SEE IT and provide the site to the client without having to pay another guy to do something he or she thinks simple. It save me a dime all in all. As and when I NEED the assistance of a developer to do the things I can not do on my own then I hire someone for the purpose.

      All these tools do is provides me with a survivable chance in this industry..

      Designers Rule!

      1
  42. 66

    I am always excited to try some new software that can make my work easier and better, i think these software (that produce code) will not replace the workflow of modern day web designer who (understand html/css) and hand-code websites, these tool are good for creating small/static websites quickly where there is not much of dynamic content.

    0
  43. 67

    Great article! Just to share something I found recently. I have found a product for my small to medium size web designs that has dramatically reduced my time and coding. Take a look at something I consider very user friendly and totally customizable yet no heavy coding is required. I can mockup sites and the code is automatically built in front of my clients real time so there are no iterations back forth with design and development. Once approved I just put the skin on last. I can do more with less employees and charge my same fees. Most responsive designs have page breaks this product does not, it has infinite display size making it ideal for any future devices that will display its content. You should look at http://www.contentactivator.com

    0
  44. 68

    Fantastic read, I have recently found a great prototyping tool called Visual Spec and the great news is it’s free. You can find it at http://www.visualspec.com

    0
  45. 69

    I can say this. It is very surprised that Pinegrow did not make this list as well. As compared to any on this list, in my opinion it is the one worth mentioning. I am a freelance web designer/developer who (up until recently) used nothing but the raw skills of my knowledge and Notepad++. That was it. I had to remember all of the coding, remember responsive classes, and write ALL of the code by hand. This was the way I have done it for years, because I feel I produce the best results when I am involved with my code.

    Now, I found Pinegrow by accident. It was the best accident to happen in quite some time. Pinegrow allows me to be intimate with my raw code, either on an element-by-element basis, or through editing the entire HTML/CSS/LESS. I can honestly say, that I will not live without it anymore. I can construct Cleanly written, semantic & responsive web pages, templates and apps on-the-fly. I get an instant visual of my work, and if need be, I can edit code directly. I can quickly design client mock-ups in mere minutes as opposed to hours. I would highly advise that anyone who is reading this comment to forget about the garbage editors above (no offense to the author), and go grab Pinegrow. That tool is absolutely amazing and is a part of my every day life now.

    Thank you to the author for taking the time to post this list, but I have to disagree with it only because so far (and especially in the future) Pinegrow will reign supreme over all. They’re even releasing a developer version to edit, create and modify WordPress, Joomla and PHP files with Live output. That to me is amazing.

    My two cents =)

    ~Jason

    2
  46. 70

    I don’t understand either how is that Pinegrow was not even considered in this article… which is by far the best (and cheapest) visual editor out there.

    0
  47. 71

    As a graphic designer with 12 years of front end coding experience in css html js && python. I can say Webflow has changed the way I design.
    I used to design static jpeg mockups and get clients to approve those mock ups and have to explain to them that it’s just a jpeg and your website will have lots of interactions.
    Now with webflow I can mock up a website in half a day. have all the things sliding around with hovers and great engaging effects. clients approve them so much more readily first time.
    Then I get my hands dirty getting the code nice and clean, light and robust and hook up my CMS

    Which is not hard to do. I just convert the bloat css to sass and rationalise some of the over classing. Which webflow does so predictably that a few regular expressions and some brake point tweaks are usually all that is required.

    This mean I’m much more open to take risks with layouts and have become more creative allround.

    Only real drawback are:
    it only goes as wide as 980 (easy to fix later)
    and it won’t nest class so you end up doing alot of classing to get areas right eg:
    .feature{}
    .feature-h2{}
    .feature-p{}
    .feature-img{}
    .feature-a{}
    which is abit of a pain I just convert that is sass to
    .feature{
    h2{}
    p{}
    img{}
    a{}
    }

    0
  48. 72

    Evert Wiesenekker

    October 6, 2014 1:32 pm

    Votes up for Pinegrow! I recently switched to Bootstrap based Websites and this is the only (client) editor which handles these sites correctly.

    1
  49. 73

    Richard Chinchilla

    October 21, 2014 8:47 pm

    I”m going to TRY to stay on topic.
    First my background: self-taught print graphic designer. Slowly teaching myself web design and very slowly teaching myself front end/UI/UX design. Of course, there are so many terms for this is almost comical. What I am NOT is a developer. I’ve read up enough on the merits of forgoing CODE and instead using apps like Adobe Muse which slowly is growing and adding more features to its arsenal. Same for Macaw. They claim to produce really good code that a developer would be proud of. But, no matter what all us DESIGNERS say, there is most certainly a need to learn HTML/CSS. I”m 38 and am competing with folks much younger than me but in order to stay afloat and relevant I have to submit to the coding gods.
    To paint a clear picture: using all these apps and saying “to hell” with learning to code is like using nothing but Photoshop filters, actions and manipulated stock photography without actually taking the time to learn masking, blending modes and color correction. Is it easy? This 38 year old brain doesn’t think so but i’m taking the time and doing it. Little by little. I’ve enrolled in Team Treehouse and Skillshare. They’re sometimes overwhelming but I have to learn it just as I had to learn InDesign. I had to get rid of the fear and or laziness.
    With that said, I do worry of the developer of the future. In 5 years these apps will be able to do a lot of what a developer does and you’ll know it when the first app announces that they’ve added drag-and-drop Java, PHP and Ruby on Rails to their arsenal.
    We graphic designers must also let the industry know that this UNICORN shit is over. If you want me to know all that stuff then pay for my training. Just as developers have to stop the folks in their industry from making them think that it is essential to go the FULLSTACK route. If they want full stack then make sure they pay you for the training. This is easier said than done or even maybe ridiculous but remember that these agencies/companies want to save money and pay you as little as legally possible while expecting the most amount of knowledge and labor from you.
    But I digress.
    Try these apps. They are ok and getting better with time. Learn to code a little every day. Become a better business minded person. Be nice to everyone you meet. Floss daily.
    That is all.

    1

Leave a Comment

Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that comments are moderated and rel="nofollow" is in use. So, please do not use a spammy keyword or a domain as your name, or else it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!

↑ Back to top