5 Replies Latest reply on Mar 18, 2017 6:33 AM by johannac4295133

    Site preview not working with variable breakpoints

    johannac4295133 Level 1

      Hello guys and girls!

       

      I just started getting familiar with Adobe Muse and did some great effort with the help of Youtube tutorials. But, now I have a problem with my sliding elements. In the "page preview", everything is fine and just as I want it to be. However, when I go to the "site preview", Muse has problems exporting some of the effects I added:

       

      • I created a sliding menu bar, which should appear when scrolling down. In order to make this work out, I had to fix the box in the browser, so that it moves simultaneously to the scrolling. When I open the site preview, the whole bar doesn't even show up at all.

       

      • I created a "Back-to-Top" button. When scrolling downwards, it should appear at the point of 700px down from the top. Furthermore, clicking the button should bring me smoothly back to the top without reloading the page – just scrolling upwards automatically. In the page preview, this works out just as I want it to, whereas in the site preview, the button is always there, it's there already when I open the preview. When I click it in the site preview, at least it really does bring me up to the top smoothly. BUT, when I open the page preview and click the button, the browser opens the SITE PREVIEW (so no smooth scrolling back to the top but loading a whole new page – where the sliding menu bar is gone).

       

      When I click the site preview, a little message box pops up telling me that there are elements on my site that cannot be exported because they have variable breakpoints and a scrolling effect.

       

      Does anyone here know this problem? What can I do to fix this? Or, can I just ignore it – I mean, is this still going to be a problem when I upload the website on the WWW?

       

      Thanks in advance!

       

      Best regards

       

      Johanna

        • 1. Re: Site preview not working with variable breakpoints
          Preran Adobe Employee

          Hi johannac,

           

          I am not an expert, but from what i understand from your post, you are trying to use parallax scrolling in a responsive site. This feature isn't supported in Muse.

           

          Check out this widget Responsive Parallax Scrolling widget – Adobe Muse Widget Directory

           

          Thanks,

          Preran

          • 2. Re: Site preview not working with variable breakpoints
            fotoroeder Adobe Community Professional

            What Preran means, it can be responsive but there`s a slight difference between a fixed width-layout with necessary breakpoints and fluid width which needs breakpoints in certain situations with non responsive elements like slideshows, compositions and forms.

            This needs to be resized for each breakpoint unfortunately.

            Scrolling effects/Parallax effects are only available with fixed width layout with breakpoints.

            Does this help?

            Uwe

            • 3. Re: Site preview not working with variable breakpoints
              johannac4295133 Level 1

              Thanks a lot to both of you!

               

              So, does this mean that I can fix this by just setting a fixed layout instead of a responsive one?

               

              regards

              • 4. Re: Site preview not working with variable breakpoints
                fotoroeder Adobe Community Professional

                I follow a thread:  Re: Muse not redirecting to tablet version

                 

                with this content from my side at the end for now.

                 

                8. Re: Muse not redirecting to tablet version

                 

                 

                So, if I understand you right Pavel Homeriki,

                 

                the main decision from the beginning is, decide for

                1) alternative layouts,

                - then one must stick with fixed layouts for each device,

                - keep with the smallest available size/default sizes

                  (desktop 960/1160 px, tablet 768 px, phone 380 px)

                 

                or

                 

                decide for

                2) responsive layout

                - choose between fixed or fluid design

                - use screen sizes/breakpoints as you like

                - keep this responsiveness from desktop to mobile devices

                - use fixed width breakpoints, in order to work with scroll effects

                - use fluid width breakpoints – try to work with responsive content as much as possible – no scroll effects

                   (it`s greyed out anyway with fluid width bp´s)

                - alternative between scroll effects/fixed width bp´s or fluid width bp´s for desktop

                   (size taller than 960 px width) ...

                - ... and fluid width for mobile devices (tablet, in this meaning is mobile device as well)

                   until the minimum size of 320 px width for phone is possible.

                 

                The reasons in detail might be, that browsers in general, and decisions of the certain devices (which layout should I use now?)

                is tricky, changing all the time from browser to browser (Chrome, Safari, Firefox, Opera, IE8 to IE 10 or higher).

                 

                Is it that, what you recommend? Did I get the message? I kept you in mind, saying this in several threads already?

                 

                Would be great for me and us, if this makes sense and of course would be great to have somebody from ADOBE to

                maybe keep us with details if I get it wrong or if I miss something.

                 

                Pavel Homeriki, btw I trust your practice completely, but to tell clients in the future what´s possible and what isn´t

                and to be able to use this for diverse written offers, is very usefull.

                 

                Thanks in advance

                 

                Uwe

                 

                 

                We are waiting to have these statements approved, this would, at least for me

                clear up a lot .

                 

                But for sure, I can tell in my words, responsive can be done with fixed width breakpoints or with fluid width breakpoints.

                In both cases you have responsive design, because instead of alternative layouts for desktop, tablet and phone, you do

                everything on one canvas/page. And yes, if you change from fluid to fixed the message box should not appear.

                All scrolling effects only work within fixed width breakpoints. You can change from breakpoint to breakpoint if you want it fluid or fixed and therefor use scroll effects or do not use scroll effects.

                At the end, arriving at mobile layout (which in my world is applicable for tablet and phone) you should avoid scroll effects anyway,

                although sometimes it works, but not 100% on every device (iPhone, iPad, windows tablet) on every browser.

                 

                Does this help?

                 

                For not scrolling but instead reloading: You placed an anchor for BACK TO TOP?

                • 5. Re: Site preview not working with variable breakpoints
                  johannac4295133 Level 1

                  Thank you so much for this detailed reply!!

                   

                  Yes this did help! Due to a couple of other university related work it might take some time until I can adapt your input, but I would gladly keep you in touch about my progress in these concerns.

                   

                  concerning the back to top button: yes i do have an anchor placed at the top of the page

                  what might also be an important information concerning my back to top button is that i don't set up a website consisting of several seperate pages. I want only one long webpage on which you can navigate by scrolling only or using my dropdown menu bar which is (or should be) sliding simultaneously to scrolling