A couple of months back I wrote a post about the importance of making links look like links. From the comments left by readers it was clear that peoples opinions differ widely on the best way to style links, so I thought I’d follow up with a brief survey of the various ways it is possible to make links stand out on a page. I won’t be talking in this article about links in navigation menus, headings, or buttons, only inline links that appear within the body copy of a web page. We cannot rely on visual context to make it obvious to users that inline links are clickable, and therefore their appearance is crucial.
Browser default
Lets start by considering how hyperlinks look when they have no CSS styling applied to them. In any mainstream web browser links are blue and underlined by default, visited links are purple, and there is no hover behavior when the user moves their mouse over a link. Letting the browser determine the look and behavior of links is an approach favored by usability advocates such as Jacob Nielsen, since it won’t disrupt a user’s expectations of how a webpage functions. Nielsen doesn’t admonish designers for changing the color of links, but he considers hover states to be unnecessary visual clutter, and recommends that inline links should always feature an underline.
Mimicking the browser default
For those who adhere to usability principles but still want to get their design groove on, styling links to closely emulate the default browser behavior is a popular option. Consider web application developers 37Signals, whose own website features underlined links colored a tasteful navy blue, with no hover state. Because links styled in this manner look and behave very much like the browser default they are recognizable even to a novice web user, but the customized blue integrates better with the overall page design and stops the site looking ‘vanilla’.
Changing the link color
For designers who consider underlines to be overkill, color differentiation is enough to make links stand out from surrounding text. This approach works well when a unique color is used to style links, however problems can occur when links and headings share the same color. Without an underline it is tricky to tell when text is colored to indicate that it is clickable, and when it is colored merely for decorative effect.
Getting creative with the underline
By using the CSS border-bottom property it is simple to control the look of a link’s underline. For instance you can make it a different color to the link text, make it thicker that one pixel, or make it dotted.
A dotted line underneath link text provides a compromise for designers who dislike the severity of a solid underline but still want their links to stand out. Dotted underlines are not used on a great many websites, possibly because of the fact that browsers render the dots differently (in Internet Explorer 6 a CSS dotted line looks like a series of dashes). I suspect that this unpredictability has been a turn-off for web designers who want their layout to render consistently between browsers, although that is going to change as IE7 usage grows.
Bold
One of the simplest ways to add emphasis to links is to make them bold. Some designers consider that bolding alone is sufficient to make links stand out from surrounding copy. This is practical on personal sites, where the designer can carefully monitor site updates and make sure that link text is the only text that is ever bolded. For sites where the client or a third party is in charge of making content updates links should still be a different color, or underlined, to avoid potential confusion.
Background color
Changing the background color of links is usually reserved for their hover state (see below), but on some sites links have a background color all the time. Usually the background color is quite striking and the link text is reversed out, but in some cases a more subtle background is opted for.
Hover states
As I mentioned earlier, by default links do not have a hover state associated with them - in other words, the visual appearance of a link doesn’t change when the user moves their mouse over it. The widespread adoption of CSS for styling text in the late 1990s changed that situation, and today most links feature a hover state. A hover might be as simple as the text changing color, or the removal (or addition) of a decorative underline. More adventurous possibilities are changing the background color of a link, or varying the thickness of its underline.
Visited links
Links to previously visited pages are traditionally styled to be distinguishable from unvisited links. By default they are purple, whereas an unvisited links is blue, and this difference provides users with a visual clue as to where they have been before. When it comes to styling visited links the key is to give them reduced visual emphasis. This can be achieved by making them a less eye catching color than unvisited links, removing their underline, or adding a graphical cue such as a tick next to them. Not so long ago there was a trend to style visited links with a strikethrough - I am not a fan of this technique at all, because it obscures the text and worse still, implies that that the link is inactive. Thankfully examples of this misguided approach seem to have dried up.
Links that open a new window
When clicking a link will trigger the launch of a new browser window, it is courteous to provide a cue that this is going to occur. The addition of a small ‘new window’ icons to the right of a link lets users know that a browser window is going to open, without the need for a written explanation.
Conclusion
While I would hardly say that the sky is the limit when it comes visually styling links, there is certainly enough spectrum to get creative with the way we design them. The examples I’ve shown in this article cover all the different techniques I’m familiar with, but if you think I’ve missed one out please post a comment below.
Further reading
Today many websites have done away with the concept of visited links, choosing to style them identically to unvisited links. Lisa Herrod wonders why.
Just because you can style a link any which way you fancy, doesn’t mean that you should. Paul Boag explains ‘best practice’ techniques for writing and styling links.
Love him or loathe him, Jacob Nielsen delivers some solid advise about the usability implications of changing the appearance of links.
译文:
个性链接
几个月前，我写了篇文章，是关于把链接做的像样点。从读者写下的评论来看，对于做出一个个性链接的方法每个人都有不同的看法，所以我认为我们应该对如何将链接做的明显这个问题作一项调查。我不想再这里说导航菜单，标题或者按钮，我想说的只是网页上的链接。我们不能依赖提示来告诉用户哪些链接是可以点击的，因此链接的样式是十分重要的。
浏览器默认状态
让我们想象一下，当超级链接没有添加CSS时会是什么样的。在其他主流浏览器上的链接都是蓝色的下划线，访问过的链接是紫色的，当用户的鼠标滑过链接时没有悬停。既然它没有影响到用户的使用，就让浏览器来决定链接的外观和悬停是被实用者比如Jacob Nielsen所拥护的一种方法。Nielsen并不劝设计者改变链接的颜色，但是他考虑到超级链接可能不可避免的会造成视觉上的混乱，提议大家链接应该有条下划线。
模仿浏览器默认状态
对那些固执于实用原则的人，他们仍然希望他们的设计成为样本，个性链接基本仿真浏览器默认状态是个普遍的想法。想想设备的开发商，那个将链接画上下划线，然后赋予海军蓝的37Signals。因为链接对网络新手来说看上去和浏览器默认状态差不多，但是特制的蓝色和整个网页完美的结合在了一起。
改变链接的颜色
对设计者来说，改变链接颜色，运用独一无二的颜色十分有效的使链接从周围的文字中脱颖而出，，然而当链接和标题是同一种颜色的时候，问题出现了。如果没有下划线，我们很难区分哪些是可以点击的链接，哪些是正文。
创新下划线
运用CSS border-bottom property 来控制链接的下滑线的样式，比如，你可以改变链接的颜色，下划线的像素或者使用点线。
文字下的点线为那些不喜欢实打实下划线的设计者找到了折中点。点线并没有被大多数的网站所用，可能因为浏览器很难识别（在Internet Explorer 6 中点线看上去像破折号）。我怀疑这个可能会被设计者否决，因为他们希望页面的布局和浏览器相协调。
粗体
突出链接最简捷的方法之一是将字体设置成粗体。一些设计者说，仅仅设置成粗体就能使链接变得明显，在个人网站上我们使用过这个方法,在这种网站上，设计者可以控制网站更新，确保链接上的文字已用粗体标出。顾客或第三方负责的网站也应该用不同的颜色或下划线，避免混淆。
背景颜色
改变链接的背景颜色经常是悬停的惯用手法，但是一些网站的链接一直使用同一个背景颜色，通常背景颜色应该是吸引人的，和链接文字的颜色区分开来，但是一些情况下，我们可以选择更合适的背景颜色。
悬停（hover state）
就像我前面所提到的，链接没有和悬停相结合，换句话说，链接的视觉外观不会因为鼠标的移动而改变，在90年代，普遍接受CSS使这一情况得到了改变，今天大多数的链接都有个悬停，悬停应该像改变文本颜色那样简单，或者像删除（增加）下划线那样方便。很多可能性改变了链接的背景颜色，或者使下划线的粗细有很多的选择。
已访问过的链接
以前访问过的链接和没有访问过的链接在形式上是不同的，访问过的链接是紫色的，没有访问过的是蓝色的，这个区别让用户可以很清楚的知道他们前面看过些什么。说到使链接多样化的时候，最重要的一点是让他们减少视觉重点，我们可以减少吸引他们注意力的颜色，删除下划线，或者加上一个箭头之类的，从而有更多的注意力会放在没有访问过的链接上。不久之前，有这么一个趋势，访问过的链接用删除线，我并不喜欢这个做法，因为这样会使文章变得混乱，而且暗示着说这个链接无效。感谢上帝，这个误导用户的做法很快被否决了。
打开新窗口的链接
在链接旁的“新窗口”按钮让用户知道，一个新的窗口会被打开，不需要文字注解。
结论
我不得不说，天空是有限的，可是提到个性链接时，我们设计的空间是无限的，在这篇文章中提到的一些例子覆盖了我所熟悉的所有困难的技术，但是如果你认为我漏掉了一些，请在下面留言。
后记
访问过的链接都到哪儿去了?
如今，很多网站都抛弃了删除访问过的链接的观念，他们像美化没有访问过的链接那样美化这些链接，Lisa Herrod对此很迷茫。
不要成为最冷门的链接
虽然可以美化任何一个你想要美化的链接，但这不是说你应该这么做。Paul Boag用“最佳练习”来解释个性链接。
可视链接的指导方针
“不论讨厌或是喜欢”Jacob Nielsen对改变链接的形式给出了一些中肯的建议