Reflow New and Improved!

Posted on April 2, 2013 by Jacob Surber



Reflow Preview 2It has been six weeks since we launched the first preview of Edge Reflow.  I want to thank all of you who have downloaded Reflow, given it a try and told us what you are looking for in a next generation web design tool.  The team has been hard at work on our next preview release, and today I’m excited to announce that it is available to download from Creative Cloud.

The new release focuses on three key areas: improved layout capabilities, more powerful styling features, and performance and stability.

Layout

In terms of layout, one of the most frequent requests we have received from web designers is the ability to leverage absolute and fixed positioning, as well as their z-index.  These new layout types provide the flexibility to create the responsive designs you envisioned.

Here’s a great example: Imagine that you have a navigation bar at the top of your design that you would like the user to see regardless of their position on the page.  Using fixed positioned element, you can ensure that the navigation bar will always be visible to the end-user, even as the page is scrolled down.

Styling

One of the primary goals of Reflow is to provide web designers with the best tool possible to express their creativity on today’s web.  In this update to Reflow, we focused primarily on two styling enhancements.  First, we are introducing inline text styling.  Select and style text in a text block, just as you would expect.  Reflow will use <span> tags and show the CSS for all of the design changes you make (e.g. font sizes, color, etc).  Second, we have also enhanced the color picker in Edge Reflow.  With this release, you can control the luminosity of the color, providing you with a fine-grained level of control to help you determine your design palette.

Workflow and Performance

One of our top requests has been the ability to name your elements.  This helps to keep your projects organized, especially as they grow more complex.  This is our first pass on this feature, which will grow to propagate the name of the elements through the HTML and CSS.  In addition, we’ve overhauled our margin visualization to provide a cleaner more informative UI.

Performance and stability was a major focus for the team.  We addressed tons of bugs and hopefully solved the crashing issue that we heard from some of you.  The feedback that we receive via Twitter (@Reflow) and the bugs that you logged on Github take a high priority.  Being responsive to your feedback is something that is extremely important to the team and me!

Head to the Creative Cloud and download the latest update to Edge Reflow.  If you have previously installed the application, you can click the little “present” icon on the right side of the screen to learn about the new features available in the latest version.

Keep the feedback coming!  We love to hear about successes and challenges as you create real-world projects using Reflow.  Please feel free to tweet us @Reflow, so we can follow up with you!

Make sure you check out Adobe MAX, where you can learn more about what’s coming next for Reflow and for the rest of Adobe’s creative tools.


Posted in Announcement | 28 Comments

Introducing Adobe Edge Reflow

Posted on February 14, 2013 by Jacob Surber



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.


Posted in Uncategorized | 46 Comments