7 Replies Latest reply on Nov 13, 2017 4:27 AM by Pavel Homeriki

    In between breakpoint trouble

    hannahb24888121

      I've seen thru numerous advice sources that you shouldn't necessarily set your breakpoints for the devices, rather set the breakpoint when your design naturally starts to break. My trouble is that my design breaks down every few px. The main design feature thats giving me issues is a grouping of various colored boxes with an animated icon widget inside along with text. As soon as I move the scrubber, the boxes becomes unaligned, and the text and widget then distort. I saw that some of muse's widgets aren't responsive yet. I could deal with the text and widget, but having the boxes break down is driving me nuts. Any help would be appreciated!

      The first photo is at 768px, the second is at 718px.

      Screen Shot 2017-11-12 at 10.50.33 AM.pngScreen Shot 2017-11-12 at 10.52.13 AM.png

        • 1. Re: In between breakpoint trouble
          Günter Heißenbüttel Adobe Community Professional

          The difficulty, which you are facing, is to align differently scaling boxes.

          Additionally you have elements of different size and overlapping elements (text on image, text on rectangles, images on rectangles).

          You are using

          • images, scaling proportionally width and hight,
          • rectangles scaling only in width, and
          • text frames, scaling in width and growing in height to keep its text visible.

          To find a way, that all elements despite their scaling differences move synchronously is not easy, sometimes impossible, sometimes achievable by using some tricky precautions. This is not a Muse problem, but an unavoidable difficulty of responsive design.

          Look at this tiny screencast, which illustrates parts of the problem:

           

           

          Nevertheless, please do the following:

          Place the elements, shown in your screenshot (and please: only these, and no others!!) into a newly created .muse file with only one breakpoint and share it with us using Dropbox, Creative Cloud or a similar filesharing service and post the download link here. Then we’ll have a closer look.

          You may follow these instructions: https://forums.adobe.com/docs/DOC-8652

          • 3. Re: In between breakpoint trouble
            Pavel Homeriki Level 5

            Your layout can not be reproduced using a fluid layout and fluid breakpoints. I suggest you use a fixed layout and fixed breakpoints. I made two breakpoints. I think further you can do it yourself. I recommend that you use such breakpoints for your project: 1400 (basic site setup), 1200, 1024, 768, 480 - all breakpoints is fixed .

            Dropbox - Test131117.muse

            • 4. Re: In between breakpoint trouble
              Günter Heißenbüttel Adobe Community Professional

              You layout shows us, that you are not THAT experienced in using Muse, aren’t you ?

              Main issues:

              • You tried to create a responsive layout, but used a heavy mix of fixed and differently scaling elements, which are pinned and unpinned without a noticeable system.
              • A 3rd party eye candy widget, which can’t be  integrated into a serious responsive layout. Why? We’ll see later.
              • Text elements, which expand vertically, thus mixing up all other elements below.
              • and much, much more …

              We should ask ourself, if it is really necessary to build a responsive site, if we are not experienced with the „laws“ of responsiveness and the way Muse handles these „laws“. Mostly, responsiveness is only a means, to demonstrate this nice effect of dynamically adapting elements when the browser window is resized. Is this really worth the effort? Eye candy instead of a clearly structured, smoothly working site? The web site creator has to decide this by her/himself – and has to bear the consequences.

              If you build a fixed width site with fixed width pages and fixed width elements, it should be no problem at all, to create a site in exactly the way, your actual document is showing us. You will meet no real difficulties with this, and your site will look fine.

              But if you build a responsive site, you definitely have to obey the "incontrovertible rules of responsiveness".

              Think more in terms of an exact grid, than in terms of a pinboard, which you are deliberately filling with elements:

              pinboard.jpg

              But back to your issues:

              Please have a look at my previous posting and understand, what "different scaling behaviour" is meaning in terms of responsive layout:

              One simple example:

              You have a text frame, which grows vertically when you reduce your browser window, The element below will be pushed down.

              If next to the text frame is an image, it will scale down proportionally, when the browser window is reduced. The elements below will not be pushed down, they will move upwards.

              What to do, if you want all these elements to react synchronously? Not that easy, isn’t it?

              And:

              Which element should push down which other element, if there is more than one „candidate“ to cause this behaviour, or if there are elements which are overlapping each other?

              Look at your page:

              Screen2.jpg

              • You have the "man/woman image“. Should this push down the „man/laptop“ image? Or the „man/laptop image“ and the grey box? Or only the grey box?
              • Or should the transparent rectangle behind „Our Services“ push down the other images? Or should this be done by the text box „Our Services“ itself?
              • What happens with the text? when you resize the browser window and the words won’t fit any longer into its box any more?
              • The small icon – does it scale? And which other element tells the icon, where to go: The image on top? The grey rectangle? The text? The grey rectangle, into which it is placed?

              You see questions and questions and questions! And, believe me, there are many more of these, only concerning this little part of your layout. How should Muse decide, which elements is supposed to interfere with wich others, and which don’t interfere or are forbidden to interact?

               

              There is a way to help Muse doing its job:

              • Be sure, that the elements don’t overlap and are sized and placed precisely in an (imaginary) grid.
              • Use something, what I call „guiding frames“ to tell Muse, what you want: Place an invisible, correctly sized and scaling rectangle on top of the element, which moves incorrect, and group them.
              • Make sure, that text frames are not forced to resize vertically wenn they shrink in width (by dragging the browser window).
              • When you meet a point where you can’t avoid your layout to break: Create a new breakpoint and reposition/resize your elements.

               

              One more word: You are using a 3rd party widget „Animated Icons“ which resists every responsive layout, not only, because this widget can’t react responsively and can’t be placed exactly into your “imaginary grid“ (It will always overlap the single „tiles“ of your layout. Therefore: Renounce these eye candies and use Muse’s built in effects.

               

              Here you see your layout in a working version (not really perfect, because done within some minutes):

              http://health-access-service.businesscatalyst.com/index.html

              You may download the respective .muse file directly from this sample site.

              In the .muse document, please look

              • at the „Layers“ panel, where you can hide/show different groups of element, among them you funny animated icons,
              • at the „guiding frames“ I inserted,
              • at the handling of text frames, and
              • at the way, breakpoints are used.

               

              Now have fun!

              • 5. Re: In between breakpoint trouble
                Pavel Homeriki Level 5

                Excellent post Günter. But you, as always, delve into a particular solution to a particular problem. I think within the whole site to make it fluid - it will be very difficult, if at all possible, work. Therefore, I always suggest using just fixed breakpoints and a fixed layout.

                1 person found this helpful
                • 6. Re: In between breakpoint trouble
                  Günter Heißenbüttel Adobe Community Professional

                  You are right, Pavel.

                  If (a) one isn‘t really experienced in using Muse, and (b) wants to build a site, as one would usually do in print layout, it would be really better, to use fixed width layouts.

                  I never understood this responsive hype. Really think, most „designers“ find it simply cool, watching elements adapt and resize according the browser window. Wow!

                  But what does this contribute to the „essence“, to the „meaning“ of one‘s site? Only a little more than nothing.

                  It is like  an action movie with a poor plot …

                  • 7. Re: In between breakpoint trouble
                    Pavel Homeriki Level 5

                     

                    It is like  an action movie with a poor plot …

                    It's not possible to say better