Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

The ideal viewport doesn't exist

viewports.fyi

Post reply on HN
Print view View original

81–90 of 202 posts

Re: The ideal viewport doesn't exist

#81

Post by depressedpanda »

tshaddox wrote: post #73
depressedpanda wrote: post #59

Earlier quoted context omitted.

> setting breakpoints allows some sanity in the build and testing process otherwise you have an infinite scope for issues which of course would be pretty lucrative for a boutique agency. Honestly, now that container queries are available, I see very little use for breakpoints. Container queries allow for easy reuse of components, and a truly fluid and responsive design.

IMO the promise of container queries isn't that breakpoints will go away, but rather that breakpoints can emerge from the bottom-up composition of components rather than top-down from your CSS framework or Tailwind config or whatever. You're still probably going to want the left sidebar of your multi-column layout to collapse behind a menu on narrow viewports and abruptly appear when the viewport width gets to >= n […

While I suppose breakpoints might still have some use cases, I believe an overwhelming amount of the stuff we currently use them for can be better and more fluidly accomplished with container queries.

The example you give of a sidebar collapse with a menu button replacement can easily be accomplished with a container query on the wrapping box, no?

I'm honestly curious about a use case that a media query breakpoint can handle, but which a container query can't.

Re: The ideal viewport doesn't exist

#82

Post by omegabravo »

crazygringo wrote: post #77
withinboredom wrote: post #71

Earlier quoted context omitted.

It is 44x44 on my computer. Absolutely massive. https://imgur.com/a/dL1Se2v

It can't be 44x44, it's not even square. I can't tell what units you're measuring in, are you measuring hardware pixels on a hi-DPI screen? We're talking about logical pixels which is the only thing that makes sense to measure in and compare. But comparing it with e.g. the refresh button on your browser, it's merely 17% taller than that, in your screenshot. So I literally don't know what "absolutely massive" you're t…

The button is 44x44. The SVG is 30x18

Re: The ideal viewport doesn't exist

#84

Post by kube-system »

ghusto wrote: post #2

> It’s safest to presume that users on desktop or laptop devices are not filling their entire screen with a browser. Not on literally any laptop I've ever seen. I've never seen a screen where the browser _isn't_ filling all space available to them, sometimes even the entire screen (in fullscreen mode on MacOS).

I presume you're talking about maximized windows, but that still does not equal "filling the entire screen", because browsers have their own user interface around the viewport.

Go maximize your browser and enter this into your dev tools:

    console.log(`${window.innerWidth}x${window.innerHeight}`)
Does that equal your screen resolution?

Re: The ideal viewport doesn't exist

#85

Post by crazygringo »

omegabravo wrote: post #82
crazygringo wrote: post #77

Earlier quoted context omitted.

It can't be 44x44, it's not even square. I can't tell what units you're measuring in, are you measuring hardware pixels on a hi-DPI screen? We're talking about logical pixels which is the only thing that makes sense to measure in and compare. But comparing it with e.g. the refresh button on your browser, it's merely 17% taller than that, in your screenshot. So I literally don't know what "absolutely massive" you're t…

The button is 44x44. The SVG is 30x18

If that's the clickable area, is someone complaining that's too large?

You've been able to select radio buttons by clicking on their text for decades now. On desktop. Often literally hundred of pixels wide.

Generous margins for clickable elements seems like a feature, not a problem. As long as they don't interfere with anything else (which they don't, here).

Re: The ideal viewport doesn't exist

#86

Post by hagg3n »

withinboredom wrote: post #57
danielvaughn wrote: post #52

Earlier quoted context omitted.

The problem is that at a real company, this is very difficult because you have to argue with your product/design team and explain why you don't want to implement [x] feature because it's "too complex". Inevitably they'll point to some competitor website that has the same feature, which makes you look like you're just lazy. It's possible to succeed in those arguments, but it's hard. It's one thing to convince them not…

If your company cares one iota about accessibility, you can usually get those features off the table instantly just by arguing that point. "Yeah, well it's pretty clear that competitor doesn't care about blind people" is a pretty easy argument. I invite you to learn to use a screen reader and try using your app (whatever it happens to be). It's seriously pretty terrible for some of these websites with all the fancy c…

I envy you cause the teams and companies that I've worked with basically say fuck em to that argument.

I have lost jobs and annoyed people trying to argue for greater care with accessibility. It's somewhat depressing.

Re: The ideal viewport doesn't exist

#87

Post by rendaw »

withinboredom wrote: post #71
crazygringo wrote: post #69

Earlier quoted context omitted.

I think you may have misunderstood my comment. I'm saying I am seeing normally sized hamburger menus on desktop. You're using an example of 64x64, I'm saying I don't see that. Although 16x16 is a little on the small side even for desktop. The point isn't just to click it, but to have it be prominent enough to see and notice as a primary action. It's about visibility, not touch area. For example, on the SquareSpace ho…

It is 44x44 on my computer. Absolutely massive. https://imgur.com/a/dL1Se2v

The folder on your desktop is roughly the same size.

Re: The ideal viewport doesn't exist

#89

Post by TT-392 »

PMunch wrote: post #5

I wish more pages took the pointer and resolution media queries into account. So many times I open windows side-by-side on my desktop and end up with the menu collapsing into a hamburger menu which fills the entire screen when clicked. Many phones today have very high DPI and very low precision in touch, so it makes sense to have massive visual elements and buttons, but my desktop with the same size in pixels as my p…

When I visit my bank, with my browser taking up half my 1080p desktop display, it tells me to use the app instead.

Re: The ideal viewport doesn't exist

#90

Post by esdott »

hagg3n wrote: post #86
withinboredom wrote: post #57

Earlier quoted context omitted.

If your company cares one iota about accessibility, you can usually get those features off the table instantly just by arguing that point. "Yeah, well it's pretty clear that competitor doesn't care about blind people" is a pretty easy argument. I invite you to learn to use a screen reader and try using your app (whatever it happens to be). It's seriously pretty terrible for some of these websites with all the fancy c…

I envy you cause the teams and companies that I've worked with basically say fuck em to that argument. I have lost jobs and annoyed people trying to argue for greater care with accessibility. It's somewhat depressing.

This is exactly what happens. Especially if your voice is in the minority Or you’re the only one. You’re seen as a trouble maker. We all know what happens to trouble makers when margins are on the line.
Post reply on HN