SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 32
  1. #1
    SitePoint Zealot Raphaelle's Avatar
    Join Date
    Jul 2006
    Posts
    125
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    your thoughts on styling external links differently?

    Hello,

    I'm currently working on a new skin for our company's website. We've got a blog, a portfolio section, some static pages - the usual.

    We're using Wordpress and someone suggested we use a plugin that enables to visually differenciate external links from internal ones.


    I'm not sure what I think about this. My argument against the plugin would be that users (particularly our web-savvy audience) know how to use their back button or open in a new tab, plus it's usually understandable from the context of an article whether it's an internal or external link. Why add some visual noise then?

    I must highlight that I'm not talking about styling links that open in a new window (we don't do that at all) - I'm only talking about links that will take you to a different website within the same window.

    What do you guys think?

    If any of you think it's relevant to make a distinction, what do you think it should be? Different colour? An icon?

    Thanks in advance

  2. #2
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    Generally it is not needed but if it is a large article it could be used as a visual aid. However, usually that type of thing is done with the title attribute and possibly icons basically saying they; "Link to an external site".

    The main obstacle will be getting the user used to how you define them after that it may be beneficial in some cases - for repeat visitors.

  3. #3
    SitePoint Zealot Raphaelle's Avatar
    Join Date
    Jul 2006
    Posts
    125
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello xhtmlcoder,

    So basically you don't think it's super useful either. I can't think of any website that does this sort of thing.

    I still think it's just unnecessary visual noise, apart from maybe some specific case such as a very long article with both types of links (internal and external), but it doesn't apply to our case. Besides, we're talking about applying this differenciation to the whole site.

    still not convinced

    cheers

  4. #4
    Follow: @AlexDawsonUK silver trophybronze trophy AlexDawson's Avatar
    Join Date
    Feb 2009
    Location
    England, UK
    Posts
    8,111
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    I think it's uses are limited only because people don't represent external links uniquely by default (therefore it's not a recognisable convention). What I would say is, a few websites I visit identify external links with an icon besides the link text (to the left) and this may present a more ideal solution. If the links are the same color, their easier to recognise and differentiate from styled text on the page, but with icons you can highlight links that have unique attributes (to the target) such as external site, if a popup (god forbid) is required and when you link to unique file-types like PDF or DOC (having their applications icon besides it).

  5. #5
    SitePoint Zealot Raphaelle's Avatar
    Join Date
    Jul 2006
    Posts
    125
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your input Alex. Would you mind sharing a few links to websites that use such an icon? It's interesting that they position it before the link itself.

  6. #6
    Follow: @AlexDawsonUK silver trophybronze trophy AlexDawson's Avatar
    Join Date
    Feb 2009
    Location
    England, UK
    Posts
    8,111
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    This was the tutorial that got my interest in using such icons: http://www.psyked.co.uk/css/auto-matic-link-icons.htm

    PS: All Wikipedia articles make use of them, if you go down to the references section, you'll notice an icon to the right signifying an external resource.

  7. #7
    SitePoint Zealot Raphaelle's Avatar
    Join Date
    Jul 2006
    Posts
    125
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I should have thought of Wikipedia!

    I think these icons are indeed relevant sometimes, like on these examples. But not on any standard website.

    Cheers

  8. #8
    SitePoint Wizard masm50's Avatar
    Join Date
    Oct 2001
    Location
    UK
    Posts
    2,508
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    @AlexDawson - thanks for the link.

    I'd been thinking about adding something similar to one of my sites for a while, that would make the process a whole lot easier.

  9. #9
    SitePoint Evangelist optl's Avatar
    Join Date
    Oct 2004
    Location
    Washington DC
    Posts
    415
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think icons next to external links is used often enough on the net that users are used to it by now and may be useful.

    I would suggest using a css selector that puts a background image next to links beginning with http:

    Something like this would work great:
    Code:
    a[href ^= "http:"] {
    padding-left:25px;
    background:url(yourimage.gif) no-repeat top left;
    }
    In older browsers like IE6 the links won't show this and will just display normally.
    For the phrase "Bethesda home architect", my clients
    websites occupy 6 of the first 8 results
    on the 1st page of Google. My Secret SEO Strategy Revealed

  10. #10
    Follow: @AlexDawsonUK silver trophybronze trophy AlexDawson's Avatar
    Join Date
    Feb 2009
    Location
    England, UK
    Posts
    8,111
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    optl, apart from the fact 99.9% of all website links are to http (making icons redundant), better to target the file type using a[href$='.pdf'].

  11. #11
    SitePoint Zealot Raphaelle's Avatar
    Join Date
    Jul 2006
    Posts
    125
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK, it's interesting that you guys think it's a good idea.

    FYI the Wordpress plugin is called external links

    At first I didn't like it because to me, the default icon they use looks like the "opens in a new window" icon. Wikipedia uses the same icon. Am I wrong about this?

    Btw, I think that using icons for download links is one (very useful) thing, but signifying that one's gonna leave a website is to me, a very different issue.

  12. #12
    SitePoint Evangelist optl's Avatar
    Join Date
    Oct 2004
    Location
    Washington DC
    Posts
    415
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AlexDawson View Post
    optl, apart from the fact 99.9% of all website links are to http (making icons redundant), better to target the file type using a[href$='.pdf'].
    I only use http://.... to link to external websites. To link to files within my website I refer to them using a relative/absolute paths which uses less code and keeps my links shorter and more readable.

    Also I'm not sure what you are talking about with the .pdf selector. He's just talking about external links I thought, didn't read anything about pdfs...
    For the phrase "Bethesda home architect", my clients
    websites occupy 6 of the first 8 results
    on the 1st page of Google. My Secret SEO Strategy Revealed

  13. #13
    SitePoint Wizard bronze trophy bluedreamer's Avatar
    Join Date
    Jul 2005
    Location
    Middle England
    Posts
    3,397
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Interesting question!

    My first question would be to ask what problem you are having by not marking external links differently?

    If there is a problem that needs to be addressed then it can be, otherwise there is no problem in the first place

  14. #14
    SitePoint Zealot Raphaelle's Avatar
    Join Date
    Jul 2006
    Posts
    125
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi bluedreamer,

    You're right to put it this way. To me, within the context of my company website, I think there is no problem with not stying these external links differently.
    It's not like we write loads of posts every day with lots and lots of content and a long list of external references. It's just not the case.

    For Wikipedia I can see how this works down the bottom of each page, for references, but we're far from Wikipedia's model.

    Besides, our audience is web-savvy, so I suppose they know how to use their back button. Plus it should be understandable from context that a link might take you elsewhere.

    As a user, it's never bothered me NOT being told I'm going to leave the site. It would annoy me if the page was opening in a new window, but that's so 5 years ago anyways.
    For the user, isn't it the same to be directed to an external site or to a page within the same site? Either way you're gonna have to press the back button to go back to the original page.

  15. #15
    Follow: @AlexDawsonUK silver trophybronze trophy AlexDawson's Avatar
    Join Date
    Feb 2009
    Location
    England, UK
    Posts
    8,111
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    I would say in the case of external sites it's not so much an issue as you can hover over a link and it's address appears in the status bar. But if you link to a PDF file or file type which isn't native to the browser I would say the importance level of differentiating the links so people know what the resulting behaviour will be (opening a new application) is imperative. While the need for such a function could be debated, I would say it's a usability enhancement.

  16. #16
    SitePoint Evangelist optl's Avatar
    Join Date
    Oct 2004
    Location
    Washington DC
    Posts
    415
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by optl View Post
    I only use http://.... to link to external websites. To link to files within my website I refer to them using a relative/absolute paths which uses less code and keeps my links shorter and more readable.

    Also I'm not sure what you are talking about with the .pdf selector. He's just talking about external links I thought, didn't read anything about pdfs...
    Quote Originally Posted by AlexDawson View Post
    I would say in the case of external sites it's not so much an issue as you can hover over a link and it's address appears in the status bar. But if you link to a PDF file or file type which isn't native to the browser I would say the importance level of differentiating the links so people know what the resulting behaviour will be (opening a new application) is imperative. While the need for such a function could be debated, I would say it's a usability enhancement.
    You never addressed my point about using http:// for links within your site.....
    For the phrase "Bethesda home architect", my clients
    websites occupy 6 of the first 8 results
    on the 1st page of Google. My Secret SEO Strategy Revealed

  17. #17
    SitePoint Wizard bronze trophy bluedreamer's Avatar
    Join Date
    Jul 2005
    Location
    Middle England
    Posts
    3,397
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Raphaelle View Post
    For Wikipedia I can see how this works down the bottom of each page, for references, but we're far from Wikipedia's model.
    You might be far from their model but that approach does clearly define what what for the visitor.

    Quote Originally Posted by Raphaelle View Post
    Besides, our audience is web-savvy, so I suppose they know how to use their back button. Plus it should be understandable from context that a link might take you elsewhere.
    For web savvy people isn't identifying external links teaching people to suck eggs?

    Quote Originally Posted by Raphaelle View Post
    As a user, it's never bothered me NOT being told I'm going to leave the site. It would annoy me if the page was opening in a new window, but that's so 5 years ago anyways.
    Me neither, though external links on the BBC news site sometimes get passed through a "We are not responsible for external content" page - that's just plain annoying! I know it's an external link so why tell me something i already know?

    Quote Originally Posted by Raphaelle View Post
    For the user, isn't it the same to be directed to an external site or to a page within the same site? Either way you're gonna have to press the back button to go back to the original page.
    Absolutely!

    I'm getting the feeling that this plugin has be written just because they could, I can't see any benefit whatsoever!

  18. #18
    SitePoint Zealot Raphaelle's Avatar
    Join Date
    Jul 2006
    Posts
    125
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by bluedreamer View Post
    I'm getting the feeling that this plugin has be written just because they could, I can't see any benefit whatsoever!
    Totally agree with you!

    Might be slightly unrelated but I just came across http://www.html5rocks.com/ in which the "Presentation" navigation item takes you not only to a different website, but it opens in a new window. That pisses me off.

    My conclusion so far is that differenciating external links from internal ones can be a bit useful in some contexts such as the Wikipedia site, but for "regular" websites it probably doesn't add any useful info, it's just unnecessary visual noise to me.

    I do think context is very important here. I used to think "consistency" was the single most important thing in interface design, now I think "context" is just as important.

  19. #19
    Floridiot joebert's Avatar
    Join Date
    Mar 2004
    Location
    Kenneth City, FL
    Posts
    823
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I treat all links the same when I browse anywhere. The only distinction I appreciate is that between links I have and haven't visited already. Distinction for external links doesn't really do anything for me.

    I make extensive use of Operas "Open in new Background Tab" and "Open in new Tab" context menu options.

  20. #20
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,892
    Mentioned
    123 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by AlexDawson View Post
    optl, apart from the fact 99.9% of all website links are to http (making icons redundant), better to target the file type using a[href$='.pdf'].
    Assuming you use relative links within your site, targetting http links will only hit external links - it takes the link destination from the source code, not the parsed actual destination.

    To add my voice - using CSS selectors to add an icon might be worthwhile. I wouldn't bother with different link colours because it's unlikely that more than three people in the whole world would realise why some links were one colour and some were another. Given the number of people who don't twig that about :link and :visited, it's one of those ideas that sounds great in theory, but the actual benefits are minimal and the scope for confusion is much bigger!

  21. #21
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,892
    Mentioned
    123 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by joebert View Post
    I make extensive use of Operas "Open in new Background Tab" and "Open in new Tab" context menu options.
    Same here - and equally, I make extensive use of its "Open" context menu option when some oik of a webmaster has decided that I ought to want to open the links in a new window...

  22. #22
    SitePoint Zealot FaridHadi's Avatar
    Join Date
    Nov 2008
    Posts
    170
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'd say most websites don't need it and adding different colors for different types of links would just be a horrible idea, but using an icon to indicate different kinds of links could be a usability enhancement on a web site/application that actually needs it. (I can't think of one at the moment but I'm sure it could be useful.)

    Raphaelle, in your case I can't see why you would need to bother with something like this.

    Hope my input helps

  23. #23
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,862
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    I do distinguish between internal and external links on my site but in a fairly simple way - they are both the same colour but internal links do not have the underline that the external links have. That makes the links close enough in appearance for those who don't care whether a link is internal or external while providing a visual clue for those who do.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  24. #24
    SitePoint Enthusiast
    Join Date
    Dec 2009
    Posts
    67
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Raphaelle View Post
    Hello xhtmlcoder,

    So basically you don't think it's super useful either. I can't think of any website that does this sort of thing.
    I like it when sites style their external links... and here is a site that does:

    http://htmldog.com/

  25. #25
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    I personally appreciate seeing with a small icon that a link goes off-site. I'm much more likely to right-click and open in a new tab when it's external, and navigate normally on internal links.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •