Making the website for Research By The Sea

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.