Journal

Adrian recommends that we underline links in body copy and provides a host of evidence and rationale to back that up.

WCAG guidelines tell us to make sure we do not rely on color alone to distinguish links and even explicitly suggest underlines.

Usability researchers and practitioners generally suggest that underlines are the most clear way to indicate a link that lives within content.

Academic researchers confirm that … when you have them you can reduce additional cognitive load by making them apparent. Underlines performed well.

There are other sites on the web which have set expectations, but many of them likely do not correspond directly to your own circumstance. Additionally, some of them are already violating WCAG, which removes them from consideration as appropriate analogues.

Other styling options can work, but they are not necessarily universal, sometimes requiring users to learn them. They may also conflict with other styles on your site, increasing the effort (cost) for you to come up with usable, novel and progressive indicators.

Given all these factors, I recommend you underline links in your body content.

Here’s Eric Bailey with some very relatable thoughts on the need to tell design system stories even though it’s difficult.

The component works. And because it works, nobody pays attention to it.

This is the promise of a design system made manifest: Consistent, quality experiences for complicated interactions, distributed at scale with minimal fuss.

This is objectively great. The problem, however, is how we talk, or fail to talk about this type of success.

A lack of bug reports, accessibility issues, design tweaks, etc. are all objectively great, but there are no easy datapoints you can measure here. By this, I mean it is difficult to quantify a void.

Eric advices crafting stories about the important aspects of design system work that are not directly about components:

• Identifying and collecting various ways to weave compelling narratives about the invisible, successful work you’ve done, and then
• Putting those stories in front of the people who need to know them.

At work we are currently working on that very thing as part of a communication strategy.

Sidenote: Eric frames all this in the context of a Data table component he recently worked on for GitHub. It looks good! This is also highly relatable, because I built one of these a few years back, too, and know how much work is involved.

The FT’s design system Origami not only has a cool name but also some interesting metrics.

Community engagement: We are measuring how many people attend our design system guild meetings. While not a goal in itself, we need an engaged community to help us make the right decisions, and an engaged community is also a sign that we’re solving problems that people want solved!

This is a wonderful guide that’s choc-full of practical examples.

CSS container queries help us to write a truly fluid components that change based on their container size. In the next few years, we’ll see less media queries and more container queries.

Lots of inspiration here for when I start using Container Queries in earnest.

Question: when presenting users with a means of downloading a file, should you use the anchor element or the button element?

Answer: you should use the anchor element.

Eric starts by quoting accessibility expert Scott O’Hara to explain why anchor is the appropriate element:

The debate about whether a button or link should be used to download a file is a bit silly, as the whole purpose of a link has always been to download content. HTML is a file, and like all other files, it needs to be retrieved from a server and downloaded before it can be presented to a user.

The confusion seems to come from developers getting super literal with the “links go places, buttons perform actions.” Yes, that is true, but links don’t actually go anywhere. They retrieve information and download it.

Long story short, the download attribute is unique to anchor links for a reason. download augments the inherent functionality of the link retrieving data. It side steps the attempt to render the file in the browser and instead says, “You know what? I’m just going to save this for later…”

Eric follows up by suggesting that as designers and developers we should make the experience of interacting with a download link as good as possible. To that end:

• Ensure it looks like a link, i.e. underlined. You’re using a link (because it’s semantically appropriate) so now encourage the appropriate perceived affordances via conventional visual design for a link
• Use verb plus noun for the text. For example, Download fonts
• Include the file size (for example 34 MB) to give an indication of the download time
• Consider adding an indicator that the link does something other than take you to another place on your website. A downward-facing arrow is conventional

When asking users for numbers and dates, which HTML form elements should we use?

When asking the user for numeric information it might feel obvious to use the HTML input type meant for that purpose, namely number.

However the UK GDS wrote in 2020 that they had switched to using inputs of type text, with inputmode set to numeric. This was after conducting tests which had revealed a variety of usability and accessibility issues.

In the same article a reader questioned why GDS’s use of text inputs also extended to gathering dates (a subset of numbers) when there is a dedicated input type date for that purpose. GDS answered that there are accessibility and usability problems with browser implementations of <input type"date"> and linked to Hassell Inclusion’s 2019 article on date inputs as evidence.

I love the level of research and detail that the GDS and Hassell articles provide. But the notion of not using the HTML elements meant for the job annoys me. I’m also aware that smart developers like Jeremy Keith note that input type date now has wide browser support and are using it. (Update: it seems Jeremy has found some browser support issues too.)

It’s also worth reiterating that the Hassell article is from 2019 and the GDS one from 2020, and four or five years is a long time in browser support.

So what should we do, and how should we make the decision? I’m gonna circle back to this and update it with some answers soon, once I’ve worked them out.

Scott proposes an interview question relating to web standards and intelligent use of JavaScript.

How would you attempt to build Wordle (...or some other complex app) if you could only use HTML and CSS? Which features of that app would make more sense to build with JavaScript than with other technologies? And, can you imagine a change or addition to the HTML or CSS standard that could make any of those features more straight-forward to build?

Discussing any approaches to this challenge will reveal the candidate's broad knowledge of web standards–including new and emerging HTML and CSS features–and as a huge benefit, it would help select for the type of folks who are best suited to lead us out of the JavaScript over-reliance problems that are holding back the web today.

I hate interviews (and the mere thought of interviews), but I could handle being asked a question like this.

Well that was a fun weekend!

First up on Saturday was lunch with my niece Chloe at Gusto and Relish (we thought it might be nice for her to visit the southside). We had a good blether about her wee boy Leo, her future plans and more while enjoying some tasty sandwiches and coffee. After that Chloe visited our flat which provided a chance for her to chat with Clair and meet Rudy.

Later that night was an event Clair and I had planned for a while – our Traitors night with friends! We assembled at Church on the Hill where Clair took on the role of host Claudia while I, Marty and Jenny, Simon, Gillian, Tom and Nessa, Mark, Martin and Izzie, Dan and Sarah were the participants.

We all chucked a tenner into the pot as an incentive to spice it up, then Clair set about blindfolding us and tapping the shoulders of those she’d picked as traitors. I was a faithful but ended up being voted out first! Cracking one too many jokes in the WhatsApp beforehand was my downfall, I think. That aside it all went really well and we didn’t even get launched by the unsuspecting bar staff for our theatrics. The winners also donated the cash to charity which was a really nice touch.

Competition aside, it was just lovely to catch up with people. In particular I hadn’t seen Dan and Sarah for ages. I enjoyed hearing about their recent visit to Cork (I now fancy visiting too) and also Sarah’s positive ideas about how Glasgow city centre can rise again.

We knocked it on the head at a good hour and resisted the urge for a nightcap – a sign of the mature adults we have all become (or something like that).

Just had a memorable midweek night at the cinema with Craig and Jason.

Opus presents Ryuichi Sakamato at the piano in the final year of his life. It consists of him playing twenty pieces one after the other and is beautifully shot in black and white by his son, Neo Sora.

I found the film’s style and starkness to be quite unusual at first, but once I got into its rhythm it was very immersive. The music and playing were at times just mesmerising and given the circumstances it was quite moving.

It was great to unexpectedly bump into Liam, too. I might have known this film would be up his strasse!

An amazing time was had by all yesterday as Gillian, Clair and I, Tom and Nessa had lunch at Cail Bruich on Great Western Road. Annoyingly on arrival I had a slightly dodgy stomach so went with a non-alcoholic cocktail to start. Fortunately I didn’t need too long to get up to speed, as by the starter I was happily eating raw fish.

As usual the food was fantastic. Among a range of delights we had langoustine, monkfish and that killer mushroom dish. The wines were pretty special too, although the accompanying origin stories are getting pretty long.

In our excitement Clair and I invited everyone back to ours. There, Nessa gave us a great laugh telling us about seeing her current favourite band Tool umpteen times, and we all shared our musical guilty pleasures – Seal’s Kiss from a Rose from Tom C was an unexpected and memorable inclusion! Mark M was at a loose end and joined us, bringing Jura to give Rudy a playmate, and the merriment went on into the wee hours. Ach well, I’ve been pretty good most of the year so I’m allowing myself this blow-out without the need for a post-mortem!