Hacker News new | ask | show | jobs
by eyelidlessness 1505 days ago
> And don't suggest me to use the same markup for both desktop and mobile with adaptive styles. More often than not this ends up being equally terrible on both kinds of devices.

My experience is generally (though not always) the exact opposite. It’s usually the case that when designers and implementers took the care to ship a properly responsive design, they’ve produced a design that adapts well to many factors. Designs which treat different device classes differently tend to be rigid, and fail to anticipate subtle differences or factors within those device classes.

I hesitate to link to the snotty site most commonly used to point this out (though I will if anyone asks), but HTML is responsive by default. Knowing this, and building upon it, is a great way to start learning how to build responsive pages that work really well.
1 comments
grishka 1505 days ago
The problem is that you can't really use the same markup for both touchscreens and mice. Touchscreens call for oversized everything so it's easy to hit things with your finger. Mice are much more precise, enabling you to pack everything more tightly, and capable of hovering, enabling you to add new interactions like revealing things on hover. Moreover, phones are mostly vertical and computer screens are mostly horizontal. While you can no problem add a fixed header on mobile, it will be an annoyance on desktop because it eats into the scarcer vertical area. But you can replace the fixed header with a sidebar because there's often more horizontal space than you know what to do with. And so on, and so forth. There's much difference between the two interaction paradigms if you want to provide a fitting UX for both. Most people these days, however, don't.

Here's an example from my own project: same post, different layouts. https://imgur.com/a/7uOy7II

link
eyelidlessness 1505 days ago
> Touchscreens call for oversized everything so it's easy to hit things with your finger. Mice are much more precise, enabling you to pack everything more tightly, and capable of hovering, enabling you to add new interactions like revealing things on hover.

If you must make the distinction, it’s a media query away:

  @media (any-pointer: coarse) {
    /* this is a touch screen or other device which would benefit from larger tap targets */
  }

  @media (any-pointer: fine) {
    /* this is a device with a mouse, trackpad, or other similar high precision pointer input */
  }

  @media (any-pointer: coarse) and @media (any-pointer: fine) {
    /* this is both */
  }
Not only will that work for the same markup, it’ll also improve support for other devices like tablets and laptops with touch screens.

> Moreover, phones are mostly vertical and computer screens are mostly horizontal.

These are wild assumptions which also would better be served by a media query (aspect-ratio, min-aspect-ratio, max-aspect ratio, min-height, min-width). This will also better support other devices like tablets, as well as users like me who browse on desktop with a window much taller than it is wide.

> There's much difference between the two interaction paradigms if you want to provide a fitting UX for both.

Of course. But there’s no need to serve different markup to accommodate them. Besides the aforementioned media queries, you can do quite a lot to accommodate different viewport sizes and quite a lot else with eg grid or flexbox. You just have to know which tools to use for your use case, or how to discover them.

link