Redesign: Details, details
12 March 2020 | 8th Edition
Now the broad brushstrokes of the new site are in place, it's time to start drilling down into fiddly details.
First on that list, how to handle the very essence of the internet — hyperlinks. Specifically text hyperlinks a:link.
It's rare nowadays that you come across a website that still uses out-of-the-box standard html blue (#0000FF) for hyperlinks. The reason being that in most situations they just don't look that good, unless your site already has a lot of blue on it. There is already too much blue on the internet as it is. And let's face it who remembers those ugly grey backgrounds covered with high-saturation blue links back in the early internet days?
Rarer still, blue text AND an underline. CSS allowed us to turn off those pesky underlines with:
a:link { text-decoration: none; }and boom, every designer did and they were gone. But I'm coming back around to underlined links as being vital in terms of accessibility, particularly in running text; but not so much in dedicated navigation.
As part of the redesign here, I toyed with using underlined links in the footer and side panel navigation. But if anything it made things look less readable. Lists of links become very painful to look at. So text hyperlinks in those areas have underlines in the :hover state only, which is good enough I think. And really a list of links in an obvious navigation area should not pose to much problem to understand what their function is.
The other link mode worth thinking about is the :visited link state — that is to say — what does a link you've already visited look like. :visited a pseudo-class selector, it can change some of the styling attributes an anchor link element if the user's browser has already visited that link. It's there to distinguish the difference between links they have and haven't visited.
Most websites use different colours for visited and unvisited links, making this an understandable convention that people have now come to expect.
At visited links here were initially lightish grey — mainly to keep the strong mono colour theme going. But actually it's a poor choice as grey a) always signals that something is out of bounds or is not a functioning choice, and, b) the text wasn't that easy to read in that colour. Make the grey darker? But then it didn't contrast sufficiently with standard black body text in running text. So I was coming around to the html default:
a:visited { color: purple }Yes really — let's all go back to the mid-90s internet. It was that colour for a reason because nothing else was. Would purple be sufficiently different enough to the red link colour that is being used for unvisited links? If anything a lighter color, to make the link look "faded" seems the unofficial convention.
"The color for unvisited links should be more vivid, bright, and saturated than the color for visited links, which should look "used" (dull and washed out)."
Jakob Nielsen
Taking that into consideration, a lighter red/pink is in order. Even when visited, a link would still contrast well within black running text. It would even possibly work in the black footer area.
So, currently playing around with options for visited running text links, side nav links and footer links. It's a bit experimental — and things might look little odd until a solution is finally decided upon and it all settles down.
Ends
