7

There are plenty of mobile apps that only work in a single orientation. Landscape (Garageband, lots of games), Portrait (Settings, Phone, Remote, App Store, Twitter, Facebook, lots of games)

What justification is there for not allowing web pages to do the same?

It seems like the same rules should apply. If I'm making a game in a webpage I might want to force a certain orientation, same as a game app. If I'm making a mobile web app or a mobile targeted site it seems like I should be able to force an orientation just like native apps do.

Sure, for a content site letting the user choose is fine but not all web pages are content sites.

Take 2048 for example vs Threes! Threes!, being a native app, forces portrait mode. Why shouldn't 2048 be allowed to do the same thing? That example shows why not allowing a web page to force orientation is particularly bad UX. The game becomes unplayable when in landscape on a phone. Sure, for that particular game maybe it could be resigned to reflow but there are plenty of apps and games for which that's not true and if the page reflows could easily ruin the user's experience.

I know 2048 can't because browsers don't allow pages to force orientation. My question is should they? If apps are allowed to why not web pages?

Improve this question
3
  • 6
    Thanks for introducing me to 2048. Productivity is at an all time low today -_-
    – Paul van den Dool
    Commented Mar 31, 2014 at 9:47
  • Me too. Thanks a lot buddy. I thought this would be a productive day today. :(
    – Tony Bolero
    Commented May 9, 2014 at 6:12
  • On Android at least store and Twitter works with any orientation. On windows 10 store all app should support. It's maybe only a shortcut some dev take on ios.
    – ColdCat
    Commented Dec 27, 2017 at 23:31

3 Answers 3

Reset to default
1

In matters of UX, a webpage IS allowed to force a certain orientation. The problem is, browsers are not allowed to access a phone's native functions like the camera and the accelerometer.

It is expected webapps will have the same access as native apps in the near future, meaning phones will give developers APIs to access the camera and the accelerometer, we just have to wait for it a little while longer.

So the fact that webapps can't force certain orientations doesn't have anything to do with it being a bad UX. It's just that phone developers are hesitant in giving the internet so much access on phones (hacking).

Improve this answer
3
  • To clarify, what Paul is saying is that when I'm on a website and turn my phone horizontal, the browser changes it's dimensions and the website has to follow. To literally keep the same orientation when I turn my phone my website would have to read the pixel width and rotate the page when it detects the browser is in a horizontal pixel width.
    – Drew Beck
    Commented Apr 10, 2014 at 8:20
  • Also: Form Invaders does! Check it out: typeform.com/forminvadersmobile
    – Drew Beck
    Commented Apr 10, 2014 at 8:23
  • 1
    Paul, browsers are allowed to access to the accelerometer data ! (iOS at least).
    – Pop Flamingo
    Commented Jun 8, 2014 at 18:32
1

What justification is there for not allowing web pages to do the same [only work in a single orientation]?

Phone manufacturers or the browser-makers have been slow to implement this for either technical or business reasons, which may or may not be justified depending on your point of view... BUT! deviceorientation events can now be used (at least partially) according to caniuse.com/deviceorientation

I know 2048 can't [respond to device orientation] because browsers don't allow pages to force orientation. My question is should they? If apps are allowed to why not web pages?

I suppose if deviceorientation works well, 2048 could respond to device orientation with a little JavaScript / responsive media queries.

The better question may be: Is it better UX to respond to device orientation or only work in one orientation? My feeling is that multiple orientations should only not be supported if (a) the UI falls apart with another orientation, or (b) there just aren't enough development resources. These two links offer some more advice:

Improve this answer
5
  • Yep, I wouldn't be asking this question if I wasn't making an app (game) that requires a certain orientation. All I can do now is use CSS to say "rotate the phone to landscape" whereas ideally I'd just like the page to show up in landscape just like so many native games do.
    – gman
    Commented May 9, 2014 at 17:59
  • 2
    I suppose you could just rotate the entire thing with CSS. jsfiddle.net/luken/UuE43
    – Luke
    Commented May 12, 2014 at 19:53
  • I tried that but all kinds of problems came up. First it doesn't rotate as expected, it's off the screen NxN pixels, the amount is different per device. Second you've got to manually set the viewport otherwise it says in small portrait viewport mode. Then on top of that all kinds of things broke, Input no longer works because the input events are not rotated, relative input positions don't work because no libraries take rotation into account. Usually they check absolute positions all the way up to the root but those don't work with rotation. Also, stuff moves in un-expected ways :(
    – gman
    Commented May 12, 2014 at 20:16
  • Yeah, I didn't expect it would be that easy! I think that for a game it's completely fine UX to just pause the game and say "rotate phone to landscape to resume". Now the rotation becomes a feature.
    – Luke
    Commented May 13, 2014 at 17:09
  • I did that too. Unfortunately many people have their orientation locked. For a native game that's not a problem but for a web game that sucks. They have to go over to settings, unlock, play the game, then later re-lock. It's annoying :(
    – gman
    Commented May 14, 2014 at 6:38
0

While technical limitations is a large part, the other part is due to the nature of designing for the web and workflow choices.

We don't typically build websites/apps for specific viewport sizes anymore, but some native apps are still built that way. Web designers/developers are used to thinking about variable viewports, so it fits into our workflows better than it might in a native app.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.