Do you make external links clear?
Rules to Better Websites - Navigation|9eeb841b-c861-44ba-9670-46a0e676c9e0
v8.0
Posted at
4/08/2018 12:23 AM by
Tiago Araujo
Rule Intro
When creating links, you should follow a few basic rules:
Page Content
- If your link is an internal link, then it should navigate within the same window. If the link is external, it should open in a new tab and be visually clear to the user that it will lead them away from the current site, that way it is not a surprise.
- If a link is to an external site, a
visual indication should be provided to the user like this:
This is a link to another site.
Search Engines (http://www.google.com is by far the best but try other search engines as well)
- Figure: Bad example - Without visual indication
Search Engines (http://www.google.com is by far the best but try other search engines as well
- Figure: Good example - With visual indication
- External link
external indicators 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: Good example - Icon is added by CSS via a simple declaration
We have a program called
SSW Code Auditor to check for this rule.
{D178549E-BDEF-4636-8DC7-B3514B360BD0}
Do you feel this rule needs an update?