A couple of weeks ago Adobe released the preview version of one of the most anticipated design tools of late: Edge Reflow. The latest instalment in the Edge product range, it aims to solve perhaps the biggest challenge for many web designers working today, namely creating flexible, responsive prototypes without getting into the nitty gritty of HTML & CSS.
Admittedly my current knowledge of HTML and CSS is pretty shameful and I was suitably excited to hear the news of Reflow a few months go. Having tested the preview version on a couple of projects, my enthusiasm has definitely increased; Reflow has a lot potential and may very well become an indispensable tool for designers who still feel like code is too slow (or hard).
So what exactly does it do? In short, Reflow is a CSS based design tool that allows you to create fluid layouts with breakpoints outside of the browser. Picture a front-end GUI combining object based controls like those of InDesign with the manual individual CSS controls of Typecast – sort of.
The ability to flex the viewport and add break points on the fly is, of course, the main event of Reflow and it doesn’t disappoint. Adding and managing breakpoints is easy and intuitive and elements reflow (hence the name!) as you change the viewport size. Position, size and styles (colours, borders, typographic control) all bind to your breakpoints, meaning both major and minor changes to your layout and style can be implemented with ease. Overall, it really feels like a natural prototyping tool (although it doesn’t take much to imagine it being more than that). Granted, the level of CSS detail is limited and the software is by no means complete, but I have to say I’m very intrigued at this stage.
Adding and managing breakpoints is easy and intuitive and elements reflow (hence the name!) as you change the viewport size
Now lets be clear, Reflow is, in its current preview state, both a bit fiddly and a bit buggy, and it lacks a whole bunch of features that would make it truly useful. For example, although the integrated (and simple) grid and layout mechanisms work surprisingly well, there is no option to change the global font-size at all, making responsive typography a bit of a chore. Similarly, there’s no support for rems and the number of columns you can have in a grid is capped at an arbitrary 16… and I’m sure ill discover more “missing” components as I spend some more time with it.
This is just the preview, and until people like myself learn to build quick and accurate prototypes in the browser, Edge Reflow represents the beginnings of what may end up being a cornerstone in a rapidly evolving web design process. More than anything, it embodies the inevitable move away from static mock-ups to fluid prototypes and I’m excited at the prospect of using it as a stepping stone to fully embracing HTML & CSS as part of my workflow. In the meantime – and beyond – Reflow will no doubt be a very welcome addition to the responsive toolbox.