Two years ago, when Ethan Marcotte invented responsive web design, developers around the world had a huge Ah-Ha! moment. All of a sudden, it seemed that there was a conceptually easy way to make a single website look good on multiple screen sizes—just worry about the pixel width of the viewport.
After many sites adopted this approach, with some very handsome results (and some fairly awkward ones, as well), it also became clear that there is a tremendous amount of engineering yet to be done to make the entire experience work well. Without knowledge and care, a responsive website can make unnecessary server requests and download images scaled for a desktop on a mobile device. This has led to a widespread perception that responsive sites may not really be a practical alternative to native apps.
There are many talented engineers working in the HTML5 community on these problems, and I have confidence that they will be solved—but it’s not a gimme. Just because responsive web design has not turned out to be the Holy Grail, however, doesn’t mean that it shouldn’t have a seat at the Round Table of tools for web designers.
But for web designers on the wide end of the spectrum and app designers on the narrow, getting your head around all of the moving pieces that have to be accounted for between discrete views can be challenging. In general, designers that have adopted Luke Wroblewski’s mobile first approach have had an easier time scaling things up and airing them out than those scaling down.
Until now, however, designers have not had an easy way to work out all of these details in a visual way and then communicate that experience to clients and the underlying code to developers. Today, Adobe is announcing the first public preview of a new piece of its HTML5 Edge Tools suite called Adobe Edge Reflow that enables all of these things through a single interface.
As you can see in the screen shot above, the designer can drag the color sliders at the top of the workspace to set “break points” where the design elements reconfigure themselves for different widths. Within each break point, the designer can set different rules and effects for how the elements will scale and transition into the adjacent break point.
And, as you can see from the screen above, the CSS code for each element can be discovered through the DOM tree inspector at the bottom of the workspace. The ability to work in the kind of visual environment that designers are used to, generate working comps for clients and export code for developers will both speed up design development, but also avoid the unintended awkwardness that can result from programmatic design decisions made without sufficient visual feedback.
Adobe has released two promotional videos, the first a quick introduction to Adobe Edge Reflow and the second a brief interview with Adobe Reflow product manager Jacob Surber, to show Reflow in action. Actual tutorials are forthcoming on Adobe TV. Reflow is now available for free and paid Creative Cloud members along with updates to Dreamweaver, Edge Animate and to the preview of its new code editor, Edge Code. Your responsive designs generated in Reflow can also be previewed on actual devices using the Edge Inspect tool (which I wrote about previously when it was first known as Adobe Shadow.)
None of these tools design the site for you, and they don’t address the engineering issues that I mentioned above, but they sure make the multi-screen design process a lot more accessible to a lot more designers. Someone deserves to be knighted for that!