Advertisement HOW Design Live Event Registration

Add in the necessity of designing for multiple screen sizes and the entire process easily becomes a potential workflow nightmare, as Jacob Surber so aptly describes in his blog post “Designers have often taken the approach of creating several static comps, with the hopes of conveying their vision. Imagine a scenario where you are designing a site with a dozen pages, which will be consumed on a half-dozen screen sizes (between mobile, tablet and desktop). All of a sudden you’re managing 48 different comps. Add in several rounds of client changes and this approach can quickly become unmanageable.”

This is where the release of Adobe’s first public preview Adobe Edge Reflow comes in. A responsive design tool designed specifically to help web designers meet the challenges of conveying intent and responsive behavior in their designs. Edge Reflow enables designers to create “responsive comps” through features such as an “intuitive resizable design surface that shows how layouts and visuals will adapt to different screen sizes.” Additionally, recently announced updates to Adobe Edge Animate, Adobe Dreamweaver and Adobe Edge Code compliment Reflow’s capabilities with features such as: new CSS capabilities and web font selector; integration with Edge Web Fonts and enhanced fluid grid layout; and live preview, quick edit and code hinting.

After exploring Edge Reflow, questions about its capabilities and how a potential project workflow incorporating Reflow might look immediately arose. Adobe graciously responded to some of them:

Adobe Edge Reflow seems like a fantastic way for web designers/developers to get working prototypes in front of clients quickly. But, the actual HTML coding still needs to be done at some point in the design process. Can you talk a bit more about how a typical workflow might look?

A: Our goal is to create a tool that helps web designers who already have a fundamental understanding of web layout and design to create faster, more accurate web designs. Designers would start with Reflow to create a “responsive comp” to communicate their responsive intent and demonstrate responsive behaviors to both customers and developers so they can really get a feel of what the website will truly look like. Being able to see your design react is the first step in getting away from device specific break-points and towards content defining responsive designs.

Our intention is to remove layers of abstractions, enabling designers to create for the web using the web, utilizing Adobe’s full offering of task-specific tools to complete the project. Every site is different; after Reflow, the designer is free to hand-code or bring the project into Dreamweaver or another tool of their choice. That’s why we’ve released the tool under public preview—so we can get our users’ feedback and see the workflow that organically evolves.

What would you say are the most beneficial features of Adobe Edge Reflow for designers?

A: Reflow allows designers to resize the design surface to simulate different screen sizes. Custom “break-points” can be added, then changes to the layout or style can be made enabling designers to tailor their designs for the content.

How well supported is the CSS generated by Adobe Edge Reflow?

A: Reflow is focused on standards based CSS and modern browsers. We want to empower designers with the latest capabilities of CSS3 to create high fidelity web designs. While the CSS can be easily integrated into your project, it’s still important for designers and
developers to work together to create a fallback strategy.

What type of user feedback have you gotten since Adobe Edge Reflow was first introduced? How (if at all) has that feedback influenced product development?

A: Early users seem very excited about designing for the web using HTML and CSS! We’ve gotten lots of feedback, bug reports and feature requests since Reflow was first released. Even in our first public preview, user feedback on topics like creative capabilities, functionality and usability have been surprisingly in-line with our product development roadmap. We look forward to future updates that get our users the features they are asking for.

Of course, this all sounded good and I was already conjuring up visions of my future web design projects imbued with vastly improved communication between clients, developers and myself, and a reduction in revision rounds. But, I wondered how Reflow might (or might not) be used by web developers in addition to web designers; so I asked two developers to take Edge Reflow for a test drive and report back.

Web applications developer Marcel Fahle, said “Adobe Edge Reflow takes one of the most annoying tasks in front-end development today and puts it into a very easy-to-use, streamlined workflow. It’s not only a huge time saver, but it also helps to prototype and visualize responsive designs for my clients very quickly.” Independent web developer, Ryan Wachtl also gave Reflow a general thumb’s up, stating, “As a front-end developer, I’m often given Photoshop comps to code a design from. Usually one PSD for desktop and another for mobile. It’s extremely hard for a design to convey intent when it’s just a static image. I think Edge Reflow could save a lot of time in the project cycle by catching layout and general usability issues early on, before going into production. I’m comfortable working closer to the metal, so I’ll be sticking to prototyping directly in the browser, but there might be a few cases where I fire up Edge Reflow just to play around with an idea or tweak how some text flows within a fluid width container.”

In short, it seems as though Edge Reflow offers a promising solution for web designers and developers alike. Reflow is available to both paid and free members of Adobe Creative Cloud. To learn more about Adobe Edge Reflow visit here. Readers can also check out the video preview here and an interview with Jacob Surber, Product Manager: Adobe Reflow here.

Have you used Adobe Edge Reflow on a project or have thoughts on how you might use it? Leave a comment and let us know.