Responsive Web Design - what should happen when the mobile device is rotated?

Question

Currently, the standard behaviour for viewing web pages on a mobile is that:

• If viewed in portrait the text is smaller because the width of the device is small and the whole page width needs to fit into view.
• If viewed in landscape the view 'zooms in' as the width is now wider so that the text is larger and more readable, but with less content on screen as a result.

So, this brings a dilemma. When creating a responsive website what should happen on device rotation? (Not on initial page load, I am referring to what should happen once the site is loaded and you decide to then rotate the screen)

When rotated from portrait to landscape should you:

• a) Re-detect the device widths and map the contents according to the new dimensions (thereby retaining the same font / images sizes as when viewing portrait).

• b) Keep the same dimensions and on rotation just bring the content to fit the window (thereby zooming in the content to make it more readable for viewers if the portrait orientation text is too small).

^{download bmml source – Wireframes created with Balsamiq Mockups}

Bear in mind that with a traditional web-page viewed in the mobile you have the option of pinch-to-zoom the text, so if it's too small you can zoom in. With a responsive site this isn't an option because the site will fit the dimensions so there is nothing to zoom into.

(I guess there is a third option too - use responsive fonts so that the font sizes change according to the screen width. But that's probably a different question altogether).

Answer 1

Let me add a late answer: after the content has loaded, do not let rotations trigger breakpoints.

If the user rotates the device accidentally, their most immediate task is to reorient themselves and re-find the content they were viewing or reading at the time of rotation. But a breakpoint trigger, the user is suddenly presented with an interface they don't recognize (which makes them wonder if something has happened), and with additional content that breaks any anchors they'd use for re-finding their initial position. Worse, if the breakpoint removes material, there's a chance the content the user wants to re-find has been taken out completely. Discovering that this has happened is a very expensive operation.

But what if the user rotates the device deliberately? Well, the same thing. Either the user wants to look closer at some content by moving from portrait to landscape (in which case, adding content just cancels out the effect), or the user wants to view the same content but with better comfort (that is, they're rotating for ergonomics reasons).

tl;dr - don't change content after page load.

Answer 2

Personally I'm a supporter of sites with a mix of the two.

• Fonts should keep the same size both in landscape and portrait. It should merely be distributed differently depending on the current screen width. As you've also showed in the mockup for A.

I feel that also scaling the text is like surrendering to a notion that "-ok, we know the text is very small in portrait mode. But if you flip the phone it should be easy to read!". If that's your stance then size up the text in portrait mode! The only real advantage with having the text smaller in portrait mode is that the user can see more of the page at the same time. But this can also be achieved by thoroughly thinking over the discoverability aspects while designing.

• Images, can and should be scalable though, as discussed in option B.

It's hard to have one image size that will fit into your layout perfectly no matter the screen size, wait make that impossible. I find that a small image will look puny on a big screen and a big image will be intrusive on a small screen. Plus if you find thresholds that kick in for each screen size interval you can have one layout that fits perfectly into each screen width.

I'd like to recommend you have a look at food sense who have a responsive website that really works well and looks good with five different layouts depending on the width. A funny feature is that they let some images get larger in the smaller displays because that fits better in to the narrower layout.

Answer 3

This is delicate, and should be a sound judgment by the designer. There is no right or wrong, neither is there a convention (yet) to rely on. But there are a few things to consider, like zooming in just widening the page, which I feel is useless. If I want to zoom I can snap-in on the text getting it in a more readable form (both in Landscape and Portrait view). So that option is off.

Instead I like pages (or apps) that display more in landscape than in portrait view. On a web page that could be an image, related links or even a “facts box”. On a native application, there are better control, and you could supply more options, like the Windows Phone 7 calculator.

Problem with that is that the user doesn’t know if there is more to see when in landscape – which is bad for user experience, but great fun when you find out about it. My answer would in short be, add more stuff to the view when in landscape, don’t zoom.

Answer 4

There are different approaches to device oriented design, and you can implement one of several design patterns to choose from. The first one that comes to mind is the fluid design, which (simply put) just reorganize the elements to a better view. Some, less important elements, are hidden as the screen width gets narrower and vice versa.

Next is the extended design which adds an element, may or may not be navigation, to the existing screen in vertical orientation. The original screen is left untouched and flipping the device horizontally makes the extended element appear.

There is also the complementary design that adds more information going from vertical to horizontal orientation. This could be a grid view of data in vertical becoming a graph in horizontal orientation.

If you want to be bald you could also go with the continuous design, which shows a completely different screen in a different orientation. Today it’s not known how users react to that design, but it is possible that elderly users will have a hard time with this design.

Designing for device orientation is not new. For example, when rotated to landscape mode, smartphones open a larger virtual keyboard, and the email applications in tablets switch to a master–detail interface. However, device orientation design is widely treated as secondary to the main interface because it is often missed by users who stick to the default orientation, mainly because they are not aware of its availability. By adding simple visual clues to the interface, UX professionals can make the case for using device orientation to enhance their products and, ultimately, for providing more engaging and user-friendly experiences.

Reference: UX DESIGN FOR MOBILE Designing For Device Orientation: From Portrait To Landscape

Answer 5

Design for the content to fit within nicely within a range of widths, but don't assume any specific viewport widths. The content should determine the breakpoints for rearrangement and adjustment, not the currently popular device sizes (which is constantly changing).

For some content/applications, the layout structure will change (and elements added/removed as in the calculator example above), and for other content/applications (like a text oriented one) the layout structure will not change as the width changes.

In my experience, regarding text oriented sites, I almost always need to reduce header (h1 etc.) font sizes for narrow viewports but try hard keep the main content font the same size and squeeze the side margins.

But it all depends on the content.

Answer 6

I'd consider the root of the issue. If the larger text is easier to read, then make the text in both views the same larger and easier to read size. Screen size, pixel density, and distance from the user's eyes is not changing when you rotate, just the orientation. Therefore, layout might change but not something as granular as font size. There are other more direct methods for affecting font size such as pinch to zoom that a user could access in either view.

Answer 7

For consistencies sake, I'd ensure that the page on a device that started in portrait and is rotated to landscape is the same as if I'd started on landscape in the first place. If a user visits your site on two different occasions and it's different because of what orientation the user started out with, she's going to be confused.

At which point I'd argue that I want the best experience for whatever my 'current' form factor is. A left-side navigation would be very poor in portrait, but very much more welcome in landscape.

Answer 8

So it is Jan 2017. This was a good question back in 2012 but I feel that our experience may have changed our opinion now. The responsiveness movement seems largely to prefer to follow a rule of

use the space available

by re-organising the layout on orientation change. This seems to have become accepted and expected practice.

OTOH, speaking as an 'old guy' of 50+ years with natural eyesight reduction, I find the lack of pinch-zoom on some web sites a pain and I have some sympathy with the accepted answer from 2012 that suggests keeping the layout the same but just increasing font size.

Anyway enough of my own thinking - do others agree that the world has moved on and this question needs a new answer?