{"id":185,"date":"2011-06-12T20:06:02","date_gmt":"2011-06-12T19:06:02","guid":{"rendered":"https:\/\/rwec.co.uk\/blog\/?p=185"},"modified":"2019-04-09T22:44:04","modified_gmt":"2019-04-09T21:44:04","slug":"top-10-bad-web-links","status":"publish","type":"post","link":"https:\/\/rwec.co.uk\/blog\/2011\/06\/top-10-bad-web-links\/","title":{"rendered":"Top 10 Things Not To Do with Links"},"content":{"rendered":"\n<p>&#8220;Hyperlinks&#8221; are probably the single most important thing on the World Wide Web. They are, after all, what the &#8220;web&#8221; is woven from; they are what makes it something more than the document retrieval systems that came before.<\/p>\n\n\n\n<p>And yet, some people seem to do their utmost to make all the hyperlinks in their documents entirely useless. Here are my Top 10 Things Not To Do with Links&#8230;<br \/><\/p>\n\n\n\n<!--more-->\n\n\n\n<div id=\"bad_link_demo\">\n<ol>\n<li>Don&#8217;t have any. Refer to other websites by name, mention other blog posts, but leave your article entirely unlinked to the outside world, as though you&#8217;ve scanned it in from a typewriter.<\/li>\n<li>Don&#8217;t include any links or footnote markers in the main text, but at the end of the page have a long &#8220;useful links&#8221; section, sorted alphabetically by URL.<\/li>\n<li>Only ever link to homepages of other sites, never the article you&#8217;re talking about. (( Back in the 90s, this was widely approved behaviour &#8211; people thought of the web as a collection of distinct websites, each with its own front door, and &#8220;deep linking&#8221; was considered a menace. They were wrong. )) It&#8217;s also important not to mention the exact title of the article, or your readers would be able to find it too easily.<\/li>\n<li class=\"invisible_links\">Make your links <a href=\"http:\/\/www.thisamericanlife.org\/radio-archives\/episode\/178\/Superpowers\">invisible<\/a> until hovered over, so that your article becomes a <a href=\"http:\/\/www.kingdomofloathing.com\/\">point-and-click adventure<\/a> where readers have to guess where links <em>might<\/em> be.<\/li>\n<li class=\"fading_links\">When hovered over, make your links <a href=\"http:\/\/www.flickr.com\/photos\/debbcollins\/5021251012\/\">fade into the background<\/a>, to test your readers memory skills.<\/li>\n<li>Automatically link random <a href=\"https:\/\/rwec.co.uk\/blog\/tag\/language\">words<\/a> in the middle of unrelated sentences <a href=\"https:\/\/rwec.co.uk\/q\/wherefore\">because<\/a> it&#8217;s good for <abbr title=\"Search Engine Optimisation\">SEO<\/abbr>. Make these look identical to <a href=\"http:\/\/www.positioniseverything.net\/explorer.html\">genuinely useful links<\/a> so that readers learn to ignore all inline links on your site (see point 1).<\/li>\n<li>Use advertising software that automatically <a class=\"irritating_advert\" href=\"http:\/\/www.youtube.com\/watch?v=5pidokakU4I\">picks<span class=\"dodgy_popup_content\"><img decoding=\"async\" src=\"https:\/\/rwec.co.uk\/media\/blog\/link-thumbs\/picks.png\" alt=\"\"\/><\/span><\/a> keywords out of your text to <a class=\"irritating_advert\" href=\"http:\/\/www.travisperkins.co.uk\/\">turn<span class=\"dodgy_popup_content\"><img decoding=\"async\" src=\"https:\/\/rwec.co.uk\/media\/blog\/link-thumbs\/turn.jpeg\" alt=\"\"\/><\/span><\/a> into fake links which pop up an advert on top of the whole page when hovered over.<\/li>\n<li class=\"link_thumbs\">Install code that pops up a &#8220;preview&#8221; of any link the reader hovers over. This should preferably be easy to activate <span class=\"dodgy_popup_trigger\">by mistake, <a href=\"http:\/\/tlipsum.appspot.com\/\">incredibly slow to load<\/a><span class=\"dodgy_popup_loading\"><img decoding=\"async\" title=\"P L E A S E    W A I T\" src=\"https:\/\/rwec.co.uk\/media\/blog\/link-thumbs\/loading.gif\" alt=\"P L E A S E    W A I T\"\/><\/span><span class=\"dodgy_popup_content\"><img decoding=\"async\" src=\"https:\/\/rwec.co.uk\/media\/blog\/link-thumbs\/essay.png\" alt=\"Sorry, what's alt text for? I'm told I have to have some!\"\/><\/span>, and too<\/span> small to be in any way useful.<\/li>\n<li>In a sentence which refers to a particular article, put the link not around the article reference, but around other parts of the sentence, crossing between <a href=\"http:\/\/specgram.com\/\">clauses so that the link<\/a> text makes no grammatical sense.<\/li>\n<li><a class=\"external text\" href=\"http:\/\/en.wikipedia.org\/w\/wiki.phtml?title=Hyperlink&amp;oldid=8089525\" rel=\"nofollow\">Link<\/a> <a class=\"mw-redirect\" title=\"Every\" href=\"http:\/\/en.wikipedia.org\/\/wiki\/Every\">every<\/a> <a title=\"Word\" href=\"http:\/\/en.wikipedia.org\/wiki\/Word\">word<\/a> <a class=\"mw-redirect\" title=\"In\" href=\"http:\/\/en.wikipedia.org\/wiki\/In\">in<\/a> <a class=\"mw-redirect\" title=\"The\" href=\"http:\/\/en.wikipedia.org\/wiki\/The\">the<\/a> <a title=\"Text\" href=\"http:\/\/en.wikipedia.org\/wiki\/Text\">text<\/a> <a class=\"mw-redirect\" title=\"To\" href=\"http:\/\/en.wikipedia.org\/wiki\/To\">to<\/a> <a title=\"A\" href=\"http:\/\/en.wikipedia.org\/wiki\/A\">a<\/a> <a title=\"Different\" href=\"http:\/\/en.wikipedia.org\/wiki\/Different\">different<\/a> <a title=\"Page\" href=\"http:\/\/en.wikipedia.org\/wiki\/Page\">page<\/a>, <a class=\"mw-redirect\" title=\"Making\" href=\"http:\/\/en.wikipedia.org\/wiki\/Making\">making<\/a> <a title=\"Sentences\" href=\"http:\/\/en.wikipedia.org\/wiki\/Sentences\">sentences<\/a> <a class=\"mw-redirect\" title=\"Unreadable\" href=\"http:\/\/en.wikipedia.org\/wiki\/Unreadable\">unreadable<\/a>. (( Thank you Wikipedia for both the inspiration and implementation for this example. ))<\/li>\n<\/ol>\n<\/div>\n\n\n\n<script type=\"text\/javascript\">\njQuery(function(){\n\tjQuery('#bad_link_demo a.irritating_advert')\n\t\t.bind('mouseenter', function() {\n\t\t\tjQuery(this).find('.dodgy_popup_content').show();\n\t\t} )\n\t\t.bind('mouseleave', function() {\n\tjQuery(this).find('.dodgy_popup_content').hide();\n\t\t} );\n\tvar dodgy_timeout;\n\tjQuery('#bad_link_demo .dodgy_popup_trigger')\n\t\t.bind('mouseenter', function() {\n\tjQuery(this).find('.dodgy_popup_loading').show();\n\t\t\tvar $this = jQuery(this);\n\t\t\tdodgy_timeout = setTimeout( function()\n\t\t\t{\n\t$this.find('.dodgy_popup_loading').hide();\n\t$this.find('.dodgy_popup_content').show();\n\t\t\t}, Math.floor(Math.random()*25000) + 5000 );\n\t\t} )\n\t\t.bind('mouseleave', function() {\n\t\t\tclearTimeout(dodgy_timeout);\n\t\tjQuery(this).find('.dodgy_popup_loading').hide();\n\t\tjQuery(this).find('.dodgy_popup_content').hide();\n\t\t} );\njQuery('.dodgy_popup_loading').hide();\njQuery('.dodgy_popup_content').hide();\n});<\/script>\n\n\n\n<style type=\"text\/css\">\t \t \n#bad_link_demo\t \t \n{\t \t \nbackground-color: white;\t \t \ncolor: black;\t \t \n}\t \t \n#bad_link_demo a, #bad_link_demo a:hover\t \t \n{\t \t \ncolor: blue;\t \t \ntext-decoration: underline;\t \t \n}\t \t \n#bad_link_demo .invisible_links a\t \t \n{\t \t \ncolor: black;\t \t \ntext-decoration: none;\t \t \n}\t \t \n#bad_link_demo .invisible_links a:hover\t \t \n{\t \t \ncolor: salmon;\t \t \ntext-decoration: underline;\t \t \n}\t \t \n#bad_link_demo .fading_links a:hover\t \t \n{\t \t \ncolor: #EEEEEE;\t \t \ntext-decoration: none;\t \t \n}\t \t \n#bad_link_demo a.irritating_advert,\t \t \n#bad_link_demo a.irritating_advert:hover\t \t \n{\t \t \ncolor: red;\t \t \nborder-bottom: 1px double red;\t \t \n}\t \t \n#bad_link_demo .dodgy_popup_loading,\t \t \n#bad_link_demo .dodgy_popup_content\t \t \n{\t \t \ndisplay: none;\t \t \nborder: 2px solid black;\t \t \ncolor: black;\t \t \nbackground-color: white;\t \t \npadding: 5px;\t \t \nposition: absolute;\t \t \n}\t \t \n<\/style>\n","protected":false},"excerpt":{"rendered":"<p>&#8220;Hyperlinks&#8221; are probably the single most important thing on the World Wide Web. They are, affter all, what the &#8220;web&#8221; is woven from; they are what makes it something more than the document retrieval systems that came before.<\/p>\n<p>And yet, some people seem to do their utmost to make all the hyperlinks in their documents entirely useless. Here are my Top 10 Things Not To Do with Links&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[17,61,136,137,135,138,13,139,134,57],"class_list":["post-185","post","type-post","status-publish","format-standard","hentry","category-uncategorized","tag-coding","tag-html","tag-hyperlinks","tag-link","tag-links","tag-pet-hates","tag-rant","tag-satire","tag-top-10","tag-web","post-preview"],"_links":{"self":[{"href":"https:\/\/rwec.co.uk\/blog\/wp-json\/wp\/v2\/posts\/185","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rwec.co.uk\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rwec.co.uk\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rwec.co.uk\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rwec.co.uk\/blog\/wp-json\/wp\/v2\/comments?post=185"}],"version-history":[{"count":16,"href":"https:\/\/rwec.co.uk\/blog\/wp-json\/wp\/v2\/posts\/185\/revisions"}],"predecessor-version":[{"id":360,"href":"https:\/\/rwec.co.uk\/blog\/wp-json\/wp\/v2\/posts\/185\/revisions\/360"}],"wp:attachment":[{"href":"https:\/\/rwec.co.uk\/blog\/wp-json\/wp\/v2\/media?parent=185"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rwec.co.uk\/blog\/wp-json\/wp\/v2\/categories?post=185"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rwec.co.uk\/blog\/wp-json\/wp\/v2\/tags?post=185"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}