Links are broken. These three alternatives have improved our readers’ reading experience.
Sebastian Kersten

A simple study of how we might use links

An experiment in non-contextual linking

I loved these ideas and the concepts Sebastian is working with at De Correspondent. It inspired me to create a little experiment with a simpler non-contextual link gathering method. I totally agree that links can be very distracting mid-text. But is there a simple way around this without adding too much more UI?

I had a very, very simple idea. Probably too simple, it’s almost embarrassing. I almost didn’t put this out there, but it was fun to make and design (there are more lines of CSS than anything).

You can see the thing in action at

The idea is to just scrape a body of text for the links, and add them to a module at the end (or somewhere) to collect them all.

I just wrote a few lines of JS to look at .main-text and find all the links. It stores them in an array, and then pops them into the .links div below. You can see the blob of the JS here.

Also, did you notice that all the links in the prototype have very descriptive text? It makes for more pleasing footnotes when they’re all gathered, instead of a bunch of “here” and “click here.” It’s a good habit, adding more descriptive text to links improves accessibility.

The end link box

The basic idea is: just treat links as footnotes and collect them at the “end” when someone may be ready to follow them. There are all kinds of add-ons and enhancements to this idea, but that’s basically it. Let the links stand in the text, but scrape them and present them again after the main text.

It’s kind of neat to see how all the links hang together when they’re gathered out of context and just listed out.

Check out the experiment and GitHub repo here:

Like what you read? Give Mike Swartz a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.