Do you visually indicate when a link is external?

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

123
<introEmbed body={<> When creating links, you should follow a few basic rules: </>} />
  • 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*=&quot;//&quot;]&#58;not([href*=&quot;mysite.com&quot;]):after {
content&#58; 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.