Looking for suggestions on how to style internal and external links.
External links will open a new page (or tab); and there are two types of internal links: a sub-menu type link; and one that opens a popup pane.
I've road-tested a couple of ideas and the users have found both a bit confusing: underlining all links, and giving different backgrounds to each type; and underlining just the external links and giving both internals the same background.
Also tried to delve into Wikipedia to find the origin of that little diagonal-arrow-thingy used on external links.
Are there any well-established conventions? Things you know work with viewers of varying savviness?
I'm not sure if there is a styling convention for links, but for what it's worth this is what I normally do for links within text unless there is a specific need to do otherwise.
All other page text is black by default.
All links' text lables are a darkish blue by default with no underlining.
On hover, the link text colour is changed to a darkish red with underlining.
Visited links are set to their default style.
You could follow the social media effort. Facebook for example has a page all external requests are funneled through telling the user they are about to go to an external site.
I'm always hesitant to change from blue and underlined, perhaps with the colours tweaked.
Normally attribute selectors are used for external links, either with a rel="external" in the link or something like [href^=http://] if you use http://something.com for all external links. However, if you then use pseudo-content classes to generate an image, that won't work in IE 7, so a background image would probably be best.
Great wit and madness are near allied, and fine a line their bounds divide.
Take a look at this page: http://www.psyked.co.uk/css/auto-matic-link-icons.htm
Originally Posted by ctoz
In short, it's done with this simple bit of CSS:
It'll save you a lot of trouble adding all kinds of link styles (there are also variables for .zip, .pdf, etc.) and it's very clear to your site's visitors.
background: url(img/url.png) center right no-repeat;
Thanks to all: plenty to work with.
"(img/url.png)" isn't among the Silk collection which psycked links to...
Last edited by ctoz; 07-19-2010 at 10:40 PM.
Silk collection? You mean this? It's an icon I made myself, I have a design portfolio and will not use other people's designs if I can avoid it.
Originally Posted by ctoz
No, the icon i was referring to I've found here, see attached.
It could look untidy if you have a lot of these in a paragraph of text, though.
Users Browsing this Thread
There are currently 1 users browsing this thread. (0 members and 1 guests)