Re: [Dragora-users] Some issues with the Dragora website

[Michael Siegel]

Trying to catch up...

1. Making links bold

Apparently, we all agree that links should differ from normal text both
in color and font style. The question is: Is it viable to make links
bold to achieve the latter? I don't think it is, because – as I've
stated earlier – it will reserve bold text, which should be reserved for
strong emphasis (counting out a few possible exceptions), for link text.

As Chris has provided some example sites using bold face for links, let
me talk about those for a minute:

https://en.wikipedia.org/wiki/Main_Page

As can be seen here, the default link style on Wikipedia does not
include making link text bold. Links in a bold type face have a special
meaning. The default style is merely making them blue and having them
underlined when the user hovers over them with the mouse or selects them
using the keyboard.

I would generally argue for having links underlined, but Wikipedia
articles tend to contain a lot of inline links, so, in this case, not
underlining each and every one of them does make sense. But I'm pretty
sure there will be no need for that amount of inline links on any page
of Dragora's website.

http://carlo-domeniconi.com/

I've created a screen shot of the “works” page from this site and turned
that into a grayscale image. That resulted in links surrounded by
portions of normal text being pretty hard to locate. The only way to
make them easily locatable while keeping links bold would be to go with
a darker color. But this would bring those links closer to normal bold
text, which is, obviously, not a good idea.

https://www.audubon.org/birds-of-america

Bold links are in the site's navigation menu only, if I'm not mistaken.
Normal links are not bold, but simply light blue.

https://www.canadiantire.ca/en.html

I think we can agree that the link formatting on that site is a hot
mess. And it does, by the way, also include underlined links (See the
drop-down menu near the bottom of the page.). But okay, it was just
meant to provide a quick example.

So, I'd conclude that taking a careful look at the above websites (and
there are surely many others we could look at), actually supports my
first point: Standard links should not be formatted as bold text.


2. To underline or not to underline links

Now, if standard links are to be distinguishable from normal text both
in color and font style and if bold text (as well as italics) are not a
good idea to achieve the difference in font style, the logical
consequence would be to underline standard links, wouldn't it? (See what
I wrote yesterday about there being no need to underline for emphasis in
normal text on a web page.)

I mean, you could also simply not underline them. This will, however,
make standard links differ from normal text solely by color, running a
high risk of making them hard to find for visually impaired users.
Taking a screen shot of a website and making it into a grayscale image,
as I've done with one of the sites above, will give you a good idea of
the consequences of not underlining links. Since I've started using this
“method”, I always underline standard links. A site doesn't have to look
ugly because of that.


3. Coloring links

Granted, the standard blue of hyperlinks is a bit in-your-face,
especially when there is a bunch of them within close distance in a text
paragraph on a white-ish background. But that can easily be resolved by
a) refraining from excessive linking and b) using a different shade of
blue. It doesn't even necessarily have to be a shade of blue, just
something that differs “meaningfully” from the color of normal text.

A note on hyperlink classes: If you ask me, the only link class that
needs to be formatted explicitly for links in normal text apart from
:link is :visited. Working with :hover does, IMO, only make sense where
not underlining links in the first place is reasonable, e.g., on
Wikipedia. But generally, I'd say using :hover only adds clutter to a
hypertext document.

Concerning the color relation of unvisited and visited links, let me
quote Jakob Nielsen's Guidelines for Visualizing Links:

  The color for unvisited links should be more vivid, bright, and
  saturated than the color for visited links, which should look
  "used" (dull and washed out).
  The two colors should be variants or shades of the same color, so
  that they're clearly related.[1]

Well, concerning the last statement, I think it's also generally okay to
just make visited links gray (depending on the background color) or even
a “washed-out” version of the normal text color.

Nielsen's Guide is, I think, a fine document on how hypertext links
should be handled (I only disagree to using link titles). Basically, you
can't go wrong following his advice.

[1] https://www.nngroup.com/articles/guidelines-for-visualizing-links/


Am 14.11.19 um 02:35 schrieb Matias Fonzo:
> If we're going to use underlining, I suppose we could do something to
> be in the middle (so underlined links aren't redundant and tiring).
> It could be:
> 
> - Split (I don't know how it will be in CSS) the external links with
> the internal links.
> 
> - For external links, use underlining by default.
> 
> - For both cases, use :hover (underlined and maybe with background,
> as the w3 site has it).

IMHO, this would merely make things more confusing. I think Chris has
already solved this nicely by adding that little arrow symbol to
external links. However, in the current version,
http://rsync.dragora.org/ISO/ will also be interpreted as an external
link. I'm not sure it should be that way.

Okay, so much for links. I sincerely hope I didn't get on your nerves
too much.


Best
--msi