4 ms·

I don’t understand those people at all. If my browser window is the width of a mobile phone’s screen, than a version of the website designed for that size is ex

I don’t understand those people at all. If my browser window is the width of a mobile phone’s screen, than a version of the website designed for that size is exactly what I want!

eadmund 5y ago
Not necessarily: the real-world size matters too. Desktop-sized UI is hard to hit on a touchscreen when shrunk; meanwhile mobile-sized UI wastes space when enlarged on a desktop monitor.
girvo 5y ago
Right! If you've got a window that narrow, the only way the design will even work or layout correctly is with the "mobile" layout... The bigger problem is people hiding functionality if you're in the mobile breakpoint. That's an issue: all functionality should be enabled, at least in some way IMO. Mobile should never be a second class citizen :)
- wtallis 5y ago
  There's also a big problem where the mobile layout will tend to make controls huge to present a reasonable size touch target. This is unnecessary on the desktop, and may even result in less information fitting on screen than before switching to the mobile layout.
  - girvo 5y ago
    Thats a fun one to solve! @media (hover: none) and (pointer: coarse) { That allows the dev to select for devices that do not have a mouse and such rely on touch targets, to increase the sizing. I've been implementing this myself recently in our web application, while still allowing us to change the layout to fit the narrow width! I'm sure there are some devices it doesn't fit perfectly for though. This stuff is capital-H hard.
    - Eduard 5y ago
      https://css-tricks.com/interaction-media-features-and-their-potential-for-incorrect-assumptions/ https://css-tricks.com/interaction-media-features-and-their-...
    - 3np 5y ago
      > capital-H hard You mean quote-unquote Hard?
      - girvo 5y ago
        I wish. The implementations for these have some... complications, the device sets we now deal with are huge, and making sure there are no idiosyncratic bugs that creep up when using them is legitimately a fair bit of work.
t-writescode 5y ago
> If my browser window is the width of a mobile phone’s screen It's not, is the thing. I have a 23 inch screen for my 1080p screen. My phone has a 6ish inch diagonal. When I make a window 960 x 1080, that's still something like 10 inches across and 11 inches tall. It's sheet-of-paper sized. I'm perfectly comfortable reading that as it was designed for a desktop layout.
- account42 5y ago
  > I have a 23 inch screen for my 1080p screen. My phone has a 6ish inch diagonal. Do you sit as close to your monitor as you hold your phone?
  - OJFord 5y ago
    Not GP, but yeah, about the same? From your phrasing I expect it's how close we hold our phones that differs though.
  - t-writescode 5y ago
    I would say that half of my monitor, more accurately, is about the dimensions of an iPad at comfortable viewing distance. Phones are far taller than half of a 1080p screen. Half a monitor is: 960 x 1080, or 1:1.125 A iPhone is: 828 x 1792, or 1:2.164 So websites tend to shove a candybar shape into a nearly square sheet of paper and waste a lot of usable proportions for things like controls or hamburger menus.
hoseja 5y ago
Do you also want the version for touch controls?

I don’t understand those people at all. If my browser window is the width of a mobile phone’s screen, than a version of the website designed for that size is exactly what I want!

eadmund 5y ago

Not necessarily: the real-world size matters too. Desktop-sized UI is hard to hit on a touchscreen when shrunk; meanwhile mobile-sized UI wastes space when enlarged on a desktop monitor.

girvo 5y ago

Right! If you've got a window that narrow, the only way the design will even work or layout correctly is with the "mobile" layout... The bigger problem is people hiding functionality if you're in the mobile breakpoint. That's an issue: all functionality should be enabled, at least in some way IMO. Mobile should never be a second class citizen :)

wtallis 5y ago
There's also a big problem where the mobile layout will tend to make controls huge to present a reasonable size touch target. This is unnecessary on the desktop, and may even result in less information fitting on screen than before switching to the mobile layout.
- girvo 5y ago
  Thats a fun one to solve! @media (hover: none) and (pointer: coarse) { That allows the dev to select for devices that do not have a mouse and such rely on touch targets, to increase the sizing. I've been implementing this myself recently in our web application, while still allowing us to change the layout to fit the narrow width! I'm sure there are some devices it doesn't fit perfectly for though. This stuff is capital-H hard.
  - Eduard 5y ago
    https://css-tricks.com/interaction-media-features-and-their-potential-for-incorrect-assumptions/ https://css-tricks.com/interaction-media-features-and-their-...
  - 3np 5y ago
    > capital-H hard You mean quote-unquote Hard?
    - girvo 5y ago
      I wish. The implementations for these have some... complications, the device sets we now deal with are huge, and making sure there are no idiosyncratic bugs that creep up when using them is legitimately a fair bit of work.

t-writescode 5y ago

> If my browser window is the width of a mobile phone’s screen It's not, is the thing. I have a 23 inch screen for my 1080p screen. My phone has a 6ish inch diagonal. When I make a window 960 x 1080, that's still something like 10 inches across and 11 inches tall. It's sheet-of-paper sized. I'm perfectly comfortable reading that as it was designed for a desktop layout.

account42 5y ago
> I have a 23 inch screen for my 1080p screen. My phone has a 6ish inch diagonal. Do you sit as close to your monitor as you hold your phone?
- OJFord 5y ago
  Not GP, but yeah, about the same? From your phrasing I expect it's how close we hold our phones that differs though.
- t-writescode 5y ago
  I would say that half of my monitor, more accurately, is about the dimensions of an iPad at comfortable viewing distance. Phones are far taller than half of a 1080p screen. Half a monitor is: 960 x 1080, or 1:1.125 A iPhone is: 828 x 1792, or 1:2.164 So websites tend to shove a candybar shape into a nearly square sheet of paper and waste a lot of usable proportions for things like controls or hamburger menus.

hoseja 5y ago

Do you also want the version for touch controls?