[notduncansmith]

I would have it take up the bottom 80-90% of the page. For me, and most people I see using smartphones, you could get away with a drag box that takes up only the bottom 30% or so (the most comfortable place to perform such a gesture with one's thumb), but it makes sense to handle the edge cases. Also, if someone tries to trigger that gesture and miss, the default behavior is going to be "try it again, but starting closer to the edge and higher up".

[dovel]

In the case of having such a large drag box how should I be ensuring the user can still interact with the content of the page. E.g make sure the hitbox isnt over the top of links and that users can still highlight text etc?

[notduncansmith]

I recommend using the excellent Hammer.js[0] library to pick up swipes (since that's the gesture you're looking for). I've put together a small proof-of-concept here[1]. Try it out on your phone.

Alternatively, if you wanted to have some slick dragging action (so that a user could swipe a little, and control the rate at which the menu drawer opens), you could put a smaller (maybe 10-20% width) dragbox along the left-hand-side of the screen, and keep your selectable content to the right of that.

[0] http://eightmedia.github.io/hammer.js/

[1] http://codepen.io/notduncansmith/full/sthyJ/

[dovel]

Thanks for the reply. Great! I will check out hammer.js, I haven't used it before. Have you used snap.js / what do you think of it?

I don't think your demo works by the way! Doesn't seem to include the hammer.js file!