Introducing Adobe’s Responsive Layout Editor: Edge Reflow
videos

Introducing Adobe’s Responsive Layout Editor: Edge Reflow

on Mar 13th 2013 with 31 comments
Tutorial Details
  • Topic: Adobe Reflow
  • Difficulty: Beginner
  • Screencast duration: 20 mins

I am really excited about Adobe’s newest product lineup. Last month saw the pre-release of Reflow, effectively a beta which you’re all invited to play around with and poke holes in, so you can let the makers know what you want to see in the final version.

Reflow is a visual editor for responsive web layouts. It aims to plug the gap between static design applications (such as Photoshop and Fireworks) and working directly with code in the browser. Let’s take a look and see if it does a good job..

edge_reflow_hero

Interface Elements


Alternatively, Download the video, or subscribe to Webdesigntuts+ screencasts via YouTube

Responsive Layouts


Alternatively, Download the video, or subscribe to Webdesigntuts+ screencasts via YouTube

Useful Resources

 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By

Rollover to read this author's bio or click through to see a full list of posts by this author.

Tom is a professor of Interactive Multimedia through the Humber Institute of Technology and Advanced Learning’s School of Media Studies. Like all faculty in the program, Tom believes his students deserve to be taught by instructors who are regarded as experts in their field and whose knowledge of their subject is current with industry best practice.  

Plus Premium
 
 
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
  • http://twitter.com/borowskirafal Rafał Borowski

    When I saw this I was like “Wow… what’s this Adobe Reflow?” I was excited… for the first 15 seconds. When I heared what it realy is I was pissed off. Let me tell you why.

    Let’s dive into a hypothetical situation. You’re with a group of people (lets say a wedding where you are talking to some family you haven’t seen in a long time) and you are asked about what is that you do for a living? So you anwser: “I’m a front-end developer”. You see this stupid grimace on their face trying to understand what that realy means so you put it simple: “I design web pages”. “Ohhh… ” – they say – “thats… cool. I also designed a page for my sister”.

    And that is the problem. In todays world when we have for example Dreamweaver (and don’t get me even started with the “Save for web” Photoshop option and its markup :) ) everyone thinks they are webdesigners. They install it, put few things into WYSIWYG editor in DW and bam!!! They’re pro front end developers! And then WE have a real problem trying to convince some CEO in a company that this price we want for the design is not ripping them off while he is thinking “XXX for this? My 13yo daughter is designing web pages in school”.

    So yes… when I see another app that is going to make people think that everyone can do it and make people who REALLY do this look like a bunch of fools that only wants to charge huge amounts of cash for “something that can be done in few minutes” it pisses me off. Adobe Reflow…. please…

    Hey Adobe how about something like “Voice Creator”. We have voice recognition software so how about we just say things and it’s gonna put stuff together into a web page? Sure it’s gonna produce s**t instead of markup but who cares right?! People are gonna love it! And you’re gonna say “well it’s only a wireframing software”. Well it’s not – adobe advertise it as a web design tool. And that is – said at least – wrong.

    PS. I didn’t mean to offend the author. Hope you are not taking this personaly. It’s about the app itself. Good tutorial, but the app… you know.

    • http://www.facebook.com/profile.php?id=554466910 Eric Zempol

      Great reply. Speaking as a Graphic Designer, where any goofball who owns a copy of Photoshop is calling themselves a Graphic Designer: Don’t sweat it. Beyond the ads for “$19.95″ logos and “launch your professional website tonight” infomercials, GOOD DESIGN and INSIGHT will always set apart the professionals from the people who mucked around with the application.

      Some will do a solid job on their own. Others, more likely, will wind up with a mess. Our clients will be the ones who gain a first-hand understanding of how messy it all can get and value the concept of bringing in a professional. They’ll hire “us”—the geeks who eat, breathe and sleep web design/UX/Content Developers—to fix their website (makeover-style!)… and return to their daily responsibilities, like being a COO/CEO.

      ps- you need a sexier job description for party conversation (grin).

    • http://twitter.com/lplohmann Luis Paulo Lohmann

      Well, while I somehow understand your frustration, if you have clients consider choosing you or their 13yo daughter, maybe you should change your clients, or pick another job. You see, the app is just the tool, and not the problem. Yes, it makes it much easier for newbies to try and make their own websites. But we already have many online tools that do just that, and it surely didn’t kill the web development industry.

      In a similar fashion, you could rant about the camera (anyone is a photographer now), about word processors and the printer (anyone can be a publisher today), the stove (anyone seems to think he/she is a chef) or even against the pencil (anyone is an writer these days).

      • http://twitter.com/borowskirafal Rafał Borowski

        I don’t have such clients I’m just giving an example overall. And the thing you say that this makes it easier for newbies is just not true! It makes it harder… much harder. When they finally understand how they should make a page they will be overpowered with everything and they will not understand why some things needs to be done like this when in for ex. DW they just needed to click here and there.

        I’ve seen this when I was working for MoovWeb working with such clients like 1800-flowers, John Deere,Victorias Secrets, Best Buy etc. Pages are ok… but the markup is terrible! It was so bad that I had enough of redoing someone’s crappy code and after a year I have quit.

        • http://twitter.com/lplohmann Luis Paulo Lohmann

          While sarcastic in my previous comment, I didn’t mean to be offensive. Hope you understand and will pardon me. =) But I still disagree with you.

          I believe educating the client is part (and a huge part) of our job and I think you’re correct in doing so, even if it’s a pain many times.

          I myself experienced the same you described (rewriting crappy code) many times, but in the process I always make very sure that the client understands what were wrong before, with good results most of times.

          • http://twitter.com/borowskirafal Rafał Borowski

            No offence taken :) Everyone has right to their own opinion and I respect yours even though it’s different than mine.

          • Jesse

            While I understand your frustration with these kinds of programs Rafal, I also disagree with directing it at the company making it, in this case Adobe. Adobe ultimately exists to make money and if they know they can do it by catering to people who want a WYSIWYG editor, then they’re going to make the product and expand their userbase even if it hurts the industry.

            I think ultimately it’s up to us as designers and developers to educate our clients and make sure that they understand how our websites are different than one his niece made. As the saying goes, cream rises to the top. If nothing else, the type of low-level design/dev work that sometimes feels threatening to our livelihoods should be seen as a challenge to constantly be bettering our work and validating it scientifically to make sure what we do is really the best.

            If we look at almost any other technology, it always starts out being rather exclusive and known by only a few, and then becomes more and more acceptable and common place.

        • Tim

          I’m sorry that you picked a career that is making it harder and harder to steal money from people that don’t really need your services. That’s really what this comes down to, though. If they really needed your services they would be willing to pay top dollar for them. If they can get by with a simpler service with one of these tools and a cookie cutter website, then no, they don’t need your professional website design. Cookie cutter pages have their benefits too, they create a predictable user experience. Your market is highly competitive so get used to having to be better than everyone else. You are now competing with people who can make websites fairly cheaply so you have to do something to differentiate yourself from them. Don’t hate the players, hate the game.

          • http://www.facebook.com/profile.php?id=1213444039 José Gómez

            There is a difference between a Ferrari and a Ford… Quality.

  • http://twitter.com/ruaridhcurrie ruaridhcurrie

    This is definitely thinking along the right lines. Adobe have identified a problem facing website designers at this moment in time and come up with a neat solution. Is is perfect? – No, not yet anyway, but I’m very interested in seeing how this develops. The trick will be getting clients to buy into this, most love the idea of a responsive or adaptive website when you explain what it actually is but don’t like the idea of increased design and font end dev time and more importantly paying more money.

  • John Bento

    Don’t blame the apps, blame the nerds building them. They (and the companies they work for) will have something to prove in the industry. These apps, such as DW or Flow are just going to evolve. Not every client or business as the cash to pay “top” dollar for a website. Designers are losing out here because of this fact. and unless you are big player in this industry, after the top companies, makes it a little more frustrating.

  • ianyates

    I have to say, I’m a little surprised at the comments up to now! I did expect a few negative remarks, but more focusing on the technicalities of what Reflow churns out, not what its presence does to the industry as a whole!

    I’m a designer; I use Photoshop (and the like) when needed, I code directly to the browser when that’s more relevant. Reflow might not be an all-encompassing solution just yet, but there’s definitely a huge gap in the market for products which improve our workflow at the moment. We *need* tools which can help us design flexibly – without people exploring our options we’re stuck with static.

    • http://twitter.com/borowskirafal Rafał Borowski

      I think the problem is not the presence of apps which – I agree with you – we do need, but the advertising of them. Reflow – a prototyping app – sure. Reflow – a web design tool… hmm…

      And when you use it Ian you gonna say “wow this realy makes my work flow”. You will prototype something, design it in Photoshop, code it in Sublime Text, Coda or Brackets (really good job Adobe on this one) and you know how much effort you need to put in it to be a good product.

      When John Doe will use it, he will create something in it, and he will be convinced that this is all you need to do to make a website.

      So the big problem is the client education then I guess. And when you put up the numbers together (your single word that it is a lot of work to make a website) against a huge company like Adobe (advertising for example “it’s so easy to create websites now… just drag, drop and export”) there are huge odds you’re gonna loose in this fight.

      • Jason Rose

        Get over it mate. Why are you so worried what John Doe can and can’t do?

        If you’re a good designer and have a strong portfolio you should be able to crush John Doe. I’ll gladly walk into a room and take the Pepsi challenge against average Joe’s work when it comes to design, UX, ROI, etc. In fact if you’re awesome at what you do, letting some hack have at website only gives you leverage to show why their work is garbage.

        This is the future. The age of open source and availability of information to the masses is here. Sites like Github and Codepen make the Internet a more beautiful (and easier to use) place; not worse.

        If you can’t keep ahead of the crowd through creativity you’ve already failed. Adobe releasing a tool (of which countless similar resources have been available for a while now) that makes our lives as professionals easier and allows more people the opportunity to experiment with web design and development shouldn’t stop you from making your mortgage payment.

      • ianyates

        I suppose the best comparison I can give is with photography. One of my colleagues (who shall remain unnamed) takes *amazing* photos, purely for pleasure. He himself says “I’m not a good photographer, I’m just a guy with an awesome camera”..

        There once was a time when a photographer had to understand all aspects of the process, including development. Not any more! Technology closes the gap between amateur and professional; it’s down to the pro’s to raise their game and stay on top :)

        • http://twitter.com/nice2meatu Marco Kunz

          “Technology closes the gap between amateur and professional; it’s down to the pro’s to raise their game and stay on top :)”

          Well said, right there! John Doe may be able to make a decent looking website (with reflow or not) but he won’t be able to make it also work and perform well, be accessible, semantic and whatnot. If he were capable to do so, he would not be John Doe.

          I installed it a few days ago and unfortunately did not have the time to play around with it, yet.

  • http://www.facebook.com/oldcampos Francisco Campos

    I think Reflow shouldn’t be considered a threat to the web design industry. Its merely a tool which helps close the gap between Designers and Coders. If you look at the code Reflow generates you’ll seen that its not really usable in real life situations. I use Reflow for mockups mainly because it helps clients visually understand the responsive design process. It can then be used as a reference throughout the development process. Adobe Edge Reflow for me is a tool for rapid prototyping…

  • Jason Rose

    @twitter-291057914:disqus

    So you’re saying Reflow will prevent you from hooking up at weddings?

    • http://twitter.com/borowskirafal Rafał Borowski

      Sure.. also my wife might get into my way, but you’re right… mainly the Reflow…

  • Helenbeee

    Im glad you put this tutorial together it filled the gaps of understanding that were not addressed on the adobe tutorial. Im slowly getting my head around reflow. I look forward to more tutorials from you (hopefully!) :)

  • Neil

    I do see the benefits of this cookie cutter app and I also agree with the initial comment too. But as always Adobe are filling gaps and needs, so there is a need for this app. It might be used by some guy then exploiting the career title but they are the types of people who fall short and get caught out when something complex comes along.

    When I hear people saying they are designers but all they can do is use Photoshop doesn’t offend me anymore, I would need to see their stuff then I’d make a decision to whether they are a Designer (designer) or Designer (cobbler).

  • http://www.LitePack.com Brant Powell

    I greatly dislike the “just push a button” advertising many website creation and mobile app development solutions are using to push their services. I expect more from Adobe than misleading information such as, “create HTML websites for desktop and mobile devices, without writing code”.

    Misinformation from industry leaders just makes properly educating clients in best practices that much harder.

    • http://twitter.com/borowskirafal Rafał Borowski

      Exactly…

    • mandrakeweb

      This doesn’t write the code for you. It’s purely a design mock tool.

      • http://www.LitePack.com Brant Powell

        I understand that but with the advertising Adobe has been doing lately with Muse http://www.adobe.com/products/muse.html and not explaining that Adobe Reflow is a time saver in rapid prototyping and providing designs for approval. Not providing a push a button, ready to go site… it is aggravating. I find that teaching the client that 90% of the advertising they see is misleading or blackhat tactics takes up more time than doing the actual project.

  • http://www.maverickcreative.ca/ Joshua Richards

    Wow. At first I saw this tool and thought, woohoo another piece of junk from Adobe. But after watching these videos, it does seem useful. I’m curious to see what the output looks like though.

    The game doesn’t stop changing, and I think this could be a useful tool in making the web better.

    Although, there is a chance that google glass will just kill the web. < just saying.

  • Joel

    You should have just used a max width in that video rather than setting it to 900px before a break point at 900px.

  • http://www.facebook.com/jacob.wadsworth.961 Jacob Wadsworth

    Amazing video. Seems very interesting that’s why I want to learn more. Hope you can post more videos and content about it. Thanks. – http://www.defiancemarketing.com/

  • http://twitter.com/geoffreyfosson Geoffrey Fosson

    hmm. That’s interesting.. but, I stick to tw bootstrap or do it manually (DW or Sublime T2), I’m more efficient this way

  • jbitautas

    If there’s concern about differentiating yourself, your work and your worth to your clients. The problem is not everyone else or a company’s product. Also, if said client cannot see the worth in your particular skill set, than it’s most likely a client you do not want to work for. They’re most likely looking for cost effective work vs. work of the highest quality, which puts them in a completely different niche.

  • http://www.facebook.com/profile.php?id=798543901 John Moore

    Meh I think its pointless. I don’t need to wireframe a website and waste more time on the project. I can simply show them a similar responsive website. “Your website could do this…LINK HERE.” Explain why they should have it and how much I charge. Done. Having 600 tools to make a website is why I think so many freelancers fail or struggle. I need photoshop and notepad.