Links

A link is used for navigating to a new page or to navigate to a specific section within the current page.


DO'S & DON'TS

  • Write descriptive links that can stand by themselves.
  • Give feedback on hover.
  • Don’t write click here, since you can’t figure out where the link takes you just by reading the link.

It's particularly important to give links descriptive names to make it clear where the link will go to, like this link to SVT Play. It is also important that links are easy to understand out of context.

Hovering a link should give the user visual feedback. This could be done by adding an underline. If it’s already underlined, change the color to lighter/darker.

Inline text link

Example

When linking in a longer text, use colored links that are underlined. Hovering the link gives visual feedback to the user. Links shall always describe what they link to.

List links

Used when listing several links, for example when listing programs in alphabetical order.

Example

A

External links

When linking to other services, give the user feedback that they will leave the site by using the external link icon (). If the URL is explicitly written, the icon is not needed.

Example

Skatteverket(Öppnar annan webbplats)

www.skatteverket.se(Öppnar annan webbplats)

Accessibility

External links shall have a visually hidden text that says “Öppnar annan webbplats” (open other web site), to give feedback to users with screen readers that the link is external. Inspect the code for the link above to see an example.

Mailto: links / E-mail adresses

Write the e-mail adress as mailto: link. Always write to whom the adress belongs to.

Example

Leif GW Persson leif@persson.gw(Mail to Leif GW Persson)

Other links

Links are used widely and in many different surrounding contexts. Therefore they often need to be styled differently to look nice in it’s context.

Example 1

A bold link, used when you need more oompfh

Example 2

Discreet link, used in link blocks combined with other texts

Open link in new window?

Both internal and external links should open in the same browser tab. A good case for opening links in a new window is when the user is working on something and haven’t saved. We want to avoid “Did I just lose everything I was doing?”. Use the icon () to indicate that the link will open in a new window.

Example

Skatteverket(Öppnas i nytt fönster)

In cases where a user might lose data if they leave the site, consider using a “You haven’t saved your edits, sure you want to leave?” dialog.

States

Visited links usually don’t have their own style. If the service has a lot of content and it’s useful for users to know what pages they previously visited, consider styling visited links differently (svt.se/tittarservice for example).

Style active state on links so that the user get feedback when pressing a link and the page is loading.

Read more

When to use target=”_blank”(Öppnar annan webbplats) at CSS-TRICKS (2014)

Guidelines for Visualizing Links(Öppnar annan webbplats) at Nielsen Norman Group (2004)

The Definitive Guide To Styling Web Links(Öppnar annan webbplats) at Smashing Magazine (2010)