6 ms·

Yes, and webdevs have been trying for over 10 years now to figure out how to get this right. Has no one just stopped to consider having a browser send a `prefer

Yes, and webdevs have been trying for over 10 years now to figure out how to get this right. Has no one just stopped to consider having a browser send a `prefersMobileView` or `viewport:phone` or anything like that? I can remember back a few years ago, an iPhone 6+, turned sideways could get a desktop view on some sites... simply because it met the requirements set by the author. Now, the author's assumptions were wrong of course, but all we have to go on, is literally guesswork. We're told constantly NOT to use user-agent strings, but honestly, it's like we really need something to key off of. I know the A List Apart folks would have us create content that can be viewed on ANY viewport, but I consider that a tad bit unrealistic. I've been out of Front-end dev for a few years though, so perhaps things have changed.

jefftk 6y ago
Mobile vs Desktop is not a clean division: screens run the full range of widths. Instead, developers should: * Lay out content based on the viewport width, in CSS pixels. * Use larger tap targets for coarse pointers (https://developer.mozilla.org/en-US/docs/Web/CSS/@media/pointer https://developer.mozilla.org/en-US/docs/Web/CSS/@media/poin...).
- jon-wood 6y ago
  I had no idea that detecting coarse pointers was a thing, thanks for calling that out!
- badsectoracula 6y ago
  > Lay out content based on the viewport width, in CSS pixels. This is wrong because the viewport width is not the same as the monitor width or the DPI: especially on big monitors running the browser fullscreen is very hard to use (my browser rarely exceeds more than ~50% width on a 2560x1440 monitor and even when i use a 1366x768 monitor - which btw is at 22", not some tiny laptop one - i very rarely use it maximized).
  - jefftk 6y ago
    The viewport width is the browser width, not the screen width. What are you saying is wrong with using the viewport width?
    - badsectoracula 6y ago
      Uh, i wrote "viewport width is not the same as the monitor width", this is the same as what you wrote. As for why it is wrong, it is because you can't rely on it to make a Mobile vs Desktop distinction - i already provided an example why.
      - jefftk 6y ago
        "Mobile vs desktop" is not a distinction websites should be making. Sites should make the best use they can of the available horizontal space. It's still not clear to me where you think this approach gives bad results?
        karpierz 6y ago
        Ergonomics of using touch screen vs. mouse. Usage while walking/moving vs. sitting/standing at a desk.
        jefftk 6y ago
        For touch screen vs mouse, use "pointer:coarse": https://developer.mozilla.org/en-US/docs/Web/CSS/@media/pointer https://developer.mozilla.org/en-US/docs/Web/CSS/@media/poin... Most "mobile" usage is actually stationary, typically seated. If you really need to change layout based on motion you can use the accelerometer, but I can't see why you would?
        badsectoracula 6y ago
        The problem is that the horizontal space only tells you how many pixels are available, not how big whatever you use those pixels for ends up on the screen. The precise vs coarse isn't helpful either for something like this because this isn't just about clicking vs tapping, it is about how the end result looks - and there are PCs with both very small monitors and very big monitors (and relatively large monitors with low DPI or small monitors with very high DPI). CSS pixels only help for setting sizes/positions, but not layout. AFAIK the best that can be done nowadays is resolution media queries but that isn't available everywhere (at least according to caniuse). Of course in practice i expect none of the above to be used and have my browser simply zoom out whenever i reach many sites just because i do not want to maximize my browser :-/
jiofih 6y ago
One of the original selling points of the iPod touch/iPhone was that it could display full desktop websites...
- klodolph 6y ago
  Fair, although back at the time they came out it meant something different. Mobile-optimized websites in 2008 were horrible, stripped-down things.
  - chungy 6y ago
    Isn't that still true in 2021? I haven't been particularly fond of the mobile view of most sites I come across. I force desktop-view on my phone fairly frequently just to get at features/pages I want.
    - jefftk 6y ago
      It is still maybe a little bit true, where some sites will make some things only possible to do on desktop, but when the iPhone came out mobile sites were generally incredibly minimal. They needed to be, to handle existing devices and browsers, which were much less powerful than the iPhone.
    - madeofpalk 6y ago
      No, not at all in the sense as it was in 2008.
    - iso1631 6y ago
      Mobile websites pre 2008 tended to be WML over WAP. If they existed they were terrible, probably created by an intern once and not updated, because very few people used mobile phones for internet access (other than say linking their PDA or notebook to their phone via IRDA)
- iamben 6y ago
  It can. As can Chrome on Android. Just request the "Desktop site" version. It's pretty unusable though, which is why we have responsive websites :-)
asddubs 6y ago
IMO the best solution is to just have natural breakpoints (i.e. when a part of the design of the given page would cease to work, add a breakpoint to change the format of that component, rather than at predefined points) and then for logged in users have an option to request the desktop design, which you can do by simply setting a viewport to 1000px width and leaving everything else unchanged what would be really nice would be element-size-based media queries. you can use javascript to do it but that sucks
- ryandrake 6y ago
  I think we really need to be able to more cleanly separate content from the design, and let the browsers, a.k.a. user-agents, decide/override more. Browsers have ceded too much control over layout and visual structure to web designers, who go on to make (often incorrect) assumptions about how the user wants to interact with their content.
  - asddubs 6y ago
    the problem is that there is no distinction between a webapp and a document, the line is thoroughly blurred. For documents, you can probably just override a fair bit of schenanigans and things will still work, if look somewhat ugly, but for a spreadsheet app that's a rube goldberg machine of javascript and continuously regenerated html and css, it'll just turn it into a broken mess. the browser has become the de facto cross compatible application platform, which requires handing a lot of control to websites.
- tshaddox 6y ago
  That sounds similar to a CSS proposal called container queries, which has been a much-requested feature for many years. Currently the only native way to do responsive design is to make styling changes based on attributes of the viewport (like width). But like you say, it would be nice to have dynamic layouts for every individual component of a website. Container queries do that.
  - asddubs 6y ago

jefftk 6y ago

Mobile vs Desktop is not a clean division: screens run the full range of widths. Instead, developers should: * Lay out content based on the viewport width, in CSS pixels. * Use larger tap targets for coarse pointers (https://developer.mozilla.org/en-US/docs/Web/CSS/@media/pointer https://developer.mozilla.org/en-US/docs/Web/CSS/@media/poin...).

jon-wood 6y ago
I had no idea that detecting coarse pointers was a thing, thanks for calling that out!
badsectoracula 6y ago
> Lay out content based on the viewport width, in CSS pixels. This is wrong because the viewport width is not the same as the monitor width or the DPI: especially on big monitors running the browser fullscreen is very hard to use (my browser rarely exceeds more than ~50% width on a 2560x1440 monitor and even when i use a 1366x768 monitor - which btw is at 22", not some tiny laptop one - i very rarely use it maximized).
- jefftk 6y ago
  The viewport width is the browser width, not the screen width. What are you saying is wrong with using the viewport width?
  - badsectoracula 6y ago
    Uh, i wrote "viewport width is not the same as the monitor width", this is the same as what you wrote. As for why it is wrong, it is because you can't rely on it to make a Mobile vs Desktop distinction - i already provided an example why.
    - jefftk 6y ago
      "Mobile vs desktop" is not a distinction websites should be making. Sites should make the best use they can of the available horizontal space. It's still not clear to me where you think this approach gives bad results?
      - karpierz 6y ago
        Ergonomics of using touch screen vs. mouse. Usage while walking/moving vs. sitting/standing at a desk.
        jefftk 6y ago
        For touch screen vs mouse, use "pointer:coarse": https://developer.mozilla.org/en-US/docs/Web/CSS/@media/pointer https://developer.mozilla.org/en-US/docs/Web/CSS/@media/poin... Most "mobile" usage is actually stationary, typically seated. If you really need to change layout based on motion you can use the accelerometer, but I can't see why you would?
      - badsectoracula 6y ago
        The problem is that the horizontal space only tells you how many pixels are available, not how big whatever you use those pixels for ends up on the screen. The precise vs coarse isn't helpful either for something like this because this isn't just about clicking vs tapping, it is about how the end result looks - and there are PCs with both very small monitors and very big monitors (and relatively large monitors with low DPI or small monitors with very high DPI). CSS pixels only help for setting sizes/positions, but not layout. AFAIK the best that can be done nowadays is resolution media queries but that isn't available everywhere (at least according to caniuse). Of course in practice i expect none of the above to be used and have my browser simply zoom out whenever i reach many sites just because i do not want to maximize my browser :-/

jiofih 6y ago

One of the original selling points of the iPod touch/iPhone was that it could display full desktop websites...

klodolph 6y ago
Fair, although back at the time they came out it meant something different. Mobile-optimized websites in 2008 were horrible, stripped-down things.
- chungy 6y ago
  Isn't that still true in 2021? I haven't been particularly fond of the mobile view of most sites I come across. I force desktop-view on my phone fairly frequently just to get at features/pages I want.
  - jefftk 6y ago
    It is still maybe a little bit true, where some sites will make some things only possible to do on desktop, but when the iPhone came out mobile sites were generally incredibly minimal. They needed to be, to handle existing devices and browsers, which were much less powerful than the iPhone.
  - madeofpalk 6y ago
    No, not at all in the sense as it was in 2008.
  - iso1631 6y ago
    Mobile websites pre 2008 tended to be WML over WAP. If they existed they were terrible, probably created by an intern once and not updated, because very few people used mobile phones for internet access (other than say linking their PDA or notebook to their phone via IRDA)
iamben 6y ago
It can. As can Chrome on Android. Just request the "Desktop site" version. It's pretty unusable though, which is why we have responsive websites :-)

asddubs 6y ago

IMO the best solution is to just have natural breakpoints (i.e. when a part of the design of the given page would cease to work, add a breakpoint to change the format of that component, rather than at predefined points) and then for logged in users have an option to request the desktop design, which you can do by simply setting a viewport to 1000px width and leaving everything else unchanged what would be really nice would be element-size-based media queries. you can use javascript to do it but that sucks

ryandrake 6y ago
I think we really need to be able to more cleanly separate content from the design, and let the browsers, a.k.a. user-agents, decide/override more. Browsers have ceded too much control over layout and visual structure to web designers, who go on to make (often incorrect) assumptions about how the user wants to interact with their content.
- asddubs 6y ago
  the problem is that there is no distinction between a webapp and a document, the line is thoroughly blurred. For documents, you can probably just override a fair bit of schenanigans and things will still work, if look somewhat ugly, but for a spreadsheet app that's a rube goldberg machine of javascript and continuously regenerated html and css, it'll just turn it into a broken mess. the browser has become the de facto cross compatible application platform, which requires handing a lot of control to websites.
tshaddox 6y ago
That sounds similar to a CSS proposal called container queries, which has been a much-requested feature for many years. Currently the only native way to do responsive design is to make styling changes based on attributes of the viewport (like width). But like you say, it would be nice to have dynamic layouts for every individual component of a website. Container queries do that.
- asddubs 6y ago