Responsive Design with Animate and Reflow

So here is an interesting question... If anyone knows how to do this I will be forever grateful
I am trying to make a responsive single web page... I know I could do it all in animate but we want the text to be HTML and a few other things... So I made a reflow project with all the text where we want and where we want for the resized... I made just an empty box with the dimensions we want to have for the animation part... All works... Ok cool...
So now the hard part... I made two different animate projects... One has the dimensions for full screen and the other has the dimensions for mobile.... Now to add them into the responsive page I made from reflow...
I replaced the div (box part from reflow) with this
<div id="Stage" class="Cat-Site-Full">
<div id="Stage" class="Cat-Site-Tablet">
And added the correct header code for both stages...
I then went into the css from reflow and changed the .box to be .Cat-Site-Full and then bellow the media query i changed that .box to be the .Cat-Site-Tablet
I thought this would work but it does not I also tried adding .Cat-Site-Tablet {display: none;} for the main size page and then did the opposite for the media query mobile page size... But no luck...
If anyone knows how to show different edge animate stages for different media query sizes that would be amazing!!!!
Thank you so much!!!

That’s definitely a request we hear often. Unfortunately we can’t comment on what features are coming to Adobe Muse, but please know the team is listening!
Please feel free to add your vote here :
Ability to create mobile (responsive) web sites
Thanks,
Sanjit

Similar Messages

How to master good design with EJB and JSP?

I use JSP to calling EJB. But the .jsp file is complex and it's difficult to maintain...I just want to work higher efficent with EJB,JSP and JavaBean. I want to know is there a good design with EJB and JSP? and is there any good material about MVC for EJB,JSP and JavaBean?

You should read the J2EE blueprint available on this website. Better download the PDF, and print it for yourself so you can read it anytime.

When I design with Muse and export as HTML Dreamweaver doesn't attach the style sheets. Any answers?

When I design with Muse and export as HTML Dreamweaver doesn't attach the style sheets when I open the files with Dreamweaver. Essentially when I design with Muse the files don't render the same with Dreamweaver. Is this a bug? Any work arounds?

Then you will have to install a local server and use live view. It's not that DW isn't rendering it or isn't attaching it, it's that Muse decided to use server-side processing to include it which is ok for a CMS practice when you are combining stylesheets for better caching, but it really isn't ideal for a single style sheet. This is a shortcoming of Muse and one of the reasons many professionals don't back the product at the moment. That and you can't actually buy Muse, so unless you are on a subscription you don't have it. It's trying to fill a void for those who don't want to invest in the professional design tools like Fireworks or Photoshop or Dreamweaver, but want a cross between them to make designs. If you have invested in the subscription though and want a better way to make layouts I highly recommend coding it yourself and using Fireworks or Photoshop to do the layout for you. There is an excellent tutorial on the devnet (3 parts) to show you how its done ( http://www.adobe.com/devnet/dreamweaver/articles/dw_fw_css_pt1.html ). Once you start using Fireworks or Photoshop you will realize just how limited Muse is in design.

Oracle 10g RAC design with ASM and OCFS

Hi all,
I have a question about a proposed Oracle 10g Release 2 RAC design for a 2 node cluster.
ASM can store database files but not Oracle binaries nor OCR and voting disk. As such, OCFS version 1 does not support a shared Oracle Home. We plan to use OCFS version 2 with ASM version 2 on Red Hat Linux Enteprrise Server 4 with Oracle 10g Release 2 (10.2.0.1).
For OCFS v2, a shared Oracle home and shared OCR and voting disk are supported. My question is does the following proposed architecture make sense for OCFS v2 with ASM v2 on Red Hat Linux 4?
Oracle 10g Release 2 on Red Hat Enterprise Linux Server 4:
OCFS V2:
- shared Oracle home and binaries
- shared OCR and vdisk files
- CRS software shared OCFS v2 filesystem
- spfile
- controlfiles
- tnsnames.ora
ASM v2 with ASMLib v2:
Proposed ASM disk groups:
- data_dg for application data
- backupdg for flashback and archivelogs
- undo_rac1dg ASM diskgroup for undo tablespace for racnode1
- undo_rac2dg ASM diskgroup for undo tablespace for racnode2
- redo_rac1dg ASM diskgroup to hold redo logs for racnode1
- redo_rac2dg ASM diskgroup to hold redo logs for racnode2
- temp1dg temp tablespace for racnode1
- temp2dg temp tablespace for racnode2
Does this sound like a good initial design?
Ben Prusinski, Senior DBA

OK Tim, thanks for advices.
I think Netbackup can be integrated with RMAN but I don't want to loose time on this (political).
To summarize:
ORACLE_HOME and CRS_HOME on each node (RAID1 and NTFS)
Shared storage:
Disk1 and disk 2: RAID1: - Raw partition 1 for OCR
- Raw partition 2 for VotingDisk
- OCFS for FLASH_RECOVERY_AREA
Disk3, disk4 and disk5: RAID 0 - Raw with ASM redundancy normal 1 diskgroup for database files.
This is a running project here, will start testing the design on VMware and then go for production setup.
Regards

Responsive design like adobe edge reflow (allow muse files to work with reflow to make them responsive)

Could this be a possible update or even adobe muse having its own responsive feature plus alternate layouts.

That’s definitely a request we hear often. Unfortunately we can’t comment on what features are coming to Adobe Muse, but please know the team is listening!
Please feel free to add your vote here :
Ability to create mobile (responsive) web sites
Thanks,
Sanjit

Responsive Design with Parallax Scrolling

Hello!
I have read tons of articles and done many tutorials on the parallax scrolling effects available in Muse. However, I need tips on how to make your designs as repsonsive/fool proof as possible for different screen sizes. When I view some of my sites on a very large screen, I don't like all the blank space that appears when you have the secondary section set up with parallax scrolling effects.
It really helped me to see the ParallaxFX file that Adobe put out. While I can now execute most of the effects, I still feel that my web designs are not safe for the wide variety of screen sizes out there.
http://journey.lifeofpimovie.com/#!/waves
Here is a site that appears to work on all browsers. No matter what size your screen is, and no matter how much you zoom in and out, the integrity of the design is still preserved.
Thoughts?
-Carolyn

Hi
You can use pinning, 100% wide rectangles and text frames, inline images, fullscreen slideshows, etc to achieve partial responsiveness.
Basically use the key features in a way so that it shows the similar effect.
Thanks,
Sanjit

Adobe Muse: Design with freedom and leave the geeks to check the code

I want to praise the development team for the idea Muse is projecting. I have used all shapes and manner of web authoring tool. Muse happens to be the only tool thats gives designers the freedom to design without hassles. Though, Muse is not yet fully developed but I'll advise the development team to continue to make the tool more powerful without limitations.
My suggestion is for the development team to provide more features with less emphasises on 'widgets'. Not that they are not good, but I dont think it should be the focus of the development team. Please focus on the idea of 'design-then-allow-Muse(Using jquery/HTML/CSS/Javascript) to write all your design intent with those technologies.' That to me is innovative! Just the way Edge works. That way designers can create anything and not limited to widgets. Expose Muse to all known javascript/jquery effects/transitions/etc, drag/css cursor change/etc
It will be nice if the dev team can look at this: http://www.k2.pl/#!/en/work/item/life-at-ful-throttle/ .
Muse is just a lovely idea! It's just taking too much time to get it ready for real work! Kudos Adobe!

Hi Rohit,
Many thanks for your reply. Yes, they are set exactly as this
Here is an example of what my page looks like in Muse:
Here is it in my Browser (Safari): PLEASE NOTE GREEN TEXT POINTING TO SCROLL BAR BEING UP.....
Notice how on the next pic, I have scrolled down (see scroll bar on the right) but my page content has not moved up (Again, see green text):
Yup, it's probably an easy fix, but I don't know how to make Muse just 'do it'.
Thanks for any help and advice you can give.
Cheers,
Angelique

Responsiveness compared with 4g and Mini?

My 30gig 5G appears to be a slightly less responsive when pausing and playing music and podcasts and when going from song to song compared with similar activity on a 4g and mini.
Anyone else notice a slight delay when playing a track and for alblum art to appear?

Depends on your cellular carrier.
http://support.apple.com/kb/ht5205
 Cheers, Tom

General Design With Database and Session Bean Question

I have an application I am developing where users connect to individual databases located on a server. When they login an admin table is accessed which shows what databases they have permissions to. I am then storing the connection to the database in a backing bean. Hoping to use this connection throughout the session. Is this a good practice to have a users connection left open over the session? I can't create a database pool for each individual database and each user for that database.
If I can store that database connection in a session bean. How do I access that connection from another bean. Or from another java class? I am using Glassfish for my application server with JSF1.2. I have looked at resource injection but have not had any luck with sharing the session bean information.
Sorry if this is a trivial question. I have been a Java developer for years. But just starting developing webapps using JSF.
Thanks

JuCobb2 wrote:
I am then storing the connection to the database in a backing bean. Hoping to use this connection throughout the session. Is this a good practice to have a users connection left open over the session? No it is not. Why should you do so? Always keep the lifetime of connection, statement and resultset as short as possible.

Adobe Animate and DPS

Hey guys,
Heres my little problem; I have two objects animated in Animate, when I load 1 into DPS, it plays fine but when I put two (which i need), only one plays, whichever gets touched first and the other one freezes and doesnt do anything.
here is what ive tried:
set both to auto-play with a delay of .125 or above that and set auto-play on Animate Doc.
set only auto-play (.125 delay or more) on the web overlay only
set auto-play only on Animate Doc.
set the doc on Animate to play only onTouch (action)
tried to use Aimation Panel int he overlays but it only supports flash, which i think that will cause the same conflict.
none have work, only one works, whichoever the user touches first. is there any known issues with Animate and DPS?
thanks in advance for the help!

Instead of placing the OAM file, publish the Edge Animate project to
HTML and use the web content overlay to link to that.

Web design workflow between Dreamweaver, Muse and Reflow?

Do these 3 programs fit together in some kind of smooth workflow or does each program represents a different workflow based on the designer vs developer involvment on a project? I guess Im just confused why adobe has 3 programs for designers to create websites in?

PLEASE ADOBE READ BELOW, and fulfill this designer wish
Edge Reflow is really amazing. It's an huge tool to create responsive webdesign. Insanely great, fun and designer oriented! I love it!
Muse is really terrific. Amazing. Another huge tool to create website for a designer! I love it too.
But the question is: why you in Adobe waste time and smart developers to develop a single app like Edge Reflow instead integrate it natively in MUSE ????
I think Edge Reflow app is a not sense. Really!
Build responsive website in Edge Reflow is great, but you can't add animation, plugin etc.
Build a website with html 5 animation, plugin, etc. is astounding in Muse but you can't build a real responsive website: only useless and ridiculous versions for tablet, phone, to point to specific url...things of 10 years ago...).
What the sense to have the useless Muse's Tab "Desktop" "Tablet" and now "Phone" if they don't control the main website (read responsive)? They are useless. It's like a Ferrari with the pedals instead an engine. Who use these tabs to build a website? Do we really need to build three website version and point these to http://www.myawesomesite.com/ http://phone.myawesomesite.com http://tablet.myawesomesite.com/ and drive specific version with JS.... in 2014 ??? Come on.
My wish:
These useless Muse's tabs should be replaced with the interface pieces of Edge reflow (the stretch system to determinate the size is really amazing). They are awesome and wonderful. After complete the job by adding some Muse's panels to replicate Edge Reflow functions.
No more "app juggling", tons of time saved, the best software ever to build website. The new version name? MuseReflow. Of course. Sounds good isn't it?
Come on guys fulfill this designer wish. Maybe for Christmas?
Please
Thanks

Typekit and responsive design

Hi
I am creating a website with a responsive design in dreamweaver for a BC website,
But How can I make the typekit font work, I added je JQ stuff in the heading but with teh CSS it disn't work. Where do I need to put it, in which css file?
Regards
Ferry

Hi Koushik,
For the Photoshop problem, are you exporting from Photohop to an RFLW file or are you importing an open PSD in Reflow? Have you tried both methods and do they both have the same problem or does one always work and the other is flaky? Given that it has worked a few times it sounds like everything is at least installed correctly.
Problem 2, Typekit not working on localhost. Did you add "localhost" to you kit settings and then publish those changes? Also does the url in the preview start with http://localhost:8008/" ? The url in the preview needs to match the url in your browser. You can follow all the listed on this blog post: http://blogs.adobe.com/edgereflow/2014/01/31/using-typekit-fonts-with-reflow/
Problem 3 is related to Problem 2. The issue is when you're device connects to to your computer as the websever, typekit does't see you computer as an authored user of your fonts. The devices ins't connecting to "localhost" but using whatever the ip address of you computer is on teh network. If you want to preview the fonts you either need to add your computers IP address to your kit settings or put the preview up on a server that your kit allows.
When you are done please post your experience using the Photoshop import on your project. You can either start a new post or reply to a post we are running about people using Photoshop, http://forums.adobe.com/thread/1392173?tstart=0. We're looking into improving the import experience so your feedback here is really appreciated.
Hope that helps, thanks for using Reflow!
Chris

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.

Help with encapsulation and a specific case of design

Hello all. I have been playing with Java (my first real language and first OOP language) for a couple months now. Right now I am trying to write my first real application, but I want to design it right and I am smashing my head against the wall with my data structure, specifically with encapsulation.
I go into detail about my app below, but it gets long so for those who don't want to read that far, let me just put these two questions up front:
1) How do principles of encapsulation change when members are complex objects rather than primitives? If the member objects themselves have only primitive members and show good encapsulation, does it make sense to pass a reference to them? Or does good encapsulation demand that I deep-clone all the way to the bottom of my data structure and pass only cloned objects through my top level accessors? Does the analysis change when the structure gets three or four levels deep? Don't DOM structures built of walkable nodes violate basic principles of encapsulation?
2) "Encapsulation" is sometimes used to mean no public members, othertimes to mean no public members AND no setter methods. The reasons for the first are obvious, but why go to the extreme of the latter? More importantly HOW do you go to the extreme of the latter? Would an "updatePrices" method that updates encapsulated member prices based on calculations, taking a single argument of say the time of year be considered a "setter" method that violates the stricter vision of encapsulation?
Even help with just those two questions would be great. For the masochistic, on to my app... The present code is at
http://www.immortalcoil.org/drake/Code.zip
The most basic form of the application is statistics driven flash card software for Japanese Kanji (Chinese characters). For those who do not know, these are ideographic characters that represent concepts rather than sounds. There are a few thousand. In abstract terms, my data structure needs to represent the following.
- There are a bunch of kanji.
   Each kanji is defined by:
   - a single character (the kanji itself); and
   - multiple readings which fall into two categories of "on" and "kun".
      Each reading is defined by:
      - A string of hiragana or katakana (Japanese phoenetic characters); and
      - Statistics that I keep to represent knowledge of that reading/kanji pair.Ideally the structure should be extensible. Later I might want to add statistics associated with the character itself rather than individual readings, for example. Right now I am thinking of building a data structure like so:
- A Vector that holds:
   - custom KanjiEntry objects that each hold
      - a kanji in a primitive char value; and
      - two (on, kun) arrays or Vectors of custom Reading objects that hold
         - the reading in a String; and
         - statistics of some sort, probably in primitive valuesFirst of all, is this approach sensible in the rough outlines?
Now, I need to be able to do the obvious things... save to and load from file, generate tables and views, and edit values. The quesiton of editting values raises the questions I identified above as (1) and (2). Say I want to pull up a reading, quiz the user on it, and update its statistics based on whether the user got it right or wrong. I could do all this through the KanjiEntry object with a setter method that takes a zillion arguments like:
theKanjiEntry.setStatistic(
"on",   // which set of readings
2,      // which element in that array or Vector
"score", // which statistic
98);      // the valueOr I could pass a clone of the Reading object out, work with that, then tell the KanjiEntry to replace the original with my modified clone.
My instincts balk at the first approach, and a little at the second. Doesn't it make more sense to work with a reference to the Reading object? Or is that bad encapsulation?
A second point. When running flash cards, I do not care about the subtlties of the structure, like whether a reading is an on or a kun (although this is important when browsing a table representing the entire structure). All I really care about is kanij/reading pairings. And I should be able to quickly poll the Reading objects to see which ones need quizzing the most, based on their statistics. I was thinking of making a nice neat Hashtable with the keys being the kanji characters in Strings (not the KanjiEntry objects) and the values being the Reading objects. The result would be two indeces to the Reading objects... the basic structure and my ad hoc hashtable for runninq quizzes. Then I would just make sure that they stay in sync in terms of the higher level structure (like if a whole new KanjiEntry got added). Is this bad form, or even downright dangerous?
Apart from good form, the other consideration bouncing around in my head is that if I get all crazy with deep cloning and filling the bottom level guys with instance methods then this puppy is going to get bloated or lag when there are several thousand kanji in memory at once.
Any help would be appreciated.
Drake

Usually by better design. Move methods that use the
getters inside the class that actually has the data....
As a basic rule of thumb:
The one who has the data is the one using it. If
another class needs that data, wonder what for and
consider moving that operation away from that class.
Or move from pull to push: instead of A getting
something from B, have B give it to A as a method
call argument.Thanks for the response. I think I see what you are saying.. in my case it is something like this.
Solution 1 (disfavored):
public class kanjiDrill{ // a chunk of Swing GUI or something
     public void runDrill(Vector kanjiEntries){
          KanjiEntry currentKanjiEntry = kanjiEntries.elementAt(0); // except really I will pick one randomly
          char theKanji = currentKanjiEntry.getKanji();
          String theReading = currentKanjiEntry.getReading();
          // build and show a flashcard based on theKanji and theReading
          // use a setter to change currentKanji's data based on whether the user answers correctly;
}Solution 2 (favored):
public class kanjiDrill{ // a chunk of Swing GUI or something
     public void runDrill(Vector kanjiEntries){
          KanjiEntry currentKanjiEntry = kanjiEntries.elementAt(0); // except really I will pick one randomly
          currentKanji.buildAndShowFlashcard(); // method includes updating stats
}I can definitely see the advantages to this, but two potential reasons to think hard about it occur to me right away. First, if this process is carried out to a sufficient extreme the objects that hold my data end up sucking in all the functionality of my program and my objects stop resembling natural concepts.
In your shopping example, say you want to generate price tags for the items. The price tags can be generated with ONLY the raw price, because we do not want the VAT on them. They are simple GIF graphics that have the price printed on a an irregular polygon. Should all that graphics generating code really go into the item objects, or should we just get the price out of the object with a simple getter method and then make the tags?
My second concern is that the more instance methods I put into my bottom level data objects the bigger they get, and I intend to have thousands of these things in memory. Is there a balance to strike at some point?
It's not really a setter. Outsiders are not setting
the items price - it's rather updating its own price
given an argument. This is exactly how it should be,
see my above point. A breach of encapsulation would
be: another object gets the item price, re-calculates
it using a date it knows, and sets the price again.
You can see yourself that pushing the date into the
item's method is much beter than breaching
encapsulation and getting and setting the price.So the point is not "don't allow access to the members" (which after all you are still doing, albeit less directly) so much as "make sure that any functionality implicated in working with the members is handled within the object," right? Take your shopping example. Say we live in a country where there is no VAT and the app will never be used internationally. Then we would resort to a simple setter/getter scheme, right? Or is the answer that if the object really is pure data are almost so, then it should be turned into a standard java.util collection instead of a custom class?
Thanks for the help.
Drake

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)

Responsive Design with Animate and Reflow

Similar Messages

Maybe you are looking for