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).

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).

+1 Thought this was an interesting question. And about time someone posted something about responsive design seeing how popular it is becoming.
–
AndroidHustleAug 2 '12 at 11:14

2

@dnbrv there is no problem with the CSS as this is a hypthetical question - should devices re-render or fix at 100% and then rotating just keeps the same 100% width so the text gets larger as a result. Is there an actual problem with either of these implementations?
–
JonW♦Aug 2 '12 at 14:20

7

Oh please, don't mess with the zoom settings, keep the font size the same regardless of orientation. It's already more than jarring enough to have the whole view swim around when my phone decides I tilted it enough that "it must be because I want another orientation".
–
Marjan VenemaAug 2 '12 at 18:27

The key question here is: why do users rotate devices? Do they have an intention related to the content, or is it purely a comfort / position / ergonomical choice?
–
Jimmy Breck-McKyeAug 3 '12 at 14:55

7 Answers
7

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).

That's some good reasoning actually. Seems like an obvious idea now that you state it!
–
JonW♦Dec 20 '12 at 14:54

OTOH, maybe I'm rotating from portrait to landscape expecting a different, more detailed view, like the calculator example. A layout change on reorientation is so common these days it is not a surprise.
–
obeliaDec 20 '12 at 15:55

@obelia - why would I expect a different layout on rotation? There's usually no clues this will happen, and it's not what happens on 98+% of web documents a user will encounter.
–
Jimmy Breck-McKyeDec 20 '12 at 18:00

@JimmyBreck-McKye - I stand corrected: many of the websites I visit are responsive and rearrange the layout on reorientation (e.g. smashingmagazine.com), but that's probably not the case for most people.
–
obeliaDec 21 '12 at 0:59

@obelia - perhaps, with time, the situation will change. But I would expect it to take two or three years at least before responsive design could become a common pattern.
–
Jimmy Breck-McKyeDec 21 '12 at 3:38

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.

""-ok, we know the text is very small in portrait mode. But if you flip the phone it should be easy to read!" I would argue that this is what the user expects. It's in their own control usually, if they want to zoom in then they rotate and this zooms the text for them. Forcing the site to use the same font size regardless is therefore taking this control away from the user.
–
JonW♦Aug 2 '12 at 11:21

1

@JonW Another way to look at it is that changing the font size to a readable one in landscape mode is forcing the user to use the site in landscape mode. Maybe not a problem usually but if the phone happens to be docked in a portrait mode (docking-station, docking speaker, car, etc...) then it would pretty much render the website use(r)less.
–
AndroidHustleAug 2 '12 at 11:23

1

Completely agree with @AndroidHustle, the relationship 'portrait - bigger text' is an specific behaviour, and not necessarily a given (hope it's not, at least)
–
YiselaAug 2 '12 at 21:02

@yisela thank you yisela. Just making the same layout zoom in when flipping to landscape mode is what already what happens when visiting conventional websites. Why would someone want to stop there when you can achieve so much more if you learn to utilize the potential of responsive design, I don't get that...
–
AndroidHustleAug 3 '12 at 8:10

1

@DA01 you're missing the point though. The reason why the font doesn't get bigger is because it doesn't have to, it's readable all ready. I guess you haven't even bothered taking a look at the example I linked? And how can you say there's no difference? I would say zooming in the same page sounds way more monotone than distributing the layout. And the feature that the page zooms in on your iPhone when you switch to landscape, I know, it does that on every Android also. But how does that make the site responsive? That's all in the device browser and have nothing to do with features of the site.
–
AndroidHustleAug 3 '12 at 17:20

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.

@JørnE.Angeltveit Thanx for the tip Jörn. I didn't know that, and couldn't find any visual clues on the User Experience Design. Maybe the UX.SE team can help *.SE to imrove User Experience with "tip where you need it"? :-)
–
Benny Skogberg♦Aug 3 '12 at 16:25

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.

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.

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.

True, but is pinch to zoom really appropriate for a responsive site? Apps don't have pinch to zoom, the only reason for pinching to zoom is for browsing full-site pages on a small screen. If the site is designed and built well then you shouldn't have to pinch. That idea means you're reducing the amount of content visible on-screen because you've zoomed in. Of course I may be wrong and pinch zooming may well be the way to go, but I think that interaction is a legacy from viewing bigger non-mobile optimised content on small screens.
–
JonW♦Dec 20 '12 at 21:05

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.