That being said I don't understand why the sidebar should be collapsible (and collapsed by default). It's just an extra click to access functionality with some people rely on (languages, for example, being probably one of the most used).
I hope we don't bloat up wikipedia pages with too much whitespace. Getting of borders, "minimal" looks bother me so much because they're sacrificing layout for aesthetics. There is a reason why borders exist. It is a line segment that separates logically laid out content into groups.
I want Wikipedia to stay the same even if it is not ideal. There is a lot of legacy and "learned" behavior.
We need to add the familiarization factor to any UI changes. The amount of changes should at the minimum exceed the accrued familiarization of the UI...the longer the design remains the same, the higher this factor. It is crazy to think that we should not make a change if it is for the better, but there are a lot of people ... millions that use this less-than-ideal UI. There is something to be said about that.
Typographically, Wikipedia pages have too wide of a column width. This is a common problem not just with webpages, but with magazines and newspapers. There is a reason why the dimension of a book (such as a novel) is smaller than a magazine and that has to do with how wide of a column is comfortable for reading. We need to look at how magazines and newspapers solve this problem. They use columns. Larger fonts is not the answer nor is excessive whitespace because you're not solving the layout issue. It is just magnification.
If newspapers didn't exist and if web designers today were tasked to design a physical newspaper, it would be bloody 80 pages long and full of massive margins and fonts with no understanding about density of presentation. The web needs to be treated like physical media (yes, I said that, fight me). It is a rectangular 2D space that presents text - no difference to my retina whether it is a magazine, newspaper or LCD monitor in terms of spatial representation (not talking about contrast/backlit aspects). This was different a while ago, but today, the pixel density is great and we can almost treat monitors like paper (again, not talking about backlit issues).
Web designers today won't be able to design a physical telephone book. It would be called "Too overwhelming" for the user and it would be insanely big in 17 volumes.
Again, increasing the font size is not the solution.
The second point about padding the sides with whitespace causes waste of screen real-estate for no reason other than to give comfortable width to read. This is what NYtimes articles do: https://www.nytimes.com/2020/08/21/business/goldman-sachs-fo...
So left and right sides are unnecessarily wasted. The solution I am proposing is to use multiple columns. At desktop size, you get 3 columns. At tablet size, 2. On the phones, its single column. There might be better solutions to this but I can't think of any. Columns are how Magazines do their layout of text. It is also part of the international style in graphics design.
Counter point: Magazines had to use columns to conserve space and page count. Each page adds cost. In digital media, we don't have such limits. The only down side is the user has to scroll a lot. But we have devised a scroll wheel and most users have this tool.
This is makes it hard to handle flowing content. Do you add artificial pages to break up the content or does scrolling cascade up each of the columns?
Then there's the issue of typesetting being an NP hard problem. Even Word needs a lot of hand-holding when using multi-column layouts because it often produces poor results.
I don't necessarily mind the excessive whitespace when I'm reading, because I prefer to not have to move my head and eyes too while reading. But having a lot of content on the page at once, like you're proposing, is really beneficial in technical situations, where I need to move between different pieces of information, like taking notes.
I understand we are just talking about page layout, but web designers still have to simultaneously contend with everything I've listed.
You mention a solution for 3 different sizes (desktop, tablet, and phone), but a responsive site often has to subdivide further. Even so, "tablet" does not have a standard size. Rotating a tablet/phone also changes the view size.
Size is not the only usability difference between desktop and mobile devices.
Columns in such a way would likely be hell in terms of accessibility (remember, the user can change the font size).
Of course, there are (potentially) ways to solve each of those, but they will depend heavily on the individual sites' and users' needs. This brings us right back to the issue of non-standard design across sites.
I wouldn't expect well-designed print media from a web designer any more than I would expect a well-designed site from a print professional. They are different professions and problem spaces that sometimes overlap.
Instead of disparaging all web designers as unprofessional morons, perhaps consider that they balanced all of the above along with your points and still landed on a different conclusion from you.
tl;dr the user can (rightfully) control a lot of factors in how they view the web that traditional print and graphic design do not have to deal with.
Somewhere between 80-110 cpl should be adequate to satisfy most deviations in sizes. This "buffer" factor can be accounted for when designing for resizeable interfaces. Column sizes don't have to be absolutely rigid and pixel perfect.
Scaling can be tackled by basing everything on em-units. Scaling using Ctrl + can effectively "zoom" the UI. The relationship between elements should stay the same.
None of this is difficult. We have tools to tackle these problems. Uninformed designers are the problem IMO, but I don't have data for this. My gut feeling is that most designers follow trends, UI frameworks (bootstrap, tailwind), and have stopped building CSS from scratch.
Why are columns hell for accessibility? Given the fluidity of 80-110 cpl, we should be able to account for any size from a phone to large displays. This is a solved problem.
Again, I am not saying there aren't challenges and may be there are better ways to handle all the variables. We should not throw the towel and not think, discuss and debate about it.
I'll admit I'm not up to speed with a lot of CSS, myself. I'll definitely be looking into how to better use columns.
While I think frameworks can be helpful to keeping a standard look and feel to the web, I would definitely agree that they're often used as a crutch.
By appeasing to many screen sizes, we create worse UI for all 3 sizes because no one really designs them for each size separately. Widths are in percentages, flex layout allos collapsable columns and the whole thing is not built from ground up. Either the designer starts with Desktop first and then mobile is a second thought (Bootstrap), or all class names are mobile first (Tachyons).
If we design UI from scratch for each of the 3 or 4 classes of screen sizes, it would be so much better. Completely, from scratch. Not taking the Desktop layout and collapsing the columns. But doing things like button sizes should be smaller for Desktop (mouse) and larger for mobile (finger). Not a single framework does this.
The first being screen size fragmentation. Most tablets fall into a similar size/scale category, so you can have buffers (kinda like how you were saying). However, there are still corner cases where (e.g.) a tablet in landscape mode happens to trigger a different size category. The fact that resolution helps in fingerprinting users is pretty indicative that fragmentation is a huge problem.
The second being the lack of a good way for a page to know exactly what type of device it's displayed on. There are hints/etc. to get close enough. However, it's still a fundamental truth of web development that the browser can always lie to you. Not necessarily a bad thing, but a design challenge regardless.
The third is less of a technical or even a design problem, but I personally think it's the worst. More and more, companies are making increasingly complex sites with no real thought to user implications. I believe this will always be true in a web where the real customers are ad companies and search engines and the user is the product.
On the lines of another point you've made, I'm not suggesting we give up; there are still plenty of ways we could and should improve designs and frameworks (you've outlined some really good ones).
On the other hand, pages that stay in a narrow column in the middle when I widen the window really infuriate me, because I explicitly asked for wider columns and am not getting it.
The web is such a shit place in terms of design. This is probably why I like reading books and magazines in print. At least the lay out is done by a professional who doesn't have a title "UX/UI" designer and doesn't have a Behance/Dribble portfolio. These people are professionals and they conduct themselves as such.
Different people have different workflows. Many people I know only have 1 browser window open, always maximized, with a ton of tabs open in it. They definitely won't go about resizing the window for no good reason. I don't think any mainstream website relies on the user resizing the browser window for, what I think are, good reasons.
The whole idea is that when you have the window at a comfortable width, the content in all your other tabs should also be.
macOS, on the other hand, explicitly advertised having an "immersive" fullscreen mode (with a dedicated button in the past).
Wikipedia is difficult to read due to the small font and large column width. Even with the updated versions (I checked French and Hebrew since I can read them) - the column width is in the acceptable range, but the font is too small to be comfortable on a 4k screen. 14px font is a thing of the past. I see Medium, with their thinner columns and 21px font as much more readable.
The original idea of the web as a publishing medium was that visualization could be determined by the needs and preferences of the final user, and thankfully the technology still allows for it.
Narrow columns make text hard to read due to the eye being unable to see whole sentences at once. It's like the "Dick and Jane" books of old: "See Spot! See Spot Run! Run Spot Run!" Books for adults aren't written like that (as print novels attest) and there's a good reason.
Also the largest "adult" books (non-textbooks) that I have take up about 1/5 of my 43" 4k monitors screen. If you aren't adding a healthy text margin, my eyes have to scan left to right twice as much as with a book. If you want to talk about novels - my screen is 8 times as wide as them, so they are naturally using much narrower columns than most websites.
Edit `const enableLanguageSidebarAltView = true` to `const enableLanguageSidebarAltView = false` to make it look exactly like it used to do before that dumb button was implemented