The whole set of web technologies is a mess. We‘re still in the stone age of web UI design, similar to the 80‘s era of home computing when everybody built their own UI with basic drawing primitives. It’s going to take a while till decent, cross-platform/device UI libraries make progress and designers discover the value of reusable components that just work and are familiar to users.
Until then, we‘re stuck with terrible websites with, at most, one messy version full of ads for desktop computers, with much too small links/navigation elements for tablets (hi, HN!) and one clunky mobile version that looks horrible on most devices, particularly tablets.
The sad thing is that by the 1990s we'd figured out how to do good UI design for desktops, but then we promptly forgot every single bit of that knowledge when the web came along.
But the web wasn't supposed to be a UI platform - it was supposed to be a medium for delivering text with some images and media occasionally interspersed. Hypertext markup language.
Java applets could use Swing to get a normal-ish desktop UI and still be close to the web. But we keep trying to cram a UI framework into HTML/CSS.
The standards are slowly mutating and eventually they may provide a good UI framework.
JavaFX and Qt are both modern UI frameworks. Both provide a drag-n-drop interface to design applications using standard widgets such as lists and tabbed panes etc. You can modify the styling with CSS (at least in JavaFX, I don't have much experience with Qt). But the final layout spec is done in FXML or the Qt XML format - the XML has <TabbedPane>s and <HBox/VBox/GridBox> and <Button>, with CSS used to style these elements and dictate their visual properties.
Instead of divs and spans hacked with css/JS into becoming scrolling lists and tabbed panes or horizontal container boxes.
I know the basics of HTML/CSS and it took me half an hour to figure out how to put 3 images side by side. Because divs can't represent that naturally - I had to use weird css and put 3 divs inside the outer div. In JavaFX you would put an HBox and drag three Images into it and it just works, because a HBox represents a UI concept instead of a document markup concept.
I must be missing something, because isn't 3 images side by side just:
<div><img ...><img ...><img ...></div>
? But you're right, the web isn't a UI platform. It's designed for to produce things that are like Microsoft Word documents. Web-apps are like using MSWord's scripting and text layout to produce a MSWord-app. Yeah, one can do it, but it's like cutting a steak with a spoon.
You are somewhat correct. I just tested with the tiny HN logo (upper left of this page), and a div with 3 imgs makes them appear side-by-side. The issue I had previously was that the three images were quite wide, and while I wanted them to still go next to each other (with a horizontal scrollbar in the browser), the browser moved images into a new row if they would overflow past the right edge.
I haven't used JavaFX in a while but I'd bet there's a checkbox you can toggle in the builder GUI to control how an HBox overflows.
The solution for HTML/CSS was to give the outer div "white-space: nowrap" and the three inner divs (with images inside them) "display: inline-block".
That gets onto a major tangent, namely the fact that the web took over as a UI due to the incredible pain and security nightmare (bad isolation) of shipping and updating native apps. The web was a way to avoid the hell of installing a native app, so the web won.
This is (still) a problem with OSes. Mobile improved the situation a bit but not really that much. I am now reluctant to install mobile apps since virtually every mobile app is a potential vector for who knows who to spy on me. Mobile apps are isolated enough that they're unlikely to trash the device but they still have huge security isolation problems.
TL;DR: endpoint OSes suck so the web won in spite of being a crappy UI platform.
Thinking about the apps I used in the 1990s, we definitely had not figured out good UI design. There were some good ones, but there were some terrible ones too. Remember Napster's interface? Yikes.
In the mid-90‘s the web wasn’t that bad, people used normal buttons, unstyled links and basic tables. The downward spiral started when corporations came and wanted their “CI” styling, then designers came and wanted to be “creative” and turned web pages into minigames where you have to guess what color or text style denotes a link, what the icons mean and how to trick the infinitely-scrolling website into displaying the footer. ;-)
> It’s going to take a while till decent, cross-platform/device UI libraries make progress and designers discover the value of reusable components that just work and are familiar to users.
I find it very unlikely that browser vendors will agree to have the same implementation across their own products, vested interests and all.
Until then, we‘re stuck with terrible websites with, at most, one messy version full of ads for desktop computers, with much too small links/navigation elements for tablets (hi, HN!) and one clunky mobile version that looks horrible on most devices, particularly tablets.