A Follow Up On The Minimal-UI Viewport Meta Tag

My post on the new viewport meta tag minimal-ui was quite popular, but equally controversial. Some love the addition by Apple and some expressed their concerns regarding the users experience.

I for one was pretty excited about minimal-ui at first but after some thinking about it I have to say it might not be the best choice for the average site. And here is why.

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.

Nevertheless I think minimal-ui can be a used if you’re building a web app and there might be some other edge cases in which it might make sense.

In my opinion this option should be on the client side. It would be a perfect setting for mobile Safari. So the user could switch to minimal-ui-mode on purpose.

Another code-related problem is that Chrome is showing a Javascript error if you use minimal-ui. That doesn’t alter your sites behaviour but is by all means not a nice thing and does actually bother me a lot. And I’m probably not the only dev who thinks that way.

The key "minimal-ui" is not recognized and ignored. 

But the Chrome team is already on that one. Chrome Canary isn’t showing the error any more.

So before blindly adding minimal-ui to you site think about what you gain and what you might lose. Worst case: Your users.

Viewport Meta Tag: Minimal-UI

With the introduction of iOS 7.1 Safari understands a new viewport meta tag which automatically reduces the mobile Safari ui to a minimum. I think it’s a great addition and hope other browsers will support it in the future, too.

<meta name="viewport" content="width=device-width, minimal-ui">

Here is my blog before and after adding minimal-ui:

minimal-ui-example

Hint: As a user you can get the menu bar back by tapping on the url.

Update: I wrote a follow up post explaining why minimal-ui might not be such a good idea.