Adobe Edge Reflow review

The days when you’d get away with asking visitors to full-screen their browsers are over. In the age of “responsive” websites, it’s the designer’s responsibility to set up CSS with media-query breakpoints – to measure the browser width, or screen size on a tablet of phone – and define bespoke layouts for each.

Edge Reflow, available as a free beta to Creative Suite subscribers, is designed to make this process easier, and improves on Dreamweaver CS6’s implementation of breakpoint support.

Every Reflow design starts as an empty grid, to which a number of columns can be assigned, the edges of which cause on-page objects (text, graphics and so on) to snap into place. With Reflow, it’s possible to work in either a purely visual manner – dragging and resizing objects in-situ with their dimensions updating in tooltips along the edges – or use the sidebar to enter numeric values.

Sensibly, the sidebar is context sensitive, displaying only controls that relate to whatever is selected in the layout space. This makes it simple to find what you need, without having to hunt around.

While objects are placed, dragged and resized, Reflow is coding a live CSS layout in the background, and this can be previewed on the fly by selecting any placed element and clicking its tag at the foot of the screen. Better yet, the editing pane is WebKit-based, so the working environment is actually a rendered preview of the site itself.

Although it has no place in Internet Explorer, WebKit currently underpins Chrome and Safari, and will be the rendering engine for all future browsers from Opera. Its use in Reflow means a lot of the preliminary work can be carried out with a high degree of confidence before you even consider previewing it in an external browser.

With the default layout sorted out, it’s time to start thinking about alternative browser sizes. Defining a breakpoint to handle larger or smaller screens is a simple matter of creating a new layout – a one-click operation – and dragging its right-hand margin to a new position.

Existing elements shuffle around automatically, and you can then go on to refine them manually, downsizing a font to make better use of a tighter window, perhaps, switching from a horizontal to vertical menu, or stacking content boxes one above the other rather than running them side by side.

Each breakpoint is colour-coded, with clear visual cues replicated throughout the interface to give you an at-a-glance overview of which attributes apply in any particular window size. So, click the tag in the footer bar to inspect its attributes, for example, and coloured dividers that match the breakpoint dimensions on the ruler bar’ll separate them.

Likewise, numeric attributes set in the sidebar adopt coloured backgrounds to show whether their values are specific to the currently active breakpoint, or if they’ve been carried over from one of the others. With so many subtle hints laced throughout the UI, it’s easy to keep track of your work and see at-a-glance what appears where.

However, a few tweaks could speed things up yet further. There’s no drag option for setting font size or line-height, for example; you have to type a value instead or increment them using the cursor keys. And, although the code that Reflow produces is extremely clean and the media queries clearly marked out, we’d welcome the option to name layers and text styles as well.

Also, while Reflow makes full use of extensive CSS formatting controls, including rounded corners and gradient fills, in our tests, it only applied WebKit-specific tags for gradients. We hope catering for Trident (IE) and Gecko (Mozilla) will be a priority in its continued development.

Reflow is a tightly focused layout tool. It doesn’t let you style standard headers, tweak link styles or define layer IDs. All of that should be done in an external development tool such as Dreamweaver or Edge Code. That’s to its advantage, however, allowing users to focus on one specific task. On the basis of this preview release, it looks set to cement Creative Suite’s position as the must-have outfit for professional online designers.