Responsive design and interacting elements

Is there anyway inside of Adobe Edge Animate CC 2014 for elements inside a responsive project to interact with each other. For example, I want the text to be able to condense (width-wise) as I resize the width (%), and doing so will increase the text height-wise. I want that new height to influence the location of an element below it and have that element be pushed down.
This leads to another question, does the height of the parent (stage) increases as well to contain the new height of a child element (text, div, etc...)? It seems to me that a lot of these elements inside are placed absolutely, or fixed relative to parents. So is there anyway inside a responsive document to have elements still be in the normal flow?

Steve,
You can record software simulations slides inside a responsive project, in 8.0.1.242, using the Slides button, Software simulation. But do not insert a separately created normal software simulation project in a responsive project. If  you created it as a normal project, it will not have the responsive styles, will not adapt. The software slides created in a responsive project, will offer you a zoom/pan suggestion for the mobile breakpoint view that has a much smaller total resolution than Tablet and Primary. You can always customize the suggested pan/zoom.

Similar Messages

  • DW CC Responsive Design and BC tags

    Hi All,
    I am going through the recent Adobe tutorials on Responsive design using DW CC and I have a couple of questions.
    Has anyone tried setting up a DW CC responsive design for a BC site yet, using the new functionality in DW CC?
    Is it OK to insert BC module tags into a design, ie a tag for a menu, and will they work? Or will the BC module javascript clash with the responsive javascript?
    Also, the tutorials talk about coding up webpages to be responsive, where I will be wanting to code up a template as being responsive, with the BC tag_pagecontent tag inserted where the content is going to be.
    Also with the tutorials so far I am having problems doing the following:
    - inserting two divs inside another div with a large background image and positioning these two divs over this background div.
    Anyway, I am continuing to work away at rendering my design into a responsive layout, following the recent Adobe videos.
    If anyone else had/is doing the same please let me know how you went.
    PS. I am only interested in replies about using DW CC to create a responsive design, as I am not able to hand code that kind of thing from scratch in Notepad. lol!

    Mary,
    Have you had a look at using a framework. Responsive frameworks include:
    Twitter Bootstrap - http://twitter.github.io/bootstrap/
    Skeleton - http://www.getskeleton.com/
    Foundation - http://foundation.zurb.com/
    We had a discussion on Sandpile yesterday about using Frameworks. Recording here: http://experts.adobeconnect.com/p6hmzy2oipt/
    Also, Scott did a presentaion on Responsive design : http://experts.adobeconnect.com/p4ryiohpfjs/
    Hope this helps.

  • Responsive Design and @media queries

    I thought my HTML/CSS guns were loaded and good to go; and then I started reading about responsive web design!
    If I have a rule declared in the main body of my CSS and add a media query what happens to the existing rule?
    It looks to me with my experimenting so far that if I take a style in the main section and duplicate that with some edits for a smaller width, I have to then remove it from the original and replicate it in another @media query.  Is that correct? 
    So if I have this:
    header {
        background: url("images/headerhand.png") no-repeat scroll left top transparent;
        height: 300px;
        margin: 40px auto 0;
        min-height: 300px;
        text-align: left;
        width: 100%;
    I need to put this in a @media query for the below break point:
    header {
        background: none;
        height: 300px;
        margin: 40px auto 0;
        min-height: 300px;
        text-align: left;
        width: 100%;
    I then take the rule out of the main section of my style sheet and put that in another media query for the above break point.
    So if I have a header element with background image and color, and border-radius and whatever but only want to lose the background image at a certain break point, I then need two @media queries one for below the break point and one for above and then remove the whole rule from the main section of the site?
    Oh my, that was so complicated, I am not sure I even understand my own question!
    Martin
    PS "Mobile First" is starting to make a lot of sense!

    osgood_ wrote:
    pziecina wrote:
    Hi Os
    As an example, (using Jennys Chocolate Cookies) would it not make more sense to design a mobile only web site, complete with geolocation that shows the nearest outlet selling the cookies?
    So you are saying forget the desktop monster (assign that to the bin) and convince the client mobile is the way to go? Even if that is the case it still seems that you're going to need two or three different design set ups to satifsy the majority of devices, which means more expense, right? Plus from what I've seen the information all crushed into a 400px wide screen looks a bit shite, no?
    Reply -
    No I am saying that one should offer the type of site/service that best suits the clients needs, be this a desktop, responsive or mobile only web site, or even telling the client that an advert in yellow pages would be better.
    pziecina wrote:
    The same may also apply to a restaurants web page, after all it is often the directions to the restaurant, and its proximity to oneself that are important when one is looking for somewhere to go out for a meal, is it not?
    Can't see what location or direction has to do with anything or proximity to oneself. I look in yellow pages if I need a restaurant or I identify it on the computer before I go out........but then again I'm old so maybe younger people do all this whilst they are out. So we come down to demographics - cut out whatever section of society at your own peril. I guess a nightclub would be a better example, can't see many 50 plus year olds wanting to know where one of those are on the move.
    Reply -
    So you are out and about, or driving home and suddenly decide that you would like to go for an Indonesian meal, do you now get the yellow pages out?
    BTW - I am over 60.
    pziecina wrote:
    As for testing on mobile devices, a good testing set-up now costs less than £400, ($600) and most items one will already own.
    They are -
    1  A smartphone, (most people have one now and a good budget smartphone can be purchased for under £70.00)
    2. A tablet device, (An budget android device now cost about £120.00, and can also be used as an e-reader)
    3. A iPod-Touch (If it works on this it will also work exactly the same on the iPhone)
    Well I guess you have to factor in the cost of getting connected to the net on these mobile devices to check everything. I dunno if anyone in the UK offers a reasonable monthly package whereby you can be connected to all these devices 24/7 and not rack up any additional charge per minute.
    Reply -
    Use Shadow and your home wifi network, extra cost nothing.
    PZ

  • On designing and interactive animations

    i need to know how to make those animations where you slide your finger across the screen, like a timeline and the entire image changes. second, please someone tell me about, how to make an image with key points, like, when i click on the key animal body, it reflects on other images. kindly help.

    anupkohle,
    These are difficult illusions to create on Keynote since Keynote doesn't support hyperlinking objects on the same slide. That said, a close approximation to what you want can be created in Keynote using multiple slides and hyperlink objects to slides and, perhaps, assigning a nice transition to the slides.
    The key here is to have each slide have the elements in the same place so no motion is seen - things appear when something else is clicked. The basic way to do this is to:
    1. Create one slide with everything on it (pictures, text boxes, shapes etc.) then to clone that slide multiple times in the Navigator using option-drag.
    2. On each secondary slide, carefully delete non-essential bits by selecting and hitting delete - the result should be a series of slides that have different as well as the key parts (time line or image with parts where you wish to click)
    3. Create small shapes and place them on the original target image or object and select each separately and assign a hyperlink to the secondary slide that would reveal the information you want - Note: be sure to check enable hyperlink in the Hyperlink Inspector in each case. Hyperlinks work with objects like shapes.
    4. With the object still selected set the object fill opacity to zero (this allows the entire object to be clickable - if you select no fill, only the stroke is clickable), repeat for each part you wish to talk about
    5. On the first secondary slide place a small object where you can later find it. Hyperlink it to the original slide, set opacity as needed, COPY this object and then click on the next secondary slide in the Navigator and PASTE (that will place the object in the same place on each secondary slide as a return-button).
    Timeline would be done similarly. The general effect is the appearance of items (images, text) while the rest of the slide appears to remain in place.
    Good luck.

  • Responsive design and video html5

    I am working on a new site in dreamweaver using Skeleton V1.0.2. The images work great, the problem is with the video. When I resize the Dreamweaver window it looks great works perfectly but when I check it on my Iphone it resized horizontally but not veritcally it add black bars to top and bottom, only on the Iphone work fine in all the browser I've checked and even on Droids. Any help would be appricated www.shargraphics.com/new-site

    Fix your code errors.
    http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.shargraphics.com%2Fnew-site%2 F
    My advice is to remove the height and width attributes from your video HTML.  Use CSS instead.
    video {max-width:100%}
    Nancy O.

  • How to review training video design and function elements?

    Hello,
    I'm reviewing a coworker's training videos.  What criteria should i use in reviewing the videos?
    I'm thinking that in order to provide effective feedback, I need a list of elements that make good training videos.   Would anyone know a website or book that explains what makes a good training video GREAT?
    Also, is there a section on this site that can provide feedback on training videos?
    Thanks

    Hello,
    I'm reviewing a coworker's training videos.  What criteria should i use in reviewing the videos?
    I'm thinking that in order to provide effective feedback, I need a list of elements that make good training videos.   Would anyone know a website or book that explains what makes a good training video GREAT?
    Also, is there a section on this site that can provide feedback on training videos?
    Thanks

  • Insert images and text in header for responsive design cc

    I am having a issue with inserting a logo, company name and Facebook graphic into my header.
    I started setup of a responsive design and added a responsive header along with other areas below.
    I want the Logo to stay on the left, the company name to the right of the logo and the Facebook graphic on the right side of the header.
    I keep making a mess and can't get anything to line up correctly.
    I am using Adobe Dreamweaver CC and trying to control with CSS.
    I am just starting to learn the new CSS Designer in CC. I liked the old CSS console better.

    Basically, you need to float all 3 elements left and give them a width of 33.33% (3-across).
    header #logo,
    header h1,
    header #fb {
         float:left;
         width: 33.33%;
    HTML:
    <div class="gridContainer fluid">
         <header>
              <div id="logo">Your logo here</div>
              <h1>Your Site Name</h1>
              <div id="fb">Facebook here</div>
         </header>
    Nancy O.

  • Captivate8: Drag&Drop not possible in a responsive design?

    Is it possible to create a Drag&Drop Interaction within a responsive design? (Captivate 8)
    I can't open the Drag&Drop Menu, I can't select it.

    I've also completed the form to request new features. But in the meantime could I ask how people get around this?
    We have several courses created for desktop computers which include drag and drop tasks, and feedback from learners is that they would like to be able to access them on mobile devices. So as I understand it we have three options:
    Create separate courses for mobile devices, using responsive design but losing the drag and drop tasks. This would mean we have two versions of each course, one for desktop and one for mobile, which may cause issues with updating, etc, and the mobile user won't get quite the same learning experience as they'll lose the drag and drop tasks.
    Adapt the main desktop course so it is responsive, and lose the drag and drop altogether. This has the advantage of everyone seeing the same course and it only needing updating once.
    Don't use responsive design and display the course in the same way on a desktop as on a tablet. This may be fine for larger screen tablets, but wouldn't be great for smaller tablets or phones as you'd need to do a lot of zooming and scrolling.
    I'm just wondering what you all do to get around it?

  • I am having trouble getting buttons to work in Captivate 8 trial version using a responsive design template. Any suggestions?

    I have a trial version of Captivate 8 that I am evaluating to determine if it will be an option to replace a software we currently use. However I am having a lot of trouble getting even the simplest of tasks to work using the responsive design template. To troubleshoot I created 2 projects 1st a completed empty project using responsive design and a 2nd blank project using the blank project template. I created an audio file that the button, when pressed, will play. I can place a button on first slide of both projects, rollovers work fine, but in the responsive design project buttons will not work to trigger the action. Is this a known issue in the trial version?

    A Blank project is a normal cptx-project, not a responsive project, it has no breakpoint views like a responsive project, it is meant to have always the same layout but on publishing you can choose to have it 'rescale' automatically.  A responsive project allows you to create slightly different layouts for the three breakpoint views: Primary (desktop/laptop/landscape on tablets), Tablet (portrait on tablet) and mobile (phones, where the browser has much lower resolution than the real phone resolution). The 'look' of a project, whether it is responsive or not will be defined by the Theme that is the default theme at that moment, and with the default theme colors that you have at that moment. I think in newbie mode the default theme is White (not sure, never used newbie mode). If you choose another theme as default theme, a blank project and a responsive project will open with that theme applied to it. All themes coming with CP8 are responsive, but you can use them also for normal projects, in that case you only use the object styles for Primary view. Each object style normally has 3 versions, for the 3 breakpoint views.

  • If Muse does not support responsive design, can someone tell me why I have seen 100% browser width

    If muse does not support responsive design (and therefore cannot adapt to the differing sizes in browser width of different devices, so I understand it) , as I have read on these forums and been told by Adobe's support tech's via chat support, can someone please explain how the 100% browser width slideshows that I have seen on Adobe's featured Site of the Day sites, were acheived? Are these sites only able to display correctly on the same size screen? If I cannot create a site in muse that displays a constant design on a laptop, desktop, or tablet screen, then why should I use this program at all, and why isn't that dislcaimer right up front to save folks like me hundreds of dollars in cloud subscription fees and hours designing a site only to find out that it will look like crap on 2 of the three devices any one uses to view it???? I was sent here for this question by the support team at Adobe. Hopefully someone has a workaround, because Adobe apparently are nonplussed.

    If muse does not support responsive design (and therefore cannot adapt to the differing sizes in browser width of different devices, so I understand it) , as I have read on these forums and been told by Adobe's support tech's via chat support, can someone please explain how the 100% browser width slideshows that I have seen on Adobe's featured Site of the Day sites, were acheived? Are these sites only able to display correctly on the same size screen? If I cannot create a site in muse that displays a constant design on a laptop, desktop, or tablet screen, then why should I use this program at all, and why isn't that dislcaimer right up front to save folks like me hundreds of dollars in cloud subscription fees and hours designing a site only to find out that it will look like crap on 2 of the three devices any one uses to view it???? I was sent here for this question by the support team at Adobe. Hopefully someone has a workaround, because Adobe apparently are nonplussed.

  • Animated banners and responsive design

    I have noticed many responsive design techniques eliminate the old standby the animated banner. Either you can divide the static elements of the banner so that they stack up as the viewport narrows. Or you could animated one segment of the banner and let that stack up too. Or you could conceivably add 2 or 3 animated banners synchronized and let them all stack up just like the static elements, though this would likely result in slow load times.
    Is there another method to incorporating the animated banner in the responsive design (i.e. smartphone size)? Or is it best just to leave it out on screens less than say, 400px?
    It seems that not including the animation at all would disappoint people who are expecting it...

    Use a responsive rotating banner plugin like jQuery Cycle2. 
    Then add a custom HIDE THIS button for people who want to turn it off. 
    Working example:   http://alt-web.com/FluidGrid/Fluid2.html
    Similarly, you can create custom animations with Edge Animate.  To make it responsive, use a Fluid stage.
    Nancy O.

  • Responsive design mode is showing part of pages and is not showing any optomized pages even in safe mode.

    I need to check multiple websites everyday for responsive design. When I open Responsive design mode I am getting full pages on every site, even ones I know are mobile opt. No matter how I scale it everything remains exactly as it is. I have to scale it to the far right to get the whole page. Basically the pages are always in full screen and I'm getting a window that only allows me to see part of a page. It is very frustrating.
    Win xp
    firefox V28.0
    I am not a coder so please keep solutions simple.

    From your screenshot, it seems to be working, as that grey bar has appeared at the top (with a link to the mobile version of the site). This only appears when the viewport width is 800px or less. This support website doesn't shrink dynamically (as the viewport gets smaller), but remembers whether your machine has a small screen or not (probably by storing a cookie which is changed when you click the link in the grey bar).
    If you are having trouble with other sites, have you tried refreshing the page after resizing? When I have created responsive websites I often have to use JavaScript for a few features, and it simply isn't worth the processing power to make the code run every time the window size changes. Other than that I can't see what would be causing the problem (unless there is other important information you may have missed out)

  • Why can I export (and import)the different sizes that I put in the "Responsive Design View"?

    Hello
    I have troubles when try to import or export the different sizes of the Responsive Design View, I manage at least 13, and it's a little preposterous to add one by one. There are a method that export/import them?
    Thanks

    There is a way to store custom settings for responsive design.
    You can create custom settings in the responsive design mode window.
    You can hold down the Shift key and drag the borders via the (right border, bottom border, bottom right corner) resize icons to get specific dimensions and give the current custom setting a name to add them as a preset.
    This will add the preset to the <b>devtools.responsiveUI.presets</b> pref that you can inspect on the <b>about:config</b> page.
    Those settings are stored in JSON format.
    <pre><nowiki>[{"key":"360x640","width":360,"height":640},{"key":"768x1024","width":768,"height":1024},{"key":"800x600","name":"8x6","width":800,"height":600},{"key":"800x1280","width":800,"height":1280},{"key":"980x1280","width":980,"height":1280},{"key":"1280x600","width":1280,"height":600},{"key":"1920x900","width":1920,"height":900}]</nowiki></pre>
    See this thread for some JavaScript code to add extra sizes:
    *[[/questions/957590]]
    You can paste the existing JSON value of the devtools.responsiveUI.presets pref in the prompt and click OK.
    Extra values can be added by typing its dimensions (<width>x<height> <name>).
    You can paste the resulting JSON value back to the devtools.responsiveUI.presets pref or save it.

  • Interactive elements and even article zoom sometimes freezes on first page in Adobe Content Viewer r31.

    Interactive elements and even article zoom sometimes freezes on first page of articles in Adobe Content Viewer release 31 (tested on iPad 3 and iPad Air). If user swipe to second page and return back to first page, all elements works normal again.
    Interactive elements are mostly buttons for changing states of multi-state objects, or buttons for opening URL in build-in browser.
    What could be the reason? Is there some bug in ACV r31? Or it alocates more memory for the application, so there is less memory left for the content? It wasn't happen before in r30.

    hello, me the same thing is happening. I made a folio and he usually worked before the last update of content viewer. the multi-state buttons also freeze and take to work. This bug will be fixed in the next update?

  • It is a suggestion on Adobe Dreamweaver:  Could you change the setting of the page or template; to a free platform?  example; move: images, tables and other elements all over the place covering the page. in order to facilitate the user in the design envir

    It is a suggestion on Adobe Dreamweaver:
    Could you change the setting of the page or template; to a free platform?
    example; move: images, tables and other elements all over the place covering the page. in order to facilitate the user in the design environment.
    free
    Thank you for your attention

    Adobe has been trying this and the product is called Muse ( Web design software | Download free Adobe Muse CC trial ).  It doesn't give you the control over the code that most developers prefer but it could help bridge the gap for design if that is what you are looking for.

Maybe you are looking for