Creating Responsive Layouts in Reflow | Adobe Edge Reflow | Adobe TV

The true power of Reflow is not only designing and creating layouts using CSS, but the ability to have those layouts respond to different screen sizes. From desktop to tablet to mobile. Evangelist Paul Trani takes you through how to take an initial layout, add breakpoints and modify that layout to your liking for all the various screen sizes you'd like to target. Download Adobe Edge Reflow Preview from the Creative Cloud today and give us your feedback through the Adobe Forums or on Twitter: @Reflow @PaulTrani
http://adobe.ly/Y7cXmM

This is really nice, but how does it fit into the workflow in creating and editing a web site? I'd like to see an example of what you do with it once you've created a beautiful re-flowing page.

Similar Messages

  • Is there any facility to create responsive html page with tools

    I create many html page is there any tool to create responsive page easilily. Check this sample page of msbte result here i coded manually i not found any buttons or option for it

    Dreamweaver CS6 and CC have a feature called FluidGrid Layouts for creating responsive web pages.
    CS6 Fluid Grid layouts (17 min video)
    http://tv.adobe.com/watch/learn-dreamweaver-cs6/using-fluid-grid-layouts/
    Dreamweaver CS6 and CC also support jQuery Mobile for building mobile phone apps
    Create & package Mobile app with DW, jQuery Mobile & PhoneGap
    http://www.adobe.com/devnet/dreamweaver/articles/dw-phonegap-mobile-app.html
    Adobe has another product for creating Responsive Layouts in a more visual interface (preferred by designers):
    Adobe Edge Reflow (preview)
    http://tv.adobe.com/watch/adobe-edge-reflow/introduction-to-reflow/
    Or you can jump start your web projects with any of the Responsive Web Design Frameworks below:
    Foundation Zurb
    http://foundation.zurb.com/templates.php
    Skeleton Boilerplate
    http://www.getskeleton.com/
    Initializr (HTML5 Boilerplate, Responsive or Bootstrap)
    http://www.initializr.com/
    DMX Zone's Bootstrap FREE extension for DW
    http://www.dmxzone.com/go/21759/dmxzone-bootstrap/
    Project Seven's Page Packs (Commercial Responsive CSS Layouts)
    http://www.projectseven.com/products/templates/index.htm
    Use whichever works best for your particular project.
    Nancy O.

  • Center responsive layouts in Edge

    Hi,
    I would like to center a responsive layout, which I have done.
    With that code it works, but only when the width of my layout is fix:
    $("#Stage").css("margin","auto")
    But I want a flexible width, (I am using stage width in % not in px) and then the
    code is not working anymore.
    I need this flexible width, because I am loading in a container which is positioned on the stage
    three different layouts with 320px, 600px and 1200px-width.
    yepnope ({
    load: "libs/EdgeCommons.js",
    callback: function (){
    EC.setAdaptiveLayouts(
    [320, 600, 1200], sym, "adaptiveContainer"
    These layouts I have created in Symbols.
    is it possible to center these different layouts/symbols?
    Can anyoune help me with that?
    Many, many Thanx!!

    If you just want to center a div, here is an example how to do it in css:
    <!DOCTYPE html>
    <html>
    <head>
              <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
              <meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
              <title>test</title>
        <style>
        html, body {
            margin: 0px;
            padding: 0px;
            #Stage {
                background-color: #ff0000;
                margin: 0 auto;
                width: 900px;
                height: 200px;
        </style>
    </head>
    <body>
              <div id="Stage">
              my content here
        </div>
    </body>
    </html>

  • What is the best way to create the layout for a single page website in Adobe Muse?

    I was wondering the best way to create the layout for a single page website in Adobe Muse. Does anyone have any suggestions?

    I know how to create a website but will that help me create a single page website? Below I will leave a demo of what I want. I want it to only have one page but multiple sections. What is the easiest way to create a single page website like the demo below?
    Demo Website

  • How do I create quiz question in reflow?

    How do I create quiz question in reflow? There is form element but how am I going to get the value of the radio button or the text entry?

    You can design the quiz in Reflow but you'll need to code up some sever side code to collect the data and reports for your quiz. If you don't want to write the code you could look at Muse or an online service like typeform or some elearning solution.
    Hope that helps,
    Chris

  • Create a photo montage showing responsive layouts

    Hello,
    Photoshop forum suggested I move over to the DreamWeaver forum for this. I am a web designer. I'd like to show a thumbnail view of the responsive sites I've created on my own website that shows a particular site (using the actual URL) in a montage of different responsive layouts. It's a common montage. Is there a way to generate this using a URL, some tool or software? I do not want to create a slideshow. I first went to Photoshop because one company told me that's what they used to create this. I'd like to keep it simple and have Googled exhaustively to no avail.

    There is an extension for Google Chrome that takes responsive captures.
    Webpage Screenshot - Chrome Web Store
    Online Service -- you enter your URL and set the breakpoint (viewport size)
    Responsive Capture - free full screenshot service
    Another online service -- makes various responsive previews to show your clients
    deviceponsive.com/
    Nancy O.

  • Is it possible to create Responsive websites with Adobe Muse?

    Hello,
    The question is in the Subject line.
    I would like to create Responsive websites in Muse so that they can flow to adjust to desktop > tablet > smartphone screen sizes, and I wondered if this is possible with Muse.
    Thanks,
    Chris.

    A little rant on this topic:
    "Responsive" works only so well. Very often a "responsive" web site can look like it wasn't designed for any screen at all; instead it ends up looking like a Microsoft Excel spreadsheet with a little better color and graphics. Nothing is ever really proper or composed. It's a page being Jack of trades and King of none. I look at a lot of those pages and just go "blah."
    We have very extreme differences in display resolution from one device to the next, both in terms of absolute pixel count and pixel density. There really is no way to accommodate them all properly unless you specifically design pages for each resolution -all with assets sized specifically for each resolution setting. Some people are still using old, outdated displays like 320x480 on an old iPhone or 1024x 768 on an old CRT monitor hooked up to some old WinXP system on its last legs. 1280x720 is common on a lot of older Android phones and old HDTV sets. 1920x1080 has become very common for new desktop computer monitors and laptops. 2560x1440 had been the highest pixel count one could see in a monitor, but that is now getting surpassed by 4K and even 5K displays. One of Dell's 15" notebooks has a 3200x1800 display. 4K UHDTV sets with 3840x2160 resolution are hitting affordable price levels now; most have built in web browsers. The newest 27" iMac has a 5120x2880 display. Add in the additional factor many desktop and notebook users don't have their web browsers filling the entire screen. I just don't see how someone can create a "one size fits all" approach to cover all of those different screen settings.
    Here's one thing I would like to see in the future: the computer industry settling on some screen resolution settings, screen orientation and aspect ratio. We wouldn't need "responsive" so much if various device makers would stick with some well established standards. We don't need oddball settings, like what Apple put out in its last two iPhone generations (640x1136, 750x1334 and 1242x2208). It's bad enough mobile devices capture a lot of vertical video. Too bad they're not designed to encourage users to hold the devices horizontally.
    I wouldn't mind seeing Muse add new features to help designs be more responsive. But I'd like to see more done in the way of improving SVG support (vector graphics scale up and down to any resolution). I'd also like to see Muse support HiDPI in more than just the 2x setting.

  • How to preserve aspect ratio with a responsive layout?

    Hi,
    I have an image that I need to place in the centre of my stage.
    The image is that of a ball and has 400px by 400px size.
    I want my animations to be responsive so that the image will scale but still maintain the correct aspect ratio.
    Currently if I set pixels to % on width and height, the image stretches.
    How do you do this in EA?

    Hi Jahandaniel,
    I have tested responsive layout and it worked perfectly. Please check the following adobe tv article and let me know your result.
    Creating a Responsive Layout | Learn Edge Animate | Adobe TV
    Regards,
    Devendra

  • While creating a PDF document usinf Adobe Acrobat Pro 9, it generates additional blank pages.

    While creating a PDF document using Adobe Acrobat 9 Pro, it generates additional blank pages. How do I resolve this issue?

    I might make a wild guess that you are using WORD and have used hard page breaks. If that is the case, then likely what happens is when you print to PDF the document is being reflowed to match the printer and the forced page break may end up on the next page and be forcing a second page. Just a guess.

  • Did you know that Captivate 8 takes virtually all of the work out of creating responsive online courses?

    I just saw the Adobe Blog article about Captivate 8 and the statement that Cp8 is an " authoring tool that takes virtually all of the work out of creating responsive courses online".
    http://blogs.adobe.com/captivate/2014/05/the-all-new-adobe-captivate-8-blends-authoring-ea se-with-game-changing-mobile-support.html
    Methinks this might be a tad overstating the matter. With responsive e-learning courses you effectively need to build the same course three times for the three different device screen sizes.
    Gotta love marketing people...

    Of course it is marketing hype, almost the only feature that everyone is shouting about, but I never did see a work flow, or real time experience described in all those blogs. I never write about some features I didn't explore, so I started with those that are also useful for the many companies that are not turning to mobile or BYOD yet, and have talked about those, including limitation and possible improvements.
    However, Rod, I don't agree totally with you. There is work taken out of your hand with the Responsive project work flow in Captivate. Responsive themes, smart positioning, resizing of objects, text, repositioning for phone break point, and testing with Edge Inspect are working pretty well, especially for this first implementation in Captivate (do not expect miracles). And from a usability standpoint, you have to reflect indeed on how the concept has to be, and that is different for each device. Such a mindframe takes a lot more than what a newbie playing for one day with Captivate can realize (as proclaim most blog posts), you don't have to persuade me about that. However I don't agree with your statement  'you effectively need to build the same course three times', but so-called 'single-source publishing' has always been a dream that will never be realized IMO, certainly not for eLearning.
    I am busy creating a real responsive tutorial (for Captivate) and will try to explain later on what I learned by doing. Only at that moment I will 'write', marketing is certainly not one of my skills
    Lieve

  • "Use presets for responsive layout" not working in Chrome

    I am building a responsive website. I am going to have parts of the website animated using Edge Animate. I will make the animation and then insert it into a div in the responsive website I am building.
    The Adobe Edge animation has a width of 100%, so that it resizes according to the area that it occupies the full width of the div no matter how wide that div may be in px.
    It is all working fine, but:
    I have an image in the Edge animation that is center aligned. It must stay center aligned no matter what width the animation ends up being.
    Within Adobe Edge, in Properties, in Position and Size, there is a option where, if you hover your mouse cursor over the top right button a tool tip says "Use presets for responsive layout"
    With the image on the stage selected, I can click on the "Use presets for responsive layout" button and then choose "Centre background Image".
    It works perfectly in all browsers accept Chrome (even IE is playing ball this time). In chrome the width of the image stretches out as the div stretches out..
    The "Centre background Image" setting says that it won't scale the image. But in Chrome it does.
    What can I do to "tell" Edge Animate to center the image but not scale it in the Chrome browser?
    I can see that in the image properties it is set to Background image x axis and y axis 50%. And the width is set to pixels. But in Chrome, the image stretches.
    If you go to http://www.brainstormadvertising.co.uk/demo/services.html you will see what I mean. The circle image is centering BUT stretching in chrome browsers while centering nicely and NOT stretching in other browsers.

    Thank you for your reply Josh. But the point of this setting in Edge Animate is that you can set it up that the background image is center aligned and does not scale. Yet it produces code that gives the width as 21.72%.
    A little further along I see background-size: 48px; .  This is correct.
    So all the browers are reading background-size: 48px; as the scale measurement but Chrome is reading the width only, not the background-width. So this "Use presets for responsive layout" works in all browsers except chrome.
    I don't know how to change that code after the artwork has been published. I can see the code using Firebug, but where do I change it in my code on my computer before uploading to the server?
    I have reported this bug to Adobe.
    Please see the attachment. You can see where all the settings are made and where I am getting a problem.

  • Edit Responsive Design template using Adobe Contribute

    Hi,
    I am creating a website which is based on responsive design layout. I am using HTML5 and CSS3 for the framework.
    It has 5 static pages e.g. "About US", "FAQ", "Contact US"
    My customer wants to edit the content of the page using Adobe Contribute. E.g. want to edit the content in about us or Contact Us.
    Now whenever we edit content using Contribute, it sometimes adds styles or <p> tags.
    Please advise if we establish the website server in Contribute, can the text will be editable using Contribute CS5?
    If yes, what will be its pros & cons?
    Thank you
    Monica Mandal

    While designing Responsive layout we have three css frameworks: Skeleton, Bootstrap and Foundation.
    If we are creating CMS Responsive layout (where user can edit using Contribute), is there any way to decide which CSS framework is more preferable for Contribute?
    Use whichever stylesheets best support your project goals.
    See Using Contribute Tutorials
    http://help.adobe.com/en_US/contribute/using/index.html
    Contribute Community Forums
    http://forums.adobe.com/community/contribute
    Nancy O.

  • Responsive layout template problem

    I created a master page with a responsive layout and then saved as template.
    I then went to assets and created "new from template" a new page.
    When I save this page as index.htm I get the following error message:
    Making this change would require changing code that is locked by a template or a translator. The change will be discarded.
    Pressing OK then brings up another error box with the following message:
    While executing onLoad, the following JavaScript error(s) occurred:
    At line 591 of the file "c:\program files (x86)\Adobe Dreamweaver CS6\Configuration\Commands\dmxUpdateHead.htm":
    The object is not currently contained in a document.
    My website files being developed are on F: drive so I guess this is something to do with the system files.
    USING CS6 / BOOTSTRAP2 / WINDOWS 7
    No idea what to do... Welcome any advice.
    Thank you in advance for feedback
    Terry

    You will get this problem because Automatic File Update has been selected. Click the checkbox to unselect and all is well.
    The reason is that the Bootsrap extension tries to refresh the association of the necessary files and the template system rejects this because the associations are located in a non-editable area.
    The above dialog can be found by clicking Commands->DMXZone Bootsrap Options.

  • Why I cannot preview my responsive layout project with captivate 8?

    I can not preview my responsive layout project in captivate 8.  It just stop on the first page.  Can anyone help?

    Hi,
    Do you get the issue every time you create a responsive project? Can you just crease 2-3 slides with smart shapes and text caption; publish and check if there is still any error?
    There are chances that the issue might be with the browser, which browser are you using to preview the content?
    Chrome version 36 has similar issues with captivate html5 output. Please find the following workaround if you are using Chrome.
    http://blogs.adobe.com/captivate/2014/07/update-on-captivate-html-5-content-playback-issue -in-google-chrome-browser.html

  • I have created a 468x60 animated banner in Edge Animate. How do I save the animated image to my desktop? (not in html code)

    I have created a 468x60 animated banner in Edge Animate. How do I save the animated image to my desktop? (not in html code)

    Hi,
    This feature is not available in Adobe Edge animate. You can not export as image from Edge animate.
    Publish options available in edge describe here
    Edge Animate Help | Publish your content
    Regards,
    Devendra

Maybe you are looking for

  • Reg: Error while deploying the Model

    Hello All, I developed a Model in the VC. The compilation of the model was successful. But when I tried to deploy the model I'm getting an Error message saying : "Error in executing a process for Flex compilation, Not enough space" . Can anyone tell

  • Acct Assignment mandatory

    Hi I have created 1 Raw Material and now creating PO.But I am getting the following error There is no provision for value-based inventory management for this material type in this plant. Account assignment is thus necessary I have never made any such

  • How to change the description

    hi all, can any body tell how to change the description of the field in the sales order.ex pricing date to customer date some thing like that

  • RSA1 Source System Hierarchy Issue (SRCTYPE of RSBASIDOC)

    Dear Experts, Greetings to you all and thanks in advance for your valuable responses! I am stuck here with a BW issue again. The issue is: We have a DS connection, which earlier used to get displayed under DATASERVICES node, but I don't who/what chan

  • OS Change: How can I install/activate PS Elements 10 on my new Macbook without buying it again?

    I was using PS Elements 10 on my Windows (Vista) Laptop which has now a broken display so I bought a new Macbook Pro (without DVD drive). I now have problems with downloading old version (PS Elements 10) and activation because as far as I understood