An introduction to Edge Reflow

Edge Reflow is one of the exciting new weapons in Adobe’s ever-expanding Creative Suite arsenal; helping to bring the modern web’s powerful features within reach for designers.

Reflow is designed to help creatives work towards the holy grail of current web design standards: responsive design. Previously only possible for the HTML-savvy, now everyone can produce sites that rearrange themselves for different devices.

As well as being enormously beneficial to designers, developers looking to quickly prototype more advanced responsive layouts will also find it useful.

In today’s guide, we’ll be walking through some of the basic tools and techniques you can use in Reflow to create awesome responsive designs quickly and easily. Along the way, you’ll learn the following techniques to apply to your own projects:

  • Construct a flexible website design using Reflow’s box, text and image tools
  • Find the “breakpoints” of your design, and adjust your layout to display your content how you wish according to the window width
  • Make your design bulletproof to mobile and tablet devices
  • Test and trial your responsive layout using Reflow’s in-app browser, as well as real-world browsers.

Are you working with Adobe Edge Reflow? How effective a tool have you found it? Let us know in the comments.

0 shares
  • http://www.garthdb.com/ GarthDB

    There was an update released today. http://blogs.adobe.com/edgereflow/

    • http://www.facebook.com/sandymagluilo Sandy DeMarco Magluilo

      so does this mean we can now export our files and actually upload files live or is it still in the production stage – I was part of the beta testing but lost interested once i realized the end result was not a finished site.

  • http://www.facebook.com/sandymagluilo Sandy DeMarco Magluilo

    is it still true with Reflow that you can’t currently export your html and css files? So therefore how do you actually use this program to really publish and upload your site designs? Once that is figured out I am all over this….

    • http://twitter.com/Sam_Piggott Sam Piggott

      Hey Sandy!

      From the version that I was using in the guide; yes, it’s true that you can’t actually export HTML and CSS files from Edge. It’s more for prototyping and showing clients your design intent (much like designing on PS/AI before taking it to code, for example).

      I’m actually working on a video update that details the new features of the updated version at the minute; so stay tuned! :)

      Sam

  • http://twitter.com/marekdsi Marek

    Oh god why the background music for the entire video? Can’t concentrate on the words…

  • Maggie

    Can someone explain to me the difference between this and Muse? Just curious!

    • http://twitter.com/Sam_Piggott Sam Piggott

      Hey Maggie!

      Muse is more of a web designing tool to take to production; you can build and export complete web designs using Muse. Reflow, on the other hand, is (at the time of shooting this video, anyway) to be used as a way of designing your site to adapt to smaller/larger screen sizes.

      I imagine that the great overarching plan of Adobe’s will be to integrate the Edge tools and Muse together to work in unison one day.

      Hope the guide helped!

      Sam

      • BowieSalvatore

        How is Edge Reflow different from Adobe Muse or Dreamweaver?

        Edge Reflow is a responsive design tool with a fluid grid layout UI with features to adapt design based on the properties of the viewing device. Muse has adopted the alternate design approach, which allows the primary layout to be manually adapted for other devices.

        Dreamweaver is primarily a code editor, and the fluid grid layout feature is intended to provide developers with a way to generate publishable HTML code for their responsive design. Edge Reflow is a highly visual tool with features for designers to quickly ideate and mock-up different design comps for various devices and view their results on various targeted screens. Unlike Dreamweaver, Edge Reflow does not provide coding features so designers must extract generated CSS code for implementation and deployment.

        http://html.adobe.com/edge/reflow/faq.html

  • http://twitter.com/Sam_Piggott Sam Piggott

    Hey Scott!

    Thanks so much for your feedback! If you can think of any other tools or techniques that you’d like to learn more about, I’d love to hear suggestions for future guides :)

    Take care, and happy creating!

    Sam

  • http://dmimaging.net/ Goran Vrcel

    Amazing! Thank you.

  • LouisWu

    Thank you for this! Awesome tutorial!!!

  • Angela Ang

    Thank you for the concise tutorial! I just downloaded the app and this was the perfect intro to get me started.

  • Hazel Knutty

    The music is EXTREMELY ANNOYING! I am trying hard to focus on what you are trying to say while blocking out the music. You could’ve done better in the choice of music at least. Sounds like I am in a freakin’ arcade FFS.

  • http://www.garthdb.com/ GarthDB

    It generates HTML to preview in browser.

    • http://www.facebook.com/jt.hollister Jt Hollister

      Yeah, it generates them, don’t use them though! It’s for mockups/wireframes

  • Felipe Fidelix

    Jesus christ, the music makes it unwatchable. Sorry.

  • Mark Itskowitch

    It seems you are making Web Design MORE complicated! Does Adobe want us to use Fireworks and Photoshop to design the website(InDesign or Illustrator as well) and then slice it in Photoshop, export the assets for Edge Reflow, then use Edge Code, then pass them off to Dreamweaver to create the website, then use Edge Animate to add interactivity and animation, and use Flash for more advanced interactions?? Good Grief!!

    Why didnt you just make Photoshop Slicing EXPORT To CSS instead of still exporting to TABLES! Or instead of a NEW program I have to open, create a FLEX FOR WEB Feature, that brings up your already created layers and gives sort of layer comps for various devices. Or have Photoshop export right into Dreamweaver and start creating Fluid Grid layouts …. then Instead of Edge Animate, why didnt you just keep the Dying Flash program and EXPORT that to HTML5/CSS…. why all the new programs! ITS NOT easier!! Its more complicated than its ever been! Who wants to use 8 programs to design a website??