Posted on by & filed under Fire-and-Forget.

Quick Win

Text links inside the main text body (<article> element) of a website should get underlined when the user hovers the mouse over them. They should have a distinctive blue color that fits the design of the site. Pick #1e0fbe blue   in case you can’t decide. Here is the CSS for you:
article a{text-decoration:none; color:#1e0fbe}
article a:hover{text-decoration:underline}

The problem with links

Hyperlinks are a defining element of the World Wide Web, since the very beginning. While it is theoretically possible to create a website without hyperlinks, almost all websites contain links. In this blog post I will talk about links in the <article> element or in the main body text (before the HTML5 era there was no article element).

Showing the links indistinguishable from the rest of the text is against the webmaster guidelines of Google, Bing and all major search engines… moreover it is a complete usability disaster. Now the question is: How should a text link look like?

Underline on Hover

In the very basic non-verbal vocabulary of the web, underlined on moving the mouse over something means hyperlink. If you move your mouse over a differently (most of the time bluish) colored text, it will and should be a link. This is true for all major sites. Google, Facebook, Amazon, eBay and Wikipedia does this way, and you should definitely follow suit, unless you wish to decrease the User Experience Rating™ (more about this in a later blog post) of your site.
If you don’t underline links on hover, it’s as if instead of nodding your head, you would do a headstand, when you agree with something. After a while people would understand the meaning of the headstand, but it would be hard to understand for those who you just met. (Plus everyone would think you have mental deficiency.) Long story short: underline on hover is a symbol for hyperlinks understood and used by everyone. ‘Nuff said.

Fifty Shades of Blue

Using blue for link color predates even the underline on hover. (At the dawn of the internet links used to be underlined, no matter the mouse position.) While not as predominant as the underline on hover, still quite a common sight in today’s web. There is an UX anecdote that Marissa Mayer (nowadays President and CEO of Yahoo!, but back then she was working at Google) ordered that forty different shades of blue would be randomly shown to the visitors (each shade having 2.5% chance of being shown). Her team measured which color earned more clicks. According to the urban legend, that was how the blue color you see in Google Mail and on the Google page was chosen. Back then it was the same blue, nowadays it is slightly different with the new Gmail design. While Gmail predominantly uses #15c  , Google search engine result page (SERP) uses #1e0fbe  .

I don’t think that the shade of blue matters, mostly because it looks different depending on the monitor, light conditions, not to mention the user’s perception of color. I bet, that a greenish blue would work, if it looks better in your design. What I would avoid is the purple(ish) shades, which might get confused with the visited link color from Google SERP (#609  ). That would decrease the number of clicks on the links.

In tend to decide the color of links on a case-by-case basis. In this blog I went with #037  , a slightly greenish deep blue (70% blue, 30% green), while keeping it quite dark (lightness value of 0.23). I will definitely write one or more blog posts on color theory, but the moral of this story is: Pick a blue, that works well with your design.

Don’t apply this to the menu of your site!

To keep thing simple, in this article I’m writing about hyperlinks (<a> elements), that are inside the main body text, as in the article element in an HTML5 document. I will definitely write about user experience of navigations (<nav> elements), that also contain links.

What I wrote here stands true for text links basically anywhere on the site: <aside> or <footer> (great place to spam irrelevant links – or not, Google hates footer link spam) or basically anywhere, any link, excluding those with site navigational purposes. Long story short: don’t create your site’s menu based on this blog post, but apply it everywhere else, where there are links on your site.

What if you don’t want users clicking links?

First of all, that would be a terrible practice, unless you are a blackhat SEO guy and/or selling links on your site. If for some reason you are ordered to decrease the number of clicks on the links you have in your site, make them as close in color to the body text as possible. If you have a #333 dark gray   colored body text, add links, which are #000 pitch black  . (#222   if you are truely evil.) But then again, that might give you a Google penalty.

The HTML code of text links

You should have your text links wrapped in <a> (anchor) tag. You should always have that came from the HTML itself. While it is possible to write a JavaScript code, that transforms everything starting with “http://” or “www.” into clickable links, you should avoid that, and those transformations should be done server side if need be. This is the only search engine, screen reader, and old cell phone friendly approach.

<a href="/ez-magyarul" hreflang="hu" rel="alternate" target="_blank">
this in Hungarian </a>

This is a prime example of an a tag, with all the fancy attributes. While href attribute is a must have for a tag to be clickable and functioning as a hyperlink, hreflang can be omitted if the target is in the same language as the document where the given link is located. Hreflang basically tells the language of the targeted text. The rel attribute, when present, usually has the value of “nofollow”, because that means the search engines should not follow the link, so no PageRank is passed. According to Google this is the only way you can show advertising (sold) links on your site. This is a simple way of telling Google “I got money to show this link”. The other, and more common reason of using “nofollow” rel value, is when you are not sure, what kind of content you link to. Some sites, like Wikipedia automatically attaches this, to all external links. Even if it links to very reputable sites. I suggest that instead of nofollow-ing, you should simply delete all links to unknown or unacceptable sites. This way you would not lead your users to bad places. In the example above, I used “alternate” rel value, to signal an alternate version of the document, in this case a translation, but this can be a PDF of the text, or a print page too).

The most interesting attribute is the last one. The target. By default links should open in the same browser tab, but in some cases, especially for external links, the “_blank” value is the way to go. It specifies that the link should open in a new browser tab. Most of the time you do not want to specify target=”_blank” for links that point to a resource inside your site, like one of your sub-pages.

Futuresight

I don’t think that in the near future links would turn orange, or they would spin in over state. What might see broad usage is a thumbnail view of the targeted resource in over state. The html code is also here to stay, but the new HTML5 attributes for a tags will be used a lot more. Those are: download (specifies what file will be downloaded), media (specifies what device –media– the linked document is optimized for) and type (MIME_type of the linked document).

Leave a Reply