Hyperlinks are a key feature – perhaps the key feature – of the Web. They allow separate pages, from separate authors, to reference each other; background information, examples, memes, and more are all just a click away. Before search engines were a thing, hyperlinks were the only way anybody got around. In many ways, they’re still the most enjoyable way to get around, a meandering excursion down a rabbit hole of author-selected pages rather than a direct teleport to whatever an ad company decided deserved a top spot in the search results.

But whenever I read blog posts or news articles or anything that I’m not merely skimming for an answer, I find all the hyperlinks incredibly distracting. Each time I encounter a link, I instinctively wonder what might lie behind that mysterious portal. I often find my mouse hovering over the link so that my browser will show me where it leads; if it looks interesting, I ctrl-click to open the linked page in a new tab. (Thank goodness for ctrl-click!) This process doesn’t take long, but it shifts my brain away from what I was reading.

For a while, I thought this distraction could be eliminated by using more subtle link styling. By default, browsers typically render links as blue, underlined text; to me, this default style stands out even more than text that was intentionally emphasized via bold or italics. Many sites modify link styling to be less intense, perhaps removing the underline or the color, but the links stick out nonetheless. On this site, I’ve gone to the extreme, adding only a thin, dotted underline to links, yet they still grab my attention as I read.

I’ve come to the conclusion that it’s impossible to design links that aren’t distracting. They need to stand out from the content around them so that people know they’re clickable. “Standing out” and “distracting” are two sides of the same coin.

So, as someone who writes stuff on the Web, how can I provide links to background information, further reading, sources, and the like without derailing readers in the middle of a blog post? How can I create a smooth reading experience without eliminating the ability to wander the Web via hyperlinks?

Eventually it dawned on me that there’s a simple solution: save all the links for the end. People won’t see (and be distracted by) the links until they finish reading the article/post/whatever.

This solution has some extra benefits as well. I can provide more context about the links than might be possible inline. I can also list links that are relevant to the content but aren’t connected to any specific piece of it. And I can avoid thinking about what to link until after I’ve finished writing the main content. (More practiced writers probably already add links after the fact, but I often find myself getting bogged down adding them along the way.)

As always, there are some downsides. In my mind, the biggest is that it won’t be as clear what inspired each link. Context can be added with the links at the end, but sometimes the best context is the text surrounding an inline link.

Overall, I think the pros outweigh the cons. I’m going to try it out on this post, and perhaps on more of this site’s content. Let me know what you think.

Notes & links

  • This problem isn’t entirely unique to the Web. Footnotes in books are distracting, too. That little floating number makes me wonder what’s being left unsaid. It’s a momentary distraction from what actually is being said.
  • My own minimal link styling was inspired by the little red circles that Matthew Butterick uses for external links in Practical Typography. In his words, “The red circle is meant to be noticeable while you’re reading the sentence that contains the link. Otherwise it disappears, so as not to distract.” I like his technique but have found that I’d prefer not to notice the link even when I’m reading the sentence that contains it.
  • There certainly are many places on the web where it makes sense for links to stand out, places like search results and blog indexes where you’re scanning for something, not reading straight through.
  • The Advent of Computing podcast has several interesting episodes about the history and significance of hypertext (text with hyperlinks).