Site doesn't load right to Iphone size

Discussion in 'General Muse' started by jeffdietz, Mar 24, 2016.

  1. jeffdietz

    jeffdietz Well-Known Member

    51
    0
    Well my current break points are 320, 480, 768, 1024, and 1366.
    I started to bleed out and combine the two smallest ones into a 380 break point which is the reported size of the iphone 6.

    Which break points do you typically go with?
     
  2. Mike Valkanet

    Mike Valkanet Well-Known Member

    79
    13
    If you haven't watched these new videos about responsive design then I think you can learn a lot from them.
    http://www.muse-themes.com/pages/responsive-design-video-training (You have to be logged into Muse Themes.)
    Watch "Golden Rule #5" video.

    These are the breakpoints that Muse Themes is using on all their templates for consistency.
    960px Desktop
    768px Tablet
    480px Mini Tablet/Phone
    320px Phone (I don't currently use this one unless I'm using a Muse Theme)

    Really we are all learning about responsive together but I think there's some underlying problem with the way you are previewing the website.
    Did you try the Google Resizer link? http://design.google.com/resizer/#
    It shows that the social media links in the bottom footer are too far to the right. Possibly caused by not being located responsively or centered responsively???
     
  3. jeffdietz

    jeffdietz Well-Known Member

    51
    0
    Yea I watched all of those. I am following pretty much everything they say and everything on the page goes wherever it wants to go anyway. It's a complete hot mess in between any of the break points. Inside the break points it's fine. But if anyone adjusts their browser in any way then it's screwed.
     
  4. jeffdietz

    jeffdietz Well-Known Member

    51
    0
    The resizer link everything looked ok, but again, I mean everyone has their browser window open at unique sizes right? So that is what makes it tough, but also what responsive is suppose to be able to handle I thought? I have seen other people's responsive sites outside of muse and they all work just fine.
     
  5. jeffdietz

    jeffdietz Well-Known Member

    51
    0
    It shows that the social media links in the bottom footer are too far to the right. Possibly caused by not being located responsively or centered responsively???

    Yup they are set to responsive and nailed to the right, as I would suppose they are suppose to be? It's just so frustrating. I have been chasing this stuff for like 5 days. Then you think you got it fixed, and then Muse just on it's own goes and moves a bunch of stuff that you didn't even touch in teh other break points and messes it all up again, or you test it and it's breaking all over the place.
     
  6. jeffdietz

    jeffdietz Well-Known Member

    51
    0
    On the resizer everything seems to be showing up fine. it's in the in betweens that it all seems to fail?
     
  7. DjHerold

    DjHerold Moderator Staff Member Advisory Group

    3,459
    255
    Guys, I just wanted to throw out something that I'm not seeing addressed, and don't see talked about much. If you guys already know about this, cool, but it may help some others wrap their heads around responsive Muse a bit better.
    Muse uses what's referred to as "Viewport Scaling". For those not familiar with this concept, simply put, Muse will scale the smallest version of your responsive site down to fit within the size of the device calling it up. I think Dani (head product person with Muse from Adobe) speaks a bit better about this in one of the latest Muse Jams Sessions... (at about the 17 min or bit less mark).
    Now, understand that I'm oversimplifying this for talking sake, but look at it this way. Lets say you design a site at 1200 or higher. This most typically calls up the desk top design. You will set your content and navigation usually in a normal nav layout because your user is probably using a mouse.. Now when you get down around the 900 area, you might be bringing up a tablet, maybe horizontally or so. Here you are probably looking to shrink the nav, reduce column size ect, because you viewer is probably using their fingers for movement.
    But when you get down around the 550 range, you're most likely calling up a mobile device. So you set everything up maybe in a single column style layout.
    Well, what happens when you don't have a design smaller than that? Muse implements view port scaling and fills the lower res device with the smaller of your designs. Primarily because you can't (and definitely shouldn't) design a break point for so many devices as we have today.
    So, having said that, remember, there is no magic pill, no one size is better than the other, because the version your viewers are going to see depends,......depends,....on your design contents.
    Someone may have a design that at 550 looks perfectly fine scaled to a 400 sized device, while others aren't seeing what they want.
    If you don't already, I really recommend watching some of Adobes Jam sessions. Although I don't believe they are as easy to learn from as our videos, they are a loose, informal, Live (and later on video) session with top Adobe people. They cover a lot in an hour, but they aren't structured to just cover an issue, so you need to pick what helps you.
    Hope this helps a bit
    Dj
     
  8. jeffdietz

    jeffdietz Well-Known Member

    51
    0
    I think, unless I am not understanding you correctly, this is exactly what I have been saying this entire time.
    The site looks fine when it hits the actual break points. It fails everywhere in between and doesn't do anything it's suppose to. So when it scales things down it flops it on top of other things, behind things, pushes things off the page that it isn't suppose to, etc etc. Just a straight up hot mess. And that is where the problem lies that I can't seem to fix.

    When it is in those in betweens and it's calling the other size site, it's not scaling anything the way it's suppose to and it just craps all over itself.

    I just spent the last hour having someone from Adobe look at it on the online chat, for them to not be able to solve it at all, and tell me that they have to escalate it up the chain and send me an email response later. And I mean I don't think my sites are very complicated? Pretty basically actually. I had to delete out almost all muse theme widgets except for one mobile menu that I got to work. There is nothing like parallax or animations or nothing. Just text and boxes basically.

    I'll watch that video you posted above and see if I can pick up anything from it, but need to take a break before I throw the computer out the window. :). I have a facebook contest that starts tomorrow at 8am so hopefully the submission page functions well enough for it to work.

    About 80% from my last contest submitted via iphone. So I think it's working there for the most part right now.
     
  9. DjHerold

    DjHerold Moderator Staff Member Advisory Group

    3,459
    255
    jeff, sorry it's been a struggle. I've personally not had any issues with simple sites. But every design is different. It almost sounds like for some reason, the things you are hiding (or showing, because so many forget to hide duplicate items) in one break point or rearranging isn't moving or hiding correctly.
    Hope they can help.
    good luck
    Dj
     
  10. Thatte

    Thatte Guest

    Had similar problems when I used an external proxy server of provider. If you to reset and configure everything again - should be fine!
     
  11. belly123

    belly123 New Member

    1
    0
    you can retrieve data by yourself. There are programs to do that. For exampleIphone Music Manager
    or Iphone Data Recovery Software Free
    I used them few times.They are free and work as good as can be expected. The main thing is to stop using the external hard disk until you use this tool, and avoid writing any files to it.
     
  12. James007

    James007 Active Member

    25
    1
    Hi guys! I'm also having issues with getting my responsive sites to display correctly on different phones. I've changed my smallest breakpoint size to be 400px and it looks fine on a Samsung Note 4, but looks a little goofy on an iPhone 6.

    Is there an up-to-date list of recommended breakpoint sizes in Muse to work with?


    *edit*
    I may have found an answer thanks to this very helpful post:


     
    Last edited: Jan 14, 2017

Share This Page