Adobe & HTML

Adobe

Adobe Edge Reflow

Adobe Edge Reflow CC (Preview)

Design the responsive web.

What is Adobe Edge Reflow?

Edge Reflow is a design tool that supplements your design workflow to help you create beautiful responsive designs for all screen sizes. Design on a native web surface while accessing the latest CSS features, preview designs in real time using integration with Edge Inspect, and extract CSS code you can hand off to developers with confidence that your design vision will remain uncompromised throughout development.

Who should use Edge Reflow?

Edge Reflow is ideal for web designers who want to create responsive layouts and CSS visuals targeting the latest browsers.

What are some of the key differences between Edge Reflow and other products?

With Edge Reflow, you can create responsive layouts for different screen sizes. Key features include:

  • Built on WebKit, Edge Reflow offers 1-to-1 web rendering capabilities for design within the constraints of browsers.
  • By integrating with other Adobe products and services, Edge Reflow fits smoothly into your day-to-day workflow.
  • CSS extraction capabilities offer a direct workflow between designers and developers.

Will you be making updates to Edge Reflow (Preview)?

Yes, Adobe collects user feedback, which helps our team in making improvements for regular updates.

How can I get Edge Reflow (Preview)?

The Edge Reflow (Preview) is available for download by anyone with a free or complete Creative Cloud membership.

What languages of Edge Reflow (Preview) are available?

English and French. However, it is available for download and use worldwide, except for embargoed countries. See the End-User License Agreement for more details.

Is CSS Regions supported in all browsers?

CSS Regions is currently supported in mobile Safari on iOS7 but will soon be available in other browsers. Visit our Web Platform page to learn more about CSS Regions and other new web standards.

What are shiny web features?

We love beautiful designs here at Adobe and strive to continue to move the web forward. As new CSS standards become available, we'll do our best to support them in our tools as soon as possible.

Is Edge Reflow meant to replace Fireworks?

Fireworks is a prototyping, wireframing and graphic design tool. Edge Reflow is designed specifically for the creation of responsive layouts and visuals by using standards-based CSS. While we expect some cross-over use-cases, these are unique applications that serve different purposes.

How is Edge Reflow different from Adobe Muse CC or Dreamweaver CC?

Edge Reflow CC (Preview) enables web designers to create responsive designs by leveraging a WebKit-based design surface and defining CSS layout and styling properties. Designers set media query breakpoints to manipulate elements and their design for different screen sizes. While Edge Reflow creates HTML during the design process, the tool is focused on enabling designers to share their responsive design intent and for CSS to be extracted for use either by the designer or a developer as part of the website production process.

Adobe Muse CC helps designers create and publish complete websites. Adobe Muse supports creating mobile content by allowing the designer to adapt the primary layout for other devices, so that a unique experience can be delivered for each screen size. By using Adobe Muse, a designer can publish their site without writing or editing any HTML, CSS or JavaScript code.

Dreamweaver CC is the all-in-one tool for creating web and mobile content quickly and intuitively, and the enhanced Fluid Grid layout feature is intended to provide developers and designers with an intutive way to generate clean web-standard code for their responsive design. Edge Reflow is a highly visual tool with features for designers to quickly ideate and mock-up different design comps for various devices and to view their results on various targeted screens. Unlike Dreamweaver, Edge Reflow does not provide coding features so designers must extract generated CSS code for implementation and deployment.

What’s the basic workflow in Edge Reflow?

We expect designers to import graphics from Photoshop CC, Illustrator CC and Fireworks into Edge Reflow and, using the resizable design surface, create responsive layouts for different screen sizes. Edge Reflow includes Edge Web Fonts integration for adding browser-ready fonts to designs, and CSS styling functions – including custom gradients, border styles, drop shadows and more. Once the different comps are ready, you can preview them in the browser or on devices via Edge Inspect before extracting the CSS code for use in development.

Does Edge Reflow provide HTML export features?

No, but you can preview HTML designs in web browsers and experience the responsive behaviors in end-user environments.

What other features are expected in future releases?

Edge Reflow is currently a preview release, which means that our team acknowledges the limited functionality of the application. Our goal is to provide community members an opportunity to try out the application and we encourage everyone to provide us with feedback. We intend to release monthly updates. Although we cannot definitely comment on specific feature sets, the team – with the advice of community members – is working through many key elements, including style management and workflow enhancements.

Does Edge Reflow work with any other Adobe tools?

Yes, you can import graphics created using Photoshop CC, Illustrator CC and Fireworks. Edge Reflow is also integrated with Edge Inspect, and Edge Web Fonts so you can seamlessly access these fonts during the design process.

For future releases, we are actively exploring other workflows with Edge Tools and Services, as well as Creative Cloud.

Why is Edge Reflow part of the free Creative Cloud Membership?

In addition to providing Creative Cloud members access to Adobe’s latest innovations, we are giving the community an opportunity to take an early look at Edge Reflow, for evaluation and feedback that will help shape the features and roadmap of the application. To help us improve Edge Reflow, you are encouraged to submit feature requests and report bugs via the our web forum.

What operating systems are compatible with Edge Reflow (Preview)?

Edge Reflow (Preview) is currently compatible with the latest Mac and Windows operating systems. See the tech specs for additional information.

All-new Edge Reflow is here. Join Creative Cloud to get Edge Reflow CC and all the tools you need to create, collaborate, and stay connected. Get started with a free Creative Cloud membership.
What is Creative Cloud? →