The start

---

2026 is the year of the website! Well, I keep saying it anyway. Instead of just saying it though, I’m doing it.

We set up this open working infrastructure on Piccalilli last year and although it didn’t take off quite like we would have hoped, the idea hasn’t died. I’ve decided to use this infrastructure to break down a complete redesign and re-platforming of my website, bell.bz. Sure, this is not as ambitious as a full-blown client project in the open — maybe we can make that happen still — but I’m approaching this project in a similar manner to how we approach client work, so I think it’s going to be really valuable for you, our treasured readers, regardless.

I’ve been struggling to decide on what I want to write about this year. I feel like I’ve covered stuff that’s very important to me — and what I believe will make you a better developer and designer — in great detail already. I focused a lot of my writing over the last few years on flexible layout systems, pragmatic CSS methodologies, being the browser’s mentor instead of its micromanager and embracing core skills (often called “soft skills”) as the means of producing excellent websites that work for everyone, rooted in progressive enhancement. This year onwards, I want to focus on showing you the how.

Sure, I’ll publish articles — I always do — but I quite like the idea of getting my teeth into a focused writing project I can do over time because that’s exactly how I (and we at the studio) design and build websites!

Why I’m doing this

At Set Studio, we’re obsessively iterative. No implementation is fully set in stone and everything can be improved in cycles, always. I plan to do this project in exactly the same manner. It’s starts incredibly rough but as the iterations complete, the output becomes increasingly polished and delightful.

You can get a bit of a sneaky peek of this approach in our redesigning Piccalilli series from 2024. The process of this redesign is going to be very similar. The difference here is though is that this is a personal project, so I’m forced to work in cycles. I can’t just do a big bang redesign because I’ve got a design studio and publication to run. What this setup does do though — which I wish could be the case with client work, which are based on budgets and deadlines — is I can pause between cycles of work to reflect on and refine everything. That’s the work and that’s the difference between a good website and an excellent website.

Reader, I want to help you to design and build excellent websites. It’s always been my focus in everything I do as an educator. I’m going to do that by breaking this project down, piece-by-piece and explain what I’m doing and why. At points it’s going to feel like I’m putting immense effort in stuff you might not think is important, but it is all important. By the end — even though I won’t break stuff down line-by-line a lot of the time (I’ve already done that) — I hope you’re going to build confidence to do this yourself, so join me over the next several posts, over the next several months as I turn my website into something I’m truly proud of and hopefully inspire you to do them same.

The format and how this series works

The format of this series is that for each iteration — which we call sprints — there will be several posts breaking it down. For example, there is an iteration that is already live — a “wireframe” version because my first priority was to start with a clean, (mostly) tech debt free codebase. Another iteration will be focusing on the UI design and design system, followed by another iteration where I focus on more deeply integrating the AT protocol, and so on.

I’m always going to be working on stuff, then publishing on a delay. It’s because I make a lot of notes when I’m building and my brain is in “code mode”, not “teaching mode”. By spacing my time building out from explaining and reporting, I’m giving my brain time to work out the best way to communicate the lessons to be learned.

For example, as of today, this is what the website looks like.

Over the next few posts in this sprint, I’m going to break down how we got to there from this.

There has been loads of planning, sketching and of course, building that’s happened between those two states. We’ll get into that more in the next few articles though, so I recommend that you follow along as these posts go live via RSS or get links emailed to you.

Stay tuned.

Advert