Three design tools for a better responsive workflow
Since the breakthrough of responsive web design, webmakers are eagerly looking for new ways to improve their design workflow and publishing process.
That's no surprise, because with all the differently sized versions of a website it has become very tricky to communicate all the fine-grained design choices to a developer, let alone the the trouble of maintenance and keeping track of all the changes.
Luckily, we have overcome the era of browser-specific layout-bugs and moved towards universally accepted standards that allow us to use unified styles rules and expect most of the browsers to interpret them in a similar way. This evolution also enables us to start building more sophisticated design tools to assist us during the process of writing the same kind of code over and over again.
Though I have always been skeptical with software that generates markup automatically, some new tools have evolved during the last couple of years that leverage innovative and intuitive interfaces, decent code generation algorithms and respect our need for responsive designs.
Below are three which I have tested, so let me tell you a bit about the experience I have made regarding ease-of-use, flexibility and code export.
Webflow
The first product comes from a company based in Mountain View / San Francisco and claims to be the "visual design tool for responsive websites".
After providing your email and password you can set up your site by giving it a name and choosing from one of the six beautifully designed templates (among which you can find a blank canvas as well). Upon completion you are taken to a powerful and clearly arranged web page editing tool whose dark look and feel reminded me a bit of Adobe's CS6 product line.
The main window shows a live preview of the site, which works a bit similar to the developer tools of Webkit or Firefox: You can hover over elements, which reveals their container outline, and inside a panel on the right hand side you have numerous editing options such as modifying CSS styles or link attributes. A fixed grid system in the background helps you align your elements properly, and when working with element containers (divs, sections...) Webflow can even distribute the containing elements among them in various flavors.
Another neat feature is that you can choose on which devices to enable certain elements (such as Desktop, Tablet, Phone or "Custom"), something which automatically generates the corresponding media queries in the background. In a panel on the left hand side you can always switch between viewports and get a live preview of your work.
After exporting the auto-generated HTML and CSS, I was surprised by how well the code was structured. It does not use any inline styles and even supports HTML5 tags like section, header and footer.
For building prototypes and static websites, I would highly recommend Webflow. It is very intuitive and fun to use. And who knows what other features will be provided in the future to take it to the next level?
Macaw
The next tool which has been created by a Washington DC based developer team is not on the market yet, but looking at the features it is going to provide should be worth a mention. According to its creators, it "provides the same flexibility as your favorite image editor but also writes semantic HTML and remarkably succinct CSS."
In the 20 minutes sneak peak video, Tom Giannattasio guides us through the capabilities of the product and explains us the process of creating a basic blog template. The functionalities are pretty similar to those of Webflow: You can create new elements such as text or images by dropping them on the canvas, and then change its CSS styles just in time by using the element inspector.
When moving around, your items snap to a pre-defined grid in the background. Macaw even allows you to align your elements with the help of some simple keyboard shortcuts with a feature that they call "nudge" and which can speed up your workflow tremendously.
The outline panel on the right provides an overview of the HTML structure, such as the layer panel in Photoshop. What's great is that you can give each layer a name which when exporting automatically translates not only into class names but also into HTML5 elements such as header or footer.
Apart from the the inspector and outline tabs you also have access to a library of assets. Beside image files these can be components, which are complex elements that once created can be saved and re-used (and even globally updated) in other places.
The CSS output promises to be extremely clean and efficient by using a parser technology named "Alchemy", which is supposed to always find the shortest possible and most re-usable selector expressions for your markup.
I'm looking forward to Macaw being available in the App store, but haven't been able to find any precise release date so far, so keep an eye on it!
Adobe Edge Reflow
Last but not least, let's talk about the industry leader's responsive design tool. It is available through the Creative Cloud but has not reached release status yet. The preview version however already provides most of the functionality in order to understand the workflow and to build a proper web page.
In addition to the basic layout and styling features that it covers in a similar fashion as Macaw and Webflow do, Edge Reflow also offers integration with its companions Photoshop, Typekit and Edge Inspect.
The former allows for seamless imports of image assets, font and color settings – something which solves a big headache for developers. The latter provides live previews on external devices such as your iPhone or Android Tablet: An exceptionally pleasant labor-saver if you have to test and debug your responsive layouts.
For this purpose, Edge Reflow also provides a ruler on top of the preview window whose canvas handle indicates the different media query breakpoints. You can set up maximum and minimum width values in pixels, em parameters are not supported yet.
What is painfully missing are other HTML elements apart from headlines, paragraphs and images such as input fields, buttons or videos. According to a post on Github they seem to be part of their roadmap and I hope they will be included in one of the future releases.
Link to Adobe Edge Reflow's website
Conclusion
Summing up, I think we have some decent, innovative tools at hand which allow us to better visualize the process of creating page markup and style definitions. They could bridge the gap between the conceptions of a designer and the handcrafting of a developer and make the workflow from idea to implementation go a lot more smoothly.
You can certainly not replace a humain brain yet that takes conscious decisions during this workflow (which I'm glad about), but personally I see this kind of automation as a great productivity booster. Since many of the choices involved in transforming a template into HTML and CSS can be broken down into pure algorithms, why not let some machines do our routine work for us, and focus on the most important thing: Creating brilliant user interfaces.
If you have your own opinion about the topic, or if you want to suggest another tool or service to improve our responsive workflow, please let me know below in the comments. Thanks for reading!