A problem is that none of the arguments you are offering are bad, logically. It feels very appealing to think you can build a system that would solve "laying out text" for all time.
For me, what they lack is evidence that stands any stronger than video games. Specifically, I've played different games on various screen sizes and orientations that largely work as you would expect. They are not perfect, of course, but they work better than most web pages seem to. And they do that, largely, without the same reliance on something like CSS that web pages need.
More, it isn't like we weren't laying out billboard displays long before the web came to be. Nor is it realistic that billboards have at all the same concerns that a pocket sized phone will have. At large, you shouldn't even use the same fonts between those options. Heck, taken farther, a billboard can hold a slogan, that is about it.
This would be the same as if you tried to use HTML/CSS to make a poster for a movie. Which, sure, you can make a bit of an effort with it. I just don't see it being any better than letting a designer or probably an automated system layout several standard sizes with the standard type in the standard locations.
Pulling it in, I'll be delighted to get proven wrong and find that we have converged to a great abstraction for laying out content. I, of course, do not /know/ that it can't be done. I do pull my hair out at the amount of effort people will go to in order to have the system layout a set of divs, when most designs could probably have done a lot of that math up front and worked with far fewer nested elements than we seem to typically see.
Good layout is simple. But can it be flexibly done without a good sense for abstraction and math? No. I mean, just look at the hot shit that is Tailwind, that's what people come up with while fighting abstraction.
CSS was a mess, but together with React is now the best language for building GUIs. You can build up any abstraction you want in React, even
In fact, that's what I did over the weekend for my Electron desktop application, writing my own little library of components, including tabs and treeviews, using only CSS and React and no third-party libraries apart from that.
You already have been proven wrong. You are just not ready to accept the proof.
A) Out of curiosity, is that "actual" UI screenreader accessible and does it work on mobile devices? Does it work with touchscreens? Can I scale the text? Maybe it does, I don't recognize the program off the top of my head. But I don't assume that by default.
And very often this is just the same argument over and over again. "Check out how cool the thing is that I can build when I assume that you'll be using a widescreen desktop monitor with a mouse and keyboard in the full screen." I mean, great, that's very cool, but I'm glad the the web doesn't allow you to make those assumptions. It's a better platform for forcing you to care about more stuff.
B) You can absolutely get more than 1000 elements on a static page, it's not that big a deal unless you're doing something weird. Of course, if you are putting 1000 elements on a page, you might take a step back and ask yourself why you're doing that because giant pages with thousands and thousands of nested elements are hell for screenreaders. You want to update a thousand pieces of the DOM at the same time. Well, OK, let's ask for a second whether that's actually good interface design. I would argue maybe it's not?
I make this point a lot on HN, but if you can't describe your interface using pure text, you don't have an accessible interface, period. And to rephrase point A, you're correct that if you don't worry about that, you can make very complicated interfaces that are extremely performant, and wow am I glad the web forces you to worry about that.
C) People have a fundamental misunderstanding of what the DOM is and how it should be used, in part influenced by treating the DOM as a markup tool rather than as a render target -- but suffice to say, there is nothing about the interface you're showing me that makes me think it's not doable on the web. Some of these visual components you might jump out and use canvas for -- that's not violating the spirit of the web, the DOM is your user interface, and a bunch of nested DOM elements that simulate a slider using div soup is not more accessible or semantic or maintainable than an actual native browser slider with accessible controls that you throw a canvas element in front of.
The thing that would be hard about building this interface on the web is I would have to care about what happens if the font size changes, and I would have to care about what happens if the user opens the app on a phone, and I would need to care about tab controls and turning this interface into an actual hierarchy, and I would have to think about touch screens, and I would need to have higher standards for my interface design than just "how many elements can I fit on a screen at the same time?".
And again, I am grateful every single day that the web forces designers to think about that stuff.
Your question stem from a few assumptions that you consider inviolable, so I'll go through them one by one
- that all software has to work on mobile
This is a fallacy. Not all software has to work on mobile. More over, mobile-first approach is exactly the wrong approach for a lot of software.
No, the software in question will not work mobile. Because it's a screenshot of Ableton Live, a professional DAW specifically made for desktop and for manipulation with mouse and keyboard.
It doesn't mean that the web is somehow superior here because "it can work on mobile, too". Not for complex UIs, for the exact same reason: screen sizes and interactions on mobile are completely different from desktop screen sizes and interactions. The simpler the UI and interaction, the better it works across desktop and mobile. See, e.g. the stripped-down versions shipped with SwiftUI/Catalyst.
- that complex dynamic UIs like the one in the screenshot can actually be done in DOM, no problem
No, they can't. And you immediately list several reasons: "because giant pages with thousands and thousands of nested elements are hell for screenreaders" and "You want to update a thousand pieces of the DOM at the same time. Well, OK, let's ask for a second whether that's actually good interface design. I would argue maybe it's not?" and "Some of these visual components you might jump out and use canvas for "
All this translates to: no, you can't make the same interface in DOM.
1. Complex dynamic interactive UIs are a hell for screenreaders regardless of technology. And there are no good solutions there.
2. Updating tens of thousands of elements is not an issue even for mobile. Games routinely update tens to hundreds of thousands of elements in a matter of milliseconds. If it's a problem for DOM, it's an indictment of DOM.
Updating even hundreds of elements is quite an ordeal for the browser. Professional software will easily update hundreds (or indeed thousands) of elements in its UI at any point without breaking a sweat. If that seems challenging to you, that's the problem of the technology you use and defend, not of the UI.
3. If you need to "jump out to canvas" to implement certain stuff, then you failed both your claim about screenreaders (canvas is 100% inaccessible) and your claim about "doable in DOM" (you wouldn't have to jump out to canvas).
There's a gazillion reasons why recreating that UI in DOM is extremely difficult: browser will likely choke on that many elements, you have very little control over positioning and layout, any interactivity is likely to choke the browser due to multiple DOM updates and constant layout re-calculations etc. etc. etc.
> and I would need to have higher standards for my interface design than just "how many elements can I fit on a screen at the same time?".
No, no you wouldn't. If that was true in the general case, we would actually have actual correct beautiful performant useable useful UIs on the web. The matter of fact is that this is not the case, and web UIs are universally bad, underperforming, breaking all possible interaction modes etc.
And no. That Ableton Live UI isn't "cram as many controls as you can into UI".
> And again, I am grateful every single day that the web forces designers to think about that stuff.
> This is a fallacy. Not all software has to work on mobile. More over, mobile-first approach is exactly the wrong approach for a lot of software.
Okay, sure, the web would be better if it wasn't cross platform. My bad, I didn't realize that it was actually a bad thing that I can check my bank account balance from Android Firefox. /s
Come on, seriously?
I don't know if it's actually worth going through this over and over again when you are literally just re-summing up my point. That all of this, "oh interface design would be so much better" talk very often boils down to:
"I shouldn't have to worry about real-world design constraints."
I am once again, so so happy that the web doesn't give you that option. Just wait until you find out that in most industries there are literal laws around considering stuff like accessibility. In most industries you don't get to act like people saying "should blind users be able to enjoy the thing" is some kind of moral slight against your artistic integrity.
But, to very quickly go over this:
----
> 1. Complex dynamic interactive UIs are a hell for screenreaders regardless of technology. And there are no good solutions there.
And once again, the critique becomes, "but accessibility is hard when I approach UIs this way, so I just shouldn't have to think about it."
And that's why we have HTML; because software UI developers don't think about a dang thing if they're not forced to. I cannot believe someone is going to try and argue that the web is worse because it works with screen readers and adblockers and extensions and all of the amazing stuff we can do because interfaces are at their core based on text and markup.
> 2. Updating tens of thousands of elements is not an issue even for mobile. Games routinely update tens to hundreds of thousands of elements in a matter of milliseconds. If it's a problem for DOM, it's an indictment of DOM.
Games are not a shining example of flexible UIs and they shouldn't be your target for most application UIs. The reason why updating tens of thousands of elements at the same time is problematic is because signaling those updates becomes a problem for users with low vision.
Nevertheless, the web has escape hatches for this in the form of Canvas/WebGL. Of course, it's harder to use them, because they shouldn't be the default thing you reach for.
> 3. If you need to "jump out to canvas" to implement certain stuff, then you failed both your claim about screenreaders (canvas is 100% inaccessible) and your claim about "doable in DOM" (you wouldn't have to jump out to canvas).
No, if you put a canvas in front of a native slider, that is 100% accessible, there is zero issue there. People don't understand how the DOM works. You can have canvas elements in your design. The only thing that actually gets in the way of accessibility is not having the slider. But there's not a requirement that your slider be made of 40 div elements, you can use the built-in browser primitives. The screenshot you provided of Ableton doesn't have 10 thousand actual logical elements in it to update.
It's got like a couple of dozen separate controls here, maybe if you want to be real generous a couple hundred: but they're just designed using some kind of skewmorphic crud that makes them seem more complicated than they actually are. But it's literally just not a problem for a couple of grid elements in there to be canvases, I'm not saying that you have to use divs for every single element in this UI.
Of course it also wouldn't be a problem for the design of some of these controls to be simpler and more visually consistent and to use common UI paradigms instead of mimicking guitar dials, but whatever, music production is obsessed with simulating physical dials in software for whatever reason. This is why I have to run a compatibility suite to get midi plugins working between Linux and Windows, because every plugin has to be quirky and ship with an entire graphics library.
Heaven forbid that we use buttons, that would get in the way of my moral duty to make my interface look like a piano. /s
One of the reasons why working with text during interface design makes you a better designer over time is because you start to group controls more and you start to think more about controls like they're logical units rather than just as collections of pixels on the screen.
> No, no you wouldn't. If that was true in the general case, we would actually have actual correct beautiful performant useable useful UIs on the web.
People need to heck off with this. We do have good UIs on the web. Better UIs than on native in multiple cases. Your standard for what is a good UI dismisses everything that is good about web UIs, but if you actually want to talk about responsive design that works in the real world and not just for a hypothetical happy-path mouse-controlled desktop, then the web often produces better UI results than native platforms.
And the web produces this result that literally no other platform can claim even though it is far more developer-accessible than most of these other platforms that people champion. I'm so tired of pretending that because somebody laid out a UI in Photoshop and they couldn't get pixel-perfect results on the web that somehow the web has failed. It hasn't. The web gets non-programmers to produce better, more accessible UIs than these professionals on the desktop that can't be asked to give a single heck about anyone who's not a prototypical customer using a standardized setup.
> This is such a bold lie.
You're right, I'm lying I'm not actually grateful for the web, you saw through my deception! /s What are you talking about?
Where was I proven wrong? Does that example compile down to something that isn't several dozen nested divs using react?
As stated in my post, happy to be proven wrong if that is the case. I am fairly far removed from a lot of this nowadays, and it would not be the first time that the world moved on without my noticing rapidly. (My favorite example of this is just how good battery technology has gotten. A decade ago, a battery powered lawn mower was a laughable idea. )
A lot of abstractions are complicated under the hood -- the high-level graphics formats that are used in engines are under the hood doing a ton of complicated tradeoffs and tricks to try and get the same sprites to render on Metal, Vulkan, OpenGL, and DirectX.
I tend to avoid over-abstraction when I can, but I still have to ask -- it a problem that those abstractions are complicated under the hood if they work for the developers that use them? Pipewire is pretty complicated under the hood to maintain compatibility with multiple setups; does that mean we can't have a universal audio interface for Linux and every device should be programming separately for ALSA and PulseAudio?
Fair that I don't think "what it compiles to" should be near as important as I was holding it.
CSS, though, did have a goal at the start to be a lot more approachable than what we have, though. User stylesheets were a huge selling point in early pitches that I recall. That is flat not possible with how we have things nowadays.
And I also think it would be fair to lay a lot of the blame on just how many divs so many designs explode things into.
> And I also think it would be fair to lay a lot of the blame on just how many divs so many designs explode things into.
That could be a longer conversation but what I try to get across to designers is that the DOM is your interface, the DOM is not the tool you use to build your interface, the DOM should be a user-facing representation of application state, and incidentally you can also represent that visually.
So agreed, I hate it when I open dev tools and I just some completely incomprehensible mountain of divs.
That being said:
> That is flat not possible with how we have things nowadays.
I do this. I maintain custom stylesheets for websites I visit, it's very possible. It's one of the things I love about the web, I love that I can have website-specific stylesheets in Firefox without even installing an addon. I've set up hacks when I was trying to use the browser less to do grayscale effects across websites I didn't want to visit. It was a tiny amount of code and it mostly just worked, and I really couldn't do something equivalent with other platforms.
And OK, sure, maybe that's just me and it's unfair for me to say it's easy. I work with CSS a lot, I am generally proficient at it. So that's maybe a bad standard for me to have -- what about the people who don't want to work with CSS a ton until they understand it?
Well... do they use uBlock Origin? There are a host of browser extensions that modify stylesheets on the fly to do complicated things that help make the web better. uBlock Origin would be a lot worse without CSS. And there's an on-ramp for that kind of thing too, HN has honestly a pretty bad user-interface as far as the DOM is concerned. But I have a number of one-line filters in uBlock that are basically just CSS rules that help make the website better.
It's not perfect and it should be better, but I'm left looking at the alternatives again -- no other platform gives me as much control over 3rd-party user interfaces as the web. And for the most part it just works, websites like Facebook are the exception and very often, particularly for indie websites, I can open up the DOM and mess with things and fix problems.
It's a problem that it's not more accessible and I am not shaming anyone who struggles with it, but I don't think it's impossible. It's a normal thing for me to do. Maybe I'm biased on that, but I think it's very feasible for especially programmers to learn to override 3rd-party interfaces on the web.
My main critique of the web is that there should be more abstractions for non-programmers and UI designers to work with that doesn't require them to drop into a programming language when overriding things. Reader Mode for Firefox is a step in the right direction, although it could be a lot better. The browser controls for font sizes are good. There's a lot further that browsers could go to improve that situation.
As I said in the other response, I think it is fair to say I shouldn't care about what it compiles down to. That complaint is largely in pursuit of user stylesheets, where you basically do have to know the structure of the things in order to be able to adjust stuff.
I'm still skeptical, but largely on the difficulties I see frontend teams having. And despite the other poster saying they have great success with pages working on all of their devices, I daily have pages that don't. And I don't exactly visit a ton of pages. With some of these from large companies like Amazon and Google, I find it hard to believe that this is truly a solved problem. (Visiting smaller shop websites is basically guaranteed to not work on both my phone and on my monitor. Such that I don't think it is just a "big company" problem.)
Basically, at least everybody using Tailwind is doing it wrong, because they are throwing out their biggest weapon: abstraction. So that could account for the failure in the real world you see. I think there are many users of Tailwind out there.
I am also not a big fan of many of the React libraries I am seeing out there. In case of my desktop app, I am more comfortable rolling everything on my own on top of browser APIs + React.
That resonates with my view, well enough. Most of my complaint with CSS is not the idea of having a style sheet. I'd more complain at how so many people try to get the natural flow of the document to rube goldberg into the layout that they want. That and the "unrooted" nature of most styles. It can be powerful, but usually is just a mistake.
So, I'll make a concession here -- I definitely don't think CSS is perfect, and two things that are not great about it is that I'm not convinced specificity is all that good and the focus on using native elements for style names is a big trap.
When I switched to using BEM, CSS immediately became like 3x easier, especially on large projects. And there's no downside to style overrides or user customization or maintainability, there's no 3rd-party library to install, it doesn't require me to write a single line of Javascript. All I've done is change how I name classes. For users, BEM-style CSS is easier to do user overrides on through custom stylesheets than the traditional CSS that uses semantic naming.
And I do think that's a big weakness of CSS and we might have set a bunch of people up for failure by teaching everyone that the "proper" way to use CSS is to write
main section p {
color: red;
}
Nah, that is asking for trouble, you will end up with soup and you will have a terrible time trying to figure out what styles are applying to what elements. Instead, use
.Article__Paragraph {
color: red;
}
and all of a sudden you won't hate refactoring as much and doing style debugging in the browser will be way nicer, and when you open up your dev tools you'll see component names instead of div soup, and you'll be able to instantly grep for the code you need to change for every single style alteration you make.
Not that BEM is the only way to do that kind of thing, it's just the version I tend to evangelize most commonly. But the big thing is, use stylesheets, definitely, but don't do a bunch of nested rules that are targeting native DOM elements. We shouldn't be teaching people to do that.
Basically this is my argument for the self inflicted pain of CSS. Worse than
main section p {...}
is when you have people start with stuff like
p {...}
and then they start to have all sorts of woes when they realize they don't have any way to specify this particular paragraph is the one they meant. So then you end up with people being forced to use nth child selectors to hit the intro paragraph.
Then they start to think, "I want the first section to be the abstract." But should they add an "h" element to use the header to indicate a new section? Or should they make a giant container div to do the same? Why not both for different reasons throughout the same app? :D
Exactly! Zero argument on this, you are completely correct.
I do think escape hatches are important, so I'm not going to say that CSS shouldn't support referring to element types directly, that would be way too far for me to go. But...
I generally don't use direct element selectors at all when I write CSS now, and I think that teaching people to start with stuff like p {...} causes just so many problems for exactly the reason you're talking about. People are drawn to it because of that idea of everything being semantic, but styles like BEM are not any less semantic, they're arguably way more semantic because when styling you're now thinking about what an element is, not where it's positioned relative to other elements. And you get to say what an element is and what its purpose is publicly in giant capital letters in the class name that anyone can read.
Honestly, maybe I deserve a little bit more of a self-callout here because I've been kind of dismissing some of the annoyances and thinking, "this isn't that bad, you're just saying what a component should look like, yes there's concepts to learn but it's not like CSS rules are harder to learn than something like Rust" -- but part of that is me forgetting that it is significantly harder to just "say what a component should look like" when there are 5 CSS files all referring to the same elements, and so changing a rule suddenly doesn't take effect because some other CSS rule is more specific, and then changing anything suddenly breaks a completely separate part of the page over someplace else because it shared a selector.
It's like taking a function and arbitrarily splitting it across 5 different files with no rhyme or reason about which lines go where, and there's no way except by tracing the function to figure out which lines of code are ever getting called. And that's the default way that most people are taught to write CSS.
People went wild over scoped styles with web components, and to be fair scoped styles are really nice, but I never felt like they were essential for any of my projects. But if I wasn't using BEM and if I wasn't thinking about my styles as being attached to components even for completely static documents with no Javascript... yeah, scoped styles would probably be a lot more important to me :)
> For me, what they lack is evidence that stands any stronger than video games. Specifically, I've played different games on various screen sizes and orientations that largely work as you would expect. They are not perfect, of course, but they work better than most web pages seem to. And they do that, largely, without the same reliance on something like CSS that web pages need.
Video game interfaces are a ton of work, and porting between different control schemes and devices is a ton of work and that's why a lot of games don't do it. Look at the work required to handle devices like the Steam deck and the amount of work Valve has put into trying to make mouse-controlled games usable on the device. It's not easy, it's significantly more work than building for the web.
Of course it's helped by the fact that Valve does have general abstracted concepts of input that games can hook into that are shared between different controllers. Modern games don't do input per-controller, they use abstraction libraries like SDL that are designed to allow them handle a lot of different input schemes with a single codebase. And even that is a crapshoot, if you're playing indie titles on a PC you are going to be rolling the dice on whether Xbox controllers and Dualshock controllers are supported or whether only one of them works. I like that when I use the web, even weird keyboards still type into webpages. We still don't have a standardized way to do controller rebindings in games -- Valve's Steam Input works by emulating a second controller for games that aren't using Valve input APIs and pretending to press the buttons the game expects to see.
So even with all of the advantages of cross-platform frameworks, the games industry still doesn't have a great track record for building games across devices. You're pointing out that there exist games that do build separate interfaces for different devices. Sure. And agreed, when devs put in the extra work, you can have great results that are far better than the average website.
The difference is that basically every website works on my phone. Games aren't even close to that level of compatibility and most teams don't have the resources or time to put in the work to support every device and control scheme. The world of games is exactly what we don't want on the web, because if having a website interface for mobile and for desktop means that everyone needs to design and program two separate interfaces using two separate languages, we will have about the same number of websites on both mobile and desktop as we have games on both mobile and desktop -- ie, very, very few of them.
It's a blessing for compatibility that engines like Unity and Godot allow targeting multiple platforms and form-factors with a single codebase. I wish I had to work less to get that same level of abstraction in my video game interfaces.
And all of this is before we even get into all of the other problems of game interfaces -- the all-too-common lack of ability to do anything with text sizes, the lack of accessibility controls, the inability to resize windows in or out of games. My goodness do I not want my web pages to act like video games, that would be a miserable experience. It's not uncommon for me to see video games that literally won't allow changing resolutions without restarting the game. Imagine if your browser forced you to close and re-open the webpage in order to resize your window.
----
> It feels very appealing to think you can build a system that would solve "laying out text" for all time.
We have not built a system that can solve laying out text for all time. That system doesn't exist and can't be built, it is impossible. That's exactly what we're saying: we are trying to build a system that does the best possible job of universally solving that problem, but it's incredibly difficult and necessarily results in complexity and tradeoffs.
But the only belief more naive than thinking we can have one universal layout system for everything is the belief that we don't need a universal layout system and that it's possible to reduce user needs into a finite list of use-cases that can be individually supported. That reduction isn't possible, the use-cases for end users are arbitrarily large and constantly growing and it is not possible for anyone to sit down and build a single list of formats that need to be supported on the web. That's just fantasy, people are too diverse.
I use both a 1920x1080 monitor and a 3840x2160 touchscreen monitor hooked up to the same computer. Every single website I visit handles both, fluidly, when switching windows between them. A lot of games have no idea what to do and a nontrivial number of native apps struggle with it as well. But the web works, and then people show up like, "well, I shouldn't need support that." Well, I'm glad you're forced to use CSS then because I know what the web would look like if you weren't forced to.
Yes, getting an interface to work is a ton of work. If you felt that I was claiming there are easier ways that are not a lot of work, my apologies. I did not intend it that way.
My point would be more that the work Valve has put into the Deck has enabled far more than the work the standards committees have done with CSS. You can correctly argue these are solving different problems. But my assertion is that I have seen more impressive content layout and interactions from the Steam Deck than I have really with the web. I'm curious what you'd offer as the reasoning there?
You seem to be taking it that the games industry isn't very cross device focused. But, that is missing that current gen games are usually at the absolute bleeding edge of what the absolute best devices are even capable of. It is not at all surprising that those do not work cross device that well.
You are, of course, correct that there are some generic engines that allow better cross device development now than have existed in the past. Do any of them use something like CSS for laying out a menu screen? If not, why not? How about the inventory or character creation screens of games? Would you think those should be designed in the same way that something like a character builder webpage would use?
I also have large monitors, and it is ridiculously amusing how many websites do not work well when I have my windows tiling. My favorite is just two windows side by side on the main monitor, but parts of the menu of many sites will not load due to confusion over what my window width should be. To my absolute annoyance, I have found this will often not be consistent between browsers.
Now, is it fair that "bugs mean the entire thing is nonsense?" No. And I do apologize that I can see how my post read that way. Realistically, the amount of manpower that has gone into CSS has landed on something that is quite capable. But we gave up on "user stylesheets" ages ago. And the cascading nature of how things interact is almost certainly not well understood by a large portion of the practitioners. My annoyance is far less on what is capable with CSS nowadays, and much more annoyed at the rube goldberg machine that is how the vast majority of websites are layed out.
> My point would be more that the work Valve has put into the Deck has enabled far more than the work the standards committees have done with CSS.
Citation very, very much needed. Valve's work on Steam Input absolutely pales in comparison to the web. The number of supported games is minuscule. If the Steam Deck is our standard for cross-compatibility on the web, that's just really low standards. That's not the world I want to live in, CSS is better.
> But, that is missing that current gen games are usually at the absolute bleeding edge of what the absolute best devices are even capable of. It is not at all surprising that those do not work cross device that well.
No, the opposite. I'm talking about indie titles and AA titles and the average games put out by normal studios. Ironically, the giant AAA studios often have much better accessibility controls and cross-platform support. If you buy a AAA game, you're much more likely to have access to something like text scaling or dyslexic-friendly fonts or multiple input schemes, because those studios have the resources to care more about diverse use-cases, those studios have the money and developers to ask questions like "what happens if the user's TV is far away from them?"
Indie studios don't. And the fact that there's a divide between indie and AAA games on something as basic as resizing text, something that is supported on every single website -- that should be enough to show you that this "individually supported device" concept is just not workable in the real world. The games industry can't even get universal text scaling and you think that's a success story?
> But we gave up on "user stylesheets" ages ago. And the cascading nature of how things interact is almost certainly not well understood by a large portion of the practitioners
Sure, training is difficult and the web is counterintuitive to UI designers that are used to working in Photoshop, but I would still maintain that I have far fewer interface problems on the web than I do on native devices and in games, and that's not even taking into account that I see websites put up by far worse developers and far smaller teams with far smaller budgets than any of the native apps on my computer or phone.
We're never going to be perfect at this. One issue is that ironically many UI problems on the web when you dig into them often end up being due to concessions to developers on device-specific breakpoints. The web allows you to decide that you aren't going to care about being responsive and to act like you're building a video game that will only ever be displayed full-screen. If you really want to, you can design your interfaces like you're an indie developer using Unity and you can absolute position all of your divs. And there are problems with having those escape hatches, but the concessions are important because this is an unsolveable problem and sometimes devs need those escape hatches. So we add even more complexity onto an unsolveable problem to help cover use-cases that we can't cover any other way.
But solveable or not, complex or not, ignoring the problem is not the solution.
And it still is just very clearly the case to me that if we're looking at what platform does responsive design the best and which platform has the best compatibility stats between multiple devices, the web is going to win every single comparison with every other platform. It's not even close.
Yeah, things could be better, and yeah, CSS has problems, but the alternatives are just so, so much worse for actual end-users. Getting the vast majority of content on a platform to work across every single device from voice assistants to desktops to tablets to phones to VR is an achievement that no other platform can point to. And CSS does that without requiring you to have a AAA game budget when you build a website.
The number of supported games on Valve is minuscule? We clearly play different games. :) (In seriousness, sucks that you are having bad experiences there. Good luck on that changing!)
That said, you seem to be taking the strongest version of my claim here. I don't think they have solved things any more than anyone else. And I fully grant that video games are largely not accessible.
My argument would lean more into the way that photoshop and other visual tools had done things. If you want to visually layout something, using visual tools is almost certainly the correct answer. Back in the day, you would start with grid paper and literally draft out what you wanted. From there, you would have a relative coordinate system that you would then code against.
CSS and a ton of developer created things almost always focus on symbolic ideas. And it turns out jumping straight to the symbolic gets you into a ton of naming and aliasing issues ridiculously quickly. That and general purpose cascading of rules is just not that useful for the vast majority of things that we do. Is why design tools such as Figma let you put the properties directly on what you are designing. It is how people design.
And, again, I /agree/ that CSS is workable how it is today. There has been a ton of manpower put into it. But I don't know that we are comparing apples to apples in alternatives. Someone mentioned turbo pascal earlier and the form builders they had. People were doing better designs with dream weaver than I typically see online today. We didn't like it because it made the documents basically unreadable. But, we left that goal behind years ago, and missed out on the design tool that we had at hand.
> (In seriousness, sucks that you are having bad experiences there. Good luck on that changing!)
To be clear, I'm not having bad experiences on the Steam Deck, it's a fantastic device. Highly recommend it, I feel like Valve built a computer specifically for me. :) But compared to the web, it's minuscule. Compared to the web, the number of games on Steam in general is minuscule. The web is so big. Nothing that Valve is doing compares to the size and scope of what the web supports.
And in terms of support, the percentages of games that are playable across all of these devices out of the total number of games that Steam has is much lower. Again, doesn't mean that Valve isn't doing great work, but if Valve went into overdrive tomorrow and got 80% of the games on Steam working on the Steam Deck -- the web does better than that.
It would be great, I'd be very happy about it, I'd have a ton of games to play. But the web just so thoroughly outclasses that, there is no platform success story that comes close to the compatibility that the web has, and this is even with the web being a far bigger platform with a wider range of content than basically any computing platform I can think of.
It's not so much that everyone else is terrible, it's that the web is so wildly successful at getting apps to be cross-device compatible that you basically need to hit 95-99% to start comparing to it. Valve is nowhere close to hitting those kinds of numbers, even with Steam which is (as big as it is) minuscule compared to the amount of content on the web.
Valve's approach and the approach of games on Steam just wouldn't scale to the size of something as big as the web, a platform where anyone can publish anything without going through a Greenlight process or doing compatibility checks for every device.
----
> My argument would lean more into the way that photoshop and other visual tools had done things. If you want to visually layout something, using visual tools is almost certainly the correct answer. Back in the day, you would start with grid paper and literally draft out what you wanted.
Right, but I think that's just been proven to not work if you want to get a lot of people (including low-code developers and content-producers) on the scale of the web to design interfaces for multiple devices. I would argue that as inconvenient as they are, symbolic ideas are just the only way to do it.
Note that CSS allows you to do multiple interfaces depending on the device/resolution/etc... but what's important about CSS is that it doesn't allow to ignore the symbolic part, because (opinion me) the symbolic part is just part of designing interfaces.
Even forgetting about the multi-device support (which I think any platform that focuses on pure visual layout with fixed resolutions will when examined turn out to have worse multi-device support and smaller numbers of multi-device apps than the web has) -- but ignoring that, I will also argue that if you can't think symbolically about your interface and you can't lay it out as a pure-text hierarchical interface, you can't really effectively build accessible apps. One of the other reasons why I think Photoshop is kind of a bad tool for building interfaces is that I see UI developers jump into it and design interfaces based purely on "I want this to show up on this pixel" and they're not thinking about grouping, they don't have constraints to force their interfaces to be more consistent, they're not thinking about what's going to happen when the app gets translated into multiple languages, they're not thinking about screenreader support or keyboard controls.
Genuinely, I believe that forcing yourself to design interfaces in text before you sit down and look at the visuals makes you a better UI designer, because UI design cares about affordances and grouping and concepts that are being translated to the user. And without being too harsh on designers that are used to those visual tools, I can tell the difference between a designer that works in Figma and a designer that works in Photoshop because one of them will hand me a design that still works if I change the font size, and one of them will give me a blank look and not know how to react if I ask them whether we can change the font size.
I don't want to be harsh about it or put people down or be extreme, but like... I keep coming back to, I know it would be nice if we could just lay out everything visually in Photoshop. It would be great, it would make UI design so much easier. But UI design is all the difficult stuff, it's not hard to lay out things out in Photoshop, it's hard to design UIs that work in the real world. And sometimes the complaint about "why do I have to think symbolically" feels like a traffic designer saying "why do I need to worry about rush hour why doesn't everyone just drive uniformly like they do in my simulations." I'm sorry, but they don't. They do weird things and run red lights and clog intersections, and we pay UI designers to be able to handle the messy details of the real world.
> Is why design tools such as Figma let you put the properties directly on what you are designing. It is how people design.
I'll push back on this a bit; one of the strengths of Figma is that it pushes UI designers (gently, but still pushes them) in a symbolic direction. Sure, not everyone needs to sit down and write CSS by hand. Not everyone needs to learn Javascript, they can use template libraries. Not everyone needs to learn how to design websites, they can use Wordpress. There's no shame at all in building tools on top of things to make them more accessible, that's part of the web's DNA.
But Figma is CSS from the start. The CSS might not be in your face, but Figma is designed to force designers to care more about responsive design. It just has low-code options, the same as Unity of RPG Maker does for game design. But it's still thinking symbolically and logically about interfaces and not just thinking about pixels.
I don't think I ignored any points here, but in other threads we had going. I think we have a slight disagreement on how successful visual tools have been, but I see that as fine to have as a disagreement. In particular, I do not think we should force all thinking down one or the other and would expect preferences to bias people between the two. My gripe with developers is that so few seem to have ever used a visual designer nowadays.
I also realize I didn't say I enjoyed the conversation! If there is something in this one that you'd like to dive more on, please reping it.
For me, what they lack is evidence that stands any stronger than video games. Specifically, I've played different games on various screen sizes and orientations that largely work as you would expect. They are not perfect, of course, but they work better than most web pages seem to. And they do that, largely, without the same reliance on something like CSS that web pages need.
More, it isn't like we weren't laying out billboard displays long before the web came to be. Nor is it realistic that billboards have at all the same concerns that a pocket sized phone will have. At large, you shouldn't even use the same fonts between those options. Heck, taken farther, a billboard can hold a slogan, that is about it.
This would be the same as if you tried to use HTML/CSS to make a poster for a movie. Which, sure, you can make a bit of an effort with it. I just don't see it being any better than letting a designer or probably an automated system layout several standard sizes with the standard type in the standard locations.
Pulling it in, I'll be delighted to get proven wrong and find that we have converged to a great abstraction for laying out content. I, of course, do not /know/ that it can't be done. I do pull my hair out at the amount of effort people will go to in order to have the system layout a set of divs, when most designs could probably have done a lot of that math up front and worked with far fewer nested elements than we seem to typically see.