Hyperlink treatment

[bolatovumar]

This turned out to be a bit lengthy but I think it's important. I would love to hear what people have to say about this.

---

Moving the discussion from twitter to here.

I don't think the treatment of hyperlinks in this project is optimal.

Color

All links get the same color as text whether they are hovered over, clicked on, or have been visited. I don't think this is ideal.

Links the color of text may seem optimal for reading experience as they are ‘‘book-like’’ but I think they are neither optimal nor ‘‘book-like’’.

Let's imagine a scenario in which a user tries to quickly find a link in an article he had read. He may quickly scroll through it (as I often do) trying to find it as he remembers it was somewhere closer to the end of it. Underlined links the color of surrounding text blend into it during quick scrolling and become indistinguishable from text. Coloured underlined links do not.

As to their bookish appearance, we can probably agree that Edward Tufte draws a lot of inspiration from the layout and structure of renaissance and late medieval books for his own books. Books of this period don't shy away from using splashes of colour to highlight things which serve as a sort of hyperlink.

Medieval table of contents — the ultimate hyperlink collection

Galileo's book looking very Tufte-like (or is it the other way around, lol)

I think hyperlinks should be underlined have a colour contrasting with surrounding text. Pull request https://github.com/edwardtufte/tufte-css/pull/45 tackles this but I don't think it's moving in the right direction.

There should be no fade-in transition for hovering over links. Immediate feedback is very important in interface design even though in some cases it may seem redundant. Redundancy is also often good in interface design. Making sure that things are as clear as they can be is a good thing.

The fade-out transition is OK by me though.

:hover styles

Some of us plebs still use mice and desktop computers though

Hover styles aren't particularly exciting, I agree, but we can't discard them just because they are mouse-centric.

I believe web pages built in the spirit of ET's books are best enjoyed on large high resolution displays of desktop computers which are the closest approximation of high-resolution paper book material we have. Computers that use these displays still rely on mice as of Christmas day of 2015.

:visited styles

Having visited links a different colour from unvisited links can also be very valuable to people. In a scenario where you are trying to quickly find a particular article you have read a month ago and the only thing you remember about it is that it was linked to from some blog post of some dude (a common scenario for me), styling visited links is indispensable.

Underlines & descenders

I believe clearing descenders is a bit of a gimmick. Underlines should be a the baseline of words. This way they won't cross the descenders and won't too far from the link itself stuck in between two lines of text.

But if ET himself approves of descender-clearing, who am I to disagree?

Conclusion aka TLDR

Links need to be a contrasting colour from the body copy to distinguish them from it and aid those who need to find them quickly.

Visited links should be coloured differently to aid in quick re-discoverablity of visited web pages.

Links should be underlined but do not need to avoid descenders or cross them. Underlines at the baseline of the link are good.

There needs to be a hover style for the links. Color fade-ins do not help here as we need to provide immediate feedback after a user completes the action (hovering).

What colours and styles should be used is up for debate but I suggest blue for non-visited links, dark shade of red for visited links and orange for hover styles.

regular link colour

hover style

visited link style

---

DISCLAIMER: Everything said above is my opinion and I'm probably wrong about everything.

[bolatovumar]

@daveliepmann alright, I pushed my fork to http://bolatovumar.github.io/tufte-css/ with blue links which turn orange on hover. I couldn't style visited links since as it turns out applying background css property to visited links is impossible (https://developer.mozilla.org/en-US/docs/Web/CSS/Privacy_and_the_:visited_selector). Let me know what you think.

I made some gifs to demonstrate the visibility of different colour links during fast scrolling to illustrate one of my above points about link discoverability.

Red links

Blue links

Black links

As you can see red links stand out even during very fast scrolling and so do the blue ones (but less). Black ones almost blend in with the text.

[daveliepmann]

Color

I'm not opposed to using color for links in some (many!) project contexts, but I'm not convinced that the default for Tufte CSS should be to reach for color. It draws even more attention to hyperlink text and may conflict with other color choices a particular site has made for graphs, logos, and so on.

It would be good to ask what specific benefits we're looking for color to provide. (Or problems color solves.) It seems you point to two: 1) allowing :hover and :visited styling beyond grayscale and 2) highlighting link usage while skimming. I'm not bullish about either :hover or skimming, but :visited does give me pause.

:hover styles

I repeat that I am reluctant to emphasize :hover styles, because they are only relevant in mouse contexts. We should ask, "what is their purpose?" while remembering that the purpose will not aid mobile or tablet users.

I believe web pages built in the spirit of ET's books are best enjoyed on large high resolution displays of desktop computers which are the closest approximation of high-resolution paper book material we have.

I must disagree strongly. For one, to quote Karen McGrane: "You don’t get to decide which device people use to access the internet: they do." Someone is going to view your Tufte CSS webpage from their iPad or phone, and you can't stop them. We choose not to ignore or devalue their experience.

Secondly, our goal is not now and has never been to replicate Tufte's paper books. The web is not print. Webpages are not books. Tufte CSS is not in the business of telling people not to view any given website from a touchscreen large or small.

Again: what is the specific goal of :hover styling in Tufte CSS? If we have none, then I say we leave it alone. Designers can use that technique as their project suits them.

:visited styles

I feel your pain on this one. I think there is often significant value in denoting which links a user has visited.

However, I'm not sure what the best solution is for Tufte CSS. Any solution, whether using color or grayscale or background or something else, fundamentally requires increasing the difference between link text and non-link text, which in my view harms the flow of readability. I'd like to hear suggestions from ET and the community on this one, but for the moment, the restriction on background styling prevents the implementation of our descender-clearing trick on :visited links, so I lean towards the status quo.

To address your proposal of blue text that turns to red on hover: if we ever did turn to color for anchor text, I'd avoid a jarring color switch like blue/red. Manipulating the value of the hue would be preferable.

Clearing descenders

For some time (check the commit history) Tufte CSS used borders to put an underline below descenders on anchor text. ET convinced me that the current approach is cleaner.

The implementation Tufte CSS uses to achieve descender-clearing underlining is a CSS trick, but neither the typographic technique nor that CSS wizardry is a "gimmick".

Tufte CSS prefers to clear descenders and this is not likely to change.

Conclusion

It would be nice to denote :visited links, but it doesn't seem possible without drastic changes. I am not convinced by your other arguments.

Happy new year!

[bolatovumar]

@daveliepmann thanks for detailed response. It's nice to see clear reasoning behind the decision made.

[daveliepmann]

For an example of link color making text difficult to read and nigh-impossible to skim, see Reason.com's black-on-white/orange-on-white text/link arrangement. Picking a color that has more contrast with the background could help, but the simple fact is that link-heavy text is burdened by the use of color to denote links. Such frequent color switches break up the flow of reading.

[bolatovumar]

Hyperlink colour on that site is indeed problematic. Using colour with less of a contrast with surrounding text seems to improve the situation at least a little bit.

Also, they seem to use hyperlinks absolutely indiscriminately linking to ABSOLUTELY EVERYTHING they can. I think whoever writes the copy should be conscious of how many links they are using and whether they really need to use them.

[daveliepmann]

Per my earlier extended comment, I do not see any actionable tasks in this issue at the moment.