Latest Posts

Topic: CSS-classes for different links

kaputtnik
Avatar
Topic Opener
Joined: 2013-02-18, 20:48
Posts: 2433
OS: Archlinux
Version: current master
Ranking
One Elder of Players
Location: Germany
Posted at: 2014-12-16, 23:05

I am actually interested in some bugs and try to get an overview about the website code. It looks somehow like the work is currently abrupted... Anyway, while looking into it, i found someone was working on different classes for links (i.e. external links) but this work wasn't complete. Those classes are importand to mark i.e. an external link as such by displaying i.e a small icon beside it. I completet the work and added new classes for diferent types of links:

  • class "external" for External links
  • class "missing" to Wikipages that doesn't exist
  • class "wrongLink" Wrong syntax (currently only the case without a wikipage: [page name](/wiki/))
  • class "user" Links to Users (/profile/UserName)

In the end it looks like this (this is only an example to show what is possible):

 Link classes

External links have on the right an arrow. This was just in the image-pool, but you could get what you want which is shown for the user link.

As said, the colors for the other links has to be discussed face-grin.png

If you may find some of them useless, see them as eycandy.... but most of them could be usefull i.e. you could see if there are useless links used (missing article or wrongLink).

In this matter: The bold font-weight for all links stood against the normal formatting of bold plain text. Sometimes it is not clear when bold text is used or a bold link is shown. Does anybody have a solution for this? I tested a lot but i found nocthing better as bold Links ....

Edited: 2014-12-16, 23:09

Fight simulator for Widelands:
https://wide-fighter.netlify.app/

Top Quote
kaputtnik
Avatar
Topic Opener
Joined: 2013-02-18, 20:48
Posts: 2433
OS: Archlinux
Version: current master
Ranking
One Elder of Players
Location: Germany
Posted at: 2014-12-16, 23:23

Oh, i forgot: these classes work also in the forum.


Fight simulator for Widelands:
https://wide-fighter.netlify.app/

Top Quote
GunChleoc
Avatar
Joined: 2013-10-07, 15:56
Posts: 3324
Ranking
One Elder of Players
Location: RenderedRect
Posted at: 2014-12-17, 07:43

You could give links a color. While you're at it, maybe you can find a different color for visited links as well. I like the arrow for external links where it is, but I would put the user icon before the user name.


Busy indexing nil values

Top Quote
wl-zocker

Joined: 2011-12-30, 17:37
Posts: 495
Ranking
Tribe Member
Location: Germany
Posted at: 2014-12-17, 15:33
  • External links: I am fine with the arrow being after an external link. It indicates that the link goes somewhere else.

  • Normal links: They should be indicated in another way than by bold writing. The problem is that bold texts (as well as italics) are often used to highlight something, while colors and underlining are barely used. What about giving them a bright green color?

  • Links to missing pages: What about making them red, like Wikipedia does? This would signal that something is wrong here (we want to have the Wiki as complete as possible). However, they should not be so screaming that they disturb.

  • Wrong links: If you can filter for wrong links, would it be possible to give that feedback when saving a page/showing the preview ("Warning: Your article contains an invalid link. Consider fixing it before saving this article. if the target page does not yet exist, write the link nevertheless. Someone else might want to add it later on." or something like that). In the article, they should not be links any more (only the text should be shown).

  • Visited pages: Another color would be nice, so I do not click on the same article several times because it is referred to by different texts. Maybe we could make them yellow?

  • User icon: While I think it is useful, I am not happy with the one you suggest. The main reason is that it is higher than the text, resulting in a wider gap between two lines. I have no other idea though (I think shrinking the icon will not look good).


"Only few people know how much one has to know in order to know how little one knows." - Werner Heisenberg

Top Quote
kaputtnik
Avatar
Topic Opener
Joined: 2013-02-18, 20:48
Posts: 2433
OS: Archlinux
Version: current master
Ranking
One Elder of Players
Location: Germany
Posted at: 2014-12-17, 18:52

wl-zocker wrote:

  • External links: I am fine with the arrow being after an external link. It indicates that the link goes somewhere else.

While for GunChleoc this is ok too, we could make it in this way.

  • Normal links: They should be indicated in another way than by bold writing. The problem is that bold texts (as well as italics) are often used to highlight something, while colors and underlining are barely used. What about giving them a bright green color?

As i wrote, i have tested a lot of colors here. The main problems are:

  1. Links should be displayed in the same way over all the website, including the right boxes imho. The only exceptions are the Links in the main menu. Because the background of right boxes are different to the Forum or wiki background, it is not easy to find a color that contrasts to both backgrounds.
  2. Because of the dark background in Forum and wiki the linkcolor has to be some kind of bright. But it should not be screeching.
  3. Background and foreground correspond to each other. If a foreground looks good with background A it looks different with background B.

A color like the website background (sandcolored?) seems to be good, but then it looks a bit screeching too.

I will provide a screenshot with different colors. But its easy to make tests for your own: In case you are using Firefox, just rightclick on a link and choose ' investigate element' (don't know if this the correct translation for "Element untersuchen" ) In the opend window you see at the right between the culry braces the color for the "a" tag. Click on the circle in the color row will popoup a nice colorchooser. The changes are only effective to the current Page you are looking at. Test your color preferably with a wikipage which contain a TOC. "My" Sandcolor has this value: rgba(254, 236, 174, 0.79) With bold text it looks not nice, so turn of the bold font-weight.

  • Links to missing pages: What about making them red, like Wikipedia does? This would signal that something is wrong here (we want to have the Wiki as complete as possible). However, they should not be so screaming that they disturb.

Is yellow screeming? On some pages the color Red is used. On my display it looks very strange and isn't good readable. Yes i know, red isn't equal to red face-wink.png

  • Wrong links: If you can filter for wrong links, would it be possible to give that feedback when saving a page/showing the preview ("Warning: Your article contains an invalid link. Consider fixing it before saving this article. if the target page does not yet exist, write the link nevertheless. Someone else might want to add it later on." or something like that). In the article, they should not be links any more (only the text should be shown).

Imagine you edited a wikipage with lots of links. With your suggestion you have to go over all the links to find the wrong one. If they are shown in a different color, you will see exatly which link is wrong. I think this is enough as hint. But a link-tooltip wich shows the sort of link would be nice: "Missing Page", "Wrong link" and so on.

  • Visited pages: Another color would be nice, so I do not click on the same article several times because it is referred to by different texts. Maybe we could make them yellow?

I think the color of visited links should be nearly the same as normal links, but e.g. a bit darker. So they differs from normal links but it is optical clear that you allways clicked on it (darker = optical not so importand).

In General: The correct function of "visited links" depends on the browser user settings. So it is maybe not available to all users.

  • User icon: While I think it is useful, I am not happy with the one you suggest. The main reason is that it is higher than the text, resulting in a wider gap between two lines. I have no other idea though (I think shrinking the icon will not look good).

Yes, the height... i am not satisfied with my suggestion too. I will try e.g. the atlanteans shield, but maybe we omit this complete. Aren't there emblems for each tribe? Somewhere sometime i found it, but i did not found it again face-confused.png An idea is, to let the user choose which icon (form a preselected list) is used for his Userlink...

I will make a few other screenshots...

Edited: 2014-12-17, 19:00

Fight simulator for Widelands:
https://wide-fighter.netlify.app/

Top Quote
wl-zocker

Joined: 2011-12-30, 17:37
Posts: 495
Ranking
Tribe Member
Location: Germany
Posted at: 2014-12-17, 21:25

Links should be displayed in the same way over all the website, including the right boxes imho. The only exceptions are the Links in the main menu. Because the background of right boxes are different to the Forum or wiki background, it is not easy to find a color that contrasts to both backgrounds.

I did not think of the links in the "Latest Posts" section. That wooden background makes it really hard to find a suitable color.

A color like the website background (sandcolored?) seems to be good, but then it looks a bit screeching too.

I think that color is hard to distinguish from the white text on a dark background.

But its easy to make tests for your own.

That is really easy. I played around a bit and found that finding a good color is not as easy as I thought. What about blue: rgba(80, 125, 255, 1) for links, rgba(80, 125, 255, 0.75) for visited links. For wrong links, I tried red: #F32E2E. I noticed that green is bad because the headlines are already green.

Imagine you edited a wikipage with lots of links. With your suggestion you have to go over all the links to find the wrong one. If they are shown in a different color, you will see exatly which link is wrong. I think this is enough as hint. But a link-tooltip wich shows the sort of link would be nice: "Missing Page", "Wrong link" and so on.

I did not think so far :). Whatever we do: When someone clicks on a link to a missing page, he should be able to create that page. When I click on a link without a wikipage, I get to the main page, which is confusing when I want to create a new article. Hence my idea to prevent the existence of such links at all.

Aren't there emblems for each tribe? Somewhere sometime i found it, but i did not found it again

For the Atlanteans, there is the shield (or whatever). The Barbarians have two axes with a skull. The Empire does not seem to have an icon. I think they used to have a helmet, but that was considered stupid (why should you put the picture of a helmet on your helmet to symbolize where you come from?), so it was removed (IIRC).


"Only few people know how much one has to know in order to know how little one knows." - Werner Heisenberg

Top Quote
kaputtnik
Avatar
Topic Opener
Joined: 2013-02-18, 20:48
Posts: 2433
OS: Archlinux
Version: current master
Ranking
One Elder of Players
Location: Germany
Posted at: 2014-12-19, 01:56

wl-zocker wrote:

Imagine you edited a wikipage with lots of links. With your suggestion you have to go over all the links to find the wrong one. If they are shown in a different color, you will see exatly which link is wrong. I think this is enough as hint. But a link-tooltip wich shows the sort of link would be nice: "Missing Page", "Wrong link" and so on.

I did not think so far :). Whatever we do: When someone clicks on a link to a missing page, he should be able to create that page. When I click on a link without a wikipage, I get to the main page, which is confusing when I want to create a new article. Hence my idea to prevent the existence of such links at all.

We have a different views about that. Your view is, that this link will animate users to create an article. My view is to give the article Authors a tool that makes writing (and proofreading) easier.

I promised you a new screenshot, here it is:

CSS links

Normal links are shown NOT bold but with color: rgba(254, 234, 168, 0.79). I think it looks good, not screeming, not so far away from the white text color, but different. How this color looks against the wooden background on the right side, scroll further. When hovering the behavior is like now (colorswitch to some green). The screenshot shows hovering against the external link. Tooltips are:
Normal links: no tooltip
External links: "This link refers to outer space"

The "special Page" link is just for showing that a match against static or generated sites could be colored or icon'd too. But i think its not nessesary. Tooltip:
"This is a special page"

The Userlink is displayed with the atlantean shield on the left. More on that issue at the bottom.

If a header is a link, it looks like the "Header as link" header in the screenshot. Its the same color as for links. No tooltip (like normal links)

The Coloring for wrong links do not have a hovereffect (it feels like they aren't clickable). The yellow links have Tooltip:
"The Link you refer to is missing or misspelled"

So the tooltip says whats wrong. The yellow links "could" be left in an article to show that there is an article missing, but a red link should never be seen. Both colors says, that there is something wrong and will help an author to examine his work. I hope that this will clarify my view of it.

reminder I have to test this wrong links with redirects


How it looks like on the right side? This screenshot shows, among linkcoloring, my idea of userdefined usericons. The links are bold and have the same color as in the previous screenshot for normal links is shown.

CSS links

Every user has his own icon. The usericons in this screenshot are just copy and paste images. Implementing such a feature (a user could choose his personal icon) in the code isn't quite easy for me.... but if you like it,i will try to do so.

If every user do have the same icon, it looks boring. So i think we should omit userdefined icons for now and leave user links as normal links (no icon beside)

Fit these colors?

"Visited Links": Because of privacy reasons see history stealing this feature is partialy not provided by browsers anymore. And i couldn't get this to work on my machine face-sad.png


Fight simulator for Widelands:
https://wide-fighter.netlify.app/

Top Quote
GunChleoc
Avatar
Joined: 2013-10-07, 15:56
Posts: 3324
Ranking
One Elder of Players
Location: RenderedRect
Posted at: 2014-12-19, 08:43

The description says that color definitions are usually still allowed for visited links. Maybe you could install a second browser for testing.

I think the user link color you have in your last screenshot would fit for all links except for special links, where we will want something different - maybe something with underlining rather than a different color might do the trick to mark missing wiki pages? I would also not give the special pages a different color - the user doesn't care how a page was generated. You could play with that and your new misspelled link/missing article color to see if that will work for normal/visited links. I think it might confuse visitors if links are sometimes yellow and sometimes green. Keep green as the hover color face-smile.png


Busy indexing nil values

Top Quote
wl-zocker

Joined: 2011-12-30, 17:37
Posts: 495
Ranking
Tribe Member
Location: Germany
Posted at: 2014-12-19, 16:51

Normal links are shown NOT bold but with color: rgba(254, 234, 168, 0.79).

I think when you have a Wiki text, with a link in it, the user will not notice that it is a link because the colors are not different enough. I hardly noticed a difference in your example screenshot.

Visited Links:

They work fine for me on Wikipedia with Firefox 34.0.

maybe something with underlining rather than a different color might do the trick to mark missing wiki pages?

I am not sure if users will understand that. Underlining links (also existing ones) is very common.

I would also not give the special pages a different color - the user doesn't care how a page was generated.

I agree. That would be unnecessary.

So the tooltip says whats wrong. The yellow links "could" be left in an article to show that there is an article missing, but a red link should never be seen. Both colors says, that there is something wrong and will help an author to examine his work. I hope that this will clarify my view of it

Sounds good.


"Only few people know how much one has to know in order to know how little one knows." - Werner Heisenberg

Top Quote
kaputtnik
Avatar
Topic Opener
Joined: 2013-02-18, 20:48
Posts: 2433
OS: Archlinux
Version: current master
Ranking
One Elder of Players
Location: Germany
Posted at: 2014-12-19, 21:39

Normal links are shown NOT bold but with color: rgba(254, 234, 168, 0.79).

I think when you have a Wiki text, with a link in it, the user will not notice that it is a link because the colors are not different enough. I hardly noticed a difference in your example screenshot.

At home i do have two monitors, and every do show colors different. So maybe on some monitors its really hard to distinguisch. Lets take

  • rgba(254, 234, 168, 1) for normal links
  • rgba(254, 234, 168, 0.79) for visited links

Nothing against your suggestion of some kind of blue... There are allmost so many colors on this website... putting in a new color will make it look some kind of advertising. My opinion face-smile.png

maybe something with underlining rather than a different color might do the trick to mark missing wiki pages?

I am not sure if users will understand that. Underlining links (also existing ones) is very common.

We should not forget: The Wrong links section in the secreenshot shows links, which should be usually not displayed. The only exception are maybe(!) the yellow ones, but those links would be very rare.


Fight simulator for Widelands:
https://wide-fighter.netlify.app/

Top Quote