Crafting link underlines on Medium

Marcin Wichary, on Medium:

Unfortunately, for all the advances in web typography we’ve seen during the years — better CSS properties, more support for internationalization, custom web fonts — underlines remained mostly as they were, with very little customization available to web designers.

Marcin goes on to show exactly how they did the best they could to clean up something as simple as how a link is styled on Medium. Really great work.

I think this is as good an example as any to show how incredibly hard some of us work to make our products great. I do not think anyone would argue that the Medium team sweats the details. All good product companies do. We try to also.

One example I can remember while working on an update to the Barley editor was the workflow for creating and updating links. Creating links in blog posts and pages is an action we know our customers are going to use a lot, so we wanted to nail down the process as tightly as possible.

We made hundreds of small adjustments and we still feel we have more to improve. But here is what we came up with. When text is highlighted onscreen and the user chooses to add a link (either by clicking the link icon or using the keyboard shortcut), the cursor is automatically focused on the text input for the link. This makes it one smooth step to add a link. So, to add a link… highlight the text, CMD+K, CMD+V, Enter.

Slick. We’ve tried to bring this level of smoothness to every interaction within the editor, in our WordPress plugin, in the Drupal module, in our CMS, and now in Unmark. The quickest path is usually the best one.

Editing existing links in a document is equally as importing. Clicking on a link while in edit mode shows you a completely different interface — either edit the link, or go to the link — than it would normally. This also gives the user the quickest path to being done.

I love the way the Barley editor is shaping up. But it is the smallest of adjustments that we all make to seemingly the simplest of things that make all the difference between a good product and a great one.

Last updated:

Powered by Hubbub Pro+