It’s not the 80’s. We don’t live in a world where “the fold” exists any longer. We’re not locked to a 4:3 viewing experience. Our movies are most commonly 16:9 ratio. Our TVs and phones have followed this pattern. In short, we need to pay attention to how our sites look on various screen dimensions. We won’t know what the viewer is using.
What does that mean though?
We need to be flexible in our designs. Most of the time when we design a website or application we do so with a primary orientation. For all devices other than tablets and phones, this is in landscape mode. But for phones and tablets we primarily design for the portrait mode.
There are times when a user may have their device stuck in a position that they are unable to change. When this situation occurs, if our design is locked into the Portrait orientation, we make it very difficult for some users. It would be much more usable in landscape for this moment or by the user. Therefore we should make it work in both ways.
The primary example of this is someone using a mounted iPad on their wheelchair. They could have it in portrait mode, yet not have the strength to turn the device.
Are there any exceptions?
But of course! There are certain tasks that the orientation can’t change. Usually you hear about digitally depositing checks. The thinking here is using the phone in landscape mode is required to get the right photo. This is a crap example. I can just as easily take that photo in landscape as long as I can square it in the view. A better example might be needing you to turn your phone landscape to read and interact with a chart. Another would be watching a video. If shot for mobile device apps like TikTok, it doesn’t work as well in portrait.
Mobile Apps
Mobile platforms have the ability to do dynamic layouts now. These layouts allow the user to change their display orientation without affecting their use of the product. However, using a dynamic layout requires you start coding with that in mind. Trying to fix the layout after the fact is much more difficult.
Have some thoughts you’d like to discuss? Maybe other exception examples? Reach out to me on BlueSky or LinkedIn.
1 Comment