Over a million developers have joined DZone.

Designing responsively from the ground up with Edge Reflow

· Web Dev Zone

Start coding today to experience the powerful engine that drives data application’s development, brought to you in partnership with Qlik.

A few weeks ago, my latest Adobe Inspire article was published. It follows up an intro to responsive web design article I wrote for the prior issue. In this case, it imagines I were to redesign this web site using Edge Reflow (currently available as a preview via the free Creative Cloud subscription) to make the design responsive. Obviously, the current version is not at all responsive (laughably unresponsive even). However, if I were to take my initial assets from Photoshop to build a layout in Edge Reflow, I could then hand that to my web developer (still me in this scenario) who could interactively see how it should look and behave in various widths and use the CSS and other design hints inside Reflow to guide his development of the HTML and CSS for the actual site. It's a bit of a new workflow from what many teams are accustomed to right now, where they may hand off a series of PSD's that staticly illustrate how various screen sizes should look (I know because I received a ton of questions along these lines when I have presented it both to the HTML5 Developers Conference and the Adobe Community's Tech Wednesday). In this case, the designer and developer are, in essence, "speaking the same language." Hope you enjoy the article.



Create data driven applications in Qlik’s free and easy to use coding environment, brought to you in partnership with Qlik.

Topics:

Published at DZone with permission of Brian Rinaldi, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

SEE AN EXAMPLE
Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.
Subscribe

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}