13 ms·

The ideal viewport doesn't exist

283 points by Kye 3y ago

cthor 3y ago
That masonry layout diagram is horribly deceptive. The boxes aren't to scale at all.
- mcv 3y ago
  I see it often, and I hate it. It standardises on width, so everything that's wide (landscape oriented photos, or in this case desktop windows) gets shrunk dramatically. In this particular case, it makes the largest viewports look the smallest, and makes the smallest ones look largest. It's indeed very deceptive.
karmakaze 3y ago
Landscape on mobile is the least well supported configuration I know. Static headers/footers commonly take 50% or more vertical space with no way to dismiss or shrink them.
- tantalor 3y ago
  > no way to dismiss or shrink them You can shrink them by rotating your phone back to the correct, portrait orientation.
  - karmakaze 3y ago
    Or shrink everything to unreadable sizes with "Desktop site".
  - layer8 3y ago
    It also happens on tablets and notebooks, in particular with larger font sizes or zoom factor configured.
- coldpie 3y ago
  I'm going to change your life: https://github.com/t-mart/kill-sticky https://github.com/t-mart/kill-sticky It's a bookmarklet that gets rid of sticky elements. It nukes those stupid fucking headers and footers and kills most cookie banners and "give me your email" type pop-ups. Works in every browser (I use it in Safari on iOS and Firefox on desktop). I almost reflexively go hit this bookmarklet on every website now. It makes the web so much better.
  - WhrRTheBaboons 3y ago
    cheers!
ghusto 3y ago
> 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).
- sebzim4500 3y ago
  I think most people have a task bar at the bottom, at least on Windows and Linux.
- PMunch 3y ago
  You never side by side your browser and another application like a terminal or text editor? And even barring that the taskbar of your OS along with window decorations means that your browser is seldom 100% of the screen. This is also talking about the viewport, so even though they clumsily refer to it as the "browser" the website won't be given 100% of your resolution even if your browser did have 100% simply because of things like the tabs bar and other navigation. Can you full-screen a website? Sure. But that's not the common way to browse.
  - ghusto 3y ago
    > You never side by side your browser and another application like a terminal or text editor? Never. I cmd+tab between windows. What I _have_ seen is developers have those on different monitors, but even there the browser is always fullscreen. > And even barring that the taskbar of your OS along with window decorations means that your browser is seldom 100% of the screen I did mention this ;)
- jerf 3y ago
  I believe the intention of that statement is to not assume that it's filling the entire screen, that is, not to count on it in some manner. A lot of people still make this mistake one way or another. In about the last year I finally gave up; my tiling window manager used to have the browser at 2/3rds the screen with the remaining 1/3 a terminal, but more and more I've been encountering websites that are very unhappy with that width; not small enough to kick in mobile mode or they detect that I'm on a desktop browser and don't adjust, but not large enough for the design they serve me, creating overlapping regions, or horizontal scrolling, etc. So my browser is full screen a lot more often now. On the one hand I'm annoyed, but on the other, an implication of the article is that you essentially can't test at "all" viewport sizes anymore and it's just so easy to accidentally write a website that is unhappy at exactly pixel widths 892-945 when used with my exact font setup and/or zoom setting that I can't really stay mad at some of these sites. Some of the sites I have trouble with are clearly trying, and are competent in many other ways. You can hardly expect your designers to visit every page on your site and test every single width from 200 to 2000 one pixel at at time, let alone ask them to do it again with a variety of zoom settings. Heck, I can't even tell you my own website can do that. I've checked it on a phone and in my desktop browser at a couple of sizes, but I can't do it anymore than anyone else can nowadays.
RugnirViking 3y ago
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 think people know how big 120.000 is, but if you must, just say its more than wembley
- shortrounddev2 3y ago
  Also, working in an industry with a lot of data, 120k isn't a lot
  - afavour 3y ago
    Come on, that's a silly statement. There's no point comparing completely context free "amounts of data". If the post was “the incredible difficulty of inserting 120k rows in database” you’d have a point. But it isn’t.
- paxys 3y ago
  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!"
- pdabbadabba 3y ago
  > I think people know how big 120.000 is, but if you must, just say its more than wembley Agreed. And if you must compare to a stadium, why not just pick a bigger stadium? You can pack at least 115,000 into Michigan Stadium, which would get you a lot closer than Wembley. (What's that you say? You've never been to Michigan Stadium? That's probably another reason not to rely on this kind of comparison! I, for example have never been to Wembley and have no idea how big it is.)
quickthrower2 3y ago
Scroll hijack makes this unusable
- ovao 3y ago
  I didn’t experience any issues on my first read through, but on the second visit it now randomly scrolls back to the top of the viewport.
PMunch 3y ago
I wish more pages took the pointer and resolution media queries into account. So many times I open windows side-by-side on my desktop and end up with the menu collapsing into a hamburger menu which fills the entire screen when clicked. Many phones today have very high DPI and very low precision in touch, so it makes sense to have massive visual elements and buttons, but my desktop with the same size in pixels as my phone but a much lower DPI and much higher input precision doesn't really need them.
- Technotroll 3y ago
  This is an interesting observation. Do you have some examples of this?
  - throwaway290 3y ago
    react.dev And for an example that does it better, legacy.reactjs.org :) When I saw it I wondered how they managed to drop the ball so hard and how much they paid for it. All they needed is to expand and slightly restructure the docs, but apparently someone sold them a complete redesign that just made the whole docs way less usable (a11y aside, can't speak for that).
  - bandergirl 3y ago
    > Do you have some examples of this? Sorry if it sounds rude, but have you used the web on the desktop in the past 10 years? Anything under 1000px-wide windows and sometimes 1200px-wide ones gets you the “mobile menu” on most websites. It’s a consequence of Bootstrap and other fixed-breakpoint frameworks. Overflow menus like what you see on GitHub repositories are the minority.
  - aendruk 3y ago
    Screenshots: https://cloudflare-ipfs.com/ipfs/QmUL69cYwCs2sWV7eHqtt14BEcn7kMcCqP4sbHdEkczJuf/example/ https://cloudflare-ipfs.com/ipfs/QmUL69cYwCs2sWV7eHqtt14BEcn...
    - qingcharles 3y ago
Jabrov 3y ago
Literally can't read through this on Chrome iPhone 13 because it keeps jumping back to the top :(
- csydas 3y ago
  I was seeing something similar with desktop Safari (15.6.1) on MacOS. Resizing the browser window, and looks like (but not sure) that it just switches to another breakpoint (their words) for a new viewport, and they didn't design a way to pass the page scroll position to the new view port so it just resets the page position. Their "all viewports" page also isn't visible on my browser if the window is too small as the titles on each viewport aren't visible.
- smilespray 3y ago
  Same on my iPad Air 4.
- tacker2000 3y ago
  Same on iphone 12 pro, ios 16
- cal85 3y ago
  Same on iOS Safari. Jumps back to the top seemingly at random. Sometimes I can get a few scrolls down the page but then it jumps back.
5350-uiop-1130 3y ago
> "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 which of course would be pretty lucrative for a boutique agency. > "This goes all the way back to planning your projects too. When mapping out page content, ask yourself how it will be for the weird viewport sizes that don’t fit the typical mould? Always try to simplify and condense content to make it useful for everyone." it's really not that complicated. keep the amount of crap (stuff that can go wrong) like animations, weird font sizes and font faces, javascript to a minimum. and dont do stuff like hijacking the scroll, zoom or other common behaviours. just dont do anything unless you absolutely have to. but thats why the web is such a hostile platform. difficult to manage high user/client expectations with pragmatism.
- johnnyworker 3y ago
  For me it really just involves squishing the browser window in all sorts of ways and see what happens, and if I get any ideas on what I would want to change. I don't see what the big deal is. > crap (stuff that can go wrong) like animations, weird font sizes and font faces, javascript None of these per se are the issue, and you can still have the issue with zero animations, fonts or JavaScript.
- smarkov 3y ago
  > I don't know how useful this is. I think very. I've never designed anything based on arbitrary breakpoints (md, lg, xl and whatever numbers they might translate to) because that forces me to make design choices around those constraints. The only way to sanely add breakpoints in my opinion is to gradually reduce the width of your page and search for things that start looking off. Are your paragraphs starting to look a little cramped? Add a breakpoint at that width, maybe remove the sidebar, maybe lower paddings and margins to allow it to stay a little longer, maybe manually reduce font size or switch your column layout to rows if applicable. Keep doing that until you get to ~350px width and everything looks fine. You decide what needs to change when it makes sense rather than being told that something needs to change at some specific breakpoint.
adithyassekhar 3y ago
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.
- return_to_monke 3y ago
  There is, it's called flexbox and the CSS grid. I've found that on simple websites a lot of problems are solved with just a few lines of flexbox config (flex-wrap, etc)
- adventured 3y ago
  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).
  - temac 3y ago
    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?
    - adventured 3y ago
chiefalchemist 3y ago
With flexbox and grid, and dynamic text size, how necessary are breakpoints at this point?
lucideer 3y ago
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 multimedia or have academic backgrounds in design-forward colleges with extremely poor html-css modules. And their tool is Creative Suite - largely because Adobe has a stranglehold on design education. The likes of Sketch have shaken things up somewhat so we at least have XD, and slightly fewer people are designing entire websites in Photoshop & Illustrator alone, but even so - the ability of tools like XD/Figma to allow the designer to model their work fluidly in a way that matches web viewports is not mature, not least because Adobe have been historically hostile to the idea (XD being a very reluctant response to new competitors after already killing off Fireworks).
- madeofpalk 3y ago
  > 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.
  - lucideer 3y ago
    All designers I currently work with are 100% figma, but I work for bigcorp where things are a bit more formalised & designer friends working in the startup world are much more on the multitool/Adobe wagon. Even so though, Figma, while an improvement, is still not where tools should be in this regard. It's a compromise between what's expected by Adobe-educated users and how things actually work on the web.
- agos 3y ago
  I've started doing frontend work back in 2008, and I immediately noticed the friction with designers coming from Adobe tools and their equivalents. It's disheartening to see that 15 years later the problem is still there
_gabe_ 3y ago
This article was great! I think the overall premise is probably more useful for graphic designers than programmers, because I believe many programmers kind of implicitly know this advice. However I’ve worked with graphic designers in the past that were obsessed with having their Figma design translate to the web page in a pixel perfect manner, and they would always be confused when things didn’t align correctly. This inevitably leads to breakpoint Hell, where they design pixel perfect designs for tons of breakpoints and ask you to implement them. While this is laudable, I think it’s important to remember that a design should focus more on how the layout flows when resizing the viewport and focusing on a couple target breakpoints. I think that’s what this article is trying to emphasize.
Devasta 3y ago
The fix is simple: Lobby congress to ban everything except 1024 x 768 resolution screens.
ciwolsey 3y ago
I refuse to read anything even remotely related to accessibility written by someone dumb enough to put white text on a yellow background.
- adventured 3y ago
  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.
- teekert 3y ago
  ? I don't see that anywhere?
- qingcharles 3y ago
  Screenshot?
locusofself 3y ago
"The population of our home town, Cheltenham, is around 116,000 so our datapoints could almost populate the entire town!" 120,000 > 116,000, so their 120k data points could more than populate the town...
swayvil 3y ago
Could an AI write a JIT custom window manager? Or would that be too unreliable?
paxys 3y ago
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).
- rmilejczz 3y ago
  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
nickdothutton 3y ago
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".
- bobthepanda 3y ago
  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.
  - calderwoodra 3y ago
    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.
    - zlg_codes 3y ago
      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!
Solvency 3y ago
Many parts of this article are unviewable on mobile. Irony?
seydor 3y ago
i wish the fad of responsiveness went away. i m fine with zooming in and out in pages, and i like thinking of a document as a 2d map.
avmich 3y ago
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. +--------------------+ | . . | | *. .*. | | .**. .. | | ..*. | | . . | | . | +--------------------+
- hddqsb 3y ago
  Here you go: https://i.imgur.com/9cJ13ue.png https://i.imgur.com/9cJ13ue.png (alternative link: https://imgur.com/a/uBG5KUD https://imgur.com/a/uBG5KUD) (The area of each circle is proportional to the count, clamped to a minimum value. Axes a are linear.) Uses the data from https://viewports.fyi/data.csv https://viewports.fyi/data.csv. Code: import csv from math import sqrt import sys csv_reader = csv.reader(sys.stdin) headings = next(csv_reader) data = [tuple(map(int, row[:3])) for row in csv_reader] max_w = 7100 # max(row[0] for row in data) + fudge max_h = 7100 # max(row[1] for row in data) + fudge max_count = max(row[2] for row in data) margin = 200 svg_width = max_w + 2*margin svg_height = max_h + 2*margin max_r = 90 min_r = 4 print('<?xml version="1.0"?>') print(f'<svg xmlns="http://www.w3.org/2000/svg" width="{svg_width}" height="{svg_height}" viewBox="{-margin} {-margin} {svg_width} {svg_height}">') print('<desc>Visualization of viewport sizes from https://viewports.fyi/</desc>') print(f'<rect x="{-margin}" y="{-margin}" width="{svg_width}" height="{svg_height}" fill="white"/>') print(f'<line x1="0" y1="0" x2="{max_w}" y2="0" stroke="black"/>') print(f'<line x1="0" y1="0" x2="0" y2="{max_h}" stroke="black"/>') for i in range(0, max_w, 200): print(f'<text font-size="64" font-family="sans-serif" x="{i}" y="-30" text-anchor="middle">{i}</text>') print(f'<line x1="{i}" y1="0" x2="{i}" y2="-20" stroke="black"/>') for i in range(0, max_h, 200): print(f'<text font-size="64" font-family="sans-serif" x="-30" y="{i + 20}" text-anchor="end">{i}</text>') print(f'<line x1="0" y1="{i}" x2="-20" y2="{i}" stroke="black"/>') print('<g fill="blue" stroke="darkblue">') for w, h, count in data: r = max(min_r, sqrt(count) / sqrt(max_count) * max_r) print(f'<circle cx="{w}" cy="{h}" r="{r}"/>') print('</g>') print('</svg>')
esdott 3y ago
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.
- eternityforest 3y ago
  If you learn non fluid design first it seems hard. In absolute terms, it's really just a matter of using flexbox and percents, and being willing to just scrap your design idea and do something else if it doesn't map nicely to something fluid. Client education is a challenge and all, they often have ideas in mind that are very specific (For some reason clients invariably like the simplest thing that's the least general and most direct of a translation from a basic analog system...). But on the technical side... once you stop making designs that rely on being able to control exactly where everything goes it gets a lot easier.
kosasbest 3y ago
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.
- calderwoodra 3y ago
  Our product is the exception here (desktop only web app). We basically just account for 800-1300px width range and call it a day. On the low-side, we show a "desktop only" overlay. On the high side, we block the content from expanding.
- depressedpanda 3y ago
  > 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. Users don't need to know what a PWA is. Thereason users don't know that they can be 'installed' is because they're on iOS, where Apple has been effectively hamstringing them in favor of the Apple App Store. There is a way to install PWAs on iOS, but it's quite hidden.
orliesaurus 3y ago
Not sure if the author will read this but, I think there's a typo on that page towards the end: "it's a much difference picture." should be "it's a much differeNT picture."
Am4TIfIsER0ppos 3y ago
http://motherfuckingwebsite.com/ http://motherfuckingwebsite.com/ unironically
deleted 3y ago
[deleted]
aidenn0 3y ago
Android app authors ought to read this too. I recently had an android app where the button on one screen was past the bottom of my screen and it wasn't scrollable. I went to report the bug and someone else had already reported it. Given that the workaround was to set the system font-size small enough that the button would appear back on the screen, this would also be an accessibility problem for those who have their font-size set larger, even if their screen would be normally large enough to display it.
larrik 3y ago
> Even on one iOS device, there's a minimum of 3 environments a website could find itself in, based on operating system states. Besides the fact that I'm not convinced the 3d touch one is a real viewport, how can he miss the fact that there is landscape mode on these devices, which have completely different dimensions?
prizzom 3y ago
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.
- eddd-ddde 3y ago
  Now a days I almost always work fullscreen, even when programming if I have docs and vscode I'll just tab between the two. I don't even use multiple monitors cause I find I end up causing myself some pain from bad posture. I feel like I must be a minority, My workflow is almost entirely switch desktop+ switch tab.
terracottalite 3y ago
LOL. Line 1268 of that CSV file [0] has a negative height. And it actually is in the visualization [1]. Wonder what kind of device reports a -2000 height :D [0]:https://viewports.fyi/data.csv https://viewports.fyi/data.csv [1]:https://viewports.fyi/all/ https://viewports.fyi/all/
- antod 3y ago
  Maybe someone holding their phone upside down?
beeslol 3y ago
> If you’re on a desktop device reading this, how many windows are filling the entire screen? How much screen space does the browser you’re reading from take up? > It’s safest to presume that users on desktop or laptop devices are not filling their entire screen with a browser. Is this true? If you're reading this casually (and you are reading this casually) is your browser not at full size? I almost exclusively use my desktop and laptop with windows maximized unless I'm doing some work which requires me to split up my screen (for example writing while looking at docs or program output). Am I the outlier here?
- aendruk 3y ago
  I almost exclusively use my laptop split-screen unless I’m doing some work that requires maximization. Over the last few years increasingly many websites when allocated half the laptop screen have needlessly contorted into less functional layouts appropriate for a phone, but stretched huge.
- pdabbadabba 3y ago
  For me, it varies by OS. I'm currently reading this on a Mac, and the window is not filling my entire screen. If I were using my Windows PC, however, I would be much more likely to have the window maximized. I find that Windows makes is easier to track all the windows I have open even when one is maximized.
- rbarden 3y ago
  Not an outlier, I almost exclusively use full-screen browser windows. Even if I need to see content in close proximity, I usually just switch between two workspaces (vim on one, browser on another) and flip back and forth pretty easily to see the output.
- creole_wither 3y ago
  [dead]
deleted 3y ago
[deleted]
pie_flavor 3y ago
My favorite viewpoint anecdote: Many sites like to assume (like the article mentions) that a good 'mobile view' cut point is 768px. And some of those sites, in particular NodeBB (back when I used it), use the particular media queries `max-width: 767px` and `min-width: 768px`. On the right laptop, on the right version of everything, if you drag the title bar to one side of the screen so it resizes to fit half the screen, Chrome will report the width 767.5px and the site will immediately break fantastically.
- deleted 3y ago
  [deleted]
- aflukasz 3y ago
  Similar problem will occur when using min-width and max-width with same value of Xpx - they both match at exactly Xpx. For mutual exclusion `not` should be used. Or https://drafts.csswg.org/mediaqueries/#range-context https://drafts.csswg.org/mediaqueries/#range-context, but that's at only ~83% global adoption rate at the moment, according to https://caniuse.com/css-media-range-syntax https://caniuse.com/css-media-range-syntax.
probablynish 3y ago
I know that this article is probably 'objectively good design' in some way, seeing as its written by front-end experts of some sort, but I found the content much tougher to read and digest than a much plainer format. All the different bold colors, graphics, and large/varied font sizes were tougher for me to absorb than something more straightforward (eg https://www.arslonga.email/how-to-connect-zotero-with-obsidian/ https://www.arslonga.email/how-to-connect-zotero-with-obsidi... - just the most recent example I could think of). Anyone else feel the same?

283 points by Kye 3y ago

cthor 3y ago

That masonry layout diagram is horribly deceptive. The boxes aren't to scale at all.

mcv 3y ago
I see it often, and I hate it. It standardises on width, so everything that's wide (landscape oriented photos, or in this case desktop windows) gets shrunk dramatically. In this particular case, it makes the largest viewports look the smallest, and makes the smallest ones look largest. It's indeed very deceptive.

karmakaze 3y ago

Landscape on mobile is the least well supported configuration I know. Static headers/footers commonly take 50% or more vertical space with no way to dismiss or shrink them.

tantalor 3y ago
> no way to dismiss or shrink them You can shrink them by rotating your phone back to the correct, portrait orientation.
- karmakaze 3y ago
  Or shrink everything to unreadable sizes with "Desktop site".
- layer8 3y ago
  It also happens on tablets and notebooks, in particular with larger font sizes or zoom factor configured.
coldpie 3y ago
I'm going to change your life: https://github.com/t-mart/kill-sticky https://github.com/t-mart/kill-sticky It's a bookmarklet that gets rid of sticky elements. It nukes those stupid fucking headers and footers and kills most cookie banners and "give me your email" type pop-ups. Works in every browser (I use it in Safari on iOS and Firefox on desktop). I almost reflexively go hit this bookmarklet on every website now. It makes the web so much better.
- WhrRTheBaboons 3y ago
  cheers!

ghusto 3y ago

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

sebzim4500 3y ago
I think most people have a task bar at the bottom, at least on Windows and Linux.
PMunch 3y ago
You never side by side your browser and another application like a terminal or text editor? And even barring that the taskbar of your OS along with window decorations means that your browser is seldom 100% of the screen. This is also talking about the viewport, so even though they clumsily refer to it as the "browser" the website won't be given 100% of your resolution even if your browser did have 100% simply because of things like the tabs bar and other navigation. Can you full-screen a website? Sure. But that's not the common way to browse.
- ghusto 3y ago
  > You never side by side your browser and another application like a terminal or text editor? Never. I cmd+tab between windows. What I _have_ seen is developers have those on different monitors, but even there the browser is always fullscreen. > And even barring that the taskbar of your OS along with window decorations means that your browser is seldom 100% of the screen I did mention this ;)
jerf 3y ago
I believe the intention of that statement is to not assume that it's filling the entire screen, that is, not to count on it in some manner. A lot of people still make this mistake one way or another. In about the last year I finally gave up; my tiling window manager used to have the browser at 2/3rds the screen with the remaining 1/3 a terminal, but more and more I've been encountering websites that are very unhappy with that width; not small enough to kick in mobile mode or they detect that I'm on a desktop browser and don't adjust, but not large enough for the design they serve me, creating overlapping regions, or horizontal scrolling, etc. So my browser is full screen a lot more often now. On the one hand I'm annoyed, but on the other, an implication of the article is that you essentially can't test at "all" viewport sizes anymore and it's just so easy to accidentally write a website that is unhappy at exactly pixel widths 892-945 when used with my exact font setup and/or zoom setting that I can't really stay mad at some of these sites. Some of the sites I have trouble with are clearly trying, and are competent in many other ways. You can hardly expect your designers to visit every page on your site and test every single width from 200 to 2000 one pixel at at time, let alone ask them to do it again with a variety of zoom settings. Heck, I can't even tell you my own website can do that. I've checked it on a phone and in my desktop browser at a couple of sizes, but I can't do it anymore than anyone else can nowadays.

RugnirViking 3y ago

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 think people know how big 120.000 is, but if you must, just say its more than wembley

shortrounddev2 3y ago
Also, working in an industry with a lot of data, 120k isn't a lot
- afavour 3y ago
  Come on, that's a silly statement. There's no point comparing completely context free "amounts of data". If the post was “the incredible difficulty of inserting 120k rows in database” you’d have a point. But it isn’t.
paxys 3y ago
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!"
pdabbadabba 3y ago
> I think people know how big 120.000 is, but if you must, just say its more than wembley Agreed. And if you must compare to a stadium, why not just pick a bigger stadium? You can pack at least 115,000 into Michigan Stadium, which would get you a lot closer than Wembley. (What's that you say? You've never been to Michigan Stadium? That's probably another reason not to rely on this kind of comparison! I, for example have never been to Wembley and have no idea how big it is.)

quickthrower2 3y ago

Scroll hijack makes this unusable

ovao 3y ago
I didn’t experience any issues on my first read through, but on the second visit it now randomly scrolls back to the top of the viewport.

PMunch 3y ago

I wish more pages took the pointer and resolution media queries into account. So many times I open windows side-by-side on my desktop and end up with the menu collapsing into a hamburger menu which fills the entire screen when clicked. Many phones today have very high DPI and very low precision in touch, so it makes sense to have massive visual elements and buttons, but my desktop with the same size in pixels as my phone but a much lower DPI and much higher input precision doesn't really need them.

Technotroll 3y ago
This is an interesting observation. Do you have some examples of this?
- throwaway290 3y ago
  react.dev And for an example that does it better, legacy.reactjs.org :) When I saw it I wondered how they managed to drop the ball so hard and how much they paid for it. All they needed is to expand and slightly restructure the docs, but apparently someone sold them a complete redesign that just made the whole docs way less usable (a11y aside, can't speak for that).
- bandergirl 3y ago
  > Do you have some examples of this? Sorry if it sounds rude, but have you used the web on the desktop in the past 10 years? Anything under 1000px-wide windows and sometimes 1200px-wide ones gets you the “mobile menu” on most websites. It’s a consequence of Bootstrap and other fixed-breakpoint frameworks. Overflow menus like what you see on GitHub repositories are the minority.
- aendruk 3y ago
  Screenshots: https://cloudflare-ipfs.com/ipfs/QmUL69cYwCs2sWV7eHqtt14BEcn7kMcCqP4sbHdEkczJuf/example/ https://cloudflare-ipfs.com/ipfs/QmUL69cYwCs2sWV7eHqtt14BEcn...
  - qingcharles 3y ago

Jabrov 3y ago

Literally can't read through this on Chrome iPhone 13 because it keeps jumping back to the top :(

csydas 3y ago
I was seeing something similar with desktop Safari (15.6.1) on MacOS. Resizing the browser window, and looks like (but not sure) that it just switches to another breakpoint (their words) for a new viewport, and they didn't design a way to pass the page scroll position to the new view port so it just resets the page position. Their "all viewports" page also isn't visible on my browser if the window is too small as the titles on each viewport aren't visible.
smilespray 3y ago
Same on my iPad Air 4.
tacker2000 3y ago
Same on iphone 12 pro, ios 16
cal85 3y ago
Same on iOS Safari. Jumps back to the top seemingly at random. Sometimes I can get a few scrolls down the page but then it jumps back.

5350-uiop-1130 3y ago

> "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 which of course would be pretty lucrative for a boutique agency. > "This goes all the way back to planning your projects too. When mapping out page content, ask yourself how it will be for the weird viewport sizes that don’t fit the typical mould? Always try to simplify and condense content to make it useful for everyone." it's really not that complicated. keep the amount of crap (stuff that can go wrong) like animations, weird font sizes and font faces, javascript to a minimum. and dont do stuff like hijacking the scroll, zoom or other common behaviours. just dont do anything unless you absolutely have to. but thats why the web is such a hostile platform. difficult to manage high user/client expectations with pragmatism.

johnnyworker 3y ago
For me it really just involves squishing the browser window in all sorts of ways and see what happens, and if I get any ideas on what I would want to change. I don't see what the big deal is. > crap (stuff that can go wrong) like animations, weird font sizes and font faces, javascript None of these per se are the issue, and you can still have the issue with zero animations, fonts or JavaScript.
smarkov 3y ago
> I don't know how useful this is. I think very. I've never designed anything based on arbitrary breakpoints (md, lg, xl and whatever numbers they might translate to) because that forces me to make design choices around those constraints. The only way to sanely add breakpoints in my opinion is to gradually reduce the width of your page and search for things that start looking off. Are your paragraphs starting to look a little cramped? Add a breakpoint at that width, maybe remove the sidebar, maybe lower paddings and margins to allow it to stay a little longer, maybe manually reduce font size or switch your column layout to rows if applicable. Keep doing that until you get to ~350px width and everything looks fine. You decide what needs to change when it makes sense rather than being told that something needs to change at some specific breakpoint.

adithyassekhar 3y ago

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.

return_to_monke 3y ago
There is, it's called flexbox and the CSS grid. I've found that on simple websites a lot of problems are solved with just a few lines of flexbox config (flex-wrap, etc)
adventured 3y ago
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).
- temac 3y ago
  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?
  - adventured 3y ago

chiefalchemist 3y ago

With flexbox and grid, and dynamic text size, how necessary are breakpoints at this point?

lucideer 3y ago

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 multimedia or have academic backgrounds in design-forward colleges with extremely poor html-css modules. And their tool is Creative Suite - largely because Adobe has a stranglehold on design education. The likes of Sketch have shaken things up somewhat so we at least have XD, and slightly fewer people are designing entire websites in Photoshop & Illustrator alone, but even so - the ability of tools like XD/Figma to allow the designer to model their work fluidly in a way that matches web viewports is not mature, not least because Adobe have been historically hostile to the idea (XD being a very reluctant response to new competitors after already killing off Fireworks).

madeofpalk 3y ago
> 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.
- lucideer 3y ago
  All designers I currently work with are 100% figma, but I work for bigcorp where things are a bit more formalised & designer friends working in the startup world are much more on the multitool/Adobe wagon. Even so though, Figma, while an improvement, is still not where tools should be in this regard. It's a compromise between what's expected by Adobe-educated users and how things actually work on the web.
agos 3y ago
I've started doing frontend work back in 2008, and I immediately noticed the friction with designers coming from Adobe tools and their equivalents. It's disheartening to see that 15 years later the problem is still there

_gabe_ 3y ago

This article was great! I think the overall premise is probably more useful for graphic designers than programmers, because I believe many programmers kind of implicitly know this advice. However I’ve worked with graphic designers in the past that were obsessed with having their Figma design translate to the web page in a pixel perfect manner, and they would always be confused when things didn’t align correctly. This inevitably leads to breakpoint Hell, where they design pixel perfect designs for tons of breakpoints and ask you to implement them. While this is laudable, I think it’s important to remember that a design should focus more on how the layout flows when resizing the viewport and focusing on a couple target breakpoints. I think that’s what this article is trying to emphasize.

Devasta 3y ago

The fix is simple: Lobby congress to ban everything except 1024 x 768 resolution screens.

ciwolsey 3y ago

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

adventured 3y ago
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.
teekert 3y ago
? I don't see that anywhere?
qingcharles 3y ago
Screenshot?

locusofself 3y ago

"The population of our home town, Cheltenham, is around 116,000 so our datapoints could almost populate the entire town!" 120,000 > 116,000, so their 120k data points could more than populate the town...

swayvil 3y ago

Could an AI write a JIT custom window manager? Or would that be too unreliable?

paxys 3y ago

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

rmilejczz 3y ago
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

nickdothutton 3y ago

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

bobthepanda 3y ago
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.
- calderwoodra 3y ago
  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.
  - zlg_codes 3y ago
    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!

Solvency 3y ago

Many parts of this article are unviewable on mobile. Irony?

seydor 3y ago

i wish the fad of responsiveness went away. i m fine with zooming in and out in pages, and i like thinking of a document as a 2d map.

avmich 3y ago

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

hddqsb 3y ago
Here you go: https://i.imgur.com/9cJ13ue.png https://i.imgur.com/9cJ13ue.png (alternative link: https://imgur.com/a/uBG5KUD https://imgur.com/a/uBG5KUD) (The area of each circle is proportional to the count, clamped to a minimum value. Axes a are linear.) Uses the data from https://viewports.fyi/data.csv https://viewports.fyi/data.csv. Code: import csv from math import sqrt import sys csv_reader = csv.reader(sys.stdin) headings = next(csv_reader) data = [tuple(map(int, row[:3])) for row in csv_reader] max_w = 7100 # max(row[0] for row in data) + fudge max_h = 7100 # max(row[1] for row in data) + fudge max_count = max(row[2] for row in data) margin = 200 svg_width = max_w + 2*margin svg_height = max_h + 2*margin max_r = 90 min_r = 4 print('<?xml version="1.0"?>') print(f'<svg xmlns="http://www.w3.org/2000/svg" width="{svg_width}" height="{svg_height}" viewBox="{-margin} {-margin} {svg_width} {svg_height}">') print('<desc>Visualization of viewport sizes from https://viewports.fyi/</desc>') print(f'<rect x="{-margin}" y="{-margin}" width="{svg_width}" height="{svg_height}" fill="white"/>') print(f'<line x1="0" y1="0" x2="{max_w}" y2="0" stroke="black"/>') print(f'<line x1="0" y1="0" x2="0" y2="{max_h}" stroke="black"/>') for i in range(0, max_w, 200): print(f'<text font-size="64" font-family="sans-serif" x="{i}" y="-30" text-anchor="middle">{i}</text>') print(f'<line x1="{i}" y1="0" x2="{i}" y2="-20" stroke="black"/>') for i in range(0, max_h, 200): print(f'<text font-size="64" font-family="sans-serif" x="-30" y="{i + 20}" text-anchor="end">{i}</text>') print(f'<line x1="0" y1="{i}" x2="-20" y2="{i}" stroke="black"/>') print('<g fill="blue" stroke="darkblue">') for w, h, count in data: r = max(min_r, sqrt(count) / sqrt(max_count) * max_r) print(f'<circle cx="{w}" cy="{h}" r="{r}"/>') print('</g>') print('</svg>')

esdott 3y ago

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.

eternityforest 3y ago
If you learn non fluid design first it seems hard. In absolute terms, it's really just a matter of using flexbox and percents, and being willing to just scrap your design idea and do something else if it doesn't map nicely to something fluid. Client education is a challenge and all, they often have ideas in mind that are very specific (For some reason clients invariably like the simplest thing that's the least general and most direct of a translation from a basic analog system...). But on the technical side... once you stop making designs that rely on being able to control exactly where everything goes it gets a lot easier.

kosasbest 3y ago

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.

calderwoodra 3y ago
Our product is the exception here (desktop only web app). We basically just account for 800-1300px width range and call it a day. On the low-side, we show a "desktop only" overlay. On the high side, we block the content from expanding.
depressedpanda 3y ago
> 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. Users don't need to know what a PWA is. Thereason users don't know that they can be 'installed' is because they're on iOS, where Apple has been effectively hamstringing them in favor of the Apple App Store. There is a way to install PWAs on iOS, but it's quite hidden.

orliesaurus 3y ago

Not sure if the author will read this but, I think there's a typo on that page towards the end: "it's a much difference picture." should be "it's a much differeNT picture."

Am4TIfIsER0ppos 3y ago

http://motherfuckingwebsite.com/ http://motherfuckingwebsite.com/ unironically

deleted 3y ago

[deleted]

aidenn0 3y ago

Android app authors ought to read this too. I recently had an android app where the button on one screen was past the bottom of my screen and it wasn't scrollable. I went to report the bug and someone else had already reported it. Given that the workaround was to set the system font-size small enough that the button would appear back on the screen, this would also be an accessibility problem for those who have their font-size set larger, even if their screen would be normally large enough to display it.

larrik 3y ago

> Even on one iOS device, there's a minimum of 3 environments a website could find itself in, based on operating system states. Besides the fact that I'm not convinced the 3d touch one is a real viewport, how can he miss the fact that there is landscape mode on these devices, which have completely different dimensions?

prizzom 3y ago

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.

eddd-ddde 3y ago
Now a days I almost always work fullscreen, even when programming if I have docs and vscode I'll just tab between the two. I don't even use multiple monitors cause I find I end up causing myself some pain from bad posture. I feel like I must be a minority, My workflow is almost entirely switch desktop+ switch tab.

terracottalite 3y ago

LOL. Line 1268 of that CSV file [0] has a negative height. And it actually is in the visualization [1]. Wonder what kind of device reports a -2000 height :D [0]:https://viewports.fyi/data.csv https://viewports.fyi/data.csv [1]:https://viewports.fyi/all/ https://viewports.fyi/all/

antod 3y ago
Maybe someone holding their phone upside down?

beeslol 3y ago

> If you’re on a desktop device reading this, how many windows are filling the entire screen? How much screen space does the browser you’re reading from take up? > It’s safest to presume that users on desktop or laptop devices are not filling their entire screen with a browser. Is this true? If you're reading this casually (and you are reading this casually) is your browser not at full size? I almost exclusively use my desktop and laptop with windows maximized unless I'm doing some work which requires me to split up my screen (for example writing while looking at docs or program output). Am I the outlier here?

aendruk 3y ago
I almost exclusively use my laptop split-screen unless I’m doing some work that requires maximization. Over the last few years increasingly many websites when allocated half the laptop screen have needlessly contorted into less functional layouts appropriate for a phone, but stretched huge.
pdabbadabba 3y ago
For me, it varies by OS. I'm currently reading this on a Mac, and the window is not filling my entire screen. If I were using my Windows PC, however, I would be much more likely to have the window maximized. I find that Windows makes is easier to track all the windows I have open even when one is maximized.
rbarden 3y ago
Not an outlier, I almost exclusively use full-screen browser windows. Even if I need to see content in close proximity, I usually just switch between two workspaces (vim on one, browser on another) and flip back and forth pretty easily to see the output.
creole_wither 3y ago
[dead]

deleted 3y ago

[deleted]

pie_flavor 3y ago

My favorite viewpoint anecdote: Many sites like to assume (like the article mentions) that a good 'mobile view' cut point is 768px. And some of those sites, in particular NodeBB (back when I used it), use the particular media queries `max-width: 767px` and `min-width: 768px`. On the right laptop, on the right version of everything, if you drag the title bar to one side of the screen so it resizes to fit half the screen, Chrome will report the width 767.5px and the site will immediately break fantastically.

deleted 3y ago
[deleted]
aflukasz 3y ago
Similar problem will occur when using min-width and max-width with same value of Xpx - they both match at exactly Xpx. For mutual exclusion `not` should be used. Or https://drafts.csswg.org/mediaqueries/#range-context https://drafts.csswg.org/mediaqueries/#range-context, but that's at only ~83% global adoption rate at the moment, according to https://caniuse.com/css-media-range-syntax https://caniuse.com/css-media-range-syntax.

probablynish 3y ago

I know that this article is probably 'objectively good design' in some way, seeing as its written by front-end experts of some sort, but I found the content much tougher to read and digest than a much plainer format. All the different bold colors, graphics, and large/varied font sizes were tougher for me to absorb than something more straightforward (eg https://www.arslonga.email/how-to-connect-zotero-with-obsidian/ https://www.arslonga.email/how-to-connect-zotero-with-obsidi... - just the most recent example I could think of). Anyone else feel the same?