Marcin Wichary is a designer at Medium who took on the challenge of creating a considered, fine-tuned underline for the links on the site. In contrast to the normal "data-driven" design story, which is often a series of A/B tests that nudge things around by a pixel or two for weeks until they attain some counterintuitive optimum, this is a story about someone who had an intuitive, artistic, aesthetic goal and spent a bunch of time getting HTML to behave in a way that was consistent across different browsers, screen resolutions, and so forth.
I have to say that the actual underlines that Medium came up with don't seem to me to be more or less appealing than the default (the GIF above is displaying a before-and-after and I still can't tell which is which without referring to the article), but I really enjoy stories about people who know what aesthetic effect they want to achieve and are willing to move heaven and earth to achieve it.
I carried on, adding more and more complexity and magic numbers to my suggested change. And this is where the code reviewers started asking the truly hard and important questions: Is this too complicated? Will this make the CSS too heavy? How would we maintain it? What happens if this fails?
And so, during the following weeks, I worked on:
coming up with formulas rather than arbitrary values — in the event of changing the fonts or font sizes in the future, adjusting the underline positions would be much easier and faster,
limiting the browsers we use so that in the case of failure, the reader could see the default browser underlines (rather than not seeing them at all!),
simplifying the code so that while we might not get the perfect underlines, we could save both the bytes and future maintenance costs.
Crafting link underlines on Medium [Marcin Wichary/Medium]
5 Worlds is a young SFF project that’s been a hard secret to keep these past years! It’s a five book series, 250 pages each, full color. It has five worlds and there are five of us working together on it. The story involves an impossible quest to light these ancient beacons left behind by […]
You could not ask for a clearer, easier-to-read, more informative guide to facial recognition and machine learning thank Adam Geitgey’s article, which is the latest in a series of equally clear explainers on machine learning, aimed at non-technical people — and if you are a programmer, he’s got links to Python sample source and projects […]
Game theory is the place where politics, economics, psychology and math meet, and it offers the seductive promise of being able to quantify empirically optimal outcomes from thorny problems ranging from whether to go to war to how to split the tab at a restaurant.
Learning is a 24/7/365 proposition, and it never ends. And if you’re truly serious about leveling up your skill sets and career prospects, get a subscription to Stone River Academy’s massive course collection. This offer normally is worth over $1,400, but is now available for just $89 in the Boing Boing Store.A respected name in information technology […]
Home audio has taken some big leaps forward in recent years–not just in terms of sound quality, but also in the style department. The FRESHeBAR Leather Soundbar, now 56% off in the Boing Boing Store, is proof.The FRESHeBAR comes packing almost all the options you’d ever need for a home sound system, including Bluetooth streaming capabilities.The unit’s 90 […]
Much of what goes into creating an amazing photo happens in the digital darkroom. Here’s your chance to master all things photo editing: the Ultimate Adobe Photo Editing Bundle, now available in the Boing Boing Store for just $29.99.Across 8 courses and over 41 hours of intensive instruction, you’ll learn the fundamentals of Adobe’s suite of photo […]