Designing for landscape mobile view

Question

A lot of RWD websites cater for 3 major breakpoints (phone, tablet, desktop) and make the design fluid between that. However, the thing that's hardly ever included is the landscape view. Rotate your phone into landscape and the website usually falls apart. Often the problem doesn't lie on the horizontal axes, but on the vertical one: there is simply not enough height to cater for the content.

How are you dealing with this? Do you include landscape view in your design process? How, and what are the biggest problems you came across?

Answer 1

On the last project I was working with, we've just decided to scale the 320 view until 480. Of course, there can be problems with not enough vertical real estate, but I think the simplest solution is to think about that when designing the 320 view and make the content appear as high as possible.

Another issue - swiping down is a really natural gesture, so I guess as long as the user can see some preview/part of the content at the first sight, it's not a problem.

I wouldn't go into too much trouble with 480 breakpoint - the more breakpoints you have, the more screens there are to design ;)

Answer 2

The vertical space is what it is. The 320 pixels of the iPhone is just not enough for a satisfactory experience in landscape. The exception being cases were the screen can fit the entire content view and maybe, when reading larger bodies of text. Games is a typical example.

According to this study people only utilize the landscape orientation 1.5% of the time. However, that study is somewhat inaccurate as it is based on observations of how people hold their phones regardless of what they are doing. The task at hand could of course affect the numbers. For instance, a lot of apps are enforcing use in portrait. Never the less, a landscape version of a mobile web is likely to be seen by few.

So I agree with user48526 that says "I wouldn't go into too much trouble with 480 breakpoint [...]". It's very hard to give a good scrolling experience in landscape with that small width since you can't give the user any overview. The use has a tendency to come through as a bit claustrophobic.