Follow us

Introducing Adobe Edge Reflow

By Jacob Surber on February 14, 2013 in Announcement

Today, it’s almost a forgone conclusion that your next web project will not be desktop only.  The real question becomes: how have you adapted your workflow to handle the evolving needs of your customers?  Many people have chosen ‘Responsive Web Design’ as a way to tackle this challenge. However, RWD is a philosophy based on a collection of approaches rather than a one-stop solution. There are two common ways to deal with this challenge. You can either design in the browser or use an existing design tool. Neither approach, however, provides the combination of creative freedom with the benefit of working in the actual medium of the web. Although designing in the browser allows for the most accurate design during the creation process, you are forced to work directly in code.  While this ensures accuracy, it can be difficult to have those ‘happy accidents’ in which a truly awesome design is borne. Web designers have also tried repurposing existing tools to help them communicate their vision, but have struggled because they are asking for tools to do things they simply were not intended to do.  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.  More importantly, this act of jumping between files is disruptive to the creative process, as it can be very challenging to create consistent designs when you are constantly shifting contexts in-between files. While no design tool can compare to the creative power of Photoshop, it–and many other similar tools –speaks a fundamentally different language from the web.  With its powerful design canvas it can be far too easy for your design expectations to get out of sync with your developer’s understanding or what’s even capable of being created on the web. All of these factors lead to the inception of Reflow, the first web design tool truly focused on a responsive design approach.

An evolution in web design

The process of creating Reflow started not only by studying the web design landscape, but also a full audit of Adobe’s design product and workflows.  We arrived at a core set of tenets that would drive the creation of this new web design tool.

  • Honesty in design:  Reflow itself is built using HTML, CSS and JavaScript, with the goal of helping web designers design for HTML, CSS and JavaScript.  Our intention is to remove layers of abstractions, so designers can create for the web using the web.
  • Focus on standards:  Reflow will ONLY enable designers to create experiences that are compatible with the web. In some situations this can be limiting, but as the capabilities of the web changes, Reflow will evolve as well.  Adobe has committed to contributing and advancing web standards. Our goal is to integrate that work, as experimental features, in our web tools such as Reflow.
  • Transparency in approach: The Reflow team will be very clear about what it is and isn’t working on.  We also want to very open about challenges that exist in different workflows and have conversations with you about the best approach.  We are a small but agile team concerned with addressing a specific set of problems, rather than attempting to solve every challenge from the beginning.

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.  This ‘responsive comp’ enables web designers to communicate their responsive intent and demonstrate responsive behaviors to both customers and developers.  This ability to see your design react between break-points is the first step in getting away from device specific break-points and towards content defining responsive designs.  Reflow then enables you to preview and share your designs in the browser or on devices for review and approval.

A new approach

The right tool for the right job has never been more relevant than it is today, but we need to work with you to shape that tool.  Rather than develop in seclusion-until we think we’re done-we encourage you to have a conversation with us. This is just our first blog post. From here we will be taking a detailed look at the key features of Reflow and where it is heading  We look forward to hearing your thoughts and feedback on the direction and what features will most impact your workflows.  Join the conversation on Twitter @Reflow, on Facebook or in our forums.

Where we go from here?

Today’s release is our very first public preview.  You can download Reflow via Adobe’s Creative Cloud and is available to both paid and free members.  Releasing through the Creative Cloud gives us tremendous flexibility to release updates.  Over the next several months we will be working with you to figure out the right pace. While we don’t want to burden you with constant updates, we plan on responding to feedback adding features and bug fixes rapidly.

About the Author

Jacob SurberView all posts by Jacob Surber >