Comment by systemvoltage | Hacker News Reader

Comment by systemvoltage | Hacker News Reader

Parent Full thread

Design should not be trendy. It is not fashion.

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.

I don't understand why people complain about line length when that really means you should just resize the window to your preference.

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.

I thought about resizing the window, but then most websites slap you with a hamburger menu and neuter the interface.

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.

> I don't understand why people complain about line length when that really means you should just resize the window to your preference.

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.

Who does that? I think most people browse the web with many tabs open at once, and switch between them constantly. I don't think it should be on the user to resize their browser viewport every time they switch tabs to maintain a comfortable measure. That's the website's responsibility.

On Windows you can do it with a single keybinding. Windows key + left or right arrow.

every time they switch tabs

The whole idea is that when you have the window at a comfortable width, the content in all your other tabs should also be.

... no? You can switch between YouTube, magazines and wikipeida in a browser. Most written content sites enforce max widths for their content, so you can switch to them in a maximised window in which you were watching youtube without having to resize your window. Wikipedia is an outlier in that, and for no good reason.

Me. I do that.

I disagree. I want to be able to set the width to whatever I want; it is the user's job to set it to what they want. The website's responsibility is to not needlessly override the user's settings. If you want many tabs at once and switching, possibly with different widths, I think the best solution to that is split-screen (implemented in the browser), which solves many other problems too, actually.

My experience is that most people who were raised on Windows will just full-screen everything. Long-time Mac users are more likely to use sized-to-fit windows.

Why do you think is that? Genuinely curious. There's nothing in Windows that prominently wants you to have everything maximized (ignoring the semi-new tablet mode; windowing behavior stems from a time long before that).

macOS, on the other hand, explicitly advertised having an "immersive" fullscreen mode (with a dedicated button in the past).

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

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.

Use Ctrl(Cmd) and + sign to zoom.

I'm aware, thanks, I'm a developer. That makes the column width wider as well. What you want is a thin column and a large font size, and you can't expect regular users to zoom in.

Ah, so the problem is that the designer used rem or a mix of em/rem units. I personally use Pixels in everything that way the entire thing zooms and all relationships are proportional.

My takeaway from your comment and my experience is that CSS is a mess of a technology. Oh well.

Regular users won't have a 4k display, or they would have detected the problem in testing. If you have unusual requirements such as a very high ppi display, you can set a minimum font size in your client browser, just as the web was intended to be used since the beginning.

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.

Interestingly, that does work on new wikipedia (good on them) but not on many other sites I tested and has some weird results in some places (for example, it doesn't change the regular text size on HN but makes the "reply" link larger). It seems this doesn't have the desired effect or support and could break things for general use. And unfortunately, as a web dev, I have to primarily work with default settings on.

But those sites would be broken according to spec, no? And certainly they won't satisfy any accessibility guidelines.

> Wikipedia is difficult to read due to the small font and large column width.

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.

Books for adults aren't given narrow columns in the sense of a newspaper column, but they're absolutely typeset with attention paid to line length -- it's customary to aim for around 55–75 characters per line. On most displays, Wikipedia's lines are, by conventional typography standards, just too darn long.

What? That's the exact opposite effect that happens with wide columns. With a wide column, your eyes have to scan all the way left to right. With a narrow column, you don't have to scan as much.

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.

With regards to line width, I don't understand 100% what you're saying. You agree that it is a problem, not because of aesthetics but because of readability. But then how do you propose to solve it? The only solutions are either increase font size (messing up things since now font size is tied to monitor width), or pad the sides with whitespace (what they're doing).

Or do columns like a newspaper, but it's unusual on the web.

Increasing font size is magnification of the entire column, so you sacrifice the vertical space along with it. Line height can't go lower after a specific point - Arial for example, with font size of 12 points needs to have enough line-height of 16 points.

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.

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

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.

Print media also doesn't have to deal with: resizable windows, accessibility, user styles, navigation, mixed media, comment sections, SEO, browser compatibility, load times, or security.

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.

You make good points. There is a wiggle room between column widths. https://graphicdesign.stackexchange.com/questions/13724/reco...

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.

Also very good points.

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.

Personally (I would probably get shot by saying this) but responsive design is a real problem, it is not a feature, but its a bug - a horrible one.

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.

Overall, I agree it's a problem, but I see responsive design as a (perhaps poor) solution to the convergence of three more fundamental problems.

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

Reply on news.ycombinator.com