Do you visually indicate when a link is external?

Updated by Brady Stroud [SSW] 1 year ago. See history

123
No component provided for introEmbed
  • If your link is an internal link, then it should keep the default behaviour, navigating within the same tab
  • If the link is external, it should:
    • Be visually clear to the user that it will lead them away from the current site, that way it is not a surprise.

Google is by far the best but try other search engines as well.

❌ Figure: Bad example - Without visual indication

Google is by far the best but try other search engines as well.

✅ Figure: Good example - With visual indication

How to add the external link indicator?

It should be inserted by CSS as following:

a[href*="//"]:not([href*="mysite.com"]):after {
content: url(https://www.ssw.com.au/ssw/images/external.gif);
padding-left: 4px;
}

Figure: Icon can be added via CSS using a simple declaration

Categories

Rules to Better Websites - Navigation

Acknowledgements

Adam Cogan
Tiago Araujo
Related rules

Need help?

SSW Consulting has over 30 years of experience developing awesome software solutions.

We open source.Loving SSW Rules? Star us on GitHub. Star