1

On the face of it, the link, that very straight forward <a

href=”domain.com”>Link</a>

Looks incredible simple to get right but there are some experienced web teams

that make very basic mistakes.

2

Episode 27: So you think you know everything about the simple hyperlink?

3

Overview

✓ The link is what glues the web together.

✓ Imagine a web without links for a second - not a pleasant place.

✓ Without links the web would be a very different world.

✓ Links are so easy to implement that they are often overlooked by designers and site owners.

✓ Anyone, even without web experience can use the hyperlink with under 15 minutes of training. However it’s not as easy as it looks!

View Full video at www.webpayload.com

4

Make links look clickable

✓ Links need to stand out and say “Hey I’m a link click me”

✓ This is a big issue with accessibility as we will see.

5

Make links look clickable

✓ A good to to see if your links are clickable is to take the colour out and blur the design and see if they then stand out.

6

So... Underline links within content

✓ And never underline content that is not a link

✓ It will look clickable, although isn’t and will disrupt the confidence of the site with your users.

View Full video at www.webpayload.com

7

Use border-bottom instead of text-decoration

✓ Extra tip if you leave out the colour of the border then it will inherit from the colour of the text - making updating easier

✓ So: a{ color:#f00; border-bottom:1px solid}

✓ Sometimes i like to make the colour different, lighter grey.

✓ The main thing is though that an underline is there.

8

Increase the length of links

✓ Good description what they are clicking on - better for SEO

✓ Easier to click. Imagine tapping the top “here” on a mobile device.

✓ 7-12 words are optimal.

9

Be consistent

✓ Don’t use different words and phrases for the same links.

View Full video at www.webpayload.com

10

Be consistent

✓ Think carefully about your links

✓ If a visitor clicks on a link titled Dogs Grooming they are very likely to click the back button of they come across a page that doesn’t talk about dog grooming or similar content.

✓ Your links and page titles should be identical or match very closely.

✓ The first thing a visitor looks for will be the page title - to confirm they are at the right destination. If not they are out of there and will hit the back button.

✓ Too many experiences like this on your site and they will be off. Even 1 mistake like this by you can cause a higher bounce exit for that page.

✓ Be consistent.

11

Don’t put links beside each other

✓ Hard to tell that they are different links. Harder on mobile. (Click areas)

✓ Solution - to list in bullet points or put more standard text around each link.

12

So navigation links need to be underlined too?

✓ No they don’t as it looks like navigation with the healthy amount of spacing around the navigation areas.

✓ It looks like navigation, they look like links - very different from embedded links within content.

13

Resources

http://www.uis.edu/webservices/wp-content/uploads/sites/8/2013/02/Designing_for_Scent.pdf

http://sixrevisions.com/usability/hyperlink-design/

View Full video at www.webpayload.com