why using Edge Reflow if it's not possible to generate a real HTML Code and improve it with PHP ?

Hey there,

In it's current preview incarnation Reflow is intended purely as a design tool, essentially a means for realizing a responsive page design that is much more than the static comp you'd get out of say Photoshop or similar tools.  The designs are fluid in nature and can be shared with potential clients as a preview of sorts in a fidelity equal to what they would get a final hand coded page (which clearly would take much longer than sketching out with Reflow).  The designs in Reflow are also gauranteed to be within the constraints of the web, as opposed to something produced with Photoshop which may or may not be "realistic" as far as what's feasible in the real world, reason being of course is that you are designing within the browser itself.

So again, I stress, "in its current state", Reflow is not intended as a production tool.  But of course, stay tuned.  Many great things coming. 

-Corey

Is Edge Reflow what I could use to generate the CSS for a site I do in Dreamweaver? I don't really need just a comping tool but I sure could use help creating a responsive site and I SO would love to do all my design using something better than Dreamweaver!

@skaras2,

The css generated from Reflow is clean, but, probably not optimized as people would like. But, you can certainly use it in Dreamweaver as a starting point, if you want. At the moment, Reflow doesn't include style management where you can reuse classes that you have defined. So, the CSS generated will be entirely id selectors that are probably not ideal for a production site. You'll want to do some cleanup.

Joan

I am really  disappointed with the way this critical fact is so burried and  you have spent time digging in the forums before it jumps out at you that you can't generate HTML.. If I can't generate useful HTML from Reflow then how is it anything more than a way to see how my responsive site will work when I resize the browser from destkop to mobile screen?

Maybe I am missing something really major here but its seems that the large investment I make in learning to use Reflow (and I don't think you will deny there is a considerable f effort as the very long Getting Started tutorial attests) doesn't really let me leverage that effort into a real web site.

Isn't it true that any web site designer  trying to build a responsive page faces this problem: how to get real HTML that they can use? If I am not alone in this then best visual designer I have round that lets you generate real HTML is jetstrap: https://jetstrap.com/. And it has problems that makes it less than ideal. I see there are lots of visual design programs out there for building responsive sites (http://vandelaydesign.com/blog/design/bootstrap-themes/).

But I really wonder is there any possiblity that Adobe will someday get Reflox to generate HTML that can be imported into Dreamweaver?

Thanks

Mith

I doubt it.  Edge Reflow was never meant to be a production tool, only a quick mockup designer to show clients before you actually do the work of creating the real website or application.  I discovered that 15 minutes into using the preview when it was first released and discovered there is no way to actually export HTML and asking questions in the forum brought the real purpose to light.  The website details deceive as to what it really is meant for.

You can get the html and css by previewing the layout in a browser then copying the css and html from the temp folder before they get removed automatically.  The problem I discovered was that these files are not complete and not something you would use in production due to only being compatable with the chrome web browser.

It's a total waste of time for any real purpose and was created by one of Adobe's teams because someone needed a way to quickly mockup a show and tell for corporate clients.

The closest tool Adobe has to what a production designer would want is Muse but there you have to create Desktop and mobile versions seperate.  Bringing up to the design team for Muse having the capability of creating a responsive CSS file with media queries instead of three seperate sites, seems to have fallen on deaf ears because it is Adobe's way of the highway from my experience.  Sometimes they give in and change things if a majority complain but mostly it's however Adobe want's the tools to work and for Edge Reflow it is just a mockup tool with deceiving marketing.

Can you per chance reference the "deceiving marketing" you speak of?  Obviously it would not be our intent to do so.

Most of the terminology used on the main product page uses the term "design", as in say, what web designers would use to design a web page, as they do today with Photoshop and Fireworks for instance.

Keep in mind Reflow is a "preview" app (as in something we're actively experimenting with and working with users to improve) - and we've heard loud and clear that folks would love it to produce production quality code - and that's not something we're going to ignore.  FWIW.

-Corey

What does the Reflow website claim that seems to suggest it generates CSS and HTML? As the Product Manager for Reflow, I want to correct the information immediately so we don't let people like you astray.

You can technically copy the HTML, CSS files generated during 'Preview in Chrome/Safari' mode and start from there. But we do not recommend it because we do not think it is a good baseline to start from. The CSS generated for each component is something worth copying and using which is what you can do.

If you would like to have an end-to-end design tool that does not require you to write any code, Adobe Muse is great for that. 

If you go through the Edge Reflow marketing page at the very top of the page it states “Design the responsive web” and a graphic below showing what would appear to be a web page design within the software.  It is a web page depiction because it specifically states “Design the responsive web” above it emphasis on “web.”

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

Lets look at the paragraph titled  “Web Layout”

“Design in Reflow for the web. Move between design environments easily while maintaining your design fidelity. Reflow uses CSS and behaves like a browser, making it easier to translate your designs to the web. Gain the predictability of web layout, with the freedom of an Adobe design tool.“

This paragraph implies a fully functional design tool.  It uses CSS, makes it easier to translate your designs to the web.

The implication is you will have a working mockup you can further extend and develop outside the tool itself.

You may say, NO!, no where does it say any of this.  It actually doesn't have to, the implication is there that it does and that is all that is needed the implication and what an average user would assume or understand the tool to be.  Also note that no where on the page does it state it can't which also by intention or not, leads one to expect this to be a design tool for the web with capability of exporting the designs.

To further prove this point let me take you through other portions of this Adobe Edge Reflow site and detail specifics in actual videos available on Adobe TV detailing Edge Reflow and the newest version.

The very next section states  “A native web surface provides the precise and intuitive controls you need to turn your vision into reality. Use Reflow and the latest CSS specifications, including CSS Regions and CSS Filters, to create powerful responsive designs“

This further leads to the implication and assumptions that Edge Reflow will allow for full work flow that will lead to a design process that will produce a final output for the web. Indication that it exports the CSS and Html. It does not specifically state in words this but the implication is reinforced from earlier content in the page.

Further down you see  “Preview and share your designs in your browser or on a device “ under “Previewing and sharing. I want to bring your attention the statement “in your browser”, no where does it specifically state google's Chrome browser.  I use Firefox and rarely IE, I never use Chrome so when it states “in my borwser” I assume it works in any browser because that is the implication. This is also misleading, it isn't any browser as it leads you to believe it is only the Chrome browser which you have to specifically download and install if you don't already have it, I didn't.  Another misleading statement.

At the bottom of the page there are testimonials about Edge Reflow apparently from real world companies and the imdication is that they use Edge Reflow to create their web projects from start to end. This can't be true due to the nature of Edge Reflow but they do add to the over all impression that Edge Reflow is indeed a complete design tool to create real world web pages. They give authority to this false impression but seals the deal for anyone that wants to use this in a production environment. The testimonials are evidence that Edge Reflow is a production environment tool.

Now, jump over to the FAQ section and the very first paragraph specifically states  “extract CSS code you can hand off to developers.“

This would be an EXACT match for “What does the Reflow website claim that seems to suggest it generates CSS and HTML?“

Now lets further look at more misleading statements on the Edge Reflow website, specifically focusing on the FAQ section.

“Who should use Edge Reflow?

Edge Reflow is ideal for web designers who want to create responsive layouts and CSS visuals targeting the latest browsers“

No, it actually can't.  It only is able to be displayed in the Chrome browser directly from Edge Reflow and if you manually copy the css and html that is generated and look at it in any other browser there are lots of errors and funky things happen.

“Built on WebKit, Edge Reflow offers 1-to-1 web rendering capabilities for design within the constraints of browsers.“

WebKit is only certain browsers, IE for instance does not use it.  Again, misleading statement.

“CSS extraction capabilities offer a direct workflow between designers and developers. “

Again an exact statement that not just implies but makes a specific claim that the CSS and therefore the Html can be exported.

This is more of a nit pick but the following section actually doesn't make sense.

“What are shiny web features?

We love beautiful designs here at Adobe and strive to continue to move the web forward. As new CSS standards become available, we'll do our best to support them in our tools as soon as possible.”

This doesn't actually answer the question and the question itself  doesn't really make sense. I understand what was meant to be there but what actually is, makes no sense.  It makes me think this is created by support staff from india because most of my experience with Adobe Support doesn't make a whole lot of sense either.

In the section  “How is Edge Reflow different from Adobe Muse CC or Dreamweaver CC?”  The following statement is made.

“While Edge Reflow creates HTML during the design process, the tool is focused on enabling designers to share their responsive design intent and for CSS to be extracted for use either by the designer or a developer as part of the website production process.“

This can be read different ways but looking at it from an average user it does imply exporting of Html and CSS is possible and inherent in the software.

Through out the website it emphasises sharing amoung web designers.  The thing that isn't said is that everyone must also have Edge Reflow, the assumption of whoever wrote text for this site is that Edge Reflow is being used.  This would be a false assumption and the average web designer or developer reading through this site would not make that connection.

Now to further point out specifics this last one is the final nail in the coffin of whether the website implies or otherwise states that the Html and\or CSS can be exported from the program.

“What’s the basic workflow in Edge Reflow?”

“...Once the different comps are ready, you can preview them in the browser or on devices via Edge Inspect before extracting the CSS code for use in development.”

Focus on “ before extracting the CSS code for use in development.”

Let's switch to two video's available and linked to from the Edge Reflow website and accessable other ways besides coming to the Edge Reflow site. Yes someone could NEVER come to the Edge Reflow site and still get the impression that the software can indeed export Html and CSS for production websites.

I want to also note that you NEVER have to actually go the Edge Reflow site to actually download and install the software so there are probably people that NEVER even see the website.

The Overview of Reflow video

http://tv.adobe.com/watch/adobe-edge-reflow/overview-of-reflow/

Uses terms that make it seem to be a full fledge production design tool.  No where is it mentioned or text provided on the video page that it can't export Html or CSS but the terms used in context of describing the capabilities make it seem it would.  Though it never states one way or the other which is the problem and would lead an average web designer to conclude it would be possible in light of  describing the use of media query which is a CSS specific thing and the capability of viewing the design in an external device, specifically a phone.

Why would these things be possible if it weren't actually able to create production level code.  This is the impression the video gives and that is all that matters.

The next video What's New In Adobe Edge Reflow CC Preview 7 states the following

http://tv.adobe.com/watch/adobe-edge-reflow/whats-new-in-adobe-edge-reflow-cc-preview-7/

“it works in the browser it works in a device”

Futher statements talk specifically about “the dom” and other Html and CSS specific language that in context makes it seem this is a production level tool.

The overall website for Adobe Edge Reflow does give the impression this is a production level tool which exports Css and Html. There are specific statements that lead to this false assumtion and specific statements that down right state that it can.

In any video I have seen talking about or demonstrating any aspect of Adobe Edge Reflow it is being talked about as a production level tool that helps designers create and share designs as well as help create production websites.  The testimonials at the bottom of the Adobe Edge Reflow website also lead to this false assumption.

Now let's read what the FTC, Federal Trade Commission has to say about false and misleading marketing. The example in this blog post is talking about Nissan Trucks but the focus is more on the over all impression the marketing give for the capabilities of the product. What really is interesting is how the FTC is focusing also on the types of media being used like phone cameras and what the overall impression of the actors / participants in these video's are doing to spur on the view that the product has the capability being advertised. Which in this case, the Nissan Truck, can't do.

The indication in the Adobe produced videos for the Adobe Edge Reflow also gives impressions that the tool can be used for something it can't.  Even though Adobe employees and staff state this is a tool for designing mockups the video's and tutorials I have seen give the impression it can also be used to mockup production level sites and some have actually stated this on camera.  I don't have the time to link and point out every statement specifically the above should be enough to reasonably describe how an average web designer would come to false conclusions about the capability of the software.  If you still don't see that, I don't know, your brain must work different than mine.

FTC Blog Post about Nissan Trucks which in an overall similarity can be applied to the marketing of Adobe Edge Reflow.

http://business.ftc.gov/blog/2014/01/less-meets-eye

Now go back to the FAQ page on the Adobe Edge Reflow website and scroll down ¾ of the way to the bottom and hidden among the sections is a statement that specifically tells that Exporting of Html is not possible.

First one would actually have to go to the website, notice there are different sections like Overview, Features, FAQ etc...

then specifically go to the FAW page and read all the way down to where it states this.  It is not said, stated or made known ANYWHERE other than in that section of the FAQ which not many people would ever see or read.

The FTC in their business section under legal documentation and what is required and also in their Web Advertising section makes it very clear that you can not hide statements that the users of your website need to know. Specifically about Privacy, Marketing Assoctiations like being an Affiliate to an advertiser whom you review or promote the products and also about locations of Links and where and how often they have to be displayed. The state of California also has several similar if not more intrusive regulation about these things.

How that would fall into play here is the hiding, which it can be viewed in this way the statement about Exporting not being possible towards the bottom of the FAQ. Especially when other statements above this state it is possible and the over all impression given from the website this is possible.

To fix this just state at the top of the website and on other sections of the Adobe infrastructure when talking or displaying anything about Adobe Edge Reflow that it at this time can not Export Html or CSS.  That would prevent most people from wasting their time with it and save people like those participating in this thread to countless hours or days of learning a tool that can't actually be used in production.

You know what is interesting to me, the actual intention to never make this product have that capability. It took many many complaints for the Adobe Designers to realize this actually is not a useful tool to anyone but less than 1% of designers out there.

wow. first of all thanks for your detailed reply. This would certainly take a while to process.

One thing to note is that you *can* extract CSS. Here is a screenshot of the UI 03-CSS.png

The code *is* generated and the code generally works best in Chrome because we are using Chrome's rendering engine in Reflow. The code will mostly work as intended in Firefox too. You can copy and paste the Preview URL and see it work in Firefox. We do not claim to support Firefox in preview mode.

The CSS that you extract is something we can guarantee is cross-browser compatible because we ensure that the output CSS *is* cross-browser-compatible.

Reflow is a product in beta, we have not called the 1.0 of it yet. We are still adding features that will make it better. We are making it available for free. There are approximately 6 or 7 of us here working on this product, so I think a little patience would be called for

We have heard many people expressing intent that it should generate code. The code it generates right now is *usable*. We do not wish for people to use it in production. If you think it generates code that looks odd in Firefox, I would appreciate if you can email me the Reflow file at manian at adobe.com . Getting *any* tool to generate code you can be proud of is a hard problem to solve in web design and we would like to attack it once we have every thing else about Reflow stable and working.

I am sorry you feel deceived but I think it would be really great if you can help us get to this feature faster through posting bugs, and giving us feedback on what problems you would like Reflow to solve. As always I am on email manian at adobe.com so please do email me.

I have worked on browser engines before, and I know creating 'cross-browser layout' is not for the faint of the heart even for the most expert engineers who have implemented layout for various browsers. I understand your frustration but the task before us is monumental and we are chipping away at it.

That was in reply to  "What does the Reflow website claim that seems to suggest it generates CSS and HTML?"

Those are very specific things about the website itself and the overall impression being given about Reflow.

The other things you mention don't really have anything to do with the website or promotions but it does seem when talking to specific individuals actually on the team creating Reflow there are conradictions between website and features.

I stopped using reflow because the code that is generated is not really cross browser, there is or was no code specific to mozilla or ie in the CSS. Compare the CSS generated by Reflow and the code generated by MUSE and there are HUGE gaps, or were, between the two CSS. 

If you look at the overall product, Reflow, why as the designers of this tool would you not automatically come to the conclusion people wouldn't actually want to have a exported version of what they see in the tool to use in production websites?

Yeah it probably seems a bit harsh and maybe less pro Adobe some of the things I state in my post but it is just my personal experiences that make me feel certain ways.  There actually have been less access to developers themselves at Adobe then what you may believe.

Edge Reflow itself if it exported production quality cross browser code I would switch to it as a development tool and stop using most of the other tools I use currently. It has great potential and the features that are being added seem great except with the caveat of not actually being about to use it in production.  Nice show and tell software but when the client says that is great upload it and get it working, you have to step back and say no this is just show and tell to see what you like we actually have to go develop this in something else now that you approve.  Good luck with that.   Everyone is different I guess but most of the vocal people I see think more the way I do than see this as a show and tell software. I uninstalled it and stopped trying to learn more how to use it due to that.

I would think that focusing on exporting production quality cross browser code would be more a priority than what seems to be.  I am glad it is being developed, I understand it is a prerelease software and not even beta really but Adobe sure is promoting the heck out of it as a development tool which as you say isn't quite there yet and the code should not be used in production.  Adobe is promoting like it is production ready though, contradictions all over on that.

If I still used the software I would gladly contact you one on one to share my experience and give you bug reports and suggestions but since it can't output code for production I just don't use it.  Instead I use MUSE, Edge Animate and hand coding when I need to.   I seem to be switching more to tools like Muse now, before I hand coded mostly but try to hand code Edge Animate animations and you will go insane so switching to the WYSWYG visual editors now more.

Thanks for letting me input even though it may not be what you wanted to hear and may allow you to clarify in other places besides the forums about your products.

Thanks.

So, yes we are webkit at the moment, so our previewing ability is currently focussed on webkit browsers (Chrome and Safari atm).

As for previewing your design elsewhere, we do give you HTML and CSS output in your project folder. There are all the files including your assets housed in a pretty simple format. If you want to take those and bring them into something like Brackets or DW to add even more functionality, that's awesome, we want to know if it works for you or not.

We actually need to know more about what works about a workflow into production and what does not. We know this is an area we need to improve.

I've made a videos showing you where the files are within your Reflow project:

I totally share the same frustration about Edge Reflow. The entire marketing buzz is very clear that this is going to allow me to turn my Photoshop web UI mockups into HTML I can use to build a responsive web site. Yet after spending a ton of time and getting all hyped and excited I look at the stuff code it generates and it looks like something totally alien and bizarre. What is keeping Adobe from turning the result of Edge into HTML and CSS that I can use in Dreamweaver?

goody166, the issue is primarily about making sure we output good code and the team is wary of peppering websites with code that causes them to be really slow on browsers or in a way that might get broken quickly across browsers. We are working on a solution but it is not an easy problem to solve, so we are looking at lower hanging fruits to resolve first.

I am in total agreement with everyone else on this.  Once I found Reflow on the site, I read all the details and watched EVERY training video on Reflow and I was under the illusion that I could actually use this software.  After spending several DAYS watching videos and coming up with a design in Photoshop, I exported it to Reflow.  It was only then that I ran into problems and needed to post a question on the forums, that is when I was told it was for display purposes only.  So after selling my manager on this software, I find out that I was wrong about it.  I wasted days of work.  I also felt misled/misinformed by the website. It clearly does not state that it is for display purposes only. But it needs to.

Hopefully it was an easy sell to your manager at the time though - being that it's an alpha/preview application that's free to CC members.

Yes it was, because we thought it actually worked. But now I look like an idiot and I have to find something else.  I don't need a mockup program, I have Photoshop for that.  I need something that works without spending days building and then finding out by searching the forums. That information needs to be on the webpage not buried in the forums. 

Being free for CC member is not the point. Isn't that the reason we are CC member to start with?

Are you saying that it isn't going to fall under the CC banner?

No you raise a great point. Thank you.

Will work internally to try to improve our messaging around what apps are "preview" so folks know without a doubt which apps are currently in-flux or released for purposes of receiving feedback from customers.

It's amazing to me that its taken this much back and forth before someone at Adobe finally figured out how misleading the marketing info is about Edge. Based on the way it was presented I told all kinds of developers that I had found the holy grail. Later I had to go back and apoligise to all fo them. Very disappointed. I will never again trust at Adobe marketing materail to be fully transparent. Which is pretty sad as I have loved this company since the day Photoshop 1 came out.

Hi goofy166

We are definitely always looking for improving our messaging of the product. We are happy to do so. Further, we are actually looking into the work involved in making this happen. I would really be grateful if I could get your, at_play, and others in this thread's views on your expectations on how code generation would look like to you ideally. Please do email me manian@adobe.com If any of you are willing to talk to us, I would love to schedule some time with the team and you all to see how we can get this to happen. Thanks again for your feedback.

I just want to be a realistic voice in this discussion. It is pretty clear everywhere I look that Reflow is a preview release. And just to clear things up it is entirely possible, and I have used the output directly from Reflow (HTML and CSS) in projects. It can be done. I used a wonderful Brackets extension: http://blog.brackets.io/2013/09/26/reflow-cleaner-extension/ to help clean up the code, and then tweaked a few things by hand.

I'd recommend that people stop complaining, and clearly read the documentation, and product information. If you can spend the time to write a lengthy post complaining about how Reflow doesn't automatically do what you want it to do, then you can spend the same amount of time figuring out how to adapt your workflow that it does to what you want it to do. The fact that I can autogenerate a Reflow project from a Photoshop mockup is just amazing. Then I can make the mockup responsive in a controlled, and design oriented way. Finally I just group certain elements, and do some post-processing of code I have a completed design.

It is great that Adobe is so understanding of those select few in the community who choose to ignore obvious documentation, and feel the need to cast a negative light on an amazing application.

I don't agree that the Edge Reflow docs and marketing material are anywhere as transparent as you imply nor do I wish to criticize you for stating your opinion.

I think the people who have complained are doing everyone a favor. As a former writer of 25 computer books and a publisher of 200 titles (google Waite Group Press) I listen closely to feedback that indicates confusion. It's not wrong but rather it's a gift that can help me perfect my message.

I think it would be extremely helpful if you could show us the steps you took to make your project's HTML and CSS so easily work responsively. A tutorial would speak louder than any post.

Clearly we are all looking for the holy grail so our expectations easily cloud our judgement.

Sincerely,

Mitch

Sent from my iPhone 5 w/ iOS 7

I agree with goofy166 100%. No one here has been complaining needlessly.

Nichod, I am not sure what "obvious documentation" you are referring to, as I spent a lot of time researching this product and like most of the others we feel the documenation is not clear. There is nothing wrong with expecting a product from Adobe to be at the level they have set previously with all the products I use. In fact, I feel that is what THEY expect also. Especially since they asked for our input. I proudly claim to be an "adobe fan-boy" and promote them every chance I get. But I also expect a certain quality from them which I know they will produce.  We all want a perfect product.

Thank you

I don't think complaining is ever doing anyone a favor. Especially in this case. This is a Preview release, and everywhere I look I see Preview. And I have never seen clear examples illustrating that they approve of using the exported HTML. It's all about prototyping interactive designs at this point.

A few quotes from the Reflow website:

Start responsive designs faster and create high-fidelity prototypes

 

Reflow uses CSS and behaves like a browser, making it easier to translate your designs to the web.

 

Easily extract CSS from your project for further development in Edge Code CC, Dreamweaver CC, or another code editor of your choice.

None of that seems to imply it exports HTML (and that it is a complete solution), and no where on the website does it state it exports HTML. They have always focused on the CSS Reflow provides. The videos all discuss that it exports CSS, and allows you to make great interactive design prototypes.

I did actually post a link to a resource I used to help with Reflow export. It's really not that complicated. And with all of your authorship experience I'm sure you know in development no holy grail exists. Everything is a tool that either is used in the pipeline, or isn't. In the case of Reflow I have used it in a few lightweight projects (small static designs of 5-6 pages).

Again the link to the extension with a pretty detailed video is located here: http://blog.brackets.io/2013/09/26/reflow-cleaner-extension/ and I recommend following his steps, then finesse the code a bit yourself. It's not a complicated process. The only reason the exported HTML isn't ideal at the moment is the incorrect semantic markup.

It's great you pay close attention to feedback. I wish you had paid close attention to mine, and watched the great video that pretty much completely details, and answers your questions. No tutorial is really required.

I'm sorry to disagree. But I feel this thread has just been people complaining. There is an excellent thread elsewhere here requesting proper HTML/CSS export maybe providing details on what you'd like to see in the export, the controls you'd like to have, etc. would be much more productive than the big rants I've seen here. I applaud Adobe for handling it all with grace. 

As a side note. Reflow will not be this magic solution. (Just as Macaw won't be) The design community is so excited about these tools, but in a real development workflow they are quite limited. Because anything beyond a few web pages is just not going to benefit from these tools until they integrate frameworks, LESS, SCSS, etc. Not to mention once you try integrating the designs with a CMS, or custom web app...don't plan on ever going back, since editing the project design will require using the static files. This is not exactly the most efficient workflow. At least for the next few years I envision that these tools will work great for interactive prototypes, and simple designs...but I would currently not expect more than that from them. I use Bootstrap, Foundation, Custom Grid Frameworks, LESS, SASS, etc on a daily basis, and the place of Reflow is confined to the very early stages at the moment...but even then I usually just Generate the image files from PS...and then handcode the prototypes in Bootstrap/*insert another framework*, because in the end I'll have to convert the CSS to a LESS/SCSS which is just extra work.

/end side note

Honestly, all of the feedback you guys are giving us is valuable. As mentioned, Reflow is in preview mode, so, we welcome all of your discussions in how we can make the product as well as the documentation and messaging around it a bit clearer.  As long as the criticism is constructive, we'll take it in and try to act on some of it. Because of this thread (and others), we are actively discussing how to make it easier to use the code from Reflow and how to change some of our messaging around it. Speaking up about the issues you are facing is better than feeling frustrated and leaving the tool forever.  Nichod, thanks for mentioning the Brackets extension. Maybe we don't promote it enough for people who actually want to use the code that comes out Reflow.   Joan

You guys are so calm, and understanding. We do appreciate all your hardwork. Very politically correct answer Joan. You are of course right that people speaking up is better than them feeling frustrated, and leaving the tool. I was just trying to point out that it has been pretty clear since day one that Reflow was meant as a prototyping tool. Even that HTML/CSS output feature request thread states from May 2013: "As Nick mentions above, Reflow's intent is to be a responsive "design" tool first and not have to worry about generating production quality code."

Thanks for chiming in Joan. And I honestly feel Adobe hasn't implied anything.

I concur with the general frustration, time spent (and wasted), and misunderstanding the Reflow was something other than it is. And all of this could have — should have — been avoided by one simple addition to the team's staff: a marketing authority who could consume every bit of *preview*, be it video, documentation, marketing piece, etc. and then determine whether the facts matched the message.

And, friends, the facts do not match the message.

It does not, however, constitute reality that anyone on the Reflow team led off intending to decieve and frustrate. Nor does it constitute reality that anyone on the Reflow team lied by omission with intent. In short, you packaged it wrong. You recruited the same messaging methods and mediums of your other Ready From Prime Time products. Reflow is not and therefore should have only be positioned offstage where a true preview glimpse was allowed...not unlike Kuler was way-back-when via Adobe Labs.

Nevertheless, the wider world would have been better served had the team relaxed from their work one evening and had the benefit of someone inside Adobe pouring everyone another beer and saying, "...um, team? Yeah, what you're working on is great. But you have GOT to change your messaging because designers everywhere feel like you teased them toward a prom night they'll never forget and then stood them up."

I think the take-away on all this is the assumption that everyone understands what "preview" means. Many of us thought it meant that Edge was an early look at a powerful product for developing responsive HTML/CSS

pages. Same thing with saying Edge is for "prototyping". Many thought that meant it was for mocking up web pages quickly.

So while you can easily find dozens of places Adobe's docs state Edge is a preview of a prototyping tool that does not mean you have no worries of people misinterpreting the app's purpose.

I think some Adobe folks understand this now and so hopefully they'll come up with a way to avoid the confusion without lessening the powerful message of what Edge offers. If I was running marketing for this product I'd try to find a byline that clarifies just what Edge can do so people don't get a bitter feeling they were led astray.

Mitch Waite, iBird

Sent from my iPhone 5 w/ iOS 7

My personal opinion, given all the feedback on this particular thread and what I now know about the product, is to get the code it does generate a bit more useable/production ready. I think working on getting the css truly cross-browser compatible (I presume it's not based on feedback here. I haven't tried it.) and the html code cleaned-up so that it can be copied without too much post-reflow-manipulation would be a great next release. I think that would make the app fit into more pipelines sooner than later and prevent people from having to start from scratch in another program jsut to try and reproduce what this already does in Reflow/Chrome.

I have to agree that at this stage it really doesn't make sense to use it if I can' take work already done here and port it over easily to another app to add the non-responsive specific features. All it serves at this point is to provide the feedback to you guys that other users have already given I think. I too was under the impression based on the website and marketing material that it would generate usable production code for me at the end of the day even if it is just a preview app (whatever that means). I also went through all of the tutorials to learn how to use it only to be slightly dissapointed for a while, but it looks like you guys are working towards making it a truly productive responsive design toolin the future...hopfully near future.

I hope the end result is an end-to-end solution for responsive designs. A plus would be including the ability to handle dynamic data or some back and forth compatibility between muse/dreamweaver/edge code/visual studio/other tools much like Premiere/After Effects/Speed Grade work today, with a non-destructive approach so that going back to reflow doesn't overwrite work done in the other tools. If all it did ever was help manage the (production-ready) CSS, HTML to make it responsive and pass the generated code off to another app, I'd be happy to use it as my primary design tool.

Overall, I think it's a great idea for a visual tool for designing repsonsive sites and hope it ends up becoming the product many of us probably thought it was to begin with.

I just have difficulty how this statement can be misunderstood how:

"Easily extract CSS from your project for further development inEdge Code CC, Dreamweaver CC, or another code editor of your choice."

Anyone who has a glimmer of understanding Web Design and Development should be aware that layout is completely done via CSS. HTML is the structure of the layout. Reflow talks about creating the design prototypes, and layout. Nothing is said about structure only that the CSS can be extracted as referenced above. I never presumed it would output HTML. Even during the numerous video conference talks they referenced the CSS, and transferring the CSS to Edge Code/Brackets.

Anyway...all of that is a pointless discussion at this point. I do of course agree that it would be great for Reflow to export/import properly. Mostly import really since at this point as I've said REPEATEDLY it's EASY to EXPORT right NOW. Just read my previous posts referencing the video that discusses cleaning up the output with the Brackets extension.

Troll

Troll? What does that mean?

Let's keep it civil in here. All the feedback on here is great and we are trying to listen to everyone. If the comments can stay focused on what you'd like to see changed in Reflow or providing solutions for problems that will be the best.

We've heard a lot about export code and we're going to make some improvements for that in the next preview release. In a nutshell what we'd like to do for export code is:

• Allow you pick a directory to export to
• Take the CSS that is shown in the code panel and use that instead of the current preview code
• add the css prefixes so the code will work in more browsers

It's not going to address all the needs, but we hope it's a step in the right direction. You can give us feedback on this plan and if there are other small things we can do beyond these things we'll try to help.

Thanks again for all the feedback and keep it constructive and not personal.

Chris

Chris,

Not sure if you want a response here, or a new thread. But to keep things in one place...I like where you are going. The main issue I think is the HTML structure, and the CSS fragmentation that occurs. If those two things are corrected the exported code should be pretty good, and we'd definitely be going somewhere. If we specify that the selected text is a H2 by naming it, then Reflow should output it as an H2. Even more ideal would be if we could control Classes and IDs via a simple naming scheme:

h2.header = <h2 class="header">This is the header</h2>

h2#header = <h2 id="header">This is the header</h2>

And of course the CSS would have to parse through the titles, and export the CSS per our created classes/ids.

Thanks for the feedback.I'll add it to the back log. It's definitly more of an advanced feature so if we did do it, you the user would need to take more responsibility for making sure the tags are valid and the ids unique.

Chris

Chris--

Just to chime in, I'm a pretty early Muse adopter, and I've been (mostly) satisfied with it - however, if Adobe could somehow combine the features of Reflow (excellent responsive design) with Muse (excellent visual layout and relatively clean code), I'd be a really happy camper. However, I think some of the folks you turned to Muse might be disappointed in the results; Muse is fantastic as a prototyping tool, and does push out relatively decent sites, but it's not suited for the more complicated CMS development that a lot of posters are mentioning.

However, incorporating the Brackets Reflow extension listed above, plus some elbow grease, might end up being a good interim solution (albeit w/out Muse).

Ultimately, I'd like to see a Muse/Reflow/Code solution, or a much more modern and svelte Dreamweaver, but that's just me.

That's good feedback too. I think there's room for a few tools as there are a lot of people with different skills and sites they need to build. All the Edge teams are talking together about workflows and how all these things can work better together. In the short term on the Reflow side we're looking on how to better get the html & css into Dreamweaver or Code so you can take it from there so it sounds like we meeting your some of your needs in the next preview release. Longer term we're letting users guide us and try to keep getting the most requested features out.

Thanks for using Relfow and glad we'll hopefully have a good solution for you coming up.

Chris

I don't know about everyone else, but I think adobe's suite of apps is starting to get very muddled, there had always been a degree of cross over of features between apps but in recent years that has dramatically increased.

I hope its just a temporary situation and that it will all come together in a coherent package.

Just looking at the web side you have Photoshop and illustrator as the main layout packages for web (a photo editor and an drawing package!) then you can mock up responsive sites with reflow but that currently leads to a dead end, or you have muse but that doesn't have a good solution for different devices at the moment and it also leads to a dead end, and finally you have dreamweaver, which tries to do everything. Fireworks which could have been great has been abandoned.

Adobe has very talented people with great ideas, but its like you all work completely seperately from each other, why not get together and make a seamless experience 1 package for web design that handles responsive layout, 1 package for web development that tightly intergrated with the design package.

And leave Photoshop for images, Illustrator for illustrations and Indesign for print design !!

Every package still seems to be focused on their specific target. I'd say it's just your perspective on the apps where you get that conclusion. Illustrator is often used in design (web, and UI), because of how it can output resolution independent graphics easily for the specific target (retina vs non-retina output easily). That is why it's used for web layout sometimes. Photoshop has all the editing capabilities a designer could want. The path Adobe has is perfectly fine in my book. They realize pushing pixels (or vectors) around to build a design is much more flexible and non-restrictive than pushing grids around. A new application would basically do the same thing. Then we can push our design into Reflow, and that works beautifully. And Reflow is not a deadend. I suppose I need to record a tutorial. I just thought the video was pretty descriptive, and my video would basically be a replica of that one.

I don't want another package. I find that Photoshop works beautifully for what I want, and adding another design product to the group would be unnecessary. For webdesign what you need is a drawing tool, and a image manipulation tool. Then Reflow which helps with layout, and Brackets for fleshing out the code.