6 ms·

iOS 7.1 Mobile Safari Minimal UI

151 points by __DarkBlue 13y ago

The Mobile Safari 'minimal-ui' property has landed... and it's awesome!

dictum 13y ago
Because every submission should have a pessimistic, cynical reply: I expect this to be used to its full potential by phishing sites. Aside from that: finally.
- stingraycharles 13y ago
  How would that work, a full-screen emulation of safari in js?
  - selectodude 13y ago
    I would think a full-screen emulation of a bank app or something. Phishing email sends you to a link that "opens" your bank app and asks you to sign in.
  - dictum 13y ago
    It would be trivial to imitate Mobile Safari's chrome with "actuallegitdomain.com" in the address bar instead of "actuallegitdomain.com.ooo.ag" or resorting to IDN tricks (since most browsers, and I think Mobile Safari too, show the xn--wh4t3v3r.com version).
- Mtinie 13y ago
  Christian Cantrell, from Adobe, demonstrated a similar phishing attack vector: https://www.youtube.com/watch?v=XQXFO9NNO8g https://www.youtube.com/watch?v=XQXFO9NNO8g "This won't end well..."
rblatz 13y ago
It's about time, since Safari on iOS 7 broke the hacks that hid the browser chrome we've been offering a substandard experience on iOS in our mobile image spinner. This allows us to get back to the experience available on android, desktop and older versions of iOS.
- ihuman 13y ago
  Which substandard experience are you talking about? Users never been able to hide the browser UI before, unless the user added the website as a shortcut on the springboard.
  - untog 13y ago
    You (as a developer) could scroll by 1px to remove the address bar in iOS6. It was useful to give your page it's own top navigation or just have more content visible. That was not possible in iOS7.
    - ketralnis 13y ago
      > give your page it's own top navigation So you want to fill the user's limited screen real estate with your own useless crap (usually "download our app and subscribe to our emails!"), and you're worried that the actual functional bits of the browser are getting in the way of your doing that?
      - erichate 13y ago
        yes, in our experience building games this has been a major issue / concern for iphone players.
        err4nt 13y ago
        because for interacting with web apps those default browser buttons are just as 'dangerous' as ads for the user accidentally tapping them and navigating away from the page
      - untog 13y ago
        Yes, let's apply blanket rules to every experience. Sigh. There are plenty of uses for fixed navigation that aren't spammy attempts to force app downloads. Users like them. Not all users, but most.
  - 13y ago
amirmansour 13y ago
This makes me happy. Thanks for the tip.
grinich 13y ago
Now if only we could get rid of the hamburger button...
- RexRollman 13y ago
  The first time I remember seeing it was on Chrome. Who was the first to use it? I personally don't think it has much value, in and of itself, as a graphic.
- jordanlev 13y ago
  What would you replace it with? I struggle with how to offer nav menus on narrow screens... I'm not in love with the hamburger icon, but it seems to have become somewhat of a standard (which I think is more important for UI elements than pure aesthetics). I'm always on the lookout for alternate solutions to try!
- stefan_kendall3 13y ago
  It's become an idiom. Stoplights may not be the best way to control intersections, but you know what to do when you see one.
- __DarkBlue 13y ago
  I'm ashamed to admit that it took me a while to figure out what the "hamburger button" is. Never heard it called that before. :-)
bluetidepro 13y ago
There were some good comments on Designer News about this: https://news.layervault.com/stories/17576-viewport-meta-tag-minimalui https://news.layervault.com/stories/17576-viewport-meta-tag-... Here are a few comments below that I strongly agree with why this is a BAD change by Apple. This change kills the browser UX. > "This reminds me of the era of chromeless popup windows. I do not like this move by Apple. A site should not be capable of deciding to make changes to a users browser UI. Especially changes that aren't explained. I'm actually disappointed this exists." > "Think about usability: the user will not have the back, the share and the tabs buttons available by default. If you are creating an inmersive game or a webapp with the main navigation controls then minimal-ui is a good idea; for content- and document-based websites, it might not be nice for the user."
- __DarkBlue 13y ago
  I agree that there are potential issues with this. But I also believe that it is a useful control to put into the hands of designers. There are use-cases where hiding the chrome makes absolute sense - but the designer should always ensure that there's at least one control that will provide for navigation in those cases where she has opted for a minimal UI.
  - RexRollman 13y ago
    I disagree. The desire to placate designers has already caused HTML to become increasing complex and now our web browsers are even downloading fonts from the Internet. If designers really want to control presentation, they should look into another format, like PDF.
    - dictum 13y ago
      You can disable CSS or use a user stylesheet to your liking. That's the amazing thing about HTML + CSS + JS, not available to PDF or any other format/medium in common use.
      - Turing_Machine 13y ago
AshleysBrain 13y ago
It's definitely useful, but also a bit of a shame they went non-standard. The Fullscreen API can do this in a cross browser way and with more features.
untog 13y ago
This fixes one of my biggest annoyances with iOS7 Safari - that it 'steals' 50px or so of tappable space at the bottom of the screen. If you try to use it, it shows the bottom bar instead of allowing you to interact with the page. That said, this is kind of not-good-at-all. An individual page shouldn't be able to control UI like this, IMO. A lot of the changes Apple made to Safari in iOS7 were bad ones, and they seem to have invented a new meta tag to get around admitting that they mis-stepped.
- __DarkBlue 13y ago
  Yes, if the browser hid the chrome by default that would be the best possible UI. It would also ensure a consistency across all web-sites.
  - xahrepap 13y ago
    Chrome on Android does that. I hate it. Whenever I scroll a line or two too far and want to scroll back, I have to go twice as far because the chrome decides to come back. I would welcome an alternative though.
    - bergie 13y ago
      It is actually a bit worse than that. The Chrome display changes on scroll also fire a window resize event, causing pages that use this information to reflow when you just scrolled. I suppose they were thinking people don't ever size anything based on window height?
- supercoder 13y ago
  Agree in principle but I think with the web being so varied it's hard to have a one size fits all. Certainly it shouldn't be abused for general websites, but for sites that represent something that's more 'app like' say a game, it's a fair way of indicating to the browser we'd like the UI removed more than not.
- erichate 13y ago
  agreed is a much needed / long overdue improvement to the web experience on iPhone / iPad mini
jbrooksuk 13y ago
"Not Found". Looks like it's been taken down by HackerNews!
- __DarkBlue 13y ago
  It's back up now. Nothing to do with HN, I think the host messed up.
kosso 13y ago
Hallelujah. Now, give us a way to stop the swipe-to-go-back gesture. Or get rid of it all together, like they did on Android.
Geee 13y ago
Damn, there's a bug. In the minimal-ui mode, if you press the url bar, then 'share' -> 'add to home screen', and then 'cancel', the page is frozen and you can't tap it to return the control to the web page. You need to press back once or do something else to get rid of the thing.
tiziano88 13y ago
Sounds similar to the "immersive full-screen" mode on Android, which is supported by Chrome and also other apps (ebook readers, games, etc...).
jcruz 13y ago
Is this different than using <meta name="apple-mobile-web-app-capable" content="yes">?
- TazeTSchnitzel 13y ago
  That requires adding the page to the home screen.
badman_ting 13y ago
"As you can see, some content just cries out for a full-screen display. Now, with minimal-ui, we can do just that." True but this cannot be done programmatically, only with the meta value when the document loads, so you better have that sort of content in its own document.
- __DarkBlue 13y ago
  "this cannot be done programmatically" - are you sure about that? I think any half-decent programmer would be able to do this programmatically. A simple logic condition (if-then-else) should cover it.
  - badman_ting 13y ago
    Gotta love HN.
shaunol 13y ago
This doesn't appear to do anything for me on my iPad, is this an iPhone only thing? This is great for me as a developer for an internal-use website that primarily targets tablets.
- __DarkBlue 13y ago
  Yes, this applies to the iPhone only according to the release notes.
cseelus 13y ago
From the source: "It’s not appropriate for every web page, but it’s great for image galleries and web-sites that mimic mobile apps." I think this sums it up quite nicely
thekingshorses 13y ago
I use it at http://hn.premii.com/ http://hn.premii.com/ I can't believe they didn't tested orientation change with minimal-ui. Also, in landscape mode, you loose top ~30px area. If you tap there, it will show safari chrome, and your app won't receive tap.
- alansk 13y ago
  Hi, I thought I should tell you that I actually stopped using your site after this feature was added, because previously I could tap the bottom of the screen to get the bottom bar up, but now I can't. You might lose other users because of this, I guess.
craigc 13y ago
Am I the only person who thinks that nearly every feature added in iOS 7 and iOS 7.1 is pretty terrible? This is just another example. It's great in theory, but this should not be something that is left up to the content creators to decide. It provides an inconsistent user experience for the person USING the browser. Imagine if you were using Chrome or Safari on desktop and you had to guess if the url bar and back button would be there every time you clicked a link to go to a new page. I suppose it is fine if you want people to feel like they are trapped on your page. Awful.
- coin 13y ago
  I could not agree more. Let the user decide if they want fullscreen. We already have to put up with disabled zoom, mobile "optimized" site with missing content, and annoying animations.
gcb0 13y ago
Why it's a site controlled tag and not a browser option? This is crazy
- __DarkBlue 13y ago
  I'd prefer a browser option myself too. But, this is what we've got for now.
zomg 13y ago
kudos for using sdf.org, they've been around for a long, long time :)
- __DarkBlue 13y ago
  I've been with SDF for years. I cut my Unix teeth on their servers. They're a fantastic host and I am very impressed that their "Meta Array" coped with the influx of HN traffic without skipping a beat. I've been periodically checking the site, with an empty cache, while this link was on the HN front page and page delivery was consistently sub-1s. Theirs is extremely cheap hosting too. I have nothing but praise for the SDF.
deaquino 13y ago
I'm getting this error on Chrome: The key "minimal-ui" is not recognized and ignored.
- __DarkBlue 13y ago
  That makes sense, the key is only recognised by the Mobile Safari on the iPhone.

151 points by __DarkBlue 13y ago

The Mobile Safari 'minimal-ui' property has landed... and it's awesome!

Because every submission should have a pessimistic, cynical reply: I expect this to be used to its full potential by phishing sites. Aside from that: finally.

stingraycharles 13y ago
How would that work, a full-screen emulation of safari in js?
- selectodude 13y ago
  I would think a full-screen emulation of a bank app or something. Phishing email sends you to a link that "opens" your bank app and asks you to sign in.
- dictum 13y ago
  It would be trivial to imitate Mobile Safari's chrome with "actuallegitdomain.com" in the address bar instead of "actuallegitdomain.com.ooo.ag" or resorting to IDN tricks (since most browsers, and I think Mobile Safari too, show the xn--wh4t3v3r.com version).
Mtinie 13y ago
Christian Cantrell, from Adobe, demonstrated a similar phishing attack vector: https://www.youtube.com/watch?v=XQXFO9NNO8g https://www.youtube.com/watch?v=XQXFO9NNO8g "This won't end well..."

rblatz 13y ago

It's about time, since Safari on iOS 7 broke the hacks that hid the browser chrome we've been offering a substandard experience on iOS in our mobile image spinner. This allows us to get back to the experience available on android, desktop and older versions of iOS.

ihuman 13y ago
Which substandard experience are you talking about? Users never been able to hide the browser UI before, unless the user added the website as a shortcut on the springboard.
- untog 13y ago
  You (as a developer) could scroll by 1px to remove the address bar in iOS6. It was useful to give your page it's own top navigation or just have more content visible. That was not possible in iOS7.
  - ketralnis 13y ago
    > give your page it's own top navigation So you want to fill the user's limited screen real estate with your own useless crap (usually "download our app and subscribe to our emails!"), and you're worried that the actual functional bits of the browser are getting in the way of your doing that?
    - erichate 13y ago
      yes, in our experience building games this has been a major issue / concern for iphone players.
      - err4nt 13y ago
        because for interacting with web apps those default browser buttons are just as 'dangerous' as ads for the user accidentally tapping them and navigating away from the page
    - untog 13y ago
      Yes, let's apply blanket rules to every experience. Sigh. There are plenty of uses for fixed navigation that aren't spammy attempts to force app downloads. Users like them. Not all users, but most.
- 13y ago

amirmansour 13y ago

This makes me happy. Thanks for the tip.

grinich 13y ago

Now if only we could get rid of the hamburger button...

RexRollman 13y ago
The first time I remember seeing it was on Chrome. Who was the first to use it? I personally don't think it has much value, in and of itself, as a graphic.
jordanlev 13y ago
What would you replace it with? I struggle with how to offer nav menus on narrow screens... I'm not in love with the hamburger icon, but it seems to have become somewhat of a standard (which I think is more important for UI elements than pure aesthetics). I'm always on the lookout for alternate solutions to try!
stefan_kendall3 13y ago
It's become an idiom. Stoplights may not be the best way to control intersections, but you know what to do when you see one.
__DarkBlue 13y ago
I'm ashamed to admit that it took me a while to figure out what the "hamburger button" is. Never heard it called that before. :-)

bluetidepro 13y ago

There were some good comments on Designer News about this: https://news.layervault.com/stories/17576-viewport-meta-tag-minimalui https://news.layervault.com/stories/17576-viewport-meta-tag-... Here are a few comments below that I strongly agree with why this is a BAD change by Apple. This change kills the browser UX. > "This reminds me of the era of chromeless popup windows. I do not like this move by Apple. A site should not be capable of deciding to make changes to a users browser UI. Especially changes that aren't explained. I'm actually disappointed this exists." > "Think about usability: the user will not have the back, the share and the tabs buttons available by default. If you are creating an inmersive game or a webapp with the main navigation controls then minimal-ui is a good idea; for content- and document-based websites, it might not be nice for the user."

__DarkBlue 13y ago
I agree that there are potential issues with this. But I also believe that it is a useful control to put into the hands of designers. There are use-cases where hiding the chrome makes absolute sense - but the designer should always ensure that there's at least one control that will provide for navigation in those cases where she has opted for a minimal UI.
- RexRollman 13y ago
  I disagree. The desire to placate designers has already caused HTML to become increasing complex and now our web browsers are even downloading fonts from the Internet. If designers really want to control presentation, they should look into another format, like PDF.
  - dictum 13y ago
    You can disable CSS or use a user stylesheet to your liking. That's the amazing thing about HTML + CSS + JS, not available to PDF or any other format/medium in common use.
    - Turing_Machine 13y ago

AshleysBrain 13y ago

It's definitely useful, but also a bit of a shame they went non-standard. The Fullscreen API can do this in a cross browser way and with more features.

untog 13y ago

This fixes one of my biggest annoyances with iOS7 Safari - that it 'steals' 50px or so of tappable space at the bottom of the screen. If you try to use it, it shows the bottom bar instead of allowing you to interact with the page. That said, this is kind of not-good-at-all. An individual page shouldn't be able to control UI like this, IMO. A lot of the changes Apple made to Safari in iOS7 were bad ones, and they seem to have invented a new meta tag to get around admitting that they mis-stepped.

__DarkBlue 13y ago
Yes, if the browser hid the chrome by default that would be the best possible UI. It would also ensure a consistency across all web-sites.
- xahrepap 13y ago
  Chrome on Android does that. I hate it. Whenever I scroll a line or two too far and want to scroll back, I have to go twice as far because the chrome decides to come back. I would welcome an alternative though.
  - bergie 13y ago
    It is actually a bit worse than that. The Chrome display changes on scroll also fire a window resize event, causing pages that use this information to reflow when you just scrolled. I suppose they were thinking people don't ever size anything based on window height?
supercoder 13y ago
Agree in principle but I think with the web being so varied it's hard to have a one size fits all. Certainly it shouldn't be abused for general websites, but for sites that represent something that's more 'app like' say a game, it's a fair way of indicating to the browser we'd like the UI removed more than not.
erichate 13y ago
agreed is a much needed / long overdue improvement to the web experience on iPhone / iPad mini

jbrooksuk 13y ago

"Not Found". Looks like it's been taken down by HackerNews!

__DarkBlue 13y ago
It's back up now. Nothing to do with HN, I think the host messed up.

kosso 13y ago

Hallelujah. Now, give us a way to stop the swipe-to-go-back gesture. Or get rid of it all together, like they did on Android.

Geee 13y ago

Damn, there's a bug. In the minimal-ui mode, if you press the url bar, then 'share' -> 'add to home screen', and then 'cancel', the page is frozen and you can't tap it to return the control to the web page. You need to press back once or do something else to get rid of the thing.

tiziano88 13y ago

Sounds similar to the "immersive full-screen" mode on Android, which is supported by Chrome and also other apps (ebook readers, games, etc...).

jcruz 13y ago

Is this different than using <meta name="apple-mobile-web-app-capable" content="yes">?

TazeTSchnitzel 13y ago
That requires adding the page to the home screen.

badman_ting 13y ago

"As you can see, some content just cries out for a full-screen display. Now, with minimal-ui, we can do just that." True but this cannot be done programmatically, only with the meta value when the document loads, so you better have that sort of content in its own document.

__DarkBlue 13y ago
"this cannot be done programmatically" - are you sure about that? I think any half-decent programmer would be able to do this programmatically. A simple logic condition (if-then-else) should cover it.
- badman_ting 13y ago
  Gotta love HN.

shaunol 13y ago

This doesn't appear to do anything for me on my iPad, is this an iPhone only thing? This is great for me as a developer for an internal-use website that primarily targets tablets.

__DarkBlue 13y ago
Yes, this applies to the iPhone only according to the release notes.

cseelus 13y ago

From the source: "It’s not appropriate for every web page, but it’s great for image galleries and web-sites that mimic mobile apps." I think this sums it up quite nicely

thekingshorses 13y ago

I use it at http://hn.premii.com/ http://hn.premii.com/ I can't believe they didn't tested orientation change with minimal-ui. Also, in landscape mode, you loose top ~30px area. If you tap there, it will show safari chrome, and your app won't receive tap.

alansk 13y ago
Hi, I thought I should tell you that I actually stopped using your site after this feature was added, because previously I could tap the bottom of the screen to get the bottom bar up, but now I can't. You might lose other users because of this, I guess.

craigc 13y ago

Am I the only person who thinks that nearly every feature added in iOS 7 and iOS 7.1 is pretty terrible? This is just another example. It's great in theory, but this should not be something that is left up to the content creators to decide. It provides an inconsistent user experience for the person USING the browser. Imagine if you were using Chrome or Safari on desktop and you had to guess if the url bar and back button would be there every time you clicked a link to go to a new page. I suppose it is fine if you want people to feel like they are trapped on your page. Awful.

coin 13y ago
I could not agree more. Let the user decide if they want fullscreen. We already have to put up with disabled zoom, mobile "optimized" site with missing content, and annoying animations.

gcb0 13y ago

Why it's a site controlled tag and not a browser option? This is crazy

__DarkBlue 13y ago
I'd prefer a browser option myself too. But, this is what we've got for now.

zomg 13y ago

kudos for using sdf.org, they've been around for a long, long time :)

__DarkBlue 13y ago
I've been with SDF for years. I cut my Unix teeth on their servers. They're a fantastic host and I am very impressed that their "Meta Array" coped with the influx of HN traffic without skipping a beat. I've been periodically checking the site, with an empty cache, while this link was on the HN front page and page delivery was consistently sub-1s. Theirs is extremely cheap hosting too. I have nothing but praise for the SDF.

deaquino 13y ago

I'm getting this error on Chrome: The key "minimal-ui" is not recognized and ignored.

__DarkBlue 13y ago
That makes sense, the key is only recognised by the Mobile Safari on the iPhone.