Solved Common Breakpoints-How Many & What sizes?

Discussion in 'General Muse' started by Tommy Hood, Jan 16, 2017.

  1. Tommy Hood

    Tommy Hood New Member

    1
    0
    Hi All,
    I'm just wondering what are the most common breakpoints. I'm wondering if I'm overdoing it with them, Currently I use 10 -11 breakpoints. the sizes (width) are;
    1300
    1020
    960
    768
    736
    667
    640
    568
    480
    375
    320


    I'm hoping to hear I'm using too many, so I could cut one or two out, and save productivity time.

    Thanks in advance for any help.
     
  2. Jeremei

    Jeremei Well-Known Member

    729
    95
    Tommy!
    It depends on what kind of sites you want to create?
    If the pages are fairly simple, so try to use the following method, which is a relatively new practice among Muse users:

    Combination of fixed and fluid breakpoints:
    1. Set fixed breakpoints e.g.: 1400 px, 1200 px and 960 px
    2. Set fluid breakpoint 768 px, and when you create this breakpoint you must set minimum widht 320 px in breakpoint settings. After that you don´t need to worry about breakpoints under 768 px.

    At the moment this is such kind of method which could work on simple responsive sites! But I want to point out that you must test this method if it is working on your site or not! :)

    I did this example with above mentioned method http://combination01.businesscatalyst.com/
     

    Attached Files:

    Last edited: Jan 16, 2017
    James007 likes this.
  3. James007

    James007 Active Member

    25
    1
    Thank you Jeremei! I have just setup a site with what you suggested as the breakpoints and here is the result:

    www.sydfpv.com/newsite

    If you could have a look at the site and tell me what you'd suggest I could improve in regards to the breakpoints - I'd very much appreciate it!
     
  4. Jeremei

    Jeremei Well-Known Member

    729
    95
    James!
    It seems to work with those breakpoints quite well. Layouts of the pages are important in this method.
    Continue testing, so do I. :)
     
  5. Jeremei

    Jeremei Well-Known Member

    729
    95
    James!
    I have tested this combination fixed & fluid method with more complicated site (link below) and it seems to work very well.
    My testing site (online sport magazine):
    - max. width 1400 px
    - min. widht 320 px
    - there are ONLY 3 breakpoints; 1200 px, 960 px and 768 px
    - the site works fine responsively on all devices
    - here is the link http://combination01.businesscatalyst.com/
     
  6. James007

    James007 Active Member

    25
    1
    Looks good mate! Can I have a look at the Muse file if you PM it to me?
     
  7. Jeremei

    Jeremei Well-Known Member

    729
    95
    James!
    Give me your email address so I shall send the Muse file to you.
     
  8. mjohnston

    mjohnston Member

    11
    1
    I have a site that has oversized text. when I resize it the phone version using breakpoints and the text is too big. Can you have different point sizes across devises? I was able to move the text boxes around and resize the column width but if I size down the text it affects the desktop version.
     
  9. Jeremei

    Jeremei Well-Known Member

    729
    95
    If you want to change the size of the text in different breakfonts you must choose this function (look at the screenshot). :)

    Home.png
     
  10. mjohnston

    mjohnston Member

    11
    1
    it worked!!! Thanks!!
     
  11. le-theatre

    le-theatre New Member

    2
    0
    Hi Jeremei

    Thanks for this great idea to save a lot of work having with 5 breakpoints (my first site)...
    I'd like to set up my new site with your proposed fix&fluid-method, but I don't understand how to create a max. width without setting a breakpoint at the same time. And the min. width of 320 i only get with fluid width.

    - max. width 1400 px
    - min. widht 320 px
    - there are ONLY 3 breakpoints; 1200 px, 960 px and 768 px

    Maybe you could send me just an empty site with this figuration...?

    Looking forward to your answer.
    Thanks in advance

    Irène
     
  12. Jeremei

    Jeremei Well-Known Member

    729
    95
    Irène!
    If I understood you right so you want to make the following breakpoints:
    - Fluid 768 px
    - Fixed 960 px and 1200 px

    The easiest way to create those breakpoints is to start from the smallest breakpoint 768 px
    - When you open a new Muse site so select fluid and set the max. width 768 px
    - After that add normally fixed breakpoints 960 px and 1200 px
    - And finally go to Site Properties and set the max. width 1200 px
     
  13. le-theatre

    le-theatre New Member

    2
    0
    Dear Jeremei

    Thank you so much for your quick reply. Now I understand the making of! :) I made my first website with a template with 5 breakpoints, but your solution seems much easier with the same result on the different devices!!

    Many greetings from Switzerland
     

Share This Page