One of the more popular features of the Third iteration of the static mobile prototype is the sliding navigation, complete with swipe gesture navigation.

Let's get this in to core. It is pretty much a UI best practice on mobile OS and the one to one gestures are very intuitive.

For the static prototype I used swipe.js which is GPL licensed.

Comments

Bojhan’s picture

Bojhan commented
Issue tags: +Usability, +mobile, +#d8mux

I am definitely for this! Seems like we need a patch that allows for AJAX-on-the-fly loading of pages. Perhaps the likes of sun, JohnAlbin or _nod one can shed light on this one.

yoroy’s picture

yoroy commented
Issue tags: +JavaScript

If that's the case (ajax on the fly loading) then the infinite scroll idea for listing pages would benefit from that as well.

nod_’s picture

nod_
Primary language French
Location Lille
commented

@Bojhan wrong side for the underscore :)

With the new block system that should be pretty easy to implement. Infinite scroll is another beast though. I guess this is postponed until we get our REST-type urls to access blocks and it'll be simple to make. Trying to do something before will be quite messy.

anthonyR’s picture

anthonyR commented

First off, it looks like a really good feature.
I know it's still a prototype, but I noticed you explicitly disabled user zoom in the prototype, which isn't really mobile friendly imo.
Maybe Swipe.js relies on this to work properly for the 1:1 touch mapping?

lewisnyman’s picture

lewisnyman
he/him
commented

Good point Anthony. If you mosey on over to the prototype now you can check it out with zoom enabled. It works ok for me. You might have to zoom out a little bit to do it easily but I think that's acceptable.

anthonyR’s picture

anthonyR commented

@Lewis: Just checked it, yes that's a lot better!

lewisnyman’s picture

lewisnyman
he/him
commented

I've been thinking a lot about how we handle gestures across the whole admin experince and I think using a library like swipes is a bad idea. It's really only geared to provide gestures for one use case and we are going to run in to a ton of issues when the behaviour conflicts with other gestures if we choose to have them. Think swipe to reveal or drag and drop.

I think taking the useful bits of the library but wrapping it in our own framework would be better for us.

lewisnyman’s picture

lewisnyman
he/him
commented

Hi guys,

I've actually been working on an alternative metaphor, I thought it was too hard to actually make a prototype of and I was of right.

This prototype only works on touch devices

This prototype only works 100% on iOS, sorry

altnav.d8mux.org

anthonyR’s picture

anthonyR commented

Lewis: It behaves kind of weird on my iPhone 4 with iOs 5 :D

ry5n’s picture

ry5n commented

@lewisnyman I’m a big fan of this pattern (Luke Wroblewski calls it "Off Canvas"). Plus, Jason Weaver's excellent demo has implementation details that could be helpful in prototyping.

lewisnyman’s picture

lewisnyman
he/him
commented

I'm liking the look of hammer.js, it seems to hit a sweet spot between gesture flexibility and helpfulness

johnalbin’s picture

johnalbin
they/他
Primary language English
Location Taipei, Taiwan
commented
Status: Active » Postponed (maintainer needs more info)

So… no sliding nav? No one is going to actually work a patch for this if the UX is going in a different direction.

effulgentsia’s picture

effulgentsia commented

Just linking to #1260800-9: Kill the overlay for widths below 640 pixels which suggests an idea for using a slide pattern instead of Overlay for navigating between site pages and admin pages. I don't suggest unpostponing this based on that one comment alone; just linking to it for anyone interested.

gmclelland’s picture

gmclelland commented

This probably should be renamed to "Implement ajax drill down horizontal sliding navigation for touch screen devices".

When I think of sliding navigation, I think of something http://srobbin.com/jquery-plugins/pageslide/

Note: we could combine these two techniques as sort of seen on http://www.aids.gov

When viewing on a mobile aids.gov uses a menu button that slides up a drilldown navigation.

I prefer the page slide from the left like http://m.facebook.com does, because that leaves more vertical space to work with.

If you didn't want to use ajax for the menus, then you could use something like http://www.designchemical.com/lab/jquery-plugins/jquery-drill-down-menu-...

We also need to think of how contrib modules could hook into or use these patterns we choose. For example, see #1678106: Mobile Friendly Media Browser

johnalbin’s picture

johnalbin
they/他
Primary language English
Location Taipei, Taiwan
commented
Status: Postponed (maintainer needs more info) » Closed (works as designed)
Issue tags: -#d8mux +d8mux

This issue seems to be superseded by the new toolbar.