Today, it’s almost a forgone conclusion that your next web project will not be desktop only. The real question becomes: how have you adapted your workflow to handle the evolving needs of your customers? Many people have chosen ‘Responsive Web Design’ as a way to tackle this challenge. However, RWD is a philosophy based on a collection of approaches rather than a one-stop solution. There are two common ways to deal with this challenge. You can either design in the browser or use an existing design tool. Neither approach, however, provides the combination of creative freedom with the benefit of working in the actual medium of the web. Although designing in the browser allows for the most accurate design during the creation process, you are forced to work directly in code. While this ensures accuracy, it can be difficult to have those ‘happy accidents’ in which a truly awesome design is borne. Web designers have also tried repurposing existing tools to help them communicate their vision, but have struggled because they are asking for tools to do things they simply were not intended to do. Designers have often taken the approach of creating several static comps, with the hopes of conveying their vision. Imagine a scenario where you are designing a site with a dozen pages, which will be consumed on a half-dozen screen sizes (between mobile, tablet and desktop). All of a sudden you’re managing 48 different comps. Add in several rounds of client changes and this approach can quickly become unmanageable. More importantly, this act of jumping between files is disruptive to the creative process, as it can be very challenging to create consistent designs when you are constantly shifting contexts in-between files. While no design tool can compare to the creative power of Photoshop, it–and many other similar tools –speaks a fundamentally different language from the web. With its powerful design canvas it can be far too easy for your design expectations to get out of sync with your developer’s understanding or what’s even capable of being created on the web. All of these factors lead to the inception of Reflow, the first web design tool truly focused on a responsive design approach.
An evolution in web design
The process of creating Reflow started not only by studying the web design landscape, but also a full audit of Adobe’s design product and workflows. We arrived at a core set of tenets that would drive the creation of this new web design tool.
- Honesty in design: Reflow itself is built using HTML, CSS and JavaScript, with the goal of helping web designers design for HTML, CSS and JavaScript. Our intention is to remove layers of abstractions, so designers can create for the web using the web.
- Focus on standards: Reflow will ONLY enable designers to create experiences that are compatible with the web. In some situations this can be limiting, but as the capabilities of the web changes, Reflow will evolve as well. Adobe has committed to contributing and advancing web standards. Our goal is to integrate that work, as experimental features, in our web tools such as Reflow.
- Transparency in approach: The Reflow team will be very clear about what it is and isn’t working on. We also want to very open about challenges that exist in different workflows and have conversations with you about the best approach. We are a small but agile team concerned with addressing a specific set of problems, rather than attempting to solve every challenge from the beginning.
Our goal is to create a tool that helps web designers who already have a fundamental understanding of web layout and design to create faster, more accurate web designs. This ‘responsive comp’ enables web designers to communicate their responsive intent and demonstrate responsive behaviors to both customers and developers. This ability to see your design react between break-points is the first step in getting away from device specific break-points and towards content defining responsive designs. Reflow then enables you to preview and share your designs in the browser or on devices for review and approval.
A new approach
The right tool for the right job has never been more relevant than it is today, but we need to work with you to shape that tool. Rather than develop in seclusion-until we think we’re done-we encourage you to have a conversation with us. This is just our first blog post. From here we will be taking a detailed look at the key features of Reflow and where it is heading We look forward to hearing your thoughts and feedback on the direction and what features will most impact your workflows. Join the conversation on Twitter @Reflow, on Facebook or in our forums.
Where we go from here?
Today’s release is our very first public preview. You can download Reflow via Adobe’s Creative Cloud and is available to both paid and free members. Releasing through the Creative Cloud gives us tremendous flexibility to release updates. Over the next several months we will be working with you to figure out the right pace. While we don’t want to burden you with constant updates, we plan on responding to feedback adding features and bug fixes rapidly.
By A new tool for designing Responsive Web Design websites | Mihai Corlan February 14, 2013 - 5:06 pm
[...] In the end I want to congratulate Reflow team for what they have done in such a short period of time. Keep great features coming, guys! You can read team’s post about this first preview here. [...]
By Pascoal Pimenta da Silva Junior February 14, 2013 - 5:28 pm
Thank you to that update informations. I work with vector in all objects help many to a good scale of different devices. I subscript the blog, Please update for us good something about Edge. Thank you!
By Pascoal Pimenta da Silva Junior February 14, 2013 - 5:41 pm
I am exploring deeply Adobe Reflow. Thank you guys I think will be awesome project! Download here, thanks you all.
By SIRIUS Web Dev February 14, 2013 - 6:17 pm
We’ve been looking forward to the release of this tool to assist with the implementation of responsive design for clients. It will certainly be easier than configuring ‘fluid grid layouts’ within Dreamweaver.
We will be happy to share our experiences using the tool in the close future.
By Erica February 14, 2013 - 6:35 pm
So excited to finally have this tool! I’m checking it out now and am already looking forward to all the future improvements you’ll add. I can tell Edge Reflow is going to become an important part of my workflow.
By Adobe Showing Some Love for HTML | ANDREW TRICE February 14, 2013 - 8:32 pm
[...] Adobe Edge Reflow Team Blog [...]
By Peter Villevoye February 14, 2013 - 8:42 pm
Congratulations with this new and precious Edge puppy ! It’s downloading right now, so I haven’t touched it yet. I first wanted to thank you for taking the effort of developing what seems to be missing from Dreamweaver for so long. Whatever it turns out to be, I know it’s sheer approach is already so much better than what I’ve seen from all those nerdy and code-centric fluid grid tools all over the web. Here’s to the Visual Designers – cheers !! And now let’s double-click that shiny new Edgy icon…
By Shan February 14, 2013 - 9:49 pm
Sounds interesting. Wonder how it plugs into our existing web dev environment.
By Todd Clary February 14, 2013 - 11:46 pm
I couldn’t be happier! I’ve used Adobe products for 20+ years and am confident that Reflow will be invaluable. Thanks!
By Paul Deak February 15, 2013 - 12:53 am
Perfect timing for a project I’m just starting on today. From a quick go through I love it so far. Simple but I can see it becoming a very powerful tool for accelerating the responsive design creative process.
By Thailand Telecom Update - Adobe พรีวิว Edge Reflow ตัวช่วยออกแบบเว็บไซต์แบบ Responsive February 15, 2013 - 3:12 am
[...] – Adobe Edge Reflow Team Blog, [...]
By Kevin L. February 15, 2013 - 7:43 am
@Reflow FYI: The features page seems to be giving off a 404 error: http://html.adobe.com/edge/reflow/features.html
By Stephane February 15, 2013 - 12:41 pm
I might be a total idiot (probably) and miss an easy trick but once you defined a specific property for a format (like 320, 480, 768 etc in the “Getting started guide”) how to you remove the property (to revert to default value). Copying the default value doesn’t remove the property, so any further change to default are not reflected.
Thanks
By Chris Bank February 16, 2013 - 1:40 am
When you hover the mouse over any of the property input, you’ll see a button to the right of it. When you click that button it applies the current setting to all regions.
By Steven Carey February 15, 2013 - 1:03 pm
It’s just a hunch, but will MUSE go away once Reflow is fully established? It seems there is quite a bit of overlap in the two products.
I been working with Muse for several months and I have discovered that it lacks a number of features, i.e. formatting data sets with table structure or HTML Flex.
I hope Reflow will address some of these small, but significant short comings.
Thanks again to the Adobe Reflow Team,
Steve
By Joseph Wong February 20, 2013 - 5:46 pm
Hi Steven, we will be posting a blogpost to address this shortly, so keep an eye out for that!
By John Nack on Adobe : Come download Reflow, Adobe’s new responsive-Web design tool February 15, 2013 - 4:10 pm
[...] speaks a fundamentally different language from the web,” writes PM Jacob Surber. That’s great for many things, but Adobe’s new Edge Reflow—available [...]
By Carlos February 15, 2013 - 5:12 pm
This is such a great tool! a big step in web design and im happy to grow alongside this tool as well as the others (like Animate). However, do you guys have some basic tutorials for Reflow? Keep the awesome work that you guys are making.
By Nick Halbakken February 19, 2013 - 4:44 pm
Thanks, Carlos! We have a “Getting Started” posted here: http://www.adobe.com/devnet/edge-reflow/articles/introducing-edge-reflow.html
There are also introductory videos here: http://tv.adobe.com/show/adobe-edge-reflow/
By What’s New in Creative Cloud: Edge Reflow Preview and New Dreamweaver Features | Creative Layer February 15, 2013 - 7:57 pm
[...] on the application’s native web surface leveraging the power of CSS. Get all the details from the Edge Reflow Team blog. Looking to get started right away? Here’s an intro to Reflow video from evangelist Paul [...]
By Francisco Campos February 15, 2013 - 9:57 pm
A big thanks to the Reflow team, I think it’s been well worth the wait, Reflow is pretty awesome. A big step forward in responsive web design.
By Kristina February 16, 2013 - 1:40 am
Definitely a big overlap with Muse…. Strange…
By Joseph Wong February 20, 2013 - 5:44 pm
Thanks for your comment, Kristina. We’ve seen some questions regarding Muse and Reflow, and we will be posting a blogpost to address that shortly.
By Adam February 16, 2013 - 7:06 am
I downloaded Rf right away when I found news about it. I didn’t have a chance to experience a lot with yet. I downloaded .zip sample from Adobe and the website looked really nice. I made quick responsive website using Muse, but found it as time consuming to make fluid design. One must start over when doing for phone and tablet. In this regard DW is much better. Now with Rf is totally different story. Looking at sample I couldn’t find anywhere how to insert link to menu or elsewhere. Is it just for design and then must be brought to another app like DW to finish?
By Chris Bank February 21, 2013 - 5:26 pm
That’s correct. Reflow is focused on design. You can extract chunks of CSS to help go from design to production, but you will need to use a code editor to make that page.
By telecharger gratuitements February 16, 2013 - 11:44 am
We are a bunch of volunteers and opening a brand new scheme in our community. Your web site provided us with valuable info to work on. You have performed an impressive process and our whole community will likely be thankful to you.
By Scott Boucher February 18, 2013 - 9:36 pm
I wonder how all of the new web tools from Adobe will work together. Muse, Edge Animate, Edge Reflow, etc. Seems like they should almost be combined into a single, multi-purpose tool. Not sure how it all fits as a comprehensive workflow, especially compared to other on-line services like SquareSpace.
By Chris Bank February 21, 2013 - 5:29 pm
I don’t think they will all be in one big tool as each is targeting different goals. However they are already using shared features like the Edge Web Fonts and they will share more services and workflows through the creative cloud.
By Dialy Sports News February 20, 2013 - 4:08 pm
I do believe all of the ideas you’ve presented to your post. They are very convincing and can certainly work. Nonetheless, the posts are too short for newbies. Could you please lengthen them a bit from subsequent time? Thank you for the post.
By Helenbeee April 5, 2013 - 2:58 am
I agree it seems like the best features are split between the 2 programs. Im finding it quite frustrating as I start in one and then wish it was the other. Oh well maybe the idea is that at some stage there will be a merging of some of these new programs.
By SEO New York February 21, 2013 - 7:55 am
Nice selection of theme it is..
and also great post its is…………….
By Ezra February 22, 2013 - 11:13 am
I think it’s its such a mistake not to integrate Reflows features with MUSE! It’s the central challenge when using MUSE at the moment and to keep these tools separate bewilders me. Looking forward to the aforementioned blog post speaking to this.
By Responsive Design #45 | Responsive Design Weekly February 22, 2013 - 1:19 pm
[...] Introducing Adobe Edge Reflow [...]
By Adobe updates their Edge suite | San Diego Adobe Developer User Group February 22, 2013 - 4:25 pm
[...] can learn more about Reflow from Adobe’s development team blog and check out our own Chris Griffith’s newest article on ADC ‘Introducing Edge [...]
By Ron Yoshida February 24, 2013 - 3:40 am
What is the relationship between DW6, business catalyst, edge animate and reflow?
By Martin Forster February 24, 2013 - 4:12 pm
At first sight, the layout and functionality are very friendly and seem nicely stable. I’m assuming the ‘this only works on Chrome’ will go away in time, as code that needs rewriting for every browser is slowly driving me crazy.
I’ve been starting to play with animated mobile sites on Edge Animate and this seems like it could be the perfect tool to build the static site, export into Animate, then add the animation. I realise there are several reasons why this is easier said than done, but is that the final intention (if I ask REALLY nicely)?
By Brent February 27, 2013 - 5:13 pm
Nice was waiting for this to come out. I was wondering is there a way to import an existing project to reflow?
By TOMRUDMAN February 28, 2013 - 1:02 am
Go Adobe Go:)
By Joe Brockerhoff March 1, 2013 - 7:37 am
Trying to adjust a more complex amount of boxes (20) for different positions takes me hours. Trials to correct positions creates chaos either or other way. If I only could stop effects to all segments when adjusting one (reminds me of building tables visually in Dreamweaver 2 / 3) – one should be able to choose between pixel OR percentage orientations and one should be able to unable element orientation for the whole size segments.
By Beating the Sequester With a “Mobile First” Strategy « Government Bits March 7, 2013 - 1:05 pm
[...] Tools and Services product team introduced Adobe Edge Reflow, the world’s first web design tool focused on solving the problems of Responsive Design for [...]
By Introducing Adobe’s Responsive Layout Editor: Edge Reflow | Webdesigntuts+ March 13, 2013 - 3:42 pm
[...] Introducing Adobe Edge Reflow on the Adobe Team Blog [...]
By Adobe’s Responsive Layout Editor: Edge Reflow | Bereket Designs March 13, 2013 - 5:25 pm
[...] Introducing Adobe Edge Reflow on the Adobe Team Blog [...]
By Planete-lolo March 24, 2013 - 7:46 pm
It is very nice to know this, I have been using Adobe products for like 4 – 5 years and I really can’t imagine how I could manage without it. Thanks a lot Adobe.
By Adobe: WHY?! | Bowl Hat April 2, 2013 - 10:21 pm
[...] rant comes from spotting the release into the wild of Edge Reflow a tool to aid the development of responsive websites. Windows [tick]; Mac [tick]; Linux [...]
By pbenn April 5, 2013 - 3:55 pm
Just did a quick reflow test. Opened in DW6 and previewed in Chrome. All is well. Uploaded files to godaddy server and I get nothing. Any ideas ?
By TuniHD April 9, 2013 - 9:35 am
I love you Adobe, Thanks a lot, I have been using it for years.