Enforce or assume an orientation for the layout of a mobile web application

Question

When designing a mobile layout in a web application, is it fine to assume a given orientation (horizontal or vertical) or to ask to the user to adopt a specific orientation?

I have seen several native gaming applications that look tailored to an horizontal layout, but i do not know wether this is acceptable also for a web layout.

I assume that a web layout should work with the wrong orientation as well, since portability is more important, but then some means of encouraging the user to adopt the right orientations should be used.

As far as i can see, the orientation may have a big impact on the design of an effective interaction.

Edit: Since several answers target games, i underline that i am not asking about a web game, but a generic web application. I compare with games just because games are apps as well.

Answer 1

Tailoring for a specific orientation in a phone web-app is going to cause problems for some sub-set of your users that are forced to use the other mode.

Here are a couple of examples showing situations which require a user to use their phone in one orientation or the other, regardless of the way the app thinks it should be used. This list is non-exhaustive, but if you build your application to only work in one of the two orientations, you will fail these users.

Horizontal

• Phone has hardware slide out keyboard (e.g. Motorola Droid)
• Phone is laid out propped up on table whilst doing something else

Vertical

• Phone is being held whilst walking down street
• Only one hand is available to hold phone

The correct solution is to make sure your application works correctly at different sets of horizontal resolutions. e.g. have one layout at approx 400 horizontal pixels, another one at approx 700 horizontal pixels and a third at approx 1000 horizontal pixels.

On the web this is usually done via responsive design.

Answer 2

Most mobile devices are portrait mode so assuming it to be default is probably safe. But there are some apps or games which don't look good in portrait mode and for that asking the user to select the mode will be good choice. But if some game cannot be played at all in portrait mode I think opening it in landscape mode will be better option.

Answer 3

According to this article 90% of the people they observed on the street hold their device in a portrait mode.

However, I can see where some people can prefer holding their phone in landscape mode when typing for the buttons are larger and it best represents a normal keyboard. But when typing a long story, in portrait mode you'll see more screen and you'll be able to read more of what you type.

So you could tailor it for the larger part of the crowd, but I think it should depend on the (web)application. Some games disable the portrait mode, because their game is best viewed in landscape mode. For example, in Plants vs. Zombies you'll have more oversight when in landscape mode.

While candy crush offers more oversight when in portrait mode.

Most mobile applications will work best in portrait mode because the vertical height available improves the readability of text and forms. Applications like Facebook and Twitter work best in this orientation because the feed is easier read top to bottom rather than left to right.
Only if landscape mode would better suit the applications needs will I go for landscape.
And more-over, I think people will decide for themselves if they prefer a certain orientation.

Answer 4

A game is tailored for horizontal orientation when they want to show more horizontal landscape (think of a racing game). But in a web app you show information vertically, that's why you scroll the web app vertically. Although it's not a hard rule, but a web app needs more vertical landscape. So locking it vertically will make it look good. And it's always easier to use a web app with one hand.

For all kinds of apps, if you have to think, choose vertical.

Answer 5

A landscape mode is preferable for games only when the complete scene is being used for gameplay and there's less space allocated for HUD. The HUD doesn't have dedicated 'match-parent' width in landscape mode, as seen in Plant V/s Zombie or angry birds.

While the games which depends on showing more and more info in HUD, such as score, opponent score etc and doesn't need too much space for gameplay(or can have scrolling background) such as board games, makes more sense when they're in portrait mode. UI Based games, such as a Quiz game, makes more sense when they're in portrait, since we can allocate a dedicated space for header and footer HUD.

In the end it's all about using up the space properly. If you think you can better use it in a particular orientation, then that's the one for your game. We follow the same principle(Mostly dependent on HUD) to decide the orientation for the game. And we do not give any option to the user to change the orientation. Flipping screen gives bad experience, especially when the game is in progress and feels even bad when the game is time-bound.

Answer 6

Is it fine to assume a given orientation (...) ?

Definetly not, you can't know how your user is holding his smartphone.

(...) ask to the user to adopt a specific orientation ?

I think asking the user to change his habit is not a good thing in itself. But if in your case the portrait mode is providing a really bad experience, you could have something like :

It's better to be honest, you're not asking the user to do something because you're lazy but because there is things that are impossible in portrait orientation.

I compare with games just because games are apps as well.

If you're talking about a native app, there is no problem to use a specific orientation.

Why it is not natural to force landscape for a web app ?

When a user launch an app, chances are he's doing it from the main screen so he's not doing anything else yet. I mean he's not coming from Google (portrait) nor a blog (portrait too). He's going to use an application, which he knows, is a tool and not "just" a website. There is no antecedents and he's used to see native apps working only in landscape mode.

On the other side, when he launch his mobile browser (which is an app) he's going to navigate in portrait mode (I assume most of the people hold their phone this way). So he'll go to Facebook (portrait), then Twitter (portrait), then Gmail (portrait) then to Google (portrait), type something to find your web app and come across a blog (portrait) which has an article about your product. Finally he's here and he's asked to turn his phone, which is clearly not usual for a website. So it's in his own rights to ask "why" ? Why are you asking this to me when I can navigate everywhere else without any problem ?

Let's be honest, I think most people will turn their phone without wondering if you ask them to because they are curious and at least, they are already here. But for the others it's better to have a message explaining the why.

Btw, here is an interesting article about device orientation : http://uxdesign.smashingmagazine.com/2012/08/10/designing-device-orientation-portrait-landscape/