Responsive Design for Landscape Orientation

[Chris Bloomfield]

What you think about design/layout for landscape mobile orientation? So, mobile/responsive widths of ~450-767.

A huge chunk of responsive websites seem to have a multi-column design layout for desktop and tablet, but a single column layout for anything below tablet width – so a viewport of anything between 320px and 767px gets a single column layout.

Bootstrap does this: “Below 767px viewports, the columns become fluid and stack vertically“.

Surely this makes landscape-orientation browsing on mobile devices pointless though? Elements are too large to properly browse.

Here’s a common case of this: A websites with navigation to the right of the logo, when viewed from a mobile device, removes this menu and use a hamburger menu icon with a responsive/mobile-friendly menu option. Why not just move the menu below the logo at viewports close to landscape-orientation widths? This is a perfect example of improving usability by efficiently using the space available.

Here’s a real-life comparison, demonstrating poor use of space vs. increased usability at landscape orientation (mobile sites only, so use a mobile device or Chrome’s device emulation):

Doing it Wrong: aplus.com
The landscape layout is a blown-up version of the portrait layout.

Doing it Right: m.bbc.co.uk
More columns are added but elements stay the same size.

A few more examples of sites that use the same mobile layout for landscape orientation as portrait, making landscape browsing redundant compared to portrait browsing:

samsung.com/uk; cracked.com; mobile.walmart.com; collegehumor.com; m.facebook.com (less extreme but still a good example!).

So, does a single column layout prevent landscape browsing from being a viable option?

Even if websites starting designing a compact layout specifically for landscape browsing, is it too late for the trend to catch on, since users won’t consider switching to landscape mode? (How many users even realise the mobile BBC website has an enhanced landscape layout?)

Also, are there any accessibility benefits to using a single column layout for landscape (beyond allowing users to see larger images, which could be allowed by enabling zooming)?

Finally, do you personally use landscape mode while browsing? If so, when?

[__]

So, does a single column layout prevent landscape browsing from being a viable option?

This is like asking if “serving food raw prevents it from being eaten.” For chicken, yes, that’s a horrible idea. For carrots or PBJ, not so much.

We get similar questions quite often.
Breakpoints should be based on the design, not on the screen size. If all your designs change 767(or whatever)px, you’re doing it wrong. It should change to a single column when multiple columns look wrong. Whether that happens at 500px or 999px is beside the point.

Regarding bootstrap (or any other framework): the design was unknown when the css was written, so, obviously, they’re not going to be able to accommodate it.

Regarding landscape vs. portrait: in most designs, screen height is not as critical a factor as width. But if it is, same concept applies.

[Chris Bloomfield]

Thanks for the input. I understand sensible use of breakpoints and the intention behind the breakpoints in Bootstrap. I asked about landscape orientation because, while the height of the viewport varies, the width is always pretty large. So my question(s) refer to designing within this space.

In my main question I meant to ask if it’s possible to design for a single-column layout that uses the wide, but short, space available when a site is viewed in mobile’s landscape orientation.

In the examples I gave it’s clear that the fact that users may view these sites with landscape orientation isn’t a consideration – the design doesn’t accommodate this, and users obviously aren’t meant to view those sites in landscape mode.

With their kind of layout though – links sectioned into large images and titles – I’m not sure that the design could be adapted well to suit landscape mode. There are ways I can think of but none of them would really make better use of the available screen space – so I was hoping for some input here. The mobile BBC website works well, using three columns in landscape mode instead of 2, but is this the only option?

I’m also interested to hear opinion on whether or not it’s worth designing and developing a layout for landscape viewports. I am always keen to try and adapt the layout of a responsive site to work well for mobile users viewing the site in landscape mode. But presenting elements as wide-but-short could make a responsive site look pretty bad when viewed on a desktop, and, since many sites aren’t worth viewing in landscape mode (so users wouldn’t expect to try it for new sites they visit), would this just be a wasted effort?

So my main question should be – is designing and developing a landscape-optimised layout a waste of time?

To answer this it would be useful to know how often users actually do use landscape mode. What are the user stats like? Developing for IE8 is still necessary but developing for IE7 generally is not. Is designing/developing for landscape mode more like developing for IE8, or IE7?

(Note regarding the point above about landscape mode optimisation looking bad on desktop – I know you can target landscape mode in media queries, but that’s even more work that may, according to popular opinion on this matter, be pointless!)

[Senff]

What you think about design/layout for landscape mobile orientation? So, mobile/responsive widths of ~450-767.

There are devices that have a portrait orientation width somewhere in that range, so it’s not necessarily a landscape range.

I never base anything on whether the device is portrait or landscape. I just make sure that whatever the width is, anywhere between 320 and 2000 (or whatever high value), everything looks good.

So if it’s 427 or 693 or 715 or 769… I don’t need to know its orientation, because I’ve coded it in such a way that it looks good for all of it.

When you lock yourself in the mindset that everything between X and Y is landscape mode, you’re gonna have a problem when you run into a device that uses different widths/heights than the “standard” iPhones/iPads…or when a new iPhone 10 comes out where the portrait mode width is some 500 pixels or so.

[__]

So my main question should be – is designing and developing a landscape-optimised layout a waste of time?

In my mind, in most situations, yes. However, my “catch-all” rule about the design being dictated by the design stands. Maybe you have a design where it would be worthwhile —which begs the question, what would make it worthwhile?

Horizontal scrolling is inconvenient and just generally looks bad. Vertical scrolling, on the other hand, is so ingrained that it’s “just the way things work.” IME, no one (outside of inexperienced clients) cares. I’d venture to say that very few people even think about it.

To answer this it would be useful to know how often users actually do use landscape mode.

Don’t have stats, but when I’m web browsing on a tablet, I almost always hold it horizontally.

[Chris Bloomfield]

So most mobile users don’t use landscape mode for browsing, optimising a design for viewing in landscape mode could negatively impact the overall design, and doing this could be redundant anyway since “landscape mode” changes meaning with every new device that’s released. I thought as much.

It would be interesting though to see more examples of layouts for what I’ve been calling landscape mode, if only as proofs of concept; the BBC mobile site was the only one I came across which does this, and it uses the space more efficiently with a 3-column grid instead of a 2-column grid when the viewport is wide enough, which isn’t anything particularly new (not that it has to be in this case; just saying it would be interesting to see what people could come up with).

[Author]

Posts