5 ms·

> The most striking example is when a horizontal menu bar is converted to a vertical menu bar: all the user's spatial memory of the menu bar's links flies out t

> The most striking example is when a horizontal menu bar is converted to a vertical menu bar: all the user's spatial memory of the menu bar's links flies out the window! That option that you thought were there? It's actually here! What do you expect to happen when there’s simply no room for all the content to fit horizontally? Something has to give. Furthermore, vertical menus are far more common on mobile phones (not just on websites — apps too). Finding a way to shoehorn a horizontal navigation layout into a tiny screen is more likely to mess with a user’s spatial memory rather than respect it.

ncallaway 6y ago
Exactly this. You can either having pages that scroll horizontally or content that reflows. There is really no other option available when dealing with a layout that can be arbitrarily resized (edited to add: there are a couple other options such as scaling down all individual UI elements, or simply removing some elements but those aren't really viable solutions in most contexts). Since we have collectively decided that horizontal scrolling is unacceptable in almost all web contexts, that leaves reflowing content when the window gets smaller. I understand the complaint and I sometimes have a similar frustrations. But, what other options are there that don't introduce horizontal scrolling?
- thinkloop 6y ago
  Not all reflowing is created equal. Say you knew for certainty your users were only on desktop. In that case you may still want responsive design but it will likely be a different responsiveness than what we get with the cliff dive to "the mobile site". Reflowing can be done gently and granularly at the exact maximum points needed with minimum changes - rather than the stark nuking to a completely different site at 700px.
  - ncallaway 6y ago
    Sure, but even if 100% of your users will be on a desktop site, you still need to deal with a browser window that has resized down to 300px. At _some_ point, you will have to have a significant transition if you have an website that is mostly optimized for a desktop, full window experience. I agree that many sites overdo the transition, but there are some things that really do warrant a phase-change at some point.
    - Scarblac 6y ago
      > Sure, but even if 100% of your users will be on a desktop site, you still need to deal with a browser window that has resized down to 300px. In that case I would prefer the scroll bar over implementing a whole separate layout just for the 0.1% who resized their window to 300px for a moment.
- datagram 6y ago
  > But, what other options are there that don't introduce horizontal scrolling? - Wrapping the menu to a second line - Moving menu items that don't fit to an overflow menu Both of these would preserve spatial memory for all of the earlier menu items.
maxk42 6y ago
> What do you expect to happen when there’s simply no room for all the content to fit horizontally? Something has to give. Before the author went off on a questionable advisement about javascript device detection he made a very good point: People should be using relative sizing for layouts so they scale.
- jakelazaroff 6y ago
  Agreed, but I think the answer is still more nuanced than that. For example, even though touchscreen devices tend to have smaller screens, they need larger click targets; your finger is much less precise than a mouse cursor.
  - inetknght 6y ago
    That's what zoom is for.
    - jakelazaroff 6y ago
      I don't want to zoom just to hit a tiny button. The design should accommodate my client. Zooming is an escape hatch in case it doesn't.
      - inetknght 6y ago
        I don't want to have giant buttons just because some people don't want to zoom. Zooming is a feature to allow me to use my device the way I want.
        ryandrake 6y ago
        Ideally, both users get their way. The web developer should be able to just say "button" and have the browser decide how big it should be, based on the user's preference and what is appropriate for the platform.
    - ska 6y ago
Ajedi32 6y ago
I think the issue is that many sites use screen size (e.g. max-width, max-height) as a proxy for things like "is this a touchscreen device", instead of using the media queries designed for that, e.g. (pointer: course) and (hover: none). I understand _why_ things are done that way; it's far easier to design and test for three or four different screen sizes than it is to design for dozens of different combinations of screen size, pointer types, and screen orientations. Still, I get why some people might be frustrated about UI density _decreasing_ to accommodate a touchscreen when they reduce the size of their browser window on desktop.
inetknght 6y ago
> What do you expect to happen when there’s simply no room for all the content to fit horizontally? Something has to give. First and foremost I absolutely expect the page to not move things! If I resized my window and things don't fit any more... then a scrollbar is exactly what I want.
- chipotle_coyote 6y ago
  Well, the context of the question, I think, is what you do when the "content" in question is navigation elements. I expect the page not to move things, either, but I also don't expect to have to scroll to access basic navigation -- and if you just let those elements wrap on a small display, well, we're back to the page moving things. In general I'm (ahem) on the same page with you, but there are times when you have to decide on the least worst option.
  - inetknght 6y ago
    If you have a site that needs navigation elements then you don't have a site. You have an app. You should build an app instead. When I scroll on a site I expect all of the site to move. That includes and headers or footers or sidebars.
    - chipotle_coyote 6y ago
      > If you have a site that needs navigation elements then you don't have a site. You have an app. You should build an app instead. I have a web site that has multiple sections in it, and some of those sections have articles or stories in them, and some of those stories have chapters. I have breadcrumb navigation for it. That is a navigation element. I am not building an app. There are also web sites that have menus in them, because they have different sections and they choose to let you navigate between those sections using tabs or buttons or left-hand navigation columns or whatever. Those web sites are, nonetheless, still web sites. > When I scroll on a site I expect all of the site to move. That includes and headers or footers or sidebars. And when I view a site on my phone, I would prefer not to have to scroll left and right to access navigational elements. Because there will probably be navigation elements. Because web sites have those. :)
deleted 6y ago
[deleted]

ncallaway 6y ago

Exactly this. You can either having pages that scroll horizontally or content that reflows. There is really no other option available when dealing with a layout that can be arbitrarily resized (edited to add: there are a couple other options such as scaling down all individual UI elements, or simply removing some elements but those aren't really viable solutions in most contexts). Since we have collectively decided that horizontal scrolling is unacceptable in almost all web contexts, that leaves reflowing content when the window gets smaller. I understand the complaint and I sometimes have a similar frustrations. But, what other options are there that don't introduce horizontal scrolling?

thinkloop 6y ago
Not all reflowing is created equal. Say you knew for certainty your users were only on desktop. In that case you may still want responsive design but it will likely be a different responsiveness than what we get with the cliff dive to "the mobile site". Reflowing can be done gently and granularly at the exact maximum points needed with minimum changes - rather than the stark nuking to a completely different site at 700px.
- ncallaway 6y ago
  Sure, but even if 100% of your users will be on a desktop site, you still need to deal with a browser window that has resized down to 300px. At _some_ point, you will have to have a significant transition if you have an website that is mostly optimized for a desktop, full window experience. I agree that many sites overdo the transition, but there are some things that really do warrant a phase-change at some point.
  - Scarblac 6y ago
    > Sure, but even if 100% of your users will be on a desktop site, you still need to deal with a browser window that has resized down to 300px. In that case I would prefer the scroll bar over implementing a whole separate layout just for the 0.1% who resized their window to 300px for a moment.
datagram 6y ago
> But, what other options are there that don't introduce horizontal scrolling? - Wrapping the menu to a second line - Moving menu items that don't fit to an overflow menu Both of these would preserve spatial memory for all of the earlier menu items.

maxk42 6y ago

> What do you expect to happen when there’s simply no room for all the content to fit horizontally? Something has to give. Before the author went off on a questionable advisement about javascript device detection he made a very good point: People should be using relative sizing for layouts so they scale.

jakelazaroff 6y ago
Agreed, but I think the answer is still more nuanced than that. For example, even though touchscreen devices tend to have smaller screens, they need larger click targets; your finger is much less precise than a mouse cursor.
- inetknght 6y ago
  That's what zoom is for.
  - jakelazaroff 6y ago
    I don't want to zoom just to hit a tiny button. The design should accommodate my client. Zooming is an escape hatch in case it doesn't.
    - inetknght 6y ago
      I don't want to have giant buttons just because some people don't want to zoom. Zooming is a feature to allow me to use my device the way I want.
      - ryandrake 6y ago
        Ideally, both users get their way. The web developer should be able to just say "button" and have the browser decide how big it should be, based on the user's preference and what is appropriate for the platform.
  - ska 6y ago

Ajedi32 6y ago

I think the issue is that many sites use screen size (e.g. max-width, max-height) as a proxy for things like "is this a touchscreen device", instead of using the media queries designed for that, e.g. (pointer: course) and (hover: none). I understand _why_ things are done that way; it's far easier to design and test for three or four different screen sizes than it is to design for dozens of different combinations of screen size, pointer types, and screen orientations. Still, I get why some people might be frustrated about UI density _decreasing_ to accommodate a touchscreen when they reduce the size of their browser window on desktop.

inetknght 6y ago

> What do you expect to happen when there’s simply no room for all the content to fit horizontally? Something has to give. First and foremost I absolutely expect the page to not move things! If I resized my window and things don't fit any more... then a scrollbar is exactly what I want.

chipotle_coyote 6y ago
Well, the context of the question, I think, is what you do when the "content" in question is navigation elements. I expect the page not to move things, either, but I also don't expect to have to scroll to access basic navigation -- and if you just let those elements wrap on a small display, well, we're back to the page moving things. In general I'm (ahem) on the same page with you, but there are times when you have to decide on the least worst option.
- inetknght 6y ago
  If you have a site that needs navigation elements then you don't have a site. You have an app. You should build an app instead. When I scroll on a site I expect all of the site to move. That includes and headers or footers or sidebars.
  - chipotle_coyote 6y ago
    > If you have a site that needs navigation elements then you don't have a site. You have an app. You should build an app instead. I have a web site that has multiple sections in it, and some of those sections have articles or stories in them, and some of those stories have chapters. I have breadcrumb navigation for it. That is a navigation element. I am not building an app. There are also web sites that have menus in them, because they have different sections and they choose to let you navigate between those sections using tabs or buttons or left-hand navigation columns or whatever. Those web sites are, nonetheless, still web sites. > When I scroll on a site I expect all of the site to move. That includes and headers or footers or sidebars. And when I view a site on my phone, I would prefer not to have to scroll left and right to access navigational elements. Because there will probably be navigation elements. Because web sites have those. :)

deleted 6y ago

[deleted]