Throughout the past two years web designers have become more and more aware of the importance of responsive web design, in other words making their sites viewable on different devices, as well as at different resolutions, in other words whether you are on an iPad Mini or a MacBook Pro with Retina Display the site must work just as well. Last week was the first release of the public preview for Adobe’s latest Edge tool, Edge Reflow.

For those unfamiliar with the newest addition to the Adobe family, Edge Reflow is a tool specifically built around helping designers create responsive designs.

In our post about Web Design trends you can’t ignore in 2013, responsive design was the number ONE design trend you really can’t ignore.

That was the whole purpose behind Adobe creating Edge Reflow, through the layout of the program, designers are able to create a mockup for various layouts, whether they want to optimize their design for mobile devices or desktop computers the possibilities are endless.

You need to understand however that Edge Reflow isn’t supposed to be the end-to-end design solution. It is important to know that the program will not work as a one step solution, instead it is for those who wish to see  what the design will look like at various sizes and on different devices.

Features of Edge Reflow:

      • Flexible design approach
      • Edge Web Font integration
      • Visual media-query breakpoints
      • Multiple background layers
      • Multiple drop shadows
      • Border styles and customization
      • Fluid customizable grid system
      • Previewing your design

 

What makes Edge Reflow great is that users can preview what their design will look like in a browser, furthermore the CSS is extractable for future developments, you can then copy that code into Dreamweaver and continue working on it from there.

edge_reflow_feature_style

As Adobe product manager, Jacob Surber, says the aim behind Reflow is:

“to help designers design within the constraints of the web to communicate their intent, but not to tell developers how to build the site.” He then adds that that what Reflow generates “is not production code.” Reflow is a design tool, and it bridges the gap between raster image editors like Photoshop and bare code. It lets you design your site on a flexible grid, utilizing break points with CSS media queries.

edge_reflow_feature_preview

If you want to try Edge Reflow you need to be a Creative Cloud subscriber. While the Dreamweaver update does require a paid Creative Cloud subscription you can try Edge Reflow, Animate and Code for free.