Responsive design has become a touchpoint for the mammoth debate between native code champions and mobile web enthusiasts, and Adobe’s just come down clearly on the mobile web side with the announcement of Reflow.
Reflow is Adobe’s Creative Suite-level tool for responsive design. It lets developer/designers pull in images and motion graphics, create HTML divs and CSS styling on the fly, and then quickly adjust sizes and elements for different screen sizes.
Read more Adobe Edge news
Reflow isn’t launching just yet, but we got this sneak peek at the company’s Create the Web event in San Francisco today. Here’s a look at what Reflow can do:
-
reflow
Reflow was announced today but won't launch just yet, Adobe said.
Reflow was announced today but won't launch just yet, Adobe said.
-
reflow-05
Here's the Reflow workspace.
Here's the Reflow workspace.
-
reflow-06
You can pull in Animate motion graphics and Photoshop graphics, and you can create HTML divs and CSS styling on the fly -- drop shadows, rounded corners, etc.
You can pull in Animate motion graphics and Photoshop graphics, and you can create HTML divs and CSS styling on the fly -- drop shadows, rounded corners, etc.
-
reflow-07
But what's this? When you resize the preview in the Reflow workspace, at tablet sizes, the design gets cluttered. Reflow will let you adjust sizes, hide elements, add new break points, manipulate images, and tweak spacing to your heart's content.
But what's this? When you resize the preview in the Reflow workspace, at tablet sizes, the design gets cluttered. Reflow will let you adjust sizes, hide elements, add new break points, manipulate images, and tweak spacing to your heart's content.
-
reflow-08
Make further adjustments for narrower smartphone screens, too.
Make further adjustments for narrower smartphone screens, too.
-
reflow-09
Fewer images, less text, no side-by-side columns -- and the code changes as you drag and drop.
Fewer images, less text, no side-by-side columns -- and the code changes as you drag and drop.
-
reflow-10
Here's the revised smartphone version next to the desktop version.
Here's the revised smartphone version next to the desktop version.
- Previous Slides
-
- Next Slides
Adobe’s other big bid on responsive design is Adobe Edge Inspect, the magical software that lets you check for and fix cross-platofrm, cross-device design and code issues. You may know Inspect by its old code name, Shadow.
top image courtesy of alphaspirit, Shutterstock
