Adobe Edge Reflow - First Impressions

Adobe Edge Reflow - First Impressions

Whilst responsive design has been gaining ground in the last few years - with big players like the New York Times and Engadget jumping in with new releases of their sites now working across a myriad of devices and screen sizes - the design and development processes involved in putting together such a site are still maturing.

There’s yet to be any real consensus on the ‘best’ way to plan and design a responsive site, and with this in mind Adobe has stepped into the arena with their Edge ‘Reflow’ app as an attempt to woo designers who may not want to dive into pure code, but still want maintain control of how their work appears across devices. With Adobe software like Photoshop and Fireworks already ubiquitous in the industry, there’s good reason to believe they can pull this off.

At it’s most simple, Reflow allows you to create a single web page and then define different screen sizes (e.g a mobile phone with a 320 pixel-wide screen) and how content will interact with these. To give you an example, open a modern responsive site like Polygon, grab the edge of your browser window and try to resize it; text, images and navigation all rework themselves according to available size within the window - ideal if you’re designing with different desktop, mobile and tablet screen sizes in mind. Reflow lets you define these behaviours in your own design without having to jump into the code for your page.

An early preview build was recently made available to Adobe Creative Cloud members as a way to get feedback from the community and judge the response to such a tool. With this in mind, I’ve put together some of my thoughts after taking Reflow for a brief spin.

• The interface is surprisingly easy, considering the technicality of what’s taking place in the code beneath it. Anybody familiar with the dark hues and toolbar-heavy layouts of other Creative Suite applications like Photoshop or Illustrator should be able to get their heads around it reasonably quick. Adobe provides a (surprisingly helpful) Getting Started guide that walks you through the basic features, but after that I’d recommend just jumping in and playing around with the various features and seeing what you can create.
• One of the features hinted at in the FAQ - being able to import graphics from other Adobe applications in your workflow into Reflow - isn’t present in this (admittedly early) release. Whilst it’s possible to add individual graphics into your layout there’s no way to import something wholesale like an existing Fireworks file, with it’s various layers and elements, and then use this as a basis for your work. This is hardly a deal breaker right now, as we would anticipate Adobe ramping up the integration with the rest of its Creative Suite if it wants to get people using Reflow as an integral part of their design process.
• Whilst applications like Photoshop and Illustrator are considered the de-facto industry standard for web design work, they can easily be derided for ‘feature bloat’, being packed with rarely-used options and tricks at the expense of speed and ease of use. Reflow, at least in it’s current form, is an exception to this. It does one task and it does it well, without hassling you with superfluous options and dialogue boxes.
• Adobe goes to great lengths to stress that the code produced isn’t production quality, and this is reinforced by the fact that only Google’s Chrome browser is officially supported at this time. If you try to view your Reflow designs in any other browser you’ll be greeted with a notification bar at the top of the page warning that things may not work quite so well here. Having said that, Firefox didn’t seem to have any problems handling anything Reflow threw at it.

It’s still early days for Reflow - the current build bills itself as a “0.16 (experimental)” version - but it looks to be an interesting addition to the Creative Suite workflow. Based on the current set of features, it would be perfect for early prototyping at the stage between wireframing and ‘proper’ graphic design work. It could be used internally for explaining to a developer the particular type of menu you’d want to see on a mobile site, for example, as well as externally when working with clients.

With the ever-increasing emphasis on mobile and responsive sites this is something that will likely become more and more important.

A hot topic to kick off our #Drupal month @craigperks talks through #responsive image options in #Drupal7 http://t.co/hz11tao9P3

— Curve Agency (@CurveAgency) August 26, 2013