Writing Links Like It’s 1999

20 August, 2020
generic image

Links. The internet is built on them.

Gone are the days of the boring blue hyperlink being the only kind you saw online. Now links are styled in a huge variety of ways and frankly, they are a lot sexier. They can look like buttons, come in gorgeous colours and use stunning webfonts. Links have come a long way.

In this article we’ll use the term hyperlink and link to mean the same thing. This is an HTML anchor element, with an href attribute set to a URL.

Let’s time travel back to the mid 90’s to check out the links of long ago. Why not throw on a baggy jumper, chuck on NME’s 100 best songs of the 90’s playlist on Spotify or stick on an episode of Seinfeld or Friends to set the scene? Your Internet Service Provider (ISP) is AOL, your browser is Netscape Navigator and your search engine of choice is Ask Jeeves or Alta Vista. You have a GeoCities account.The SpaceJam movie website is still the best website you’ve ever seen.

This is because most websites have a plain background, some text and a list of blue hyperlinks on them. Menus are often more blue links on the side, or sometimes at the top of the page. 

The more creative sites may have thrown in a few additional colours, and the really out there sites have tiled backgrounds made of images rendering the text on top unreadable.

This is because Cascading Style Sheets (CSS) was so new most people either didn’t use it, or didn’t know how to - and not every browser supported all CSS. Styling was all done “inline” and most people just used the defaults.

Going Wayback

The Wayback machine is a site that archives old sites providing a form of digital archaeology for the web. This archived 1996 Yahoo search engine landing page  is a classic example of the list of hyperlinks.

Let’s look closer at that list of hyperlinks. (It’s the 90’s, so we still call them hyperlinks).

  • They are often displayed in a bullet point list as seen in the Yahoo example.
  • The text is that recognisable blue and it’s underlined.
  • You know if you click on one of those links it will change to purple to show you’ve navigated to that page.
  • They are the quintessential hyperlink.

The reason we don’t underline text on websites any more is because so many people still expect underlined text to be a link they will click it. There are much better ways to emphasise a point on screen without confusing people.

What’s interesting in the Yahoo example is that there is so little styling on the page it’s practically unstyled. Visually,  we know they are a link and where the link will take us is really clear because of the text. City maps, sports scores. These are 100% descriptive and unambiguous. This archived version of The Ultimate Band List website from 1996 is another wonderful example. Marilyn Manson, Garbage and Radiohead are all mentioned on the front page, (heck yes this is the mid-nineties).

Here the hyperlinks are few and far between. There are three clear main links at the top of the page, below that super-complicated-to-use image-map menu.

In the three main articles on the home page there is only one link in each. Two of them want to direct the user to the Club & Concerts section. The third one to Radiohead’s UBL card. These links are once again 100% clear and understandable. You have a really good idea of what will happen when you click on the link and where you’ll end up. 

The big downside to hyperlinks of the past is that they didn’t make use of the hover state. This is because the hover state is a pseudo-class of CSS and wasn’t fully embraced until browser support for CSS improved and people got used to using it. Hover states went on to become so dependable that if something changed on hover you just knew you could click on it and would. If it didn’t hover was it even clickable? (Answer: yes, it just wasn’t obvious).

Touch Screen Arrives 

The growth of touchscreen devices has meant that hover, whilst still considered vital for “click” devices, can no longer be used with wild abandon. If you hover your finger over a touch device you just look like you can’t make your mind up on which pizza topping to order. 

The device is not going to know you are poised, ready to tap the screen, so hover doesn’t come into play. The site won’t respond until you tap - which is the equivalent of a click. Some devices may sneak in a little hover just before they handle the click itself, but this is very much device dependent. 

What this means is we can no longer rely on information appearing “on hover”, as touchscreen users will not be able to access this information. Tooltips and menus should work with tap or click and hover should be used only as an additional indicator of interactivity.

Back to the Future

We’ve travelled through time back to the present day, but if you want to leave your nineties playlist on I won’t blame you.

Underlined text takes more effort to read and this can make it harder for dyslexic people to use your links. Consider other approaches when styling to make your links even easier for everyone to read.

So what has our little dive into internet history told us about links that is relevant for today? Basically how clear are your links? If your links aren’t as understandable as hyperlinks were 20+ years ago then it’s time to get a little bit retro. Ever seen a “click here” link, or a “download” link? What about “sign up” or “read more”? With these you are forced to read the content around the link to understand what the link is for, to know what will happen when you click it. 

If you’ve focused on your marketing you know that users don’t take long to decide if they are going to stay or go when they get to your page. So why are we making people put extra effort into understanding the links?

Skimming the content and clicking on a “click here” link could easily lead to the user going to somewhere unexpected and boom, there goes your bounce rate. If they could clearly see what they were going to get they would be able to only click the link that was right for them. This slide on the homepage of the BBC Good Food site has some great examples of good links:

  • Sign up for our health newsletter 
  • Easy healthy recipe ideas 
  • More health and nutrition info 

These are great because they are lovely and clear. If only part of these lines were links they wouldn’t be anywhere near as good.

The 90s Test

Let’s take a look at some of the links I’ve used already in this article. If I put them in a bulleted list do they pass the nineties acid test? (I didn’t mean that kind of acid!):

If this list reads well, is concise and is understandable then I passed the test.

This test isn’t just for users, it’s also for assistive technologies such as screen readers and for search engines looking to rank our site.

Want to review the links on your own page? Phil Gorman has written a super handy little bit of Javascript to extract all links from a web page using the browser console. All you need to do is copy and paste his code into dev tools and it will spit out a page with a list of the link text and the URLs they point to. Thanks Phil!

If you are struggling to get the link text to make sense, you may need to re-write your paragraph. Or, consider making the heading the link. This is used a lot with links to news stories or on ecommerce sites, where the product name in the listing is the link. Why not use this approach for your content as well?

What About CTA?

Call-to-action (CTA) links are those extra important ones that you use to encourage a user to do something. This could be a subscribe to your newsletter, getting in touch with you, or starting a free trial. These are the links that usually have the fanciest styling. They may even be styled to look more like a button than a text link.

For these links, it’s really important to make it clear what you want the user to do and encourage them to do it. 

“Start your free trial now” is a great example. It’s 100% clear what you want the user to do. It uses an action verb “start” and finishes up with a little push with the “now”.

This link uses 4 words, which is a good number to consider for a CTA link. Anything too long requires extra effort from the user to read, and we want to remove any friction from those all important calls to get those conversions!

Top Tips 

  • Don’t use actual full URLs as links. These are super hard for humans to read, we’re only going to click in it, why not use the site title as the link instead? 
  •  Try to avoid punctuation in the link, position that full stop outside the link for a more professional approach. 
  •  If you’re using abbreviations next to the full word include them in your link e.g. Cascading Style Sheets (CSS).

There we have it. So next time you’re adding some links, hum your favourite Brit Pop and improve the usability of your site.

Written by Becky

As our longest-serving Project Manager, Becky continues to put her vast experience to use for Evoluted’s clients. Having worked within the digital industry for more than 18 years, Becky’s history includes time with The University of Derby and a technical publications firm. Across the roles she’s worked, she’s developed impressive knowledge surrounding accessibility, programming and design.

Up next…
Flexible Buttons in Figma
12 August, 2020

0 Comments

Leave a comment

Replying to: - Cancel