1 dataset. 100 visualizations.
The same small dataset visualised in a hundred different ways, with notes on the strengths and weaknesses of each one.
The same small dataset visualised in a hundred different ways, with notes on the strengths and weaknesses of each one.
UX London isn’t the only event from Clearleft coming your way in 2025. There’s a brand new spin-off event dedicated to user research happening in February. It’s called Research By The Sea.
I’m not curating this one, though I will be hosting it. The curation is being carried out most excellently by Benjamin, who has written more about how he’s doing it:
We’ve invited some of the best thinkers and doers from from in the research space to explore how researchers might respond to today’s most gnarly and pressing problems. They’ll challenge current perspectives, tools, practices and thinking styles, and provide practical steps for getting started today to shape a better tomorrow.
If that sounds like your cup of tea, you should put February 27th 2025 in your calendar and grab yourself a ticket.
Although I’m not involved in curating the line-up for the event, I offered Benjamin my swor… my web dev skillz. I made the website for Research By The Sea and I really enjoyed doing it!
These one-day events are a great chance to have a bit of fun with the website. I wrote about how enjoyable it was making the website for this year’s Patterns Day:
I felt like I was truly designing in the browser. Adjusting spacing, playing around with layout, and all that squishy stuff. Some of the best results came from happy accidents—the way that certain elements behaved at certain screen sizes would lead me into little experiments that yielded interesting results.
I took the same approach with Research By The Sea. I had a design language to work with, based on UX London, but with more of a playful, brighter feel. The idea was that the website (and the event) should feel connected to UX London, while also being its own thing.
I kept the typography of the UX London site more or less intact. The page structure is also very similar. That was my foundation. From there I was free to explore some other directions.
I took the opportunity to explore some new features of CSS. But before I talk about the newer stuff, I want to mention the bits of CSS that I don’t consider new. These are the things that are just the way things are done ‘round here.
Custom properties. They’ve been around for years now, and they’re such a life-saver, especially on a project like this where I’m messing around with type, colour, and spacing. Even on a small site like this, it’s still worth having a section at the start where you define your custom properties.
Logical properties. Again, they’ve been around for years. At this point I’ve trained my brain to use them by default. Now when I see a left
, right
, width
or height
in a style sheet, it looks like a bug to me.
Fluid type. It’s kind of a natural extension of responsive design to me. If a website’s typography doesn’t adjust to my viewport, it feels slightly broken. On this project I used Utopia because I wanted different type scales as the viewport increased. On other projects I’ve just used on clamp
declaration on the body
element, which can also get the job done.
Okay, so those are the things that feel standard to me. So what could I play around with that was new?
View transitions. So easy! Just point to an element on two different pages and say “Hey, do a magic move!” You can see this in action with the logo as you move from the homepage to, say, the venue page. I’ve also added view transitions to the speaker headshots on the homepage so that when you click through to their full page, you get a nice swoosh.
Unless, like me, you’re using Firefox. In that case, you won’t see any view transitions. That’s okay. They are very much an enhancement. Speaking of which…
Scroll-driven animations. You’ll only get these in Chromium browsers right now, but again, they’re an enhancement. I’ve got multiple background images—a bunch of cute SVG shapes. I’m using scroll-driven animations to change the background positions and sizes as you scroll. It’s a bit silly, but hopefully kind of cute.
You might be wondering how I calculated the movements of each background image. Good question. I basically just messed around with the values. I had fun! But imagine what an actually-skilled interaction designer could do.
That brings up an interesting observation about both view transitions and scroll-driven animations: Figma will not help you here. You need to be in a web browser with dev tools popped open. You’ve got to roll up your sleeves get your hands into the machine. I know that sounds intimidating, but it’s also surprisingly enjoyable and empowering.
Oh, and I made sure to wrap both the view transitions and the scroll-driven animations in a prefers-reduced-motion: no-preference
@media query.
I’m pleased with how the website turned out. It feels fun. More importantly, it feels fast. There is zero JavaScript. That’s the main reason why it’s very, very performant (and accessible).
Smooth transitions across pages; smooth animations as you scroll: it’s great what you can do with just HTML and CSS.
I really like the way that the thinking here is tied back to Bert Bos’s original design principles for CSS.
This is a deep dive into the future of CSS layout—make a cup of tea and settle in for some good nerdiness!
Is it too early to start planning for 2025 already? Perhaps. But you might want to add some dates to your calender:
June 10th, 11th, and 12th, 2025.
That’s when UX London will return!
It’ll be be back in CodeNode. That’s the venue we tried for the first time this year and it worked out really well.
You can look forward to three days of UX talks and workshops:
I realise that the alliteration of discovery, design, and delivery is a little forced but you get the idea. The flow of the event will follow the process of a typical design project.
The best way to experience UX London is to come for all three days, but each day also works as a standalone event.
I’m now starting the process of curating the line-up for each day: a mix of inspiring talks and hands-on workshops. If you trust me, you can get your ticket already at the super early-bird price.
If you reckon you’d be a good addition to the line-up, here’s a form you can fill out.
Now, I’ll be up-front here: if you’re a typical white dude like me, you’re not going to be top of the pile. My priority for UX London is creating a diverse line-up of speakers.
So if you’re not a typical white dude like me and you’ve ever thought about giving a conference talk, fill out that form!
If you don’t fancy speaking, but you want to see your company represented at UX London, check out our sponsorship options.
If you don’t want to speak and you don’t want to sponsor, but you want to be at the best design conference of 2025, get your ticket now.
Pondering pace layers.
The datalist
element is good. It was a bit bumpy there for a while, but browser implementations have improved over time. Now it’s by far the simplest and most robust way to create an autocompleting combobox widget.
Hook up an input
element with a datalist
element using the list
and id
attributes and you’re done. You can even use a bit of Ajax to dynamically update the option
elements inside the datalist
in response to the user’s input. The browser takes care of all the interaction. If you try to roll your own combobox implementation, it’s almost certainly going to involve a lot of JavaScript and still probably won’t account for all use cases.
Safari on iOS—and therefore all browsers on iOS—didn’t support datalist
for quite a while. But once it finally shipped, it worked really nicely. The option
s showed up just like automplete suggestions above the keyboard.
But that broke a while back.
The suggestions still appeared, but if you tapped on one of them, nothing happened. The input
element didn’t get updated. You had to tap on a little downward arrow inside the input
in order to see the list of option
s.
That was really frustrating for anybody on iOS using The Session. By far the most common task on the site is searching for a tune, something that’s greatly (progressively) enhanced with a dynamically-updating datalist
.
I just updated to iOS 18 specifically to see if this bug has been fixed, and it has:
Fixed updating the input value when selecting an
option
from adatalist
element.
Hallelujah!
But now there’s some additional behaviour that’s a little weird.
As well as showing the option
s in the autocomplete list above the keyboard, Safari on iOS—and therefore all browsers on iOS—also pops up the option
s as a list (as if you had tapped on that downward arrow). If the list is more than a few option
s long, it completely obscures the input
element you’re typing into!
I’m not sure if this is a bug or if it’s the intended behaviour. It feels like a bug, but I don’t know if I should file something.
For now, I’ve updated the datalist
elements on The Session to only ever hold three option
elements in order to minimise the problem. Seeing as the autosuggest list above the keyboard only ever shows a maximum of three suggestions anyway, this feels like a reasonable compromise.
This is a very handy piece of work by Rich:
The idea is to set sensible typographic defaults for use on prose (a column of text), making particular use of the font features provided by OpenType. The main principle is that it can be used as starting point for all projects, so doesn’t include design-specific aspects such as font choice, type scale or layout (including how you might like to set the line-length).
What an excellent personal website!
Exploring the graphic design history of Penguin books:
The covers presented on this site are all from my own collection of about 1400 Penguins, which have been chosen for the beauty or interest of their cover designs. They span the history of the company all the way back to 1935 when Penguin Books was launched.
I hope to make something that could only exist because I made it. Something that is the one thing that it is. Not an average sentence. Not a visual approximation of other people’s work. Not a stolen concept that boils lakes and uses more electricity than anything in my household.
I do not want any software
I believe that this mindset is the healthiest way to design and build things that people will use and not hate us for building. For me, it’s a way to remind myself that all humans have a whole rich, challenging life outside of the little screens I’m making for them. So that even when I’m focused on user needs and user problems, I can keep it just out of the corner of my eye: the person I’m making this for doesn’t actually want to be here, and that’s OK.
We want speedy internet and fast-loading services because we want to stop pushing buttons and opening accordions as quickly as possible.
Here’s a nice interview with Rich all about how things work at Clearleft.
- People only understand things relative to things they already understand
- People only understand things in context
- People rely on patterns and consistency
- People seek to minimize cognitive load
- People have varying levels of expertise and familiarity
- People are goal-oriented
- People often don’t know what they’re looking for
- Information is more useful when it’s actionable
Oh, this looks like an excellent event (in London and online):
Adventures in Episodic Type Design
With David Jonathan Ross
Thursday 17th October 2024
Progressive enhancement is a design and development principle where we build in layers which automatically turn themselves on based on the browser’s capabilities.
The idea of progressive enhancement is that everyone gets the perfect experience for them, rather than a pre-determined “perfect” experience from a design and development team.
Everyone’s raving about this great talk by Marcin, and rightly so!
This is kind of about art direction and kind of about design systems.
There is beauty in trying to express something specific; there is beauty too in finding compromises to create something epic and collective.
My only concern is whether we are considering the question at all.
As designers creating images to communicate complex ideas, we rationalize our processes, we bring objectivity to our craft, we want our clients to think that our decisions are based on reasoning. However, we should also defend our intuitions, our subjectivity. We should also defend pursuing beauty as it is one of our most powerful tools.
UX London is just three weeks away! If you haven’t got your ticket yet, dally not.
There’s a last-minute addition to the line-up: Peter Boersma.
Peter is kindly stepping into the slot that Kara Kane was going to be occupying. Alas, since a snap general election was recently announced, Kara isn’t able to give her talk. There’s an abundance of caution in the comms from gov.uk in this pre-election period.
It’s a shame that Kara won’t be able to speak this time around, but it’s great that we’ve got Peter!
Peter’s talk is perfect for day three. Remember, that’s the day focused on design ops and design systems. Well, Peter lives and breathes design ops. He’ll show you why you should maintain a roadmap for design ops, and work with others to get the initiatives on it done.
You can get a ticket for an individual day of talks and workshops, or go for the best-value option and come for all three days. See you there!