Hacker News new | past | comments | ask | show | jobs | submit login
iOS 7.1 Mobile Safari Minimal UI (darkblue.sdf.org)
151 points by __DarkBlue on March 18, 2014 | hide | past | favorite | 69 comments

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.

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.

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.

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.

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?

agreed is a much needed / long overdue improvement to the web experience on iPhone / iPad mini

I think this only applies to the iPhone. I don't think it has any affect on the iPad Mini.

I could be wrong, thought I had tested it earlier and saw it worked for a mini too.

Cool. I didn't know that.

There were some good comments on Designer News about this: 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."

It only concerns me that the browser chrome is removed entirely. At very least the status bar should remain to give the user an obvious "system" element to touch to return to the full chrome.

The screenshots in this article are deceptive. What the meta tag does is make Safari always look how it normally looks when you scroll down from the top of a web page. So, in portrait mode, there will be a small top bar showing the website URL. In landscape mode, there will be no top bar at all. Here's a screenshot from the other commenter's website on my iPhone:


have you tried it? don't be concerned it is very easy for a user to get the ui back by scrolling up. If you haven't hit any sites yet try ours here http://www.freeriderhd.com

before this change, playing our game was a real pain on iPhone this was a much needed improvement.

Right, like in a web app on the home screen.

Yes. PLEASE don't use this for regular documents. It's only for games and "web apps".

Good luck with that. Just look at home many crappy mobile "optimized" sites are out there.

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.

Putting "control in the hands of designers" gave us flashing ads, pop-up ads, pop-under ads, pop-up ads again but floating, etc. Also Flash intros, disabling the back button, "infinite scroll", and enough other anti-patterns that I would run out of fingers and toes counting them all. I have recently returned to using NoScript on my desktop browser, because ABP and Ghostery together still did not provide enough defense versus web designers.

There is no way this "feature" is not going to somehow be abused to annoy users.

That was putting control in the hands of the marketers, not necessarily designers.

Certainly true of the ad's. But, IMHO, it's designers who seem to love the infinite scrolling and other gimmickry.

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.

> "If designers really want to control presentation, they should look into another format, like PDF."

As a designer, I can't help but read that and crack up. You have got to be joking, right?

He's Rex Rolling you...

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.

In Mobile Safari?


Were they thinking that, by making it harder to use the chrome to leave the site, the user is encouraged to and more likely to stay on the site...?

But this is Apple after all, one of the biggest adherents to the "fashionable minimalism" trend, so it's not that surprising.

Making good UIs on a small screen is difficult, but I don't think the "hide everything and make it non-obvious and hard to discover" school of thought is the right way to go. I'll gladly sacrifice a small amount of screen space to put some useful controls there (or a reminder that there are more controls), instead of trying to maximise the area the content takes --- which is very similar to a television where you can't change the channel easily, and are just being force-fed content to consume.

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.

Christian Cantrell, from Adobe, demonstrated a similar phishing attack vector: https://www.youtube.com/watch?v=XQXFO9NNO8g

"This won't end well..."

How would that work, a full-screen emulation of safari in js?

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).

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.

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.


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.

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.

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.

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.

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.

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.

> 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?

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.

yes, in our experience building games this has been a major issue / concern for iphone players.

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

We have a 360 degree virtual tour that allows people to view a car online before buying it. On mobile there is a limited amount of screen space and there was a lot of wasted space for browse chrome that would to our users seemingly randomly hide and popup. There were ways to work around this on earlier versions by scrolling the page with js.

I use it at 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.

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.

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

That requires adding the page to the home screen.

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.

Yes, this applies to the iPhone only according to the release notes.

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

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.

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.

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!

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. :-)

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

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

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

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


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.

"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.

"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.

Gotta love HN.

This makes me happy. Thanks for the tip.

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

That makes sense, the key is only recognised by the Mobile Safari on the iPhone.

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

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

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

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.

Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact