Notice removed Draw attention by CommunityBot
Bounty Ended with no winning answer by CommunityBot
Notice added Draw attention by Dave
Bounty Started worth 50 reputation by Dave
Tweeted twitter.com/StackUX/status/1355803040348053511
added 2 characters in body; edited title
Source Link
Glorfindel
  • 3.1k
  • 5
  • 19
  • 35

Why is responsive web development primarily portrait based?

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: https://colorlib.com/etc/lf/Login_v2/index.htmlhere).)

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

Why is responsive web development primarily portrait based

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: https://colorlib.com/etc/lf/Login_v2/index.html).

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

Why is responsive web development primarily portrait based?

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

Source Link
Dave
  • 131
  • 3

Why is responsive web development primarily portrait based

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: https://colorlib.com/etc/lf/Login_v2/index.html).

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