blog
Posted On Friday, November 3, 2023
Author: David Armitage (Technical Director)
Once upon a time, in the web's ancient history, the landscape was a bit... monotonous. We're talking about a time before CSS, where the web was like a sea of text, with links as the only signposts. Every link wore the same attire – a default shade of blue. It was a sea of blue, like a never-ending denim ocean.
But that simplicity served a purpose. It helped users spot links faster than a wizard could cast a spell. Designers had limited tricks up their sleeves, so blue it was. The early web users became blue link connoisseurs.
Then, along came CSS, the web's fashion guru. It unleashed the power of creativity, turning links into a canvas for artistic expression. Suddenly, links could flaunt every color of the rainbow, sport fancy backgrounds, break into dance, and even choose custom fonts. The web became a fashion show, with links strutting their stuff.
However, like any fashion runway, there were some downsides. Sometimes, in the quest for unique style, we overdid it. We replaced simplicity with complexity, confusing users. This affected usability and accessibility. So, how do we keep links beautiful and user-friendly?
Today's web users are savvy, no doubt. Designers often give them credit for their smarts, but sometimes they overestimate their users' eagle eyes.
We see links that barely whisper, almost camouflaging themselves among regular text. The link color might be a twin to the surrounding text, or the underline might disappear into the background. Subtle is cool, but not for links. Links should pop, no matter how you style them.
Link color should stand out, contrasting with other text. It must also follow accessibility guidelines.
Links should have distinguishing features, like underlines or font-weight changes. These help colorblind users identify links in the wilderness of text.
And don't forget accessibility: always use the outline property on the link's :focus state, making it easier for keyboard users to spot links.
When CSS came along, many designers decided underlines were old-fashioned and ditched them. Sure, it created a "clean" look, but it made links harder to find, especially in long passages of text. Users would get lost, unable to spot any lifelines.
That's why we recommend underlining links as the default choice. It's a simple, powerful tool that eases the navigation process.
Yes, some clients might think underlines are relics of the past, but this is an opportunity for enlightenment. Explain how underlines are like trail markers in a forest, guiding users on their journey. The convenience might lead to more conversions and, eventually, the clients will see the light.
Plus, with CSS, underlines can be fabulous. The text-decoration-color and text-decoration-style properties offer exciting options. Underlines can be the life of the party, not just wallflowers.
Link styling is like the web's dress code. When links are styled consistently, it becomes a user-friendly dance. Users won't have to ponder the steps to navigate your site.
Of course, not every link has to wear the same outfit. Context matters. Links in the header can rock a different style than those in the footer. Sidebar links can have their unique flair compared to body text. But it's not a free-for-all; there should be a method to the madness.
Radically different typography, for instance, can send users into a labyrinth. Just like in fashion, there's a method to the madness, and it should apply to link design.
The world of link styling is like a grand masquerade ball. Some designers ignore it, while others throw a carnival of custom CSS at it. In terms of usability, simplicity is often the safer path, allowing users to spot links amidst the content chaos.
Yet, you can strike a balance. You can add some flair to your links, matching your brand's style while keeping the users' needs in mind. Don't be afraid to experiment with link styles, but always remember your site's goals and best practices. It's a delicate dance between style and usability in the grand ball of the web