Consider hiding more Safari mobile UI on Safari 7.1

[jonathanolson]

See http://theamazingweb.net/2013/12/19/minimal-ui-viewport-meta-tag/

[samreid]

Note: this feature is for iPhones only, and does not apply to iPads. http://stackoverflow.com/questions/22308768/safari-fullscreen-in-ios-7-1-with-minimal-ui-meta-tag

[jonathanolson]

That's too bad.

Probably still worth including though?

[samreid]

Based on arguments like these, I am skeptical about adding minimal-ui: http://www.mobilexweb.com/blog/ios-7-1-safari-minimal-ui-bugs

For instance, it reserves space in the web app where items can be shown but not touched.

[jonathanolson]

Doesn't look like a significant benefit, I'd also vote to not include. Closing for now.

EDIT: changed "note include" to "not include"

[samreid]

Kathy noticed that some pinterest sites have the bottom region of the screen clickable. I identified that this was due to the minimal-ui declaration. I have been testing minimal-ui with our sims, and it seems like it is working very well, and suitable for our sims. We may still want to do something to ensure nothing is in the top 40px, which is available for drawing but not for interaction. But adding minimal-ui makes it possible to use the navbars in our sims, which was one of the big barriers to use on iphones.

I recommend that we add this to our chipper template, and to all of our sim html files for during development. The new meta viewport rules will read:

<meta name="viewport" content="initial-scale=1,user-scalable=no,maximum-scale=1,minimal-ui"/>

[samreid]

Here is a version of fraction-matcher that uses minimal-ui for testing: http://www.colorado.edu/physics/phet/dev/html/fraction-matcher/1.0.0-dev.14/fraction-matcher_en.html

[samreid]

In discussion with @jonathanolson we decided to push this change to chipper. According to http://www.mobilexweb.com/blog/ios-7-1-safari-minimal-ui-bugs it will have no effect on iPad, so this should be safe. But developers are encouraged to keep their eyes open for any issues this may cause. And each developer can add this to their individual sim html at their convenience. I'll also add this issue to our agenda for discussion on Tuesday in case there are other issues to consider.

[samreid]

minimal-ui added above. Other developers please pull and report any problems you discover.

[samreid]

As Kathy pointed out, we will also have to consider what effect this has on iframed sims, or whether it is important to put the minimal-ui in the parent frame.

[pixelzoom]

@samreid wrote:

I recommend that we add this to our chipper template, and to all of our sim html files for during development.

I recommend that we consider this very carefully before proceeding. And my current feeling is not to use this feature.

According to multiple sources (e.g. http://www.mobilexweb.com/blog/ios-7-1-safari-minimal-ui-bugs )

On landscape, you are in immersive mode; even the iOS status bar is hidden; however, the first 40 physical pixels are available for your document’s canvas but not for interaction

That means no interactive elements in the top 40 pixels. Is PhET prepared to accept that constraint in designs? I doubt it.

And there are other potential issues, like:

• usability concerns for iPhone users who are not familiar with this mode • reported JavaScript error when using minimal-ui on Chrome • relying on a poorly undocumented option that is specific to iPhone+Safari

[pixelzoom]

Usability concern, from http://visuellegedanken.de/2014-03-18/a-follow-up-on-the-minimal-ui-viewport-meta-tag/

It just confuses the user who has no idea what is happening to him and his browser. There is no hint on how you get back the browser ui and if we are honest, you don’t gain that much either. Just a little bit more screen real estate, which – by the way – you’re getting anyway if you start to scroll. But then it’s the known behaviour and you’re initiating it by yourself. That’s much better.

[pixelzoom]

A larger issue is why do we want to do this at all? The majority of PhET sims are not usable on phone-sized devices because they were designed for larger screens.

[samreid]

My apologies, I didn't expect this to be controversial. I have reverted the addition of minimal-ui until we can discuss further.

[samreid]

In my opinion, this problem is worth solving because without "minimal-ui" our sims appear very buggy on iPhone. According to my reading of our analytics, we get about 50% as many iPhone viewers on our webpages and 5% as many on our HTML5 sims (compared to iPads). It wouldn't hurt for someone else to double-check our analytics if it is the foundation for our decision. Other team members have also said that at conferences it is important that passers-by can pull up our sims on their phones to see that they are indeed free and work on mobile devices. I have also tried to show our sims to another developer on my iPhone but had a poor experience that would have been solved by minimal ui. I also think in the future we will want to invest in broader support for phone-sized UX, but even before that in my opinion the above issues warrant spending time investigating fixes like "minimal-ui".

Here is a walkthrough of a typical use case of our simulations with and without minimal-ui on iPhone 5S. First, without minimal-ui: http://www.colorado.edu/physics/phet/dev/html/fraction-matcher/1.0.0-dev.13/fraction-matcher_en.html

Phone is in portrait. Click on the sim html. This appears:

Turn to landscape, this appears:

Choose a screen and play with the sim. All is well. Click something on the navbar, then this occur (and the item you pressed on the navbar doesn't activate):

Press the navbar item again. It doesn't work. All taps in the sim are off by some 100? pixels in the vertical direction and the sim seems very buggy. The top of the screen is obscured and unusable. Cannot use the navbar. User leaves the sim.

Now, with minimal-ui: http://www.colorado.edu/physics/phet/dev/html/fraction-matcher/1.0.0-dev.14/fraction-matcher_en.html

Phone is in portrait. Click on the sim html. This appears:

Turn to landscape, this appears (identical to the above):

Choose a screen and play with the sim. All is well. Click something on the navbar. The navbar works perfectly. The sim continues to function. In my opinion this is a superior user experience for iPhone users.

I think this is a significant enough improvement to user experience to warrant minimal-ui without further changes on our behalf. However, if we are worried that users won't be able to navigate away from the sim or about the top 40px of the screen, we could solve that by putting a 40px tall div at the top of the screen with an icon button that indicates the user can tap there for browser options.

In addition, the 40-px reserved at the top of the screen is not unique to "minimal-ui", it also occurs without minimal-ui when the sim is launched from portrait and changed to landscape (this also has reserved pixels at the bottom of the screen). If you launch the sim when you are already in landscape, it looks like this: With the first screen looking like this: In my opinion this makes the sim too small, navbar text is hard to read and things on the navbar are difficult to tap because they are tiny and close to the browser buttons. Also, encouraging our users to switch to landscape before launching our sims could be difficult.

[samreid]

Here's a note from Kathy after she tested http://www.colorado.edu/physics/phet/dev/html/fraction-matcher/1.0.0-dev.14/fraction-matcher_en.html

Thanks Sam.

Glad it seems like something we can leverage.

It looks like it works well on the example here with fraction matcher.

Will it impact iframe stuff at all? Or is it irrelevant for that.

K

Sent from my iPhone

[samreid]

At yesterday's developer meeting, we decided to add "minimal-ui" to the chipper html template. We also discussed adding all of the meta tags to each simulation's requirejs html file, but that is not as high priority.

[samreid]

Maybe a good point to add tags to each simulation's requirejs html file is if/when we start generating those html automatically. See https://github.com/phetsims/chipper/issues/63

[samreid]

In the above commit, I added minimal-ui to chipper's sim.html template file. I'll close this issue, and move some notes over to phetsims/chipper#63 about updating the individual sim files.

[pixelzoom]

@samreid noted in 7/22/14 developer meeting:

minimal-ui was dropped in iOS8-beta4: https://developer.apple.com/library/prerelease/ios/releasenotes/General/RN-iOSSDK-8.0/

[samreid]

minimal-ui has been removed from the template and sim files, see phetsims/chipper#68. Closing.