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?
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It only takes a minute to sign up.Sign up to join this community
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;
And the answer to that is "it depends".
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.