15 Replies Latest reply on Oct 20, 2013 9:00 AM by razi26

    site automatically scale to fit the browser window

    mermaidnyc Level 1

      hello all!

       

      i'm working on a site that i'd like to automatically scale to fit the browser window, without any scrolling and while preserving its aspect ratio.

       

      my client is very particular about the design & does not want the width & height of the images & text to change like they do in a responsive site- he just wants the site to scale to fit in a browser window. Yikes!!!

       

      could anyone give me a hand with this please?

       

      thanks so very much!

       

      -sharon

        • 1. Re: site automatically scale to fit the browser window
          Patel Bharat Level 2

          Hi Sharon,

           

          Select objects of your application and set its appropate size as 100%.  I hope the example would be helpful to achieve your target.

           

          http://html.adobe.com/edge/animate/showcase/catch/catch.html

           

          Thanks

           

          -Bharat Patel

          • 3. Re: site automatically scale to fit the browser window
            mermaidnyc Level 1

            hi bharat,

             

            thanks so much for your response! But it is not quite what i'm looking for.

             

            i want to zoom (scale) the entire page, based on the browser's window size.

             

            for example, my page is designed to fill a browser window that's 1200 px wide. If the users screen is only 800 px wide, i want the entire page, including fonts, images, etc., to scale down (zoom out) to fit in the smaller browser window.

             

            thanks again!

             

            -sharon

            • 4. Re: site automatically scale to fit the browser window
              RalphDCW Level 1

              Hi Mermaid-nyc

               

              I've got no answers I'm afraid - but I'm just checking on the off-chance that you've found a solution?

               

              I can't believe Adobe aren't making this a bigger priority - this was a standard feature on Flash 10 years ago!

               

              The other thing is that a lot of people don't seem to understand how scale-to-fit works with Flash. The example Bharat Patel gives is not the same thing. In that example, interesting though it is, all the objects stay the same size but just bunch up together when the browser size is reduced.

               

              If anyone wants to see an example of the scale-to-fit Flash feature that we're talking about, here is a Flash-only site that I created several years ago:

               

              http://www.skippingschool.co.uk

               

              - try changing the browser size and you'll see the whole frame (graphics and images) scales to fit.

               

              Cheers

              • 5. Re: site automatically scale to fit the browser window
                elainecc Adobe Employee

                Hi, Ralph, Sharon-

                 

                You will need to change each individual element to % size in order to get them to resize with your project.  If you don't, the element will not resize when your browser resizes.

                 

                Thanks,

                 

                -Elaine

                1 person found this helpful
                • 6. Re: site automatically scale to fit the browser window
                  RalphDCW Level 1

                  Hi Elaine

                   

                  Thanks for responding

                   

                  I will be delighted if you can prove me wrong but I'm pretty sure Edge Animate can't achieve the scale-to-fit feature of Flash - even by laboriously changing every element to % size.

                   

                  As far as I can see only images can be made to scale so that their ratio stays the same regardless of browser size. Graphics set to % will change to fit the size of the browser. So if you start with a rectangular graphic in a rectangular browser - then change the browser to a square shape, the  graphic will become a square - not a smaller rectangle which is what it should be!

                   

                  Even images don't scale quite as well as they do in Flash. If you look at the Flash example I mentioned in the last post:

                   

                  http://www.skippingschool.co.uk

                   

                  If you reduce the height of the browser, the Flash site shrinks and stays centred. By contrast, with an image in Edge Animate, if you reduce the height of the browser, the image just gets progressively cropped. The scaling only works if the width of the browser is reduced. This might not seem to be such a big deal. But it means that you can't have a site that's, say, designed to fit the iPad ratio but will stay nicely centred (with white space on either side) on a widescreen monitor. It means that someone viewing an iPad ratio website on a typical modern widescreen laptop will only see the top half of the website unless they make the effort to drag the side of the browser in.

                   

                  Anyway, let me know the error of my ways or, better still, show me an Edge Animate website that demonstrates that scale-to-fit works.

                   

                  PS. But NOT that Cracidae Catch site - clever though it is. The individual elements don't scale down they just bunch up when the browser window gets smaller!

                  • 7. Re: site automatically scale to fit the browser window
                    AndreasGalster Level 1

                    http://andreasgalster.com/animation/

                     

                    Is this coming closer to what you want? The aspect ratio is being preserved. In my version it doesn't go to max-heigth of 100% (It goes above that but I'm sure this can be fixed somehow I just don't have the brainpower/time at the moment to think about how.)

                     

                    Thesite is loading slow, because the web hoster sucks.

                    • 8. Re: site automatically scale to fit the browser window
                      RalphDCW Level 1

                      Hi Andreas

                       

                      Re. http://www.andreasgalster.com/animation/collector.html

                       

                      Thank you for sharing your design with me - You're right, your web hoster really does suck

                       

                      Am I right in saying that the two iPads in your design are just images (jpegs, gifs, pngs, etc) - with no native Edge Animate graphics? And is the only animation the fact that they bounce down from the top of the screen?

                       

                      Don't get me wrong, I'm not criticising your web page - but if there are no native Edge Animate graphics (ie. anything created in Edge Animate that hasn't been imported) then it doesn't demonstrate that Edge Animate is truly Scale-to-fit.

                       

                      Reading through my post above I see that I didn't make it clear that I accept that images that scale-to-fit can also animate. Like you, I have succeeded in getting multiple images to animate - and shrink down without altering the aspect ratio. But my argument is that as soon as I try this with graphics created in Edge Animate, the graphics will not retain their aspect ratio when scaled down because they are affected by the shape of the browser window.

                       

                      Cheers

                      • 9. Re: site automatically scale to fit the browser window
                        AndreasGalster Level 1

                        I am pretty certain, that anything in this composition would scale while maintaining the aspect ratio - although I can't give you a 100% clear statement until I test it when I get home. To get it to work EXACTLY the way your link shows would require more customization (Not much imo) if it is possible. It's all just about figuring out the right CSS to wrap around your composition.

                         

                        In the example posted above, my composition always scales up or down with the same aspect ratio, thus the entire content scales with the same aspect ratio. I am not sure though if text will scale properly. 

                        All I did was give my composition a fixed aspect ratio with padding-top:xx% and wrap it around a div with a width of 100%.

                         

                        Yes, only images are used (although they are divs, not images if I'm not mistaken - this already proves that any drawn element inside Animate will scale properly).

                        • 10. Re: site automatically scale to fit the browser window
                          RalphDCW Level 1

                          Hi Andreas

                           

                          I'm really looking forward to hearing about your tests tonight. As I said to Elaine (above) I will be delighted if someone proves me wrong. I'm just looking for a solution.

                           

                          I've just had another quick go on Edge Animate to try out your suggestions:

                           

                          My findings are that it doesn't matter whether a graphic is wrapped in a div or not. If the graphic has L, T , W & H pixel values and the surrounding div group is set to L, T , W & H % values, the L & T will scale down but the W & H will not - the graphic will just stay the same size when the browser is shrunk. The only way to get the graphic to scale down is to change its L, T , W & H to % - but, as I've said it won't retain its aspect ratio.

                           

                          As soon as images are imported, the situation changes. The layout preset offers 4 more options including 'Scale background image'. And Background image settings now appear offering W 100%, H Auto by default. These both seem essential to achieving scale-to-fit. I've tried images with and without being wrapped in a div. Just as with graphics, I find that if I add the % to the div then the image doesn't scale. But if I add the % to the image it scales perfectly.

                           

                          As far as I can see the problem is that, with graphics, the link width and height feature doesn't seem to work properly. I would expect that if I create a graphic 100px square then change W & H to %, then both W & H would be the same %. But I get all sorts of results. It doesn't seem to make a difference if I fix the percentages so W & H are both 100%. Changing from Global to Applied doesn't seem to affect anything either. Surely if W & H are set to 100% (and linked) then a graphic should remain square regardless of browser size? I can't find any combination that will allow this. Is it just me? Am I doing something stupid?

                           

                           

                          Good luck tonight.

                           

                           

                          Cheers

                          • 11. Re: site automatically scale to fit the browser window
                            RalphDCW Level 1

                            Hi Andreas

                             

                            Just wondered if you've had a chance to run your tests?

                             

                            No worries if you haven't

                             

                            Cheers

                            • 12. Re: site automatically scale to fit the browser window
                              AndreasGalster Level 1

                              Hi Ralph,

                               

                              sorry for the late reply. I've been rather busy, however I just tested it. Like I expected, normal elements like rectangles, rounded rectangles and circles also scale in proportion if the browser width changes. Only text does not scale. This could probably achieved by changing the font-size in a code editor afterwards to the unit vw (viewport width). I currently don't have the time to do any further tests because I need to finish my own portfolio site, but since I am curious about responsive design with Animate I'm definitely going to investigate in a few days when I have more time again.

                               

                              I can't upload my test right now, because I'm doing a server/domain migration, so you'll have to wait a day or so if you want to see the updated example in action.

                              • 13. Re: site automatically scale to fit the browser window
                                RalphDCW Level 1

                                Sounds promising, Andreas!

                                 

                                Thanks for getting back to me. I look forward to seeing your updated example in action

                                 

                                Cheers

                                • 14. Re: site automatically scale to fit the browser window
                                  cipizorrazo

                                  Hello!

                                  i think this will help http://www.youtube.com/watch?v=ZbW1DTX7K-E

                                  1 person found this helpful
                                  • 15. Re: site automatically scale to fit the browser window
                                    razi26

                                    bharat i like your solution and i want my website to be like this.. i have seen your example site.. its good.. but kindly explain how to do this