How should a grid of apps rotate when the device is rotated?

Question

How should an app grid rotate when the user's device is rotated?

Should each app rotate individually and stay in the same spot, or should the entire screen be rotated?

Answer 1

If you have a square grid like in your example, keep red in the bottom left.

When you rotate a phone, you don't want to change the orientation of the content, you just want to get more height/width. Consider it like resizing a browserwindow. You generally want to keep the layout as similar as possible at different heights/widths. If not for real-time resizing, then at least for crossplatform recognition and usability.

So for your example, keep it as is. But reality tends not to be so simple.

Because phone screens tend to be about 16:9. Because you're rotating to get more usable screenspace and using a square completely negates that. So you have to make some difficult decisions. If you go from a 3x5 grid in portrait, do you;

• show a 3x5 grid with boxes thrice as wide as high?
• show a 3x5 grid with a lot of white space?
• show a 3x2 grid and let people scroll?
• show a 5x3 grid, breaking the ordering?

And the answer to that is "it depends".

Answer 2

It is more of like the depends kind of situation.

There can be many scenarios and let's start with the iphone 4-4s. Technically, its resolution is 320X480(wXh) and the bootstrap grid handles the mobile resolution at <=768px (xs 12 column grid)

So in a nutshell, when you change the portrait mode to the landscape mode, it changes the whole resolution itself due to the responsive nature.

But when you change the mode of the other phones with the higher resolutions, their container width, gutter width, column width and in general, the media queries change as in landscape mode, instead of lying in the extra small devices, the lie uder the small devices tablets.