10

Take a look at the images below. You will notice that the form is responsive when resizing the browser horizontally. However, when resizing vertically, instead of the form trying to re-layout (if that's a word) itself to accommodate the new vertical size, it just inserts a scroll bar, and stops being responsive that way.

I find that this practice is all over, in most "responsive" designs. (The example I showed is here.)

This becomes more surprising to me, that if you were to use a mobile device in landscape mode, it will not fit in the screen. I would think that it would be responsive in both directions.

(Is there even a term for 2-way responsiveness?)

I just feel that many websites (and even courses on responsive design) don't account for small vertical real-estate.

Question Summary: Is responsive design practice also applicable in the same way to landscape mobile as to portrait mobile, and why don't you see this practice all over the "responsive" web?

Images:

Wide Desktop: (good)

enter image description here

Narrow Desktop Portrait/Mobile Portrait (good):

enter image description here

Narrow Desktop Landscape/Mobile Landscape (not good):

enter image description here

Narrow Desktop Landscape/Mobile Landscape [Concept, which I re-designed] (good):

enter image description here

Some examples of real-world websites, that don't make their layout responsive for landscape mobile devices:

enter image description here

This one particularly hurts 😉:

enter image description here

when there is such a simple fix. 30 seconds of HTML editing in dev tools:

enter image description here

Here you see Google search does re-adjust to accommodate the less screen-space:

enter image description here

Improve this question
2
  • 1
    Sounds like this should be a blog article somewhere. Coding these in CSS media queries is fairly trivial. See developer.mozilla.org/en-US/docs/Web/CSS/@media/orientation
    – thomasyung
    Commented Jan 29, 2021 at 17:14
  • 2
    Great question. I often encounter websites I assume have been designed on a large iMac, videos or hero images are sometimes taller than my laptop screen.. I agree that vertical responsiveness is often ignored, but it should not be.
    – Martyn
    Commented Feb 3, 2021 at 22:46

2 Answers 2

Reset to default
3

Responsive design is very much applicable to screen orientation. It's just not as common.

  1. In simple sites, the landscape version works okay, with just some more scrolling.
  2. The landscape use is seen as rarity.
  3. The number of breakpoints you need to design grows geometrically if one designs breakpoints both ways.
Improve this answer
8

There simply aren't that many people using their mobile in landscape (or narrow their browser screen). Also, once you're logged in, you don't see that screen anymore, so I guess they focus their attention on other areas of the site which are more often visited.

Most smartphones are used in portrait orientation, with the most popular size (6 to 6.5”) showing 91% portrait usage.

(source: ScientiaMobile, no doubt you can find other studies with different percentages)

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.