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

71–80 of 202 posts

Re: The ideal viewport doesn't exist

#71

Post by withinboredom »

crazygringo wrote: post #69
withinboredom wrote: post #61

Earlier quoted context omitted.

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 ho…

It is 44x44 on my computer. Absolutely massive.

https://imgur.com/a/dL1Se2v

Re: The ideal viewport doesn't exist

#73

Post by tshaddox »

depressedpanda wrote: post #59
5350-uiop-1130 wrote: post #15

> "The main point we’re trying to get across is that you simply do not know how users are going to visit your website or web app. Instead of making design decisions on strict, limited breakpoints, keep in mind the sheer amount of fragmentation there is in viewports." I don't know how useful this is. setting breakpoints allows some sanity in the build and testing process otherwise you have an infinite scope for issues…

> 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 [0]. But it's conceivable that the value of n emerges from some constraints you specify (such as the minimum desired width of the sidebar and the main content column), instead of being chosen upfront from a small list of predertmined breakpoints.

[0] E.g. https://tailwindui.com/components/application-ui/application...

Re: The ideal viewport doesn't exist

#74

Post by paxys »

RugnirViking wrote: post #3

Nice web design but this jumped out at me: (they have 120000 viewpoints): "Wembley stadium has a capacity of 90,000, so our datapoints could fill Wembley once and still fill another third of the available capacity." the way this is written adds to confusion rather than enlightens. "another third of the available capacity" makes it sound like there is space left over in wembley i.e. you haven't fully filled it. I thin…

Such meaningless comparisons also often have the opposite of the desired effect. I read it and went "there are >8 billion people all over the planet, and you can fit all the possible viewports into a single football stadium. Neat!"

Re: The ideal viewport doesn't exist

#75

Post by pests »

withinboredom wrote: post #62
johnnyworker wrote: post #30

Earlier quoted context omitted.

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.

That is one of the issues trying to re-implement every css property:value pair with a class name inherent in Tailwind.

Re: The ideal viewport doesn't exist

#76

Post by nickdothutton »

I'm not, and never was, a "front-end guy". I've noticed more and more quirks (bugs?) in UIs where something is off screen, or unclickable, or suffers extremely unhelpful placement that prevents or significantly impedes my use of a web site/app. Rotate phone/tablet, change font size, hide URL bar, mental note to try it on a desktop or laptop "later". This feels like the front-end version of "it works in dev".

Re: The ideal viewport doesn't exist

#77

Post by crazygringo »

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

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.

Re: The ideal viewport doesn't exist

#78

Post by rmilejczz »

paxys wrote: post #72

Pretty ironic that a post about accessible web design is unreadable because of scroll hijacking that makes it constantly jump to the top (at least on mobile).

ya this gave me quite a hearty chuckle. I’m sure the content of the article is excellent but it’s impossible to read on my viewport

Re: The ideal viewport doesn't exist

#79

Post by adventured »

adithyassekhar wrote: post #16

I was hoping to read some kind of solution at the end of all this huge text. Some radical way to do layouts without using viewports. Instead I got a link to buy a book from some author. Why is this even here? This is a long ad with useless data points.

There's a way to do it entirely without viewports, although it's extremely unpopular with designers.

Present a .css file for mobile or for desktop, based on the presence of "mobile" in the agent string. Chrome continues to report that agent data and it's very accurate for this use case (where your primary aim is to detect mobile equivalent, else present for desktop).

You can drop the viewport html tag. All major phones, including iOS and Android operating systems going back at least a decade, will automatically scale your site for mobile without viewport. You customize the mobile version of your .css file for just mobile. And it's very easy these days to cross check to make sure the look and compatibility is correct (for Chrome and Safari mobile in particular). You present different site UI/UX based on the "mobile" detection; if mobile, present mobile layout, else present desktop layout.

Google will punish you (SEO) slightly for the lack of a viewport tag however.

This is a far easier way to design for mobile & desktop vs trying to deal with many different viewports (which is a ridiculous, backwards problem that represents an industry failure).

Re: The ideal viewport doesn't exist

#80

Post by bobthepanda »

nickdothutton wrote: post #76

I'm not, and never was, a "front-end guy". I've noticed more and more quirks (bugs?) in UIs where something is off screen, or unclickable, or suffers extremely unhelpful placement that prevents or significantly impedes my use of a web site/app. Rotate phone/tablet, change font size, hide URL bar, mental note to try it on a desktop or laptop "later". This feels like the front-end version of "it works in dev".

If you’ve worked in front-end dev for a while you can be aware of all the issues.

The problem, generally, is that frontend dev is taught poorly if it’s taught at all, and the barrier to entry is so low that there’s an Eternal September problem.

Post reply on HN