13 Replies Latest reply on Dec 1, 2017 5:10 AM by Günter Heißenbüttel

    Breakpoint issue

    Contemporary_Dave Level 1

      Although I've been using Muse for a couple of years now, I've been using it in a non-responsive way and now I'm now trying it in responsive mode, so forgive me, I'm still very much a novice when it comes to designing a responsive site.

       

      I'm currently designing the Master page and have breakpoints at 768 and 320. I find I can reposition text and images at 768, but when I try to do the same at 320, I can't alter any of the elements. Instead my cursor turns into a pencil symbol.

       

      I'm clearly doing something wrong. Can anyone advise me in idiot language where I'm going wrong and what I need to do to me able to alter/re-position elements at the 320 breakpoint.

       

      Thanks!

        • 1. Re: Breakpoint issue
          fotoroeder Adobe Community Professional

          Without seeing a screenshot or a link, you don`t need a breakpoint at 320 but set your page from 768 to fluid width breakpoint and a minimum width of 320.

          For more and deeper views, we would need a screenshot or a simple, reduced to your issue, .muse.

           

          Does this help?

           

          Best Regards,

          Uwe

          • 2. Re: Breakpoint issue
            Günter Heißenbüttel Adobe Community Professional

            You only can edit your document at breakpoints. Between the breakpoint you get this pencil symbol with the „forbidden“ icon.

            The 320 px „breakpoint“ certainly is no breakpoint, but the minimal page width:

            Screen.jpg

            You may create a breakpoint at 320 px and reduce minimal page width at that breakpoint.. But what for? Do you know a device using a screen of 320 px or below?

            2 people found this helpful
            • 3. Re: Breakpoint issue
              Contemporary_Dave Level 1

              Thanks for your responses - if you pardon the pun!

               

              I think I get what I've done wrong. 320 was not set as a breakpoint, but as a minimum width. Would you be able to advise where a typical breakpoint should be for viewing a site on a phone?

              • 4. Re: Breakpoint issue
                fotoroeder Adobe Community Professional

                Usually you don`t design for devices but for screen resolutions.

                As you use responsive design, one usual breakpoint starts at 768 and is set to be a fluid width breakpoint.

                Now you use your scrubber and if you feel the design starts to "break" you set a new breakpoint and replace your elements.

                It is recommended not to use too many breakpoints. But to use one more breakpoint is not too bad, depending on your layout.

                If you did "less is more" you won`t need any further breakpoint until the minimum width of 320 is reached with the scrubber.

                 

                Best Regards,

                Uwe

                1 person found this helpful
                • 5. Re: Breakpoint issue
                  The Creatives.nl Level 1

                  Thanks for this comment, im also struggling a little bit with the breakpoint concept

                  I designed a site www.naked-ears.com with as i understand now to many breakpoints, i thought you had to go with your scrubber throug the whole width of every page and create breakpoints whenever you got the chance and change the design at these breakpoints so that it would easily flow through different devices?

                  Now i still have that the site looks different on different mobile devices, and that i cannot get to an specific breakpoint for an specific device because im told that i cannot alter a breakpoint within 25 px of another. Then i want to get rid of a breakpoint but don's know how...

                  Do i understand it correct

                  you only have to use fluid with 320-....

                  and then i don't know at what pix to put the breakpoints foor i-pad, and all the different mobile phones so that the site looks good on every phone and i-pad? How do i do that ?

                  so at which width do i put my breakpoints?

                   

                  Love to hear from you...

                   

                  Thanks!

                  • 6. Re: Breakpoint issue
                    Preran Adobe Employee

                    I think that you have misunderstood the concept behind responsive design.

                     

                    There are a couple of ways in which you create new breakpoints.

                     

                    - You start with a minimum size and then keep increasing the size of the browser to the point where the design breaks or starts looking bad. Then you create another breakpoint and adjust the layout.

                     

                    - Alternatively, you create your website at the largest dimension, and then start scaling the browser down until the design breaks. At every such point, create a new breakpoint and recreate the layout best suited for that dimension.

                     

                    Thanks,

                    Preran

                    • 7. Re: Breakpoint issue
                      The Creatives.nl Level 1

                      Hello Preran,

                       

                      Thanks for your replay of some time ago...

                      "

                      - Alternatively, you create your website at the largest dimension, and then start scaling the browser down until the design breaks. At every such point, create a new breakpoint and recreate the layout best suited for that dimension."

                      What you mentioned above is what i did and i went with the scrubber from my maxim size to my smallest size as (i understand this can be 320-960 for a regular page?) and i saw many thing breaking an in need of new design, when i saw that i added a new breakpoint...up to the point of to many breakpoints...

                       

                      Can i also use no breakpoints and only change the width's  for different divices?So that the site wil float with the size of the device?

                      Can you look at www.forfilling.com if i look at it on my phone the text's look strange but on the breakpoint for mobile devices i had it all looking good at that size  why do you think i don't see on my phone what i created in muse?And how can i be sure that what i create in muse is what i see and looks good at the different devices, and different phones

                       

                      Love to hear from you thanks

                      • 8. Re: Breakpoint issue
                        Günter Heißenbüttel Adobe Community Professional

                        If you share the site, we surely will be able to check fix the issues. I am quite sure, that there are no muse glitches but design glitches.

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

                        • 9. Re: Breakpoint issue
                          The Creatives.nl Level 1

                          Thanks for your replay here are the two sites i'm struggling with


                          albums naked ears    as you can see on this page if you look at it on a lab or desk top the players go over the text this is not what i saw in muse or preview, how can i get it so that what i design in muse is what i will see when i publish?


                          but when i watch it on different mobile phones i see things that arn't in the original design like text in the menu breaking on the homepage


                          
 

                          The other site is


                          Home Forfilling  this one looks good on labtop / desktop but when i watch it on different mobile phones i see things that arn't in the original design like text going over each other on the homepage on some mobile phones it looks ok...how can i get this fixed?

                          Are there tutorials that explain how you get rid of breakpoints and how you can get your site looking good at different devices?

                          I hope you can see the problem by just looking at the sites on moblie and desktop because it seems complicated and a lot of work to follow the instructions link i'll have to study that first for some time before i can follow it (is there no faster simpeler way for me to help you help me?)

                          Looking forward to here from you and hope this is a thing you can solve by just looking at the links...

                          Thanks a lot

                          • 10. Re: Breakpoint issue
                            The Creatives.nl Level 1

                            www.naked-ears.com

                            www.forfilling.com

                            • 11. Re: Breakpoint issue
                              Günter Heißenbüttel Adobe Community Professional

                              And again: Share these sample .muse files as already said.

                              • 12. Re: Breakpoint issue
                                HMAM Level 4

                                While you are getting your muse file uploaded as per instructions to be evaluated, think about a few things for web.

                                 

                                Generally starting with mobile is a good design strategy. It forces you to put the most important content in a logical presentation. There will be less problems as you increase the layout size For responsive.

                                Your navigation is not in a very usable in the traditional sense/form. Not user friendly.

                                • 13. Re: Breakpoint issue
                                  Günter Heißenbüttel Adobe Community Professional

                                  In my opinion, „mobile first“ is a bad strategy for Muse, because you often need to add elements in wider breakpoints. Adding elements necessarily means to reposition these elements in all breakpoints, where they are needed.

                                  If you start with the widest breakpoint, layout it and then add the „smaller“ breakpoints, the elements remain in their expected position.