- Make the right thing easy
- Always answer “so what”?
- Close the gap between “something is wrong” to “we fixed it”
Thursday, February 2nd, 2023
Saturday, January 28th, 2023
I feel like we need a name for this era, when CSS started getting real good.
I think this is what I’ve been calling declarative design.
Sunday, January 22nd, 2023
The primary goals of this strategy are to inform decision-making and enhance the success of accessibility-related activities within the GOV.UK Design System team.
Interestingly, accessibility concerns are put into two categories: theoretical and evidenced (with the evidenced concerns being prioritised):
- Theoretical: A question or statement regarding the accessibility of an implementation within the Design System without evidence of real-world impact.
- Evidenced: Sharing new research, data or evidence showing that an implementation within the Design System could cause barriers for disabled people.
Tuesday, January 17th, 2023
A library of UX components is one common part of a design system, but the system itself is something bigger. A good system is also a shared set of strategies for solving visual and interactive communication challenges, a playbook rather than a script.
I like this way of putting it:
The problem is that treating a design system as a pantry full of widgets is, in and of itself, a failure of both craft and imagination. Think of it like a language: if a writer’s only engagement with it is grabbing words from the dictionary and heaping them together until “message” is achieved, things are going to suck. Language is more than a bag of words.
Monday, January 16th, 2023
There’s a broader point here about declarative design:
Setting very specific values may feel like you’re in more control, but you’re actually rescinding control by introducing fragility in the form of overly-specific CSS.
Wednesday, January 11th, 2023
I like to think of CSS as a conditional design language.
Yes! This is exactly what I’m talking about with declarative design!
Read on for some fantastic examples. And also, Ahmad makes a comparison between CSS and Figma, pointing out that the conditional, declarative possibilities currently aren’t available in graphic design tools.
Some lovely people have recently made some lovely websites.
For as long as I’ve been making websites, Dan’s designs have been an inspiration: Corkd, Dribbble, his own website; whenever he unveils something it always sits just right with me.
Oh, and I love the tagline for Simple Type Co.:
Never perfect. Always a-okay.
Someone who is a perfectionist is Marcin. He’s been working on his book about keyboards for years now (the Kickstarter project will launch in February) and he’s made a stunning website for the book called Shift Happens. Click around and find out.
Mandy has a lovely new professional website, courtesy of Ethan. It’s called everything changes. I love the subtletly of the different colour schemes for dark and light modes. It’s almost as if Ethan knows a thing or two about responsive design.
Look! Jason has new professional website too. The text is just scrumptious. It’s almost as if Jason knows a thing or two about typography.
All of these people are my web design heroes.
Thursday, January 5th, 2023
I did not know about
box-decoration-break—sounds like a game-changer for text effects that wrap onto multiple lines.
Tuesday, December 27th, 2022
For 24 days this month, Matthias featured a different independent type foundry, writing about each one and selecting some lovely examplars of their typefaces.
Wednesday, December 7th, 2022
Leading Design San Francisco 2023
Two months from today I’ll be back in San Francisco for Leading Design. It’s on February 7th and 8th.
This event is long overdue. We’ve never had Leading Design in San Francisco before, but we were all set to go ahead with the inaugural SF gathering …in March 2020. We all know what happened next.
So this event will be three years in the making.
They’ll be sharing their insights, their stories and their ideas — as well as some of their pain from past challenges. It’s all designed to help you navigate your own leadership journey.
I would love to see you in San Francisco! If you’ve attended a Leading Design event before, then you know how transformational it can be. If you haven’t, then now is your chance.
Early bird tickets are still available until mid December, so if you’re thinking about coming, I suggest making that decision now.
If you know anyone in the bay area who’s in a design leadership position, be sure to tell them about Leading Design San Francisco—they don’t want to miss this!
Thursday, December 1st, 2022
Links for Declarative Design
At the end of next week, I will sally forth to California. I’m going to wend my way to San Francisco where I will be speaking at An Event Apart.
I am very much looking forward to speaking at my first in-person AEAs in exactly three years. That was also in San Francisco, right before The Situation.
I hope to see you there. There are still tickets available.
I’ve put together a brand new talk that I’m very excited about. I’ve already written about the prep for this talk:
So while I’ve been feeling somewhat under the gun as I’ve been preparing this new talk for An Event Apart, I’ve also been feeling that the talk is just the culmination; a way of tying together some stuff I’ve been writing about it here for the past year or two.
The talk is called Declarative Design. Here’s the blurb:
Different browsers, different devices, different network speeds…designing for the web can feel like a never-ending battle for control. But what if the solution is to relinquish control? Instead of battling the unknowns, we can lean into them. In the world of programming, there’s the idea of declarative languages: describing what you want to achieve without specifying the exact steps to get there. In this talk, we’ll take this concept of declarative programming and apply it to designing for the web. Instead of focusing on controlling the outputs of the design process, we’ll look at creating the right inputs instead. Leave the final calculations for the outputs to the browser—that’s what computers are good at. We’ll look at CSS features, design systems, design principles, and more. Then you’ll be ready to embrace the fluid, ever-changing, glorious messiness of the World Wide Web!
If you’d a glimpse into the inside of my head while I’ve been preparing this talk, here’s a linkdump of various resources that are either mentioned in the talk or influenced it…
- Declarative design on adactio.com
- Utopia by James Gilyead and Trys Mudford
- Every Layout by Heydon Pickering and Andy Bell
- Be the browser’s mentor, not its micromanager by Andy Bell
- Layout Land by Jen Simmons
- Designing Intrinsic Layouts by Jen Simmons on adactio.com
- A declarative Web Share API on adactio.com
- A polyfill for button type=”share” on adactio.com
- The reason for a share button type on adactio.com
- Share Button Type explainer on Github
- How to (not) make a button by Tomas Pustelnik
- The CSS Mindset by Max Böck
- Contextual Spacing For Intrinsic Web Design by Stephanie Eckles
- The CSS mental model by Peter Paul Koch
- CSS Forces by Tim Brown
- Our web design tools are holding us back by Vasilis van Gemert
- Traditional Web Design Process is Fundamentally Broken by Jason Grigsby
- Web Design Tool Wish List by Jason Grigsby
- Declarative Design Tools (archived) by Jem Gold
- Cascading HTML style sheets — a proposal by Håkon Wium Lie, 1994
- A Dao of Web Design by John Allsopp, 2000
- Responsive Web Design by Ethan Marcotte, 2010
Monday, November 28th, 2022
Designing a Utopian layout grid: Working with fluid responsive values in a static design tool. | Utopia
James describes his process for designing fluid grid layouts, which very much involves working with the grain of the web but against the grain of our design tools:
In 2022 our design tools are still based around fixed-size artboards, while we’re trying to design products which scale gracefully to suit any screen.
Friday, November 25th, 2022
Tweaking navigation sizing
Top tasks are what matter most to your customers.
Seems pretty obvious, right? But it’s actually pretty rare to see top tasks presented any differently than other options.
Look at the global navigation on most websites. Typically all the options are given equal prominence. Even the semantics under the hood often reflect this egalitarian ideal, with each list in an unordered list. All the navigation options are equal, but I bet that the reality for most websites is that some navigation options are more equal than others.
I’ve been guilty of this on The Session. The site-wide navigation shows a number of options: tunes, events, discussions, etc. Each one is given equal prominence, but I can tell you without even looking at my server logs that 90% of the traffic goes to the tunes section—that’s the beating heart of The Session. That’s why the home page has a search form that defaults to searching for tunes.
I wanted the navigation to reflect the reality of what people are coming to the site for. I decided to make the link to the tunes section more prominent by bumping up the font size a bit.
I was worried about how weird this might look; we’re so used to seeing all navigation items presented equally. But I think it worked out okay (though it might take a bit of getting used to if you’re accustomed to the previous styling). It helps that “tunes” is a nice short word, so bumping up the font size on that word doesn’t jostle everything else around.
I think this adjustment is working well for this situation where there’s one very clear tippy-top task. I wouldn’t want to apply it across the board, making every item in the navigation proportionally bigger or smaller depending on how often it’s used. That would end up looking like a ransom note.
But giving one single item prominence like this tweaks the visual hierarchy just enough to favour the option that’s most likely to be what a visitor wants.
That last bit is crucial. The visual adjustment reflects what visitors want, not what I want. You could adjust the size of a navigation option that you want to drive traffic to, but in the long run, all you’re going to do is train people to trust your design less.
You don’t get to decide what your top task is. The visitors to your website do. Trying to foist an arbitrary option on them would be the tail wagging the dog.
Anway, I’m feeling a lot better about the site-wide navigation on The Session now that it reflects reality a little bit more. Heck, I may even bump that font size up a little more.
Tuesday, November 15th, 2022
A lovely fansite dedicated to the life and work of Paul Rand.
I often use the word quality when referring to apps, products and services I hold in a high regard but another word that often comes up in this context is craft. Craft, as in something that is handcrafted where something someone spent a lot of time on and maybe even embedded their own personal touches and personality in it. Often something handcrafted feels more premium.
Monday, November 7th, 2022
A beautiful meditation on Christopher Alexander by Claire L. Evans.
A good ol’ rant by Vasilis on our design tools for the web.
Saturday, November 5th, 2022
Here’s a short fifteen minute video (and transcript) of an interview I did about accessibility and inclusive design. I quite like how it turned out!
Wednesday, October 26th, 2022
A terrific piece by Maggie Appleton that starts with a comparison of graphical user interfaces and command line tools—which reminds me of the trade-offs between seamless and seamful design—and then moves into a proposed paradigm for declarative design tools:
Small, scoped areas within a graphical interface that allow users to read and write simple programmes
Here’s the video of the talk I gave at Web Dev Conf in Bristol recently. I think you can tell that I had fun—it was a good audience!