Adobe launches first public preview of Edge Reflow Web design tool

Adobe has launched the first public preview of Edge Reflow, its new visual Web-design software tool that focuses on site creation for a variety of viewing platforms. It features responsive design capabilities for an assortment of screen sizes, along with CSS3 styling and advanced sharing and previewing of content. Edge Reflow is a component of Adobe's Edge Tools & Services Web design suite, launched last September, but now the public actually has a chance to take a crack at the program. And, as usual with its previews, Adobe is seeking feedback on the product from the Web design community.

“It became clear to us that designers needed a way to create content that would reflow and work across different devices," said Paul Gubbay, Adobe's vice president of product development. "While we were able to do that working in code, we realized that the ability to do that visually would really be important.”

Responsive Web design, a term coined in the last couple of years, is a design-once-deploy-anywhere strategy that lets designers and developers adapt Web content to different screen sizes. Adobe's Edge Reflow allows for the design of sites whose format and layout change depending on where the viewer sees a site. Thus, if you look at a site on a desktop monitor, it will look different than viewing the same site on an iPad or a mobile phone.

Edge Reflow interface

The Edge Reflow preview program lets you dynamically resize the design surface for adaptable layouts, create multiple comps simultaneously, and choose between a desktop or mobile-first design approach. Reflow's goal is not to generate a final website, but rather to construct a visual comp that speaks the same language as the code developer to streamline and simplify the entire process.

Edge Reflow lets designers create true-to-life designs on a Webkit-based interface and customize those designs with elements like multiple background layers, inset and outset drop shadows, border styles, and more. Because the tool is written in HTML, CSS, and JavaScript, it facilitates accurate, one-to-one rendering of content. You can then preview in the browser or use Edge Inspect—another tool in the suite—for real-time preview, and extract the generated CSS code for further development.

In related news, Adobe also announced updates to Edge Animate, Dreamweaver, and the preview of Edge Code.

New features in Edge Animate, Adobe's motion and interaction design tool, allow for gradient and typographic capabilities. Gradient features allow you to style and animate radial or linear gradients, while CSS filters let you add effects like blur, grayscale, sepia, brightness, hue, rotate, invert, and saturate. A visual Web font selector, powered by Adobe's Edge Web Fonts service, facilitates live preview of Web fonts.

Edge Animate

Adobe also announced updates to Dreamweaver, the company's Web design and application development tool, including the integration of Adobe's Edge Web fonts service, and an update of the program's fluid grid layout.

Dreamweaver fluid grid

Finally, changes to the Adobe's Edge Code Preview, a code editor for HTML5 developers working with HTML, CSS, and JavaScript, now include live previews so users can see changes in the browser as they edit. A Quick Edit feature lets you edit content inline without switching between files. It also features code hinting for CSS properties and HTML tags and attributes.

Edge Code Preview code hinting

All the updates are available only to Creative Cloud subscribers. More information about Adobe's Edge Tools and Services is available on the company's website.

Subscribe to the Tablet Tips & Trends Newsletter

Comments