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

91–100 of 202 posts

Re: The ideal viewport doesn't exist

#91

Post by ArtWomb »

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…

If you need to get weird now, webgpu has arrived, what we really require is a dedicated demoscene on the live web ;)

Your first WebGPU app (Conway's Game of Life)

https://codelabs.developers.google.com/your-first-webgpu-app

Re: The ideal viewport doesn't exist

#92

Post by avmich »

The visualization, I think, could be improved. Make a graph of points, where X and Y coordinates correspond to width and height of the viewport, this is like imagining all those viewports having the same left top corner and recording bottom right corner. Those points on the graph which correspond to more frequently occurring viewports should be brighter (if not bigger circles). Many points for large number of small viewports will be clustered in left top corner, to make points more evenly spaced, the coordinates could be logarithmic.

    +--------------------+
    |   . .              |
    |  *. .*.            |
    |   .**.   ..        |
    |         ..*.       |
    |          .    .    |
    |                 .  |
    +--------------------+

Re: The ideal viewport doesn't exist

#93

Post by Sohcahtoa82 »

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…

> and dont do stuff like hijacking the scroll, zoom or other common behaviours.

The hijacking of scrolling pisses me off so god damn much that I've considered building Firefox from source and modifying the code to completely eliminate a website's ability to set the scroll position.[0]

Front end devs, I implore you. Stop acting like you think you know what the user wants in regards to scrolling behavior. Smooth scrolling already exists natively in every browser. There's no need to try to re-implement it in JavaScript. Your implementation will not work in every browser, and will only cause strange stuttering, bouncing, or even end up somehow completely disabling scrolling altogether. Do not try to get fancy and implement "momentum" into scrolling. You're changing a well-understood behavior into something that is unexpected and jarring, and likely it won't work anyways.

Do not change the scrolling amount. My wheel sensitivity and browser setting are configured so that 1-click ~= 2.5 lines of scrolling. Do not impose your preference of 1 click ~= 1 line on me. You do not know better than me.

And disabling zooming? WHO EVEN DECIDED THAT WEBSITES SHOULD BE ALLOWED TO DO THIS?! It destroys accessibility! Sometimes there's text or an image that's just a little too small to recognize. I'd pinch to zoom in...but some moron front-end dev has adopted the beyond-bone-headed mentality of "removing features is a feature!" and makes their site tell the browser to not allow zooming because...why? Someone please, tell me why.

[0] I'm sure it's possible to write an extension that could do this, but any time you're manually setting the scroll position in code, you're bound to fuck it up. Rather just completely eliminate the ability to set the scroll position entirely.

Re: The ideal viewport doesn't exist

#94

Post by bryanrasmussen »

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…

>I don't know how useful this is.

>setting breakpoints allows some sanity in the build and testing process

clamp allows for sane responsiveness

https://developer.mozilla.org/en-US/docs/Web/CSS/clamp

and if needed you can add some minimal breakpoints.

The fact is that most front end devs don't know about it, and there is no framework that I know of which is based around its use (and everything nowadays seems to be about the frameworks), thus you end up with inefficient multiple breakpoints which may seem sane until you get too close to one of the breakpoints and your design looks like crap until that point is hit and you can switch to the new values set for the breakpoint.

breakpoints are a great solution if you happen to be living and working in the web of 3 years ago. But the clamp, min, and max functions have been available in every major browser since 2020 - even Opera.

People keep telling me 3 years is an eternity in internet time, so why are there still all these damn breakpoints?

Re: The ideal viewport doesn't exist

#95

Post by esdott »

For those who think that you can simply build something “fluid” or “flexible,” it’s a lot harder than it seems. A lot of the industry jargon comes from print and the printing process; margins, padding, kerning, spacing, etc. There is no such thing as a fluid layout on a printing press (as far as I know :-). So we are stuck with a language to describe design based on a different era. Additionally, in the design phase you HAVE to select a layout/viewport for proofs and examples. Which in turn the client will expect to look exactly right on every surface. There is obviously room for client education and pushback but fluid designs seem like an afterthought in html/css where we are adding new features on top of html/css that are best used in a fixed width based system.

Re: The ideal viewport doesn't exist

#96

Post by avmich »

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.

I think there are some laws which require a certain degree of accessibility for at least government websites. And if your big company deals with government, they'd better think about that.

Re: The ideal viewport doesn't exist

#97

Post by temac »

adventured wrote: post #79
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 phon…

I'm not even sure what mobile means in this context. What happens when you plug your phone on a screen? What happens when you use a tablet?

Re: The ideal viewport doesn't exist

#98

Post by kosasbest »

Responsive sites have to be like elastic 'jelly' and accommodate every view-port resolution. The only exception being non-mobile-friendly web apps, in which case some sort of manifest should be read by the browser and presented to the user clearly stating mobile isn't supported and they should use a desktop browser instead.

Then there's the progressive web app (PWA) debacle, where users don't even know what a PWA is and don't know that they can pin sites to their home-screen, simulating an app.

Re: The ideal viewport doesn't exist

#99

Post by bityard »

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

I have this shaky hypothesis where the majority of UX devs today (not just web devs) grew up consuming content on smart phones, ipads, and small laptop screens. Their default way of interacting with technology is one app or web page at a time, all in maximized windows taking up the whole screen, and switching between between full-screen apps to multi-task. Perhaps this pattern carries over into their adult work, where they design sites and apps that look great when taking up the whole screen of a typical PC or tablet, but outright fail when exposed to a typical "windowed" browser width.

My normal browser width is about 1300 pixels and I see so many web sites and apps these days that can't tolerate what I consider a very reasonable browser width that this is the only explanation I can come up with.

Re: The ideal viewport doesn't exist

#100

Post by madeofpalk »

lucideer wrote: post #42

There's an elephant in the room here, and it's Adobe. The author's put forward a lot of valid criticisms of the breakpoint-based approach & also provided a really good guide to doing proper web design, but what's skipped over is that their guide only works for developer-designers, & won't fit the workflow of a large proportion (majority?) of people doing visual design for web. Those designers are have backgrounds in…

> and slightly fewer people are designing entire websites in Photoshop & Illustrator alone

Across the wide industry, sure, but I haven't worked with a designer who uses Photoshop in 10 years...

Granted, I'm in my own bubble, but over a varity of gigs it's been Sketch, and now universally figma.

Post reply on HN