Site navigation is a critical component of any website, so it makes sense that you should put a lot of thought into planning and styling your site’s links. Let’s explore a few of the concepts that you should keep in mind as you style links on your site.
This kind of goes without saying…right? Yet, one of the most common errors in styling links is that the links are changed so drastically that no one can tell they’re links! True, very few sites have a design aesthetic that works with underlined blue text, but the goal of styling links isn’t getting as far away from the default styling as possible, it’s to make links obvious!
Consider this text: Which part of this text is the link? Is it obvious when compared with other text that is emphasized within the same body copy? Link styling should be unique and it should stand out from the text around it. Like this, for example.
Many designers’ initial impulse is to remove the default underline for links. While in certain cases this may look better, it’s not always the right choice. Underlining linked text is a long-held convention, and users have been conditioned to see underlined text as a link. For example, which of these sections of text is a link: This one or this one? Before removing underlines, make sure you have sound reason for doing so. Replacing underlines with borders can be effective, but keep in mind that borders are part of the element’s box model, and can often effect layout in unintended ways.
Conversely, you should never underline text that is not a link, and especially not style text as blue and underlined unless it’s a link. Users will expect it to be a link, and can become confused, or assume that something isn’t working. When it turns out to be.
How frustrating am I? I look like a link, but I’m not!!
By default, browsers use the CSS outline property to show when focus has been established on a link. For multiple reasons many designers and popular CSS resets remove this default :focus styling. There’s nothing wrong with that, as long as there is a compelling reason for removing the styling based on the site’s design. However, if it’s removed it should be restored in a way that fits with the site’s design. Removing the focus link styling makes the site less accessible to those that are browsing your page without a mouse. Certain user agents and assistive devices allow users to tab through a page’s links (in fact, almost all browsers allow this too, give it a try). If focus styling is removed, there is no way for these users to tell which link they’re focusing on.
Keep in mind that many visitors to your site experience some form of color blindness. Not only should you think about how colors contrast when you plan your links, you should also think about ways to visually identify links without using color (yet another case for keeping underlines). There are some great online resources that can test your designs’ effectiveness for people that are color blind and allow you to compare the effectiveness of certain color choices.
It’s trite but true; keep link styles simple. Links should be consistent throughout your site, and styling should reflect the purpose of the link. Styling a link’s states (hover, active, visited, and focus) can help users identify and utilize links, but they can also distract from a link’s effectiveness if they’re overdone.
While you can certainly modify any CSS property you wish, most effective link styles work with a narrow set of properties. Here are the most common properties used for link styles:
Not a huge list, but certainly enough variety to create clear and concise styling for your links.