@media screen and (min-width: 1024px)
August 21, 2023 7:57 PM Subscribe
The Ideal Viewport Does Not Exist - the results of a little investigation into how fragmented browser sizes are across users, with some fun visualization.
Damn that visualization of all the viewports really does not make any sense. A huge widescreen viewport ends up smaller than a little phone viewport, because everything is stacked in columns and resized to the same width.
Really given how much pixel density varies now, I feel like I mostly want to see a bunch of rectangles sized in inches/centimeters, not pixels. And I want them overlaid on each other without changing their sizes relative to each other, not masonry'd into incoherence.
posted by egypturnash at 8:47 PM on August 21, 2023 [14 favorites]
Really given how much pixel density varies now, I feel like I mostly want to see a bunch of rectangles sized in inches/centimeters, not pixels. And I want them overlaid on each other without changing their sizes relative to each other, not masonry'd into incoherence.
posted by egypturnash at 8:47 PM on August 21, 2023 [14 favorites]
Agreed, that is terrible data visualization. And the next section on breakpoints makes no sense at all. Why would I care how many users had a viewport width of exactly the breakpoint? The whole point of breakpoints is that things are different between two widths, not exactly at specific widths.
They also don't say where the data comes from specifically, which could have a big effect on their results. Obviously, some sites get a lot more mobile traffic than others.
posted by ssg at 10:04 PM on August 21, 2023 [4 favorites]
They also don't say where the data comes from specifically, which could have a big effect on their results. Obviously, some sites get a lot more mobile traffic than others.
posted by ssg at 10:04 PM on August 21, 2023 [4 favorites]
I'm guessing it's a site that sees most of its traffic from the US, since they make a big point of how mobile is most of the views, then go on to talk about iOS only, which represents a less than thirty percent market share for mobile OSes worldwide.
posted by Dysk at 10:58 PM on August 21, 2023 [3 favorites]
posted by Dysk at 10:58 PM on August 21, 2023 [3 favorites]
While yes, the 'classic' approach to show viewport sizes is to overlay them on top of each other; but when you have over 2000 rectangles, they just merge into each other. So I get what they were going for with that visualization, but I agree it doesn't help when you force them all have the same width. Maybe something animated could have done the trick to get the basic message across: there's basically an endless amount of viewport sizes.
Nonetheless I really like that they're pushing for more people to understand how to make better things. Design tools like Framer or Sketch have improved how designs are created and delivered (although Framer has transformed from a design tool to a sort of generic wysiwyg website templating editor lately). But there's a lot of room for improvement both in tooling and our understanding of how to use it.
posted by UN at 11:50 PM on August 21, 2023 [1 favorite]
Nonetheless I really like that they're pushing for more people to understand how to make better things. Design tools like Framer or Sketch have improved how designs are created and delivered (although Framer has transformed from a design tool to a sort of generic wysiwyg website templating editor lately). But there's a lot of room for improvement both in tooling and our understanding of how to use it.
posted by UN at 11:50 PM on August 21, 2023 [1 favorite]
Apparently, Set Studio (the firm this site is an ad for) feel that a well-designed “stunning website” is one where all the text butts up against the left edge of my screen.
posted by Thorzdad at 2:28 AM on August 22, 2023 [2 favorites]
posted by Thorzdad at 2:28 AM on August 22, 2023 [2 favorites]
You can't get a clean stun with a raggedy left border. Efficient blunt force trauma remains as much an art as a science.
posted by flabdablet at 4:10 AM on August 22, 2023 [3 favorites]
posted by flabdablet at 4:10 AM on August 22, 2023 [3 favorites]
My daughter took a web development class this summer, and did a project to build a web site that "worked" for phone and computers and tablets. She knew enough to ask what screen sizes to target, and I only knew enough to...not have an answer.
posted by wenestvedt at 4:28 AM on August 22, 2023 [1 favorite]
posted by wenestvedt at 4:28 AM on August 22, 2023 [1 favorite]
OK is it me or is this a horrible visualisation of the data?
First, we spend three full pages explaining how big of a number 120,000 is. Who cares? I can count. This is not the most important piece of information.
Next there's a pie chart of the top 20 unique viewport sizes. But because all the other viewport sizes are omitted, there is no "everything else" slice, so we have no way of knowing how significant this is as a selection. It might be that the top 20 viewport sizes represent 95% of the data points, but given the amount of fragmentation we see in the later results, it might be that the top 20 only represent 50%, or 25%, or even less. Also conspicuously missing at this point in the presentation is an indication of what these measurements are measured in. 390 by 670 what? I assume pixels, but dimension measurement in web browsers is extremely complicated these days, there are points, ems, rems, centimetres... and the meaning of "pixel" is complex too. This is the kind of complex topic which I would expect to be clearly explained in a work like this. What about the physical centimetre measurements, anyway? The correlation between pixel size and physical size is complex too, and well worth examining.
Next there's a diagram which is intended to indicate that you should "build in a fluid, flexible manner", and we're talking about "specific breakpoints" for viewport width... but the diagram is changing height as we scroll.
Then we have the visualisation of the (arbitrary) "mobile" vs. "desktop" separation. This is, for some reason, an immense 12 by 12 grid of circles filled in different sizes, instead of, I don't know, a simple bar chart with two bars. Percentages and exact counts might have been nice. Do I seriously have to count the circles myself to figure that out?
I don't see the value of the masonry layout either. Normalising all of the widths doesn't make sense because surely the whole point is that in a flexible layout, like this one of theirs, we go to two columns, or more, once we go beyond a certain width. This masonry visualisation also doesn't give us a strong impression of which relative sizes are more common than others. I was waiting for some kind of two-dimensional plot, perhaps with differently-sized points on the plot to indicate popularity, but there isn't one.
Then we're talking about "breakpoints from popular frameworks". But we weren't measuring breakpoints, we were measuring viewpoint sizes. So, what is this data? Where is this from, which frameworks, other than Figma? "xl" is "Commonly between 1200px and 1300px width", but we have "Count: 2566 / Percent: 2.14%" out of the original 120,000 data points. That's not common. So why is this called out? What is this section even for?
The concluding remark is "Instead of making design decisions on strict, limited breakpoints, keep in mind the sheer amount of fragmentation there is in viewports." I completely fail to see how this is meant to be useful design advice. What is being suggested instead? Having unlimited breakpoints, somehow, ten or a hundred of them? Not having breakpoints at all, and just having a single fluid layout which magically renders nicely in every possible viewpoint?
Ultimately this is a very information-sparse page and a very poor attempt at data visualisation. I got nothing out of this.
posted by qntm at 4:57 AM on August 22, 2023 [7 favorites]
First, we spend three full pages explaining how big of a number 120,000 is. Who cares? I can count. This is not the most important piece of information.
Next there's a pie chart of the top 20 unique viewport sizes. But because all the other viewport sizes are omitted, there is no "everything else" slice, so we have no way of knowing how significant this is as a selection. It might be that the top 20 viewport sizes represent 95% of the data points, but given the amount of fragmentation we see in the later results, it might be that the top 20 only represent 50%, or 25%, or even less. Also conspicuously missing at this point in the presentation is an indication of what these measurements are measured in. 390 by 670 what? I assume pixels, but dimension measurement in web browsers is extremely complicated these days, there are points, ems, rems, centimetres... and the meaning of "pixel" is complex too. This is the kind of complex topic which I would expect to be clearly explained in a work like this. What about the physical centimetre measurements, anyway? The correlation between pixel size and physical size is complex too, and well worth examining.
Next there's a diagram which is intended to indicate that you should "build in a fluid, flexible manner", and we're talking about "specific breakpoints" for viewport width... but the diagram is changing height as we scroll.
Then we have the visualisation of the (arbitrary) "mobile" vs. "desktop" separation. This is, for some reason, an immense 12 by 12 grid of circles filled in different sizes, instead of, I don't know, a simple bar chart with two bars. Percentages and exact counts might have been nice. Do I seriously have to count the circles myself to figure that out?
I don't see the value of the masonry layout either. Normalising all of the widths doesn't make sense because surely the whole point is that in a flexible layout, like this one of theirs, we go to two columns, or more, once we go beyond a certain width. This masonry visualisation also doesn't give us a strong impression of which relative sizes are more common than others. I was waiting for some kind of two-dimensional plot, perhaps with differently-sized points on the plot to indicate popularity, but there isn't one.
Then we're talking about "breakpoints from popular frameworks". But we weren't measuring breakpoints, we were measuring viewpoint sizes. So, what is this data? Where is this from, which frameworks, other than Figma? "xl" is "Commonly between 1200px and 1300px width", but we have "Count: 2566 / Percent: 2.14%" out of the original 120,000 data points. That's not common. So why is this called out? What is this section even for?
The concluding remark is "Instead of making design decisions on strict, limited breakpoints, keep in mind the sheer amount of fragmentation there is in viewports." I completely fail to see how this is meant to be useful design advice. What is being suggested instead? Having unlimited breakpoints, somehow, ten or a hundred of them? Not having breakpoints at all, and just having a single fluid layout which magically renders nicely in every possible viewpoint?
Ultimately this is a very information-sparse page and a very poor attempt at data visualisation. I got nothing out of this.
posted by qntm at 4:57 AM on August 22, 2023 [7 favorites]
is it me or is this a horrible visualisation of the data?
Until I tried to read this page it had not really come home to me that colours could scream every bit as loud as all caps. So at least this design studio whose name I have already genuinely forgotten has taught me that.
Also hilarious that the site breaks Firefox's reader view.
posted by flabdablet at 5:42 AM on August 22, 2023 [1 favorite]
Until I tried to read this page it had not really come home to me that colours could scream every bit as loud as all caps. So at least this design studio whose name I have already genuinely forgotten has taught me that.
Also hilarious that the site breaks Firefox's reader view.
posted by flabdablet at 5:42 AM on August 22, 2023 [1 favorite]
Ironically enough, the visualization of the viewports is too big for any viewport. On desktop it shows the dimensions (in pixels) but at smaller viewport sizes that information is hidden. Which, according to the same article, means that the information may not be necessary?
But it's true that the almost infinite number of viewport sizes means site design absolutely needs to be flexible. I've found that they generally fall into "more tall than wide" and "more wide than tall" which then inform layout in a meaningful way. I mean, even TFA switches from a two-column layout to a one-column layout at a specific width threshold.
Basically, designing for every device is hard! Almost impossible to get it right across every conceivable display. Like, smartwatches? I would pay money to have people not browse my site on a smartwatch.
posted by grumpybear69 at 5:45 AM on August 22, 2023
But it's true that the almost infinite number of viewport sizes means site design absolutely needs to be flexible. I've found that they generally fall into "more tall than wide" and "more wide than tall" which then inform layout in a meaningful way. I mean, even TFA switches from a two-column layout to a one-column layout at a specific width threshold.
Basically, designing for every device is hard! Almost impossible to get it right across every conceivable display. Like, smartwatches? I would pay money to have people not browse my site on a smartwatch.
posted by grumpybear69 at 5:45 AM on August 22, 2023
Until I tried to read this page it had not really come home to me that colours could scream every bit as loud as all caps.
Wow! I wasn't going to bother visiting but those are indeed some very loud colors! You don't even have to resort to neon or a blue/red combo attack to hurt eyes, neat
posted by Baethan at 6:54 AM on August 22, 2023
Wow! I wasn't going to bother visiting but those are indeed some very loud colors! You don't even have to resort to neon or a blue/red combo attack to hurt eyes, neat
posted by Baethan at 6:54 AM on August 22, 2023
They don't even mention once triangular viewports.
posted by UN at 8:56 AM on August 22, 2023 [4 favorites]
posted by UN at 8:56 AM on August 22, 2023 [4 favorites]
It's interesting comparing this discussion to the Hacker News discussion of the same article. Folks there loved the article and took it as a jumping off point to discuss some finer technical details of mobile app development. Folks here are focussed just on the article itself and it's rather awkward presentation of data.
I found the article frustrating myself. What I most want to know is percentages; how many folks have a viewport at least 350 wide? 400? 500? There's a million sites purporting to tell me that. But they do tend to get stuck on the unimaginative "the #1 screen size is 390x670" (or whatever). I do appreciate this article's point that no size is common enough to be worth targeting. The Masonry layout diagram they offer is a bad data visualization but does at least convey the diversity of sizes out there.
It's worth remembering that sites like this are marketing for the company, not attempts at conveying data for usability design.
One nice thing about Android is that there never was one common Android screen size, so the culture and tools for the apps are all about vector designs that scale well. Apple for the longest time was stuck on pixel perfect designs for specific product screen sizes. Although now there are so many different Apple products, that's not really viable. Unfortunately this scaling only holds for apps; few websites are designed to nicely scale to any specific size.
posted by Nelson at 9:01 AM on August 22, 2023 [1 favorite]
I found the article frustrating myself. What I most want to know is percentages; how many folks have a viewport at least 350 wide? 400? 500? There's a million sites purporting to tell me that. But they do tend to get stuck on the unimaginative "the #1 screen size is 390x670" (or whatever). I do appreciate this article's point that no size is common enough to be worth targeting. The Masonry layout diagram they offer is a bad data visualization but does at least convey the diversity of sizes out there.
It's worth remembering that sites like this are marketing for the company, not attempts at conveying data for usability design.
One nice thing about Android is that there never was one common Android screen size, so the culture and tools for the apps are all about vector designs that scale well. Apple for the longest time was stuck on pixel perfect designs for specific product screen sizes. Although now there are so many different Apple products, that's not really viable. Unfortunately this scaling only holds for apps; few websites are designed to nicely scale to any specific size.
posted by Nelson at 9:01 AM on August 22, 2023 [1 favorite]
[puts heads in hands, takes long, raggedy breath]
So you know what works really well for any browser, running with any viewport size on any device? Not styling your text/images at all, doing some basic structure in html, and just letting the browser decide what to do with it. Admittedly I'm old, but I'm really tired of websites whose primary motivation is to make sure that two hundred and fifty words of marketing summary feel big enough to require the user to scroll. If your website is there to provide information, just provide the information and be done with it. At this point if I see two sentences and am invited to scroll I just close the tab.
posted by phooky at 10:14 AM on August 22, 2023 [12 favorites]
So you know what works really well for any browser, running with any viewport size on any device? Not styling your text/images at all, doing some basic structure in html, and just letting the browser decide what to do with it. Admittedly I'm old, but I'm really tired of websites whose primary motivation is to make sure that two hundred and fifty words of marketing summary feel big enough to require the user to scroll. If your website is there to provide information, just provide the information and be done with it. At this point if I see two sentences and am invited to scroll I just close the tab.
posted by phooky at 10:14 AM on August 22, 2023 [12 favorites]
Another vote for terrible visualizations.
I think a better way to add depth to the conversation would have been to look at viewport aspect ratios (in a loose manner), look for common ones, and group viewport screen sizes into those aspect ratios and then maybe subgroup them if there are dramatic variations (e.g. you could have a 9:16 ratio on a mobile and also on a UHD display split in thirds).
Also 120k sample size sounds impressive, but it's not, that's less than a day's traffic for a popular site and you want to get insight across demographics and time. The devices site visitors use on a weekend can differ widely from those used on a weekday, 48hr sample time isn't enough.
posted by furtive at 11:36 AM on August 22, 2023 [1 favorite]
I think a better way to add depth to the conversation would have been to look at viewport aspect ratios (in a loose manner), look for common ones, and group viewport screen sizes into those aspect ratios and then maybe subgroup them if there are dramatic variations (e.g. you could have a 9:16 ratio on a mobile and also on a UHD display split in thirds).
Also 120k sample size sounds impressive, but it's not, that's less than a day's traffic for a popular site and you want to get insight across demographics and time. The devices site visitors use on a weekend can differ widely from those used on a weekday, 48hr sample time isn't enough.
posted by furtive at 11:36 AM on August 22, 2023 [1 favorite]
So you know what works really well for any browser, running with any viewport size on any device? Not styling your text/images at all, doing some basic structure in html, and just letting the browser decide what to do with it.
While I would prefer that they add just enough styling to reduce the overall width, and think the cursing is unnecessary, this site still stands as my favorite example of your excellent point.
posted by nushustu at 12:07 PM on August 22, 2023
While I would prefer that they add just enough styling to reduce the overall width, and think the cursing is unnecessary, this site still stands as my favorite example of your excellent point.
posted by nushustu at 12:07 PM on August 22, 2023
I thought it would be more fun if they just continued comparing 120,000 to different things. Could you eat a 120,000 things, in a day? A week? A year?!
If you had 120,000 GBP, what store would you go to spend them all in one place?
Also, there is a box partway down the page. it's content is blocked, but it's next to the "This isn't a problem if you build in a fluid, flexible manner. That is illustrated in this diagram." text.
It's really fun. For me, when I scroll, it shortens and extends randomly like miniblinds, and you can push it down the page as you scroll. Great design.
posted by The_Vegetables at 12:08 PM on August 22, 2023 [1 favorite]
If you had 120,000 GBP, what store would you go to spend them all in one place?
Also, there is a box partway down the page. it's content is blocked, but it's next to the "This isn't a problem if you build in a fluid, flexible manner. That is illustrated in this diagram." text.
It's really fun. For me, when I scroll, it shortens and extends randomly like miniblinds, and you can push it down the page as you scroll. Great design.
posted by The_Vegetables at 12:08 PM on August 22, 2023 [1 favorite]
FWIW running the JSON through a script to show it as overlapping rectangles turns out pretty much as you’d expect - a dense core and then some more sparse overlapping rectangles ringing it. I don’t know that it quite conveys what they are saying here about variety either, as the mobile sizes grouping so much overwhelms the rest.
I might throw that up on JSBin later, though it may baulk at the file size for the data.
posted by Artw at 12:29 PM on August 22, 2023
I might throw that up on JSBin later, though it may baulk at the file size for the data.
posted by Artw at 12:29 PM on August 22, 2023
The TL;DR: use a flexible layout that doesn't depend on specific screen widths when designing a website. The rest is a poor attempt at explaining the data that they used to arrive at that (some would say obvious) conclusion.
posted by Aleyn at 2:33 PM on August 22, 2023 [2 favorites]
posted by Aleyn at 2:33 PM on August 22, 2023 [2 favorites]
Anytime I see an article ready to tell me the Truth About The Web and all of the data presented relates only to products from Apple, I know it's a marketing agency's spin on things and probably shouldn't be taken too seriously.
posted by maxwelton at 3:32 PM on August 22, 2023
posted by maxwelton at 3:32 PM on August 22, 2023
Pepsi #004D73
posted by ChurchHatesTucker at 5:50 PM on August 22, 2023 [1 favorite]
posted by ChurchHatesTucker at 5:50 PM on August 22, 2023 [1 favorite]
So you know what works really well for any browser, running with any viewport size on any device? Not styling your text/images at all, doing some basic structure in html, and just letting the browser decide what to do with it.
This doesn't actually work.
posted by UN at 7:23 PM on August 22, 2023 [1 favorite]
This doesn't actually work.
posted by UN at 7:23 PM on August 22, 2023 [1 favorite]
I've yet to see at examples of it fucking up in the spectacular ways that modern websites do fairly regularly though. How and why it is even possible to make a browser render text in lines wider than the viewport, while disallowing horizontal scrolling, I just fint know, but I keep running into websites that do exactly that (and is how mefi mobile classic breaks if someone decides to eschew too many spaces on the front page).
A plainer, unstyled, basic HTML approach might not always look nice, but it remains functional and responsive to browser/OS controls for e.g. font size. I genuinely wish more sites did it.
posted by Dysk at 11:35 PM on August 22, 2023 [1 favorite]
A plainer, unstyled, basic HTML approach might not always look nice, but it remains functional and responsive to browser/OS controls for e.g. font size. I genuinely wish more sites did it.
posted by Dysk at 11:35 PM on August 22, 2023 [1 favorite]
Sure, it's one design strategy that suits a few use cases — and even then those layouts become garbage without CSS: Oversized horizontal scrolling on images on mobile; text that runs a kilometer wide on larger screens.
You can throw away thousands of years of knowledge and convention on typography layout because the browser gods chose some defaults ...
... but as it turns out, the browsers gods want you to layout your pages, which is why we have CSS.
posted by UN at 12:11 AM on August 23, 2023 [1 favorite]
You can throw away thousands of years of knowledge and convention on typography layout because the browser gods chose some defaults ...
... but as it turns out, the browsers gods want you to layout your pages, which is why we have CSS.
posted by UN at 12:11 AM on August 23, 2023 [1 favorite]
The point of the plain text website is that you don't have to go with the browser defaults. Adjusting your font size, for example, doesn't break things like so many fancy layouts do.
(And I'll take horizontal scrolling over having content spilled off the side of the screen, with no ability to scroll at all, which I still come across way, way too often.)
posted by Dysk at 4:07 PM on August 23, 2023
(And I'll take horizontal scrolling over having content spilled off the side of the screen, with no ability to scroll at all, which I still come across way, way too often.)
posted by Dysk at 4:07 PM on August 23, 2023
So you know what works really well for any browser, running with any viewport size on any device? Not styling your text/images at all, doing some basic structure in html, and just letting the browser decide what to do with it.
That's the Ted Nelson school of thought. The marketing train has long left that station, though Ted's site does have color and CSS and it looks a lot more modern than it used to.
I have to think this article is the "38 best Beatles songs" list of web development. Look at all the engagement! I feel a fact remains that it is quite useless for its purpose, regardless how loudly they broadcast it. Hey, it's a tough biz, I guess.
I haven't put too much testing into this, but I think percentage-based design is the way to go, and they've even implemented "viewport units" to make it less math-y I guess. Then, maybe make just like three different layouts for your site and let the user decide which one they want to use.
posted by rhizome at 8:03 PM on August 25, 2023
That's the Ted Nelson school of thought. The marketing train has long left that station, though Ted's site does have color and CSS and it looks a lot more modern than it used to.
I have to think this article is the "38 best Beatles songs" list of web development. Look at all the engagement! I feel a fact remains that it is quite useless for its purpose, regardless how loudly they broadcast it. Hey, it's a tough biz, I guess.
I haven't put too much testing into this, but I think percentage-based design is the way to go, and they've even implemented "viewport units" to make it less math-y I guess. Then, maybe make just like three different layouts for your site and let the user decide which one they want to use.
posted by rhizome at 8:03 PM on August 25, 2023
« Older Oooh mah gawd Becky, look at her opera | It's Tasty Being Green Newer »
This thread has been archived and is closed to new comments
posted by SaltySalticid at 8:13 PM on August 21, 2023 [13 favorites]