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

61–70 of 202 posts

Re: The ideal viewport doesn't exist

#61

Post by withinboredom »

crazygringo wrote: post #60
withinboredom wrote: post #58

Earlier quoted context omitted.

The resolution doesn't change, but a 64x64px icon button doesn't need to be that big on a desktop.

But this is my point, I haven't been seeing any 64x64 px (logical pixels) hamburger menu icons out in the wild. That would be too big for mobile as well. The hamburger menu buttons all seem normally sized to me when I make a browser window narrow on my desktop.

Yes, if you are on a touch screen, you need 'normally sized' hamburger menus. When using a mouse, a 16x16px hamburger is plenty big enough.

Re: The ideal viewport doesn't exist

#62

Post by withinboredom »

johnnyworker wrote: post #30
afavour wrote: post #25

Earlier quoted context omitted.

The OP is talking about things like media queries that only look at screen width and imply other things like input method from that. IIRC SquareSpace does exactly what they're saying: on desktop sites will have a horizontal list of links but on mobile it's a hamburger icon that takes over the entire viewport when clicked. Functionality exists to target pointer type and things like that in media queries, it's just ver…

Ohhh, I had no idea! Thank you. https://developer.mozilla.org/en-US/docs/Web/CSS/@media/poin... coarse - The primary input mechanism includes a pointing device of limited accuracy such as a finger on a touchscreen. fine - The primary input mechanism includes an accurate pointing device, such as a mouse. This solves everything! What I really want is having more padding on mobile, that's it. I prefer things to be compa…

I'm actually surprised this isn't a selector in tailwind css.

Re: The ideal viewport doesn't exist

#66

Post by adventured »

ciwolsey wrote: post #63

I refuse to read anything even remotely related to accessibility written by someone dumb enough to put white text on a yellow background.

I'm on desktop so maybe it's different on mobile, however I don't see a single example on their site of white text on yellow background, only black text on yellow background.

Re: The ideal viewport doesn't exist

#67

Post by crazygringo »

afavour wrote: post #51
crazygringo wrote: post #50

Earlier quoted context omitted.

But that's what you want , no? I just visited SquareSpace and their homepage seems to work as I'd want. When my viewport is narrow enough that there isn't space for the horizontal navbar at the top, it switches to hamburger menu. Surely this is better than cutting off the navbar and half the page content in the middle vertically, and requiring the user to scroll horizontally?

The hamburger menu could just be a vertical drop down stack rather than something that takes over the entire screen. The point is that the viewport-covering menu is huge because it’s designed to accommodate touch (i.e. imprecise) interaction. It could be much smaller when the user is using a mouse. But you rarely see such accommodation being made. The assumption is low width = mobile = touch.

I still don't get it.

The actual menu items you select are 20 px font size in the hamburger menu, and 18 px font size from the navbar menu. That's just 11% larger. Nothing about that is "huge".

The hamburger menu taking over the whole (narrow) screen doesn't bother me at all. If I'm using the menu, it's not like I need to be looking at the rest of the screen.

And it just feels silly to create a third design. We already have navbar for widescreen and hamburger menu for narrow screen. Now you want a third version -- a hamburger menu that is pop-up rather than fullscreen -- for narrow desktop usage? I sure wouldn't want to do all that extra work.

Re: The ideal viewport doesn't exist

#68

Post by catapart »

bee_rider wrote: post #28
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).

It just seems like confusing wording. I think you are right that most people use their programs full-screen on laptops (As an aside, it is funny that thin-and-light-ism has managed to progress to the point where the average person finally gets the 2008 experience). But I think what they meant is: it is safest not to presume that desktop or laptop users are filling their entire screen with a browser. The way they wrot…

I'm kind of surprised here, myself, and am very interested in seeing real numbers because, just from the replies to this comment I'm seeing a lot of difference of opinion.

Personally, I always use a browser full screen and most everything else is 'windowed'. My browser usually ends up being the "background" of my monitor, only traded out when I'm writing code, in which case my IDE is the "background" (full screen). Everything else except games runs in a smaller window. Dragging and dropping still works, like that. It's just really convenient.

From mostly working with other devs, this is usually what I see. This is how I see MOST people use their desktops. Full screen browser, always. Then we get to this article and this comment section and people are talking like it's a given that MOST people use their browsers in windowed mode. Personally, the only time I can even remember someone doing that is when they snap it to an area and then snap something else beside it.

My suspicion is this is a Windows/Linux vs Mac thing? Everything in Mac defaults to "floating" app windows, instead of defaulting to a single app window, maximized, with sub-panel windows inside the app renderer. So people just kind of mentally map it that way, depending on the OS? But then, that's just a guess!

Obviously, I don't mean to imply that one way is better or worse. I'm just kind of intrigued by how blindsided I - and apparently others - are about this.

Anyway, you're right about the article's hand-waving. It's not as compelling to me, because I've had users file tickets when our "anything past 1060px gets centered on the screen, instead of expanding to fill" method was displayed on a 4K screen. They claimed it was "unusable", even though it was entirely the same, it just didn't expand as much as they would have like (yes, even on a TV; other users were using it just fine). So I don't think anything past 800 is less worth consideration. At the very least, I'd say that number is more like 960 or 1400. The upper end of standard desktop sizes instead of the lower. At 800px width, even default browser font sizes look big. Scaling down to a 10 or 11px font size is fine for complex utilities, but when you're trying to size it for big, finger-sized buttons, 800px gets cramped, fast.

But yeah, the overall advice holds.

Re: The ideal viewport doesn't exist

#69

Post by crazygringo »

withinboredom wrote: post #61
crazygringo wrote: post #60

Earlier quoted context omitted.

But this is my point, I haven't been seeing any 64x64 px (logical pixels) hamburger menu icons out in the wild. That would be too big for mobile as well. The hamburger menu buttons all seem normally sized to me when I make a browser window narrow on my desktop.

Yes, if you are on a touch screen, you need 'normally sized' hamburger menus. When using a mouse, a 16x16px hamburger is plenty big enough.

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 homepage (an example someone else brought up) it's 30x18. That seems like a nice size to me. It's two pixels taller than the 16 you suggest, but the extra width helps make it a little more prominent. Especially since the width isn't taking away from anything else.

Post reply on HN