mobile

[stevenhao]

Cluelist

• new york times-like view of clue list in a scrollview (hiding the actual grid)

MobileGridControlsV2

Because the onscreen keyboard (in both android and iOS) comes with nasty things like autocomplete, useless headers, and unnecessary height on each key, we should make our own keyboard in react!

App-ness

These are a good set of guidelines that should be followed: https://web.archive.org/web/20151103001838/http://www.luster.io/blog/9-29-14-mobile-web-checklist.html

Important ones:

• position: fixed / no overscrolling
• fixed layout (toolbar, grid, )
• no contextmenu / long tap / selection
• disable zooming on the page, but allow grid to be zoomed in?
• native app-like multi-modal view w/ transitions (e.g. when navigating between home page, game, and within game, grid, chat, cluelist)

[stevenhao]

mostly done as of 740a9030ac8481026349bbbac037941d64e01909..f2fb3b9a50511e34b72beb151b1f76e22cc006a6

[stevenhao]

just reverted a lot of those changes in 08195a1. Will be closing this ticket because it's outdated.

Summary of my reasoning:

trying to make a web app behave like a native app is hard for several reasons

• different browsers behave differently (safari, chrome, opera, in-app browser e.g. messenger, slack)
• different platforms (ios, android) behave differently
• different versions of the OS have different behavior
• overriding the native keyboard is just a bad idea since it's jarring and hard to make it a smooth UX

the main roadblocks are:

• overriding browser defaults is not always possible
  • for example, you can't easily disable pinch-zooming in newer versions of ios safari
  • can't override swipe-to-go-back gesture
  • this resulted in really jarring behavior when pinching, because the app would try and fail to prevent the default zoom behavior, while also implementing its own pinch handlers.
• something about passive listeners and varied compatibility

my learnings:

• if you want your app to feel like a mobile app, just make it a native app. hacking html will not work. even if it works temporarily, you'll have to keep maintaining it as new browser / OS versions get released
• if you're going to use html, try to override default behavior in as few places as possible, to make the UX intuitive