possible web design flaws + possible solutions

[Wuzzy2]

I know this is mostly subjective but I really hate the new look and feel of the new website but I also think a lot of usability laws are violated here.

Overall, I found it more exhausting to read the pages now, it mostly feels like I'm reading walls of text now. Also, I find this site to just be ugly. The whole style feels like a massive downgrade compared to the MediaWiki style.

Just put the Luanti Developer Wiki side-by-side to the current (not yet ruined) Luanti Wiki and it's like a world of difference.

But I think these aren't just feelings. I have more specific criticisms:

• Links aren't underlined
• Side bar links aren't not just not underlined, they're black
• 50% of horizontal screen space is wasted for no reason
• The middle text area is way too narrow and feels too crammed. If I want narrow text, I just shrink my browser window
• Search widget doesn't have a clear boundary; you can't see the clickable area
• Framesets. Seriously?
• The frames of the site aren't separated by visual lines or different color
• Inconsistent title: "Developer Wiki" in the side bar and site title but "Luanti Developer Wiki" on the main page
• The sidebar topics aren't thematically sorted, but alphabetically. This makes it hard to find the important things first
• The table of contents is moved to a separate sidebar but I think this just adds visual noise and wastes precious horizontal screen space.
• Headers are too little styled. No highlighting expect for a larger font size. Compare with Luanti Wiki
• Images don't have a border. They are just pasted right into the text
• Images don't have a caption (they were deleted)
• No logo :-(
• The color scheme and style overall mismatches that of luanti.org

There is only one thing that is better than the old wiki and it's Lua syntax highlighting. But even here, sometimes the text color is too dark, like for the Lua comments (dark gray on darker gray background).

[mark-wiemer]

Thanks for opening this, the project is very early in-development and I'm an a11y expert, I'll certainly be going through the site and checking for a11y issues.

By default you can assume I agree with your points :D there is a lot that needs fixing, but the core focus right now is adding content.

That said, some counterpoints:

• 80-character columns are highly recommended for a11y and usability, decreasing the need for readers to swing their head back and forth and increasing the ease of finding "the next line" when reading
• What do you mean by framesets? Happy to look into this further
• ToC on the side is a very common practice, and horizontal space is rarely limited in desktop environments on documentation sites. Where would you suggest it be put?

[appgurueu]

Personal opinion (as someone who did not influence the webdesign):

The current design is not terrible (but arguably also far from great) and not more terrible than the Wiki styles. I agree that it feels a little unnecessarily cramped though.

Counterpoints:

• Links don't need to be underlined imo, though it would probably be better for accessibility.
• Black side bar links which are neither underlined nor black are perfectly fine. In fact this is preferable. If you look at standard documentation sites, this is the norm. It would be distracting to make everything in the sidebar blue and underlined (the ToC copes with that by making the font smaller). It is clear that these are links by pure virtue of this being a sitebar already.
• I agree with Mark that in principle, small columns are a feature, especially on big screens. Note that the site is responsive, so on "smaller" screens it will use 100% of the width.
• I don't consider borderless images much a problem. Captions are often useful though.

I agree that better styling and more Luanti-specific branding would be nice. For the former, have you taken a look at Hugo themes, or considered PRing specific stylesheet improvements?

[rollerozxa]

Links aren't underlined

Sure, but they weren't underlined in MediaWiki Vector either.

Framesets. Seriously?
The frames of the site aren't separated by visual lines or different color

No HTML frames are being used, if that's what you're referring to. You can look at the page source to confirm this. The <aside> tag is a semantic HTML element and has nothing to do with the classic HTML frames.

The table of contents is moved to a separate sidebar but I think this just adds visual noise and wastes precious horizontal screen space.

If the TOC is visible then there is plenty of horizontal screen space on your monitor for it to fit, and it gives a good overview of pages (you can see this being used on a lot of other modern designs of documentation and wiki pages, such as the modern MediaWiki Vector theme). If there isn't space then it will be hidden by default with some responsive CSS.

Headers are too little styled. No highlighting expect for a larger font size. Compare with Luanti Wiki

Yes, good point, they should have a bottom border with a discrete colour applied to them.

50% of horizontal screen space is wasted for no reason
The middle text area is way too narrow and feels too crammed. If I want narrow text, I just shrink my browser window

Limiting the width of the text content is a pretty big factor in readability and accessibility. MediaWiki's default Vector theme used to be absolutely terrible with this, and thankfully they've rectified it with the new Vector redesign, but that is too late for the old Minetest Wiki to make use of. However increasing the max-width from the current 80rem to 90rem or something makes a slight improvement in how much you can fit into the screen area without letting readability suffer.

[mark-wiemer]

Of the original bulleted list, here are the ones that can and should be solved through a CSS stylesheet:

• Links aren't underlined
• Side bar links aren't not just not underlined, they're black
• Search widget doesn't have a clear boundary; you can't see the clickable area
• Headers are too little styled. No highlighting expect for a larger font size. Compare with Luanti Wiki
• Images don't have a border. They are just pasted right into the text
• The color scheme and style overall mismatches that of luanti.org

I'll focus on these for my upcoming CSS PR later today/this week, happy to contribute if others have already started.