Enjoy complete control over your responsive design workflow and a real-time connection to Photoshop with Edge Reflow CC and a Creative Cloud membership.
Designing responsive sites has never been so easy or so intuitive. Edge ReFlow – currently in preview stage, but available to all Creative Cloud members – adds the ability to create beautiful responsive designs for any screen size to your design workflow, using standards-based CSS. You preview designs in real time thanks to some handy integration with Edge Inspect, and extract CSS code that you can hand off to developers.
Photoshop link
There’s also a new feature that provides a real-time link to Photoshop CC through Adobe Generate technology. Just add file suffixes such as ‘png’ or ‘jpg’ to layers, groups or smart objects, open up the Photoshop Connect panel in Edge ReFlow CC, create a new page in ReFlow CC from your PSD and you’re good to go.
It makes taking your designs from Photoshop over to Edge ReFlow seamless – and will be a massive workflow boost for anyone designing responsive sites using Creative Cloud tools.
In terms of using the application, Edge ReFlow enables you to create responsive designs by leveraging a WebKit-based design ‘surface’, and defining CSS layout and styling properties. You set media query breakpoints to manipulate elements and their design for different screen sizes.
Bear in mind that while Edge Reflow creates HTML during the design process, it can’t export HTML. The tool is focused on enabling designers to share their responsive design vision, and for CSS to be extracted for use either by the designer or a developer as part of the website production process.
So, with this in mind, what are the benefits of Edge ReFlow? What are the features that will help you design responsive sites using CSS? Well, you have precise control over your layout with static, absolute and relative positioning.
The new Pages panel enables you to create and manage responsive comps for your entire site. What’s more, you can use a flexible grid system to adjust any media query breakpoint in order to change the column count and gutter width.
Assets panel
Typography is covered with the ability to incorporate Edge Web Fonts and Typekit. And you don’t have to worry about managing assets – the new Assets panel takes care of that. If you want to add effects such as gradients, drop shadows and so on, it’s not a problem either, and the ability to preview everything – through either your browser or Edge Inspect CC – is built in.
Finally, once you’re done you can easily extract CSS from your project to share with collaborators or colleagues for further development in Edge Code CC, Dreamweaver CC or the preferred code editor of your choice.
If you’re looking for a responsive design tool that integrates seamlessly into your Creative Cloud workflow – and one that links beautifully with Photoshop – Edge ReFlow CC is definitely worth a look. And, of course, as part of your CC membership it’s easy to download and get started.