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

131–140 of 202 posts

Re: The ideal viewport doesn't exist

#131

Post by hammock »

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…

Using the data provided, I calculated the minimum window size in order to have full viewability among a percentile subset of the audience. Here are the answers:

  Mobile: 
  50% of viewports: Width 375, Height 635 
  80%: Width 375, Height 635 
  90%: Width 360, Height 560 
  95%: Width 360, Height 550 
  99%: Width 320, Height 500
  
  Desktop:
  50% of viewports: Width 1440, Height 900
  80%: Width 1024, Height 600
  90%: Width 1024, Height 600
  95%: Width 1024, Height 600
  99%: Width 800, Height 300

Re: The ideal viewport doesn't exist

#132

Post by zlg_codes »

calderwoodra wrote: post #102
bobthepanda wrote: post #80

Earlier quoted context omitted.

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.

I'd think that eventually we'd have a large enough cohort of folks that know web dev well since the barrier is so low, but I think most people try to get out of frontend development asap.

I'm trying to learn some JS in my spare time, if only to show in interviews that I can do it, but I understand why one wouldn't want to. I'm just doing bare JS for now, but even with a framework, there is so much to manage in the DOM to make consistent interfaces, and CSS3 is so much more complex (but also convenient, in some ways!), putting together good interfaces is legitimately hard. Responsiveness is the big hurdle in creating a well-behaving app, from my perspective.

I think I could've learned a GUI toolkit and had something working in the time it's taken me to pick up building two JS apps. The barrier to entry may be low, but that's only because the feedback loop for webdev is super tight. Great for prototyping, experimentation, and getting more newbies in the field. But it's crazy that anything productive gets built on JS and DOM.

The backend, with databases and storage and caches, service management and sysadmin, that's where the fun is!

Re: The ideal viewport doesn't exist

#133

Post by prizzom »

Things I like about this article:

+ A focus on viewport size instead of screen size.

Few people browse websites in full screen in fact "Full Screen" browsing is used almost entirely for people using a web browser for presentations or physical kiosks. A completely different use-case than regular desktop browseing.

I loathe the fact that when I tile my windows to half my screen size the website "helpfully" switches into a tablet/mobile layout. Incidentally WCAG (which I consider a well-meaning but ultimately largely useless set of guidelines) can be blamed for a lot of this nonsense.

Things that I hate about this article:

- Like many "analysis" articles they start with a misleading validation of their sample size. 120,000 datapoints is not terribly big.

- Implying that these screensizes can't be grouped together. Resolutions #3 and #4 are practically identical 393x660 vs 390x664 is essentially a rounding error.

- Implying that any sane person should be considering how their desktop/mobile website should be displaying on a smart watch. This is totally different use case and (admittedly having never built anything for a smartwatch) I assume (hope?) that unless you've somehow identified your design as being smart watch compatible the browser is very liberally going to strip most of your layout and styling anyway to just text and headings.

- Implying that anyone should care about the minor differences in screen sizes. As a veterean of the Flip-phone days when the scourge of "form over function" phones (think Beyonce clamshell phone) was at its previous highest. There is no solving this problem. Apple swooped in an took a strong-armed approach to screen sizes that made developing on iOS EXPONENTIALLY EASIER than supporting MIDP or Android.

- A useless masonry visualization of viewports in a garish orange/purple contrast that is impossible to read. Thanks for nothing.

Re: The ideal viewport doesn't exist

#134

Post by zlg_codes »

bityard wrote: post #99
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, wher…

Good points! The unfortunate side effect of having 4k and 8k screens is that 1080p is still common. I could understand why they'd assume nobody leaves a browser window covering only a quarter of their screen, but at the same time, both major browsers have a Responsive Mode where you can test screen resolutions, orientations, and tap events.

There are devices with resolutions under 800x600 still accessing the Web. Every developer has to place where their own minimum threshold of consideration is. I personally aim for those old-school resolutions as the minimum, and may move upwards to something like 720p if it's a bit more complex. My screen itself is 1080p, so if it looks good at full screen, it will probably look decent on 4k as well as long as I'm using scaling units.

Re: The ideal viewport doesn't exist

#135

Post by bandergirl »

ryandrake wrote: post #49
bandergirl wrote: post #32

Earlier quoted context omitted.

[flagged]

I have a 27" display and browse with the browser window maximized. I paid for this display, and I expect to use every pixel. Web designers, however, seem to hate me for it and choose to constrain the width of their content to a tiny, 6cm column down the middle of my display, leaving 80% of the width as whitespace.

Clear case of you’re using it wrong

I don’t know how you expect a designer to fill 27” with an article. Surely they could add several columns just for you, though, a great investment of team hours.

There are very few types of websites that benefit from all that space and it’s usually video and photos.

Re: The ideal viewport doesn't exist

#136

Post by bandergirl »

mcv wrote: post #44
bandergirl wrote: post #32

Earlier quoted context omitted.

[flagged]

I recently bought a 4K screen specifically to be able to have an IDE and a browser next to each other. Every once in a while there's an app that thinks that all of that screen real estate is really all just for them. It's not.

Placing windows side by side is the correct usage of the available space, I hold no qualms against you.

Re: The ideal viewport doesn't exist

#137

Post by withinboredom »

esdott wrote: post #90
hagg3n wrote: post #86

Earlier quoted context omitted.

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.

I just stab them in the eyes and then say "now you'll care about blind people," then calmly walk away. Works every time. /s

In all seriousness, I ask something similar to the above: "Would you feel the same way if you got in an accident that left you blind for the rest of your life?" Sometimes this moves a few people to your side. I don't want to be the only one, but I do care about accessibility. I care a lot, for personal reasons. But like you said, you don't want to be the minority trying to support minorities.

Re: The ideal viewport doesn't exist

#139

Post by withinboredom »

crazygringo wrote: post #85
omegabravo wrote: post #82

Earlier quoted context omitted.

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

Re: The ideal viewport doesn't exist

#140

Post by throwaway14356 »

gnarbarian wrote: post #130
paulddraper wrote: post #116

Earlier quoted context omitted.

> And disabling zooming? WHO EVEN DECIDED THAT WEBSITES SHOULD BE ALLOWED TO DO THIS?! Applications such as maps, image editors, presentations, and flowcharts benefit from having control over zoom. (And you'll notice that almost every one of them does.) This of course is only one difference of many between "documents" and "applications" and the web is being used for both.

yes you're right. we have a map with a toolbar at the top of the screen. when zoom was enabled people were constantly zooming in preventing them from being able to see some or all of the buttons hindering their ability to use the app. and causing confusion because they didn't realize they were zoomed in. as soon as we disabled zoom the complaints and questions stopped.

setting just the toolbar to not zoomable should have been the obvious solution.

(In stead I have to disable zooming in on images to preserve the next/previous/close buttons and implement zoom from scratch. wtf?)

Post reply on HN