Readability improvement suggestions for the wiki

Questions about the LÖVE API, installing LÖVE and other support related questions go here.
Forum rules
Before you make a thread asking for help, read this.
Post Reply
User avatar
qubodup
Inner party member
Posts: 775
Joined: Sat Jun 21, 2008 9:21 pm
Location: Berlin, Germany
Contact:

Readability improvement suggestions for the wiki

Post by qubodup »

Hello,

The wiki looks nice but is not well-readable (compare to homepage). The font is too small and the font color contrast is too low.

I suggest changing in http://www.love2d.org/w/skins/love/main.css

line 8 to:

Code: Select all

  font-size: 1em;
to solve the size issue

line 12 to:

Code: Select all

  color: black;
and line 41 to:

Code: Select all

  color: #006BBD;
to solve the contrast issue

to solve the resulting logo jump, change line 330 to:

Code: Select all

  width: 171px;
Before: https://love2d.org/imgmirrur/m27YOfS.png
After: https://love2d.org/imgmirrur/2fmdj7m.png

I hope these suggestions are welcome. :)

I don't know how to solve the issue of the first column of the list on the main page starting shifted downwards I'm afraid.

I wish you all a healthy and non-eye-straining coding and documentation-reading!
lg.newImage("cat.png") -- made possible by lg = love.graphics
-- Don't force fullscreen (it frustrates those who want to try your game real quick) -- Develop for 1280x720 (so people can make HD videos)
User avatar
Lafolie
Inner party member
Posts: 809
Joined: Tue Apr 05, 2011 2:59 pm
Location: SR388
Contact:

Re: Readability improvement suggestions for the wiki

Post by Lafolie »

Having studied UI, semiotics and graphic design I feel that the current layout is fit for purpose. Not only does it function well but does so with elegant form, and I feel that your proposed changes encroach on this design. The pure black text contrasts far too much against the background and impacts the page hierarchy, particularly the bold text near the bottom. Although I would agree that the text in the sidebar is perhaps a little small.

However, there's good news for you. It should be entirely possible for you to view the wiki with custom CSS, and most browsers allow for page re-scaling with Cmd/Ctrl and +/-/0.
Do you recognise when the world won't stop for you? Or when the days don't care what you've got to do? When the weight's too tough to lift up, what do you? Don't let them choose for you, that's on you.
bizziboi
Citizen
Posts: 57
Joined: Sat Apr 16, 2011 9:24 am

Re: Readability improvement suggestions for the wiki

Post by bizziboi »

Except that multiple people have suggested it is hard to read so that might mean the design is elegant but perhaps not from a usability point of view, which is part of elegance imo.

Form should never overtake function in something that is first and foremost meant to be functional - one Phillipe Starck is enough for this world :op
User avatar
qubodup
Inner party member
Posts: 775
Joined: Sat Jun 21, 2008 9:21 pm
Location: Berlin, Germany
Contact:

Re: Readability improvement suggestions for the wiki

Post by qubodup »

Lafolie wrote:Having studied UI, semiotics and graphic design I feel that the current layout is fit for purpose. Not only does it function well but does so with elegant form, and I feel that your proposed changes encroach on this design.
The current wiki style is gorgeous. My proposal makes it less beautiful. No doubt about either of these.

For API documentation, it works fine for me. For article style documentation it is very disturbing to me. I have had the issue both on 1920x1200 26'' and 1024x600 10''

You seem to be an experienced LÖVE user. Perhaps you could copy-paste a text that is challenging for you to understand into the wiki and read it in preview mode for testing? :)
Lafolie wrote:The pure black text contrasts far too much against the background and impacts the page hierarchy, particularly the bold text near the bottom.
Paragraph text size is definitely the main issue for me. My understanding was that using <strong> for an entire line is bad practice. The current font scale hides the visual problem well though. As for "editing the wiki", I would consider it to be misplaced on the main page and better placed at the top of every edit page. The "other languages" section breaks the hierarchy in both cases I believe, since its header and itself has the same size as normal content headers/text, but they are not part of the content. There are probably not many who have both the time and knowledge to implement an ideal style.

In the current font scale, the language links seem to be a very nice size to my eyes. The header would be better smaller and centered as well, to form a union with the language links I guess. However while the language links have a nice size, the text above on the main page is disturbingly small to read.
Lafolie wrote:Although I would agree that the text in the sidebar is perhaps a little small.
Agreed! I haven't actually noticed. I never have to concentrate while reading the sidebar so I haven't had any issues with it, except finding an upload link and the search bar at times. I seem to be very used to default MediaWiki arrangement of sidebar items. :)
Lafolie wrote:However, there's good news for you. It should be entirely possible for you to view the wiki with custom CSS, and most browsers allow for page re-scaling with Cmd/Ctrl and +/-/0.
I believe the default is unpleasant and that it impacts the availability of community-made article-style documentation like tutorials by impeding willingness to write/read it.

I am very thankful to the team of löve investing so much into the presentation. Löve has an aura of niceness in my mind and the web design surely is part of the reason. I want to help improve it if I can, if possible, suggestions would be gladly appreciated.

For testing, I created a userstyle. Please test it and give feedback an suggest code changes or make your own! I don't consider this a solution, but a good testing method.
http://userstyles.org/styles/96426/l-ve ... ty-qubodup (the page contains installation instructions)

PS: I found an ugly way to remove the first list item's top margin. Replace the list with the following:

Code: Select all

<ul style="margin-top:0;">
<li>[[Getting Started]]</li>
<li>[[Building LÖVE]]</li>
<li>[[:Category:Tutorials|Tutorials]]</li>
<li>[[love]] (The module)</li>
<li>[[Game Distribution]]</li>
<li>[[Config Files]]</li>
<li>[[License]] (Free!)</li>
<li>[[:Category:Games|Games]]</li>
<li>[[:Category:Libraries|Libraries]]</li>
<li>[[:Category:Software|Software]]</li>
<li>[[:Category:Snippets|Snippets]]</li>
</ul>
Last edited by qubodup on Wed Dec 25, 2013 11:06 am, edited 2 times in total.
lg.newImage("cat.png") -- made possible by lg = love.graphics
-- Don't force fullscreen (it frustrates those who want to try your game real quick) -- Develop for 1280x720 (so people can make HD videos)
User avatar
bdjnk
Citizen
Posts: 81
Joined: Wed Jul 03, 2013 11:44 pm

Re: Readability improvement suggestions for the wiki

Post by bdjnk »

I'm surprised to hear complaints about the readability of the love wiki, especially when I've often considered it some of the most readable technical documentation I've ever encountered, and I've encountered a lot. The content is great, but so are the fonts, the spacing, the colors, etc.

I find your proposed changes detrimental to the readability. I dislike pretty much every change proffered. I didn't try the user style, but if it's like the example image...
Post Reply

Who is online

Users browsing this forum: Ahrefs [Bot], Bing [Bot] and 5 guests