I’ve had great feedback from a lot of people over the Muir launch this past month, with one resounding question that we honestly didn’t have a good solution for until today.
Does Muir Support Synchronized Scrolling?
Synchronizing scroll position across mobile devices is a tough proposition, because with responsive design, it is completely possible that a design that fits on your desktop screen with no scrolling might be several pages long when the content is flowed to fit on a responsive layout.
The recommendation that I see from most inquiries is:
Why not have all devices scroll to the same position as I touch them?
Want to see the header or footer, no problem–scroll to the top or bottom. The trouble is in the middle. It is near impossible to have things scroll to the same position on the page so you can see an element in the center of the page. It just won’t work. (Know how? Show me a good solution!)
Our recommendation for scrolling support in Muir
USE ANCHOR TAGS!
Yep. Anchor tags. Muir synchronizes your browsing experience across devices whenever the URL changes in Chrome or Firefox. This includes any time an anchor is visited. We have found in our development process that when we want to scroll all of our devices, it is to continually test a certain area of the page to make sure it is rendering properly everywhere.
It’s not too hard to add a simple anchor named #muir and then include that in our test URL in Firefox when we want to bump down to a specific part of the page for continuous testing of pesky html or css rendering on a device.
Simple, yes, but it works. Right now, it’s probably the best option to get you where you want to be on the page consistently. You can use the same anchor and just move it around in your code, or set up development anchors as part of your standard process. One of our designers labels each section of a design as #sec_1 through #sec_x and knows that every major div he can iterate the section anchor in his test url to jump down to that section on devices.
So far, it works great.