Hacker News Reader

Comment by crazygringo | Hacker News Reader

I'm actually not entirely sure what you're talking about.

I'm very familiar with websites switching to mobile layout with hamburger menu instead of a navigation bar, when you reduce the width of the browser window on your desktop. BUT I don't think I've ever come across a resolution change where the website elements (either hamburger menu or content) get massively larger.

Can you provide an example of one or two mainstream sites that change resolution like that?

The reason I'm confused is because in CSS everything is based on logical pixels, not actual device pixels. E.g. a "1 px" width will be 2 or 3 hardware pixels wide on an iPhone. Similarly "1 em" will be 16 hardware pixels on a standard resolution display, but 32 or 48 hardware pixels on a 2x or 3x display. So web designers don't have to do anything special to accomodate hi-DPI screens in the first place.

View on HN

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.

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.

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 talking about.

It seems perfectly fine to me. Maybe I'd make it a little narrower, but they probably wanted to balance the logo in the top left corner in terms of visual weight, so it makes sense.

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).

> Often literally hundred of pixels wide.

And 16 pixels tall...

I happen to agree, just trying to point out the miscommunication

The folder on your desktop is roughly the same size.

Sorry if I was unclear. I didn't mean that the resolution changed, but rather that pages should take into account how big elements will actually appear in the real world. Typically if I open a website and half-and-half my browser with a terminal the website goes into mobile-mode. The page however is about three times wider than my phone screen, and the hamburger menu is more than twice the size of my mouse cursor. Just because I don't have the page open full-screen any longer doesn't mean that I suddenly can't click the same size buttons or read the same size font, so there's no point in making everything big and clunky.

Reply on news.ycombinator.com