Journal

I’m a fan of web designers and developers collaborating closely rather than designers throwing mock-ups over the wall. Recently I read two newsletters relating to this topic, or perhaps more accurately about perceived divisions between design and development and some better, more modern ways of thinking.

The first, The best handoff is no handoff from Smashing Magazine, presents alternatives to waterfall including The Hot Potato Process espoused by Brad Frost and Dan Mall.

The second, Promises from Clearleft argues that presenting flat designs for sign-off at an early stage of a project doesn’t make sense given the nature of the web, and that it makes promises that can’t be kept.

In practice, sign-off leads to disappointment for everyone involved. A design created in isolation in a graphics-design tool almost never survives contact with the reality of the web. The client is disappointed that the final output doesn’t match what was signed off. The developer is disappointed that they weren’t consulted sooner. The designer is disappointed that the code doesn’t match the design.

Clearleft argue instead for presenting the coded page in the browser because it avoids broken promises and presents reality.

My work colleague Ryan recently drew my attention to the new HTML search element. This morning I read Scott O’Hara’s excellent primer. Scott worked on implementing <search>, and his article cleared up my questions around what it is and when we can start using it.

Firstly <search> is not a “search input” – it’s not a replacement for any existing input elements. Instead it’s a native HTML element to create a search landmark, something that until now we could only achieve by applying role="search" to another element.

Landmarks are an important semantic structure allowing screen reader users to orient themselves and jump to important areas of a web page. Existing landmark-signalling elements you might know include <header>, <main>, <footer>. So you would use <search> to wrap around a search function, thus providing additional accessibility. And it lets you do so with a native HTML element instead of re-purposing another element by adding ARIA properties, per the first rule of ARIA use. It’d look something like this:

So as Scott himself admits:

To be brutally honest, this is not the most important element that’s ever been added to the HTML specification. It is however a nice little accessibility win.

Do I have a use for this?

If you have a search function or search page and currently miss the opportunity to offer a search landmark you could do so and improve the user experience.

Can I use the <search> element today?

As Scott mentions, it’s not yet available in browsers (although it likely will arrive soon). So if you added <search> (just as I’ve typed it there) to a page, it wouldn’t currently create a search landmark. So you could wait for a while before using the element. Alternatively, because HTML’s design is intentionally geared toward a progressive enhancement mindset, you could take Jeremy Keith’s approach and safely use the following today:

Jeremy knows that when browsers encounter an HTML element they don’t know, they don’t break but rather treat it as an anonymous element and carry on. So he includes <search> to start adopting the new element today, but bolts on role=search temporarily to manually provide the landmark until browsers understand search. He’ll then remove the role=search part once support for search is widespread.

I’ve been listening to lots of jazz of late and loved seeing Herbie Hancock live in August 22.

So I thought I’d explore further and listen to the audio recording of Herbie’s autobiography Possibilities, narrated by the great man himself.

I really enjoyed it. Herbie’s story is really interesting and entertaining. He’s been at the forefront of so many iconic scenes – from playing in Miles Davis’s band, to writing many classics of his own, to breaking new ground with his Mwandishi sextet and the Headhunters.

I love his carefree and curious spirit and his willingness to experiment with technology (from the fender Rhodes, to other synths, to the internet) and take risks in other aspects of life.

What a talent and what a guy!

I recorded my second radio show of 2023 live at the Clyde Built Radio studio at the weekend. It was great playing records there on a sunny Sunday with the clocks just gone forward and the Barras buzzing as it hosted a Hong Kong street market.

This month I went for a set of reggae, electronics and other assorted good vibes.

Listen to the show on Soundcloud.

Here’s the tracklist:

1. Mali-I - Next Level Intro
2. Robert Ffrench - You are so special
3. Radio Trip - No Oud
4. Lucas Croon - Japon
5. Babeth - Orchestra Reggae
6. Tyrone Evans - Rise Up (Version)
7. Gateway Shuffle - Snapping
8. Cloud - Moon Rock
9. Azura - Theme from Azura
10. Visage - Pleasure Boys
11. Romaal Kultan - Meditate
12. Language - Tranquility Bass

Thanks to Amy for arranging, and to Matthew, the engineer on the day.

I’m wary of list-based clickbait – and Adam’s recent 6 CSS snippets every front-end developer should know in 2023 feels like that – however I like this modern and minimal approach to creating a circle. I’ve previously seen aspect-ratio: 1 used to create a square box and it’s a lovely shorthand for “make width and height equal”. It makes sense that you can use it for a circle too, just by adding some border-radius.

.circle { inline-size: 25ch; aspect-ratio: 1; border-radius: 50%; }

System font stack CSS organized by typeface classification for every modern OS. The fastest fonts available. No downloading, no layout shifts, no flashes — just instant renders.

This is a great resource for when you want a particular style of font (workhorse sans-serif, grotesque, monospace, display slab serif etc) and to favour a system font rather than a custom font to get performance and simplicity benefits allied to having many weights and characters natively available.

To grab a stack, just copy the font-family declaration from its card then paste that into your CSS.

To easily preview how custom text of your choice would look in each stack, use the handy form at the top of the page.

Aside from its utility I also love this page as a learning resource. For each font category, the font and weight your browsing context is currently using is highlighted in blue with a solid underline, while those available but not currently in use and those unavailable are also separately highlighted. This gives you even more information than Firefox’s font panel or the WhatFont extension for Chrome.

Notes:

• if you notice support for a font when you wouldn’t expect it (because your OS doesn’t include it), it’s worth remembering that you may have previously installed it locally. This was the case for me with Inter in the Neo-Grotesque stack. You can click the little “info” icon links beside each stack’s title for detailed info on that stack including which OSs use which font
• the declaration font-family: system-ui, sans-serif as a means of serving the Operating System’s default sans-serif seemed suspiciously simple given the complicated iterations I’ve seen previously. However after some digging I confirmed that Firefox added support for system-ui a few years ago so previous, verbose alternatives are no longer necessary.

I was delighted to discover that my talented colleague Anda has her own website and uses it to write articles like this! This one is obviously pretty relevant to me too, given that I work on the same team.

I particularly liked the fifth lesson – “You are an integral part of the company”. This is an aspect of Design System work that I care about because it’s important to me to work on impactful things that get into a lot of users’ hands.

Something we often talk about in our Design System team is that components should not be like Swiss Army Knives. It’s better for them to be laser-focused because by limiting their scope to a single task they are more reusable and support a more extensible system through composition.

Discussions often arise when we consider the flip-side – components which do too much, know too much, or care too much! When they cover too much ground or make assumptions about their context, things go wrong. Here are some examples.

Card

In websites where many elements have a “rounded panel”-like appearance so as to pop off the background, you can run into problems. Because of the somewhat Card-like appearance, people start to regard many semantically distinct things as “Cards” (rather than limiting the meaning of Card to a more conventional definition). Here are some of the problems this can cause:

• If the name covers a million use cases, then how can you describe it sensibly, or define its boundaries?
• When do you stop piling on different things it can mean? How do you stop it growing? How do you avoid bloat?
• Ongoing naming/confusion issues: you’re setting yourself up for continued confusion and code disparity. If something is “semantically” a note, or a comment, or a message etc then you can expect that future staff are gonna describe it as that rather than a Card! They’ll likely (understandably) write code that feels appropriate too. The problem will continue.

I appreciate that often we need pragmatic solutions, so if our designs have lots of similar-looking elements then there is still something we can do. If the repeated thing is more of a “shape” than a something with common-purpose, then just call it out as that! That could either be by name – for example Every Layout have a Box layout which could be a starting point – or by categorisation i.e. by moving the non-ideally named thing into a clearly demarcated Utilities (or similar) category in your Design System.

Flex

It seems that a number of Design Systems have a Flex component. My feeling, though, is that these represent an early reaction to the emergence of CSS’s Flexbox, rather than necessarily being sensible system-friendly or consumer-friendly components. CSS layout covers a lot and I think breaking this down into different smaller tools (Stack, Inline, Grid etc) works better.

Button

I’ve talked before about the “Everything is a button” mindset and how it’s harmful. Buttons and links are fundamentally different HTML elements with totally different purposes, and bundling them together has various ill effects that I see on a regular basis.

References

• Shifting left: how introducing accessibility earlier helps the BBC’s design system (by Sophie Beaumont)

Getting to profitability is no longer a distant, post-IPO nice-to-have, but a short-term necessity for survival. But how to do that without cutting off the legs of the product team? By using better tools and techniques, that's how.

DHH of 37 Signals and Basecamp offers three pieces of advice for productivity and profitability.

1: Unless market conditions demand otherwise, delay native app development for as long as possible.

2: Hire full-stack developers, and don't let them split the frontend and backend into separate jurisdictions.

3: Hire designers who work natively with the web.

I’m not a fan of the term “full-stack” and also think it underestimates the complexity/speciality required to work (properly) as a front-end developer. However that aside, I think there is sense in these, even though others I know would disagree.

Me, Clair and Rudy just enjoyed a lovely weekend break. We stayed at Drinkbetween cottage on Banchory Farm. While only 70 minutes drive from home it provided some lovely countryside isolation, with the bonus of nice nearby towns to visit nearby too.

The cottage has recently been restored by the farm owners and was the perfect environment to relax.

Our nearest neighbours were some colourful pheasants, a flock of sheep and three highland cows grazing in the fields opposite. Beyond them, there was a view onto the firth of forth and Forth bridges.

On the Saturday we enjoyed a short trip to the nearby towns of Aberdour via Burntisland, and moseyed down to the lovely Silver beach where we stopped for a coffee at Sands.

Clair brought and made beautiful food and at night we watched Captain Fantastic.

It was a reminder of just how great a well-needed change of pace and scenery you can get in a short distance and space of time.