The Stuff & Nonsense migration from Statamic to Eleventy went far smoother than I’d expected, and everything seems to be working as intended. Every now and again, I spot a visual bug which must have come from the change in markup patterns. But these have been easy and quick to solve.

My SEO seems to have taken a slight knock, but I’d half expected that. I’ll keep an eye on it over the next few weeks, although more for my own satisfaction than any commercial benefit.

Eleventy in a Box

I blogged about Eleventy in a Box in April. After I wrote about how I’d used it to migrate Stuff & Nonsense from Statamic to Eleventy, several people emailed me and asked how they could use it. I hadn’t intended to turn Eleventy in a Box into a product, but it feels like the right time.

So you can buy Eleventy in a Box now. There are two versions to choose from: “Core” and “Pro. Pro is the version I expect most people will want. Pro costs £99 and it contains the core system, plus all the feature packs, including:

• Blog, with index, category, entry, and tags templates
• Case studies, with index, category, and entry templates
• Changelog, ideal for software providers
• FAQs, with index, category, and entry templates
• Portfolio, with index, category, and entry templates
• Services, with index and entry templates
• Team, with index and entry templates
• Testimonials, with index and entry partials

Eleventy in a Box is a one-time purchase; no subscriptions. You get a commercial licence to build one unique website. If you’re an agency who’d like a multi-site license, let’s talk about your options. You get updates for the lifetime of the product, plus 12 months of email support.

Lockrose

Back onto client work, I started working on a website redesign for energy consultants Lockrose. They have an existing set of visual identity guidelines, some marketing assets, and a website which doesn’t reflect their brand and is underperforming.

My issue with the set of colours Lockrose already has is that when you make tints of them, they look very dirty. I started by adjusting their orange and yellow so they’ll provide a wider selection of usable tones.

My second challenge was their chosen typeface. For their workmark and printable assets, Lockrose had chosen Altivo, which is available on Adobe Fonts.

Whoever developed their previous website had valiantly attempted to skirt around the licence issue by leaning on Poppins, which is available free from Google. Poppins is fine and ubiquitous, so after auditioning dozens of free alternatives, I recommended we switch to Commissioner.

Lockrose has its story, and my job is to help them tell it better by organising their content into a narrative. During the week, I outlined their story in a series of wireframes,

Then, on Thursday, I sketched early illustrations.

I’m leaving Germany on Tuesday, but instead of driving home, we’ve decided instead to drive down to northern Italy for a few days. We’re stopping in Lucerne (Switzerland) on the way there, and then Nancy (France) on the way back. Work needs to continue on Lockrose while we’re away, and I’m looking forward to doing it with a view of the Lake.

There are two versions of Eleventy in a Box to choose from: “Core” and “Pro.” Both give you a clean, practical foundation for building static websites with Eleventy. They include pre-built pages, reusable templates, sensible configuration, modern CSS, and Netlify deployment settings.

Core costs £49 and contains:

• Configurable home page, ready to adapt to your project
• Reusable template files for creating pages quickly and consistently
• Ready-made contact page with contact information and pre-built Netlify form
• Killer Privacy, so your project starts with a privacy policy, not a blank page
• Error pages you can rewrite and restyle to suit your project

Pro costs £99 and includes everything in Core, plus all the feature packs I’ve developed over the past few years:

• Blog, with index, category, entry, and tags templates
• Case studies, with index, category, and entry templates
• Changelog, ideal for software providers
• FAQs, with index, category, and entry templates
• Portfolio, with index, category, and entry templates
• Services, with index and entry templates
• Team, with index and entry templates
• Testimonials, with index and entry partials

Websites built using Eleventy in a Box

These websites all started with Eleventy in a Box, but they don’t look anything alike. Eleventy in a Box gives you a foundation, not a fixed visual style.

Check out the live demo, which has all the feature packs installed.

Pricing

Eleventy in a Box is a one-time purchase; no subscriptions. You get a commercial licence to build one unique website. If you’re an agency who’d like a multi-site license, let’s talk about your options. You get updates for the lifetime of the product, plus 12 months of email support.

Eleventy in a Box isn’t a finished theme. That’s the point. It gives you the structure, patterns, and configuration you need, then gets out of your way. You can change the design, rewrite the content, add your own components, remove sections you don’t need, and shape the codebase around your project. It’s saved me a ton of time. It can do the same for you.

My website’s been through several transitions since I first published it. The original site used MovableType, which was the blogging standard at the time. I then migrated it to ExpressionEngine, when that was the fashionable choice, before ending up on Statamic, which seemed like the natural progression.

On my mind for years

Migrating this website from Statamic to Eleventy has been on my mind for the past couple of years, and there were several reasons for wanting to do it:

1) The only truly dynamic part of my site was the blog. All other content, including my portfolio, shop, and other sections, was hard-coded into Statamic templates. This seemed like a poor way to structure my website.

2) Over time, I added books like Transcending CSS Revisited, demos including Layout Love, and projects like Toon Titles. I created these as standalone sections in their own folders, in the site root, but outside Statamic. This meant they didn’t share the same headers, footers, scripts, or stylesheets with Statamic or with each other.

3) I was never completely comfortable developing with Statamic, and there were always things I wanted to add to the website, but didn’t know how. This was partly due to my lack of knowledge and in part to how Statamic is set up. Either way, even adding something as rudimentary as a contact form seemed like a challenge.

4) A few months ago, I updated my Statamic installation to the latest version. I only used Statamic’s admin to publish blog posts, but after the upgrade, even that became unusable, with a laggy interface and frequent crashes. Whether these were down to the Statamic upgrade or my computer, it didn’t matter. I needed something new.

For the past few years, I’ve developed most of my client projects using Eleventy. At the start, most development was done by Sush. But I slowly got more familiar with how Eleventy works, to the point where I’m very comfortable developing with it myself. Eleventy was the obvious choice for the next CMS migration, but there were several reasons I hadn’t done it:

1) Over 1200 blog posts stretching back over twenty-plus years to 2004. Statamic had these as Markdown files, but migrating them to Eleventy frontmatter and managing categories and tags wasn’t something I relished.

2) Working out a system for bringing those books, demos, and other standalone sections seemed complicated.

3) Preserving URLs while reorganising the website structure seemed challenging.

But the benefits would be huge:

• A simplified file structure I understand how to navigate
• Better portability if I needed to change hosts
• Common components, scripts, and styles across the entire website
• Cleaner separation between content and templates
• The ability for me to develop the new features I wanted

Transition from Statamic to Eleventy

AI coding tools, in particular Codex, not only made the transition from Statamic to Eleventy doable but also relatively straightforward. Using my Eleventy in a Box boilerplate, I worked across the site’s main pages like home, about, and contact, then introduced the sections, including my portfolio.

Instead of static content in a template, portfolio entries became Markdown files. The same applies to my services and the items in my shop. This means I can reuse their data in different ways, including filtering them by categories and tags.

Then, I moved on to the blog. Codex converted all the entry files and even integrated my earliest MovableType entries, which had been separate static HTML files for years. Codex also brought all my separate projects, like Layout Love and Toon Titles, into a common shell with shared assets, a header, and a footer, consistent with the rest of the site. Legacy URLs were all over the place. We managed them with a redirect map, including broad catch-alls for archives, old blog paths, service aliases, and the sections we removed.

I have to say, I’ve been conflicted about using AI tools, but in this instance, Codex turned what I’d thought might be a job that could take several months end-to-end into one that I turned around in just over a week. And that’s with me still writing every bit of CSS and HTML code that gets to the browser. Codex didn’t design the site or code everything. What it did was help me with the kind of repetitive, risky migration work that had been blocking me for years.

Adding to the design

While I was improving the blog and shop sections, I decided to add graphic headlines to my blog’s carousel cards using a variety of typefaces to give them extra personality.

I took the same approach with my Killer Docs products by creating a new suite of product icons.

The biggest benefit of this migration isn’t that my website now runs on Eleventy. It’s the consistency and the fact that I understand how everything fits together. For years, parts of the site were bolted on. Now, it feels like one system. Blog posts, portfolio entries, services, shop products, books, demos, and projects all share the same structure, components, scripts, and styles.

The patient survived. Better than that, it’s awake and needing coffee.

When I was invited to speak at Webinale in Berlin, we decided that instead of flying in and out, we’d combine the conference with a trip to see Alex in Mainz. So we drove over as usual and spent the first week hanging out at Alex’s flat.

I had a couple of things to do during the first week, including making a printed brochure and catalogue for Codeboxx. My first draft was tidy enough:

But a few small layout changes and full-bleed images made the second iteration feel much more polished:

Then, Black Mountain Honey asked me to create a simple set of identity guidelines for a new social channel, hosted by young beekeeper Natasje.

But, first and foremost, my attention was on preparing and practising for my talk at Webinale.

Speaking in Berlin

Last Monday morning, Sue and I took a fabulously long train ride from Mainz, via Frankfurt, to Berlin. My talk wasn’t until Thursday morning, so we had a couple of days being tourists again. The last time we were in Berlin was in 2019, so to get our bearings again, we bought a two-day ticket on one of those hop-on, hop-off buses. To be honest, the first day we didn’t hop off very often, but we enjoyed the views from the top deck, especially after the rain stopped and the roof was pulled back. On the second day, we explored a bit more on foot, including taking in the fabulous views from the Reichstag dome.

Thursday morning was talk time, and by lunchtime we were heading out again for a cruise along the river and then exploring a part of the city we hadn’t been to before. Friday was spent in museums and at Berlin Cathedral, including climbing the many steps inside its dome for more views across the city. Then, on Saturday, we headed back to Mainz by train.

This site has had major surgery

A lull in client work over the past couple of weeks also meant I could pay attention to this website, including migrating it from a Statamic CMS to Eleventy and hosting from DigitalOcean to Netlify. Needless to say, if you’re reading this, I did most of it right.

Paul and I have been working on Black Mountain Honey for the past few months. Paul’s been on the strategy, while I’ve worked on the visual identity and creative, including the website design.

Black Mountain Honey’s current website is built on Wix Studio, but after looking at solutions that will enable the business to scale, Paul recommended a mix of Circle for the community, WordPress, and WooCommerce for the store.

That meant me redesigning several key pages and producing templates for the WordPress developer to work on.

When these designs were approved, I exported all the assets, optimised them, and added them to the style guide library I’d previously created for Black Mountain Honey.

Entire Property Direct

After months on hiatus, I received a surprise message on Wednesday from Entire Property Direct asking me to put the website I’d worked on earlier in the year live. Fortunately, the website was already set up on Netlify, so it took only a few minutes to navigate their domain registrar’s control panel.

A little website for myself

For the past few weeks, I’ve been working on a talk I’ll be giving at a conference in Berlin in a couple of weeks. It’s called The designer’s scrapbook: Rethinking AI as a creative tool.

One example I use to illustrate my process is this animated graphic of my alter ego, Albert Galoshe. It seemed a shame not to use it elsewhere, and as I’d been meaning to make a little website for myself, using Albert felt right.

There’s nothing much to see or do on this new website, but it was a fun way to spend the end of the week before the long Bank Holiday weekend.

My work weeks often vary between projects where my goal is to bring a brand identity to life or reflect a person’s personality with a design, and ones which are more business-focused. Last week was the latter.

A couple of months ago, property developers Aurus hired me to design a website for their Impact Capital initiative. They already had visual identity guidelines and printed collateral, so my design had to follow their direction. Nevertheless, there were still opportunities for me to work with data visualisations to reduce the written copy and make the information more glanceable.

Aurus then came back to me for a redesign of their other website. Again, they had similar visual identity guidelines and printed collateral. This time, I used one of their alternative hues to distinguish the two designs. This website includes twice as much copy as before, so I needed to use layout and typographic hierarchy to avoid it feeling overwhelming.

Websites like Aurus’ often contain interesting facts and figures, and I like to make them features in my design. In this case, I decided to heavily style their development projects portfolio using iconography and large numerals.

Then, I made simpler versions for small screens and to include elsewhere on their website,

Although developing this website will be someone else’s responsibility, I still wrote CSS and HTML and worked in Eleventy to produce a prototype, which should be ninety-odd per cent towards the final development. When I hand the files over to their developers next week, they can choose to stick with Eleventy or use my templates to create a custom WordPress theme.

I’m booked to speak at a conference in Berlin in June about how I use AI tools in my design process. The talk is still a long way from finished, but the central idea is starting to come together. I’m thinking of AI less as a replacement for making and more as a kind of scrapbook: a place to collect, combine, and develop visual ideas. One of the examples I’ve been working on is an image of my French alter-ego, Albert Galoshe.

I take a lot of photographs when we travel to France. They won’t win any competitions, but they give me a useful library of doors, windows, signs, shutters, plants, and odd little architectural details.

I started by making very loose pencil sketches in Procreate on my iPad, tracing over some of those photographs to get their shapes.

Quite often, these sketches are amalgamations of several photographs. I’ll extract the details I want, then scale, skew, and reposition them until they fit the composition.

Then, I add to the loose sketch. When the perspective or proportions are wrong, I ask AI tools to help correct them.

My figure drawing isn’t where I want it to be, so when I need to, I give my rough sketches to the tools and ask them to adjust the pose and proportions to fit the scene.

Once the compositional sketch was ready, I moved into Sketch and blocked in the background colours using vector shapes. I try to use simple shapes and as few path points as possible, partly because I like the look and partly because I want the final SVG to stay small. For this illustration style, I kept the colour palette deliberately limited.

Then, I added details in separate layers, again keeping the number of colours and shapes to a minimum.

Finally, I assembled the elements ready to export as an SVG for animation.

I’m still conflicted about using generative AI tools, especially for illustration. So, when I work on images like this, I think of my role more as a director than an artist.

I know what I want to achieve. I know how the finished piece should feel. I make sketches that are closer to storyboards than to finished drawings, then use generative tools to correct perspective, improve composition, and fill gaps in my drawing skills. That makes the process iterative, and the tools help me get closer to an idea I already had, rather than inventing one for me.

That’s the topic I want to explore in Berlin: not how AI can make pictures from just a prompt, but how it can help people like me make better what I’ve already made better.

That’s one reason I like building with Eleventy. There are no plugin updates to babysit, no theme framework to wrestle with, and far fewer moving parts than in a typical WordPress setup. The site can be fast, stable, and simple to host. But stability isn’t the same as success.

A website can be technically fine and still go quiet. No new case studies. No fresh project pages. No useful updates. No idea which pages are attracting attention, where enquiries are coming from, or what people are looking for before they get in touch. That’s the part I want to help with.

Launching a website is a milestone, but it’s not the finish line. The best websites keep moving after they go live, with small improvements, useful publishing, and a clearer understanding of what attracts attention and enquiries.

What happens after launch

There’s usually a burst of energy before a new website goes live. Then, after the site launches, the momentum often disappears. That’s understandable. Clients have businesses to run, customers to look after, music to write, and products to sell. Updating a website doesn’t feel like a priority unless something breaks or a new opportunity appears.

But a website works best when it’s regularly updated. So when a composer finishes a project, they should show it off. When a business completes a piece of work that would make a strong case study, they should publish it. Services change. Products develop. A newsletter needs writing, or a campaign needs a landing page.

Separating support from momentum

I’ve started separating technical support from post-launch momentum because bug fixes are one thing, but helping a website keep earning attention is another. Post-launch momentum is about asking better questions:

• Which pages are people visiting?
• What kind of enquiries are coming in?
• Which projects, products, or services should be easier to find?
• What could help people understand the value of the work?
• What should be published next?
• What changes would make the site more useful?

Those questions are easy to ignore when there’s no structure around them. So I’ve started building that structure into my process. When I quote a new website project now, I include two ways to keep things moving after launch.

90-day visibility starter

The first is a 90-day visibility starter. Once a site is live, we spend 90 days helping it settle in, understand how people are using it, and make small improvements based on what we learn.

This starter phase includes basic analytics and enquiry tracking, a monthly review of what’s happening on the site, and one focused improvement each month. That might be a content update, a small design refinement, a portfolio addition, a service page change, or another useful adjustment to help the site attract better attention and enquiries.

By the end of the 90 days, the client has a clearer picture of how their website is performing, which pages are attracting interest, and what could help it work harder next. It includes:

• Analytics and enquiry tracking setup
• Subscription to Plausible Analytics
• Monthly visibility review
• Monthly recommendations
• One small website improvement per month
• Short summary report at the end of each month

This isn’t meant to be a huge ongoing commitment. It’s a sensible next step after launch, especially when the site is still new, and we’re starting to see how people respond to it.

Website momentum plan

The second option is a website momentum plan. This is for clients who want their website to stay active with planned updates, useful publishing, and regular recommendations based on what the site needs next. Each month, we agree on one substantial website update to create and publish. That might be a case study, portfolio page, service page improvement, landing page, product page, blog/news post, email newsletter design, or homepage refinement.

The plan includes a short strategy session, interview booking, asset gathering, content shaping, publishing, and a monthly report. It’s designed for clients who want their website to keep earning attention, building credibility, and attracting enquiries after launch. It includes:

• Subscription to Plausible Analytics
• Short strategy session
• Interview booking and asset gathering
• One substantial visibility asset per month
• Content shaping and page structure
• Design, build, and publish
• Monthly recommendations
• Short summary report at the end of each month

Larger additions, campaigns, or more involved publishing work can be quoted separately, but the point of the plan is to make regular progress without turning every small improvement into a separate project.

Why this matters

I don’t want clients to think of launch as the moment a website is finished and forgotten. A good launch gives us a strong foundation. It puts the right structure, design, content, and technology in place. But the real value often comes from what happens next. Not because it needs fixing, but because there’s more to build on.

Keeping momentum going means making sure the website continues to reflect the business, the work, and the people behind it. It means sharpening messaging, improving pages, and learning from what visitors actually do. To me, that’s not oiling; it’s making sure a website doesn’t go quiet after the excitement of a launch.

When I first made my current SVG animated banners, I wanted to let people switch off the animations, so I added a play/pause button. Over the past few months, I added a winter theme, then a spring theme, and a character-collecting card game. What started out as play/pause became a toolbar.

Those animation and theme toggles weren’t clear enough, and there was little affordance showing which options were on or off. So I added new icons to represent the different states.

With a contrasting background colour, the button states are now much clearer to recognise:

#animation-controls .btn[aria-pressed="true"] {
background-color: oklch(0.6664 0.12 239.96); }

I was already using aria-pressed to describe each button’s state, so I used that same attribute as the styling hook:

It’s also now much more obvious whether the spring or winter themes are active.

Now the buttons looked like a more cohesive collection, I wanted to group them into an unintrusive toolbar that wouldn’t obscure the illustrations behind it.

#animation-controls {
background-color: rgba(0,0,0,.25);
backdrop-filter: blur(5px);
scale: .65; }

#animation-controls:hover,
#animation-controls:focus-within {
box-shadow: inset 0 0 10px oklch(0.6664 0.12 239.96);
scale: 1; }

These are subtle changes, but they scratch an itch that’s been there for a while.

Sponsor Unfinished Business

The best way to promote your product or service to the Unfinished Business audience of creative professionals, designers, and developers. Sponsors get one exclusive two-minute ad per episode, live read by me or Rich, which feels personal and relatable. We can use your script or ad-lib, and you’ll also receive a link on each episode’s post, as well as a thank-you on our Bluesky and Mastodon accounts. Interested? We’d love to hear from you.

Support Unfinished Business on Patreon

We also have three monthly membership plans so you can support Unfinished Business on Patreon. $5, $10, and $20 if you’re feeling especially generous. All money goes towards podcast editing and hosting. Support Unfinished Business on Patreon.

My design for Codeboxx was finished the previous week, and since I’d already made some good progress developing the code, the remaining work was mostly about refinements. I had plenty of time to refine the animations and add more subtlety to the interactions.

I hadn’t initially intended my QR code artwork to be used offline, but we decided to turn four of the pieces into a set of postcards, which Codeboxx can include in their deliveries.

We ordered 500 of each from Solopress—my regular print supplier—which will be delivered to Codeboxx next week.

I like seeing my work printed. That doesn’t happen often enough. Then, I was reminded that I’d promised Ryan Knaggs a business card design.

The card had to be a square, which I always prefer because it makes composition much easier. Ryan’s card needed to include the logo I’d designed, his URL, and a QR code containing his contact information.

We ended up with a design that incorporates those elements, along with his “dramatic music” tagline.

The Militant newspaper was launched in 1964 and took its name from the American Socialist Workers Party’s publication. For the first few years, its masthead logo featured a slab serif typeface and the tagline “For Youth and Labour.”

The slab serif lasted six years; in June of 1970, it was replaced by a bold sans-serif, uppercase, with kerning between the “A” and “N” that you could drive a coal delivery truck through.

Less than a year later, in September 1970, the short-lived sans-serif was again replaced with a more characterful, hand-drawn logotype. This included round tittles over the “I”s, one of which cut into the first “T”’s crossbar. Those “T”s are asymmetric, and the lowercase “A” and “N” were slanted.

Strokes were thickened only a few months later, and while the slanted “A” and “N” were retained, the round tittles were replaced with rectangular shapes, and the apex of the “T”s sat on top of shorter crossbars.

This logotype was revised again a year later in November 1973, with a smaller closed counter in the “A”, tighter tracking, increased x-height, and far smaller open counters around the “M.”

In early 1978, the masthead logo was altered again, adopting a contemporary, rounded look. Round tittles made a comeback, the “M” was widened, and the two “T”s lost one arm of their crossbars. It was a thorough modernisation, with only the slanted “A” and “N” from the previous version remaining.

Seemingly unable to resist iterating on this design, three months later in June of 1978, Militant tightened the tracking and the corner radii, creating a more graphic, solid-looking logotype.

Then, in January of the following year, Militant’s logotype changed again. The circular tittles were gone (again,) and for the first time, there were two different “T” shapes. This time, the first “T” had an asymmetric crossbar to avoid it colliding with the “I”’s now rectangular tittle. Also noticeable was the slight curve at the bottom of its stem to wrap it around the “A.” There was also a new angle added to the “M” and “N”’s strokes.

Clearly happy with these refinements, Militant stuck with this version of their logotype for the rest of the newspapers run, before it became The Paper of the Socialist Party in 1997.

Only subtle changes to its angles and a more pronounced wrapping of that first “T” underneath the “A” were made over its almost 20-year lifespan.

I know nothing about who designed or worked on Militant’s design over those decades, but I found it fascinating to look back over the choices those people made. If you know anything about Militant’s designers, I’d love to hear from you (or them.)

Note: Marxist.org has an archive of many scanned copies of Militant from its start in 1964 through to 1997.

The more websites I’ve developed with Eleventy, the more I’ve written the same code over and over. Every new project started the same way: copying files, rewriting patterns, rebuilding features I’d already built dozens of times.

This wasn’t necessarily a deal-breaker, but it was a waste. And honestly, I’d rather spend my time coming up with a great design. So I stopped treating projects as one-offs and started building a system instead. I call it Eleventy in a Box.

I built my system reusing the parts I use on almost every project: boilerplate CSS, layout systems, and a consistent set of naming conventions. That consistency matters. I can move between projects, share code without rewriting it, and switch layouts without renaming components. Now, instead of spending half my time designing and the other half writing code, I’ve reduced development time and can spend more time on design.

Using the same codebase doesn’t mean my designs look the same. If anything, it frees me up to push them further. These websites for Bego Pereda, Mountain Duck, Shared Homeland, and Verkehrsteiner all started from the same core, but they don’t look anything alike.

When clients needed extra functionality like a blog, changelog, FAQs, portfolio, services, or team pages, I stopped baking them into the core. Instead, I broke them out into feature packs. Each pack contains everything it needs: templates, content, styles, and configuration, and knows how to install itself into a project.

Then, I built an “installer” which copies the packs I need into a project, including specific folders, Markdown files, stylesheets, and templates.

So instead of manually setting up every project, I describe what I need and let the system do the work. A prompt like this gets things up and running.

node scripts/add-feature.js <feature>

Using this setup means I can spend less time on repetitive code and more time designing, which matters not just for client projects but also for me. After all, there’s absolutely no fun in doing the same thing day in and day out.

For now, Eleventy in a Box is just for me. I might one day package it and share it more widely.

I like weeks where I can focus on just one project, and last week was all about working for Codeboxx. They sell thermal printers and supplies for the packaging industry to print, amongst other things, barcodes and QR codes. That may sound dull, but there are stories to tell about every business; you just have to find and tell them.

One thing that stood out to me was how the company supplies products which keep production lines running. If there’s a break in supply, those lines could stop. “Knowing what customers will need and when is an art,” they told me. That gave me the idea to recreate famous works of art from QR codes.

I made a series of artworks—including the Mona Lisa, Munch’s The Scream, and several by Vincent Van Gogh—by creating a set of QR code textures with different densities from light to dark. Then, I placed these shaders over reproductions of the paintings.

Product images from this industry are, well, dull. Even the manufacturers’ own product shots look dreadful. So, instead of showing dozens of printheads and ribbons that all look identical, I made animated graphics that represent each product category.

This website design is shaping up nicely, and over the next week, I plan to finish the coding and get it online. Hopefully, that week will be just as productive.

Visit my home page to see this in action. Flowers bloom on the cacti and between the craggy rocks, turning a dry landscape into something more alive.

Instead of creating a separate version of the animated SVG scene, I treated spring as a new layer of behavioural and visual changes and applied it to the same SVG. That meant I could reuse the structure and progressively enhance it with animation, colour, and details.

How I layered seasonal changes in SVG

Adding spring to my animated SVG landscape meant introducing a few new layers:

• A static layer to recolour the background
• Blue, purple, red, white, and yellow flowers

The static layer sits above the base illustration. It lightens the clouds, shifts the sky to blue, and warms the rocks into sandier tones. I treat this as a seasonal mode or reusable layer that changes how the same SVG looks and behaves without duplicating it.

I’m layering changes on top, keeping everything flexible and making maintenance easier. This isn’t just about SVG; JavaScript controls the state, and CSS defines how it looks.

How the mode works

JavaScript determines which mode the animated SVG scene is in. It handles switching, prepares the flowers, and remembers a visitor’s choice when they return. CSS handles how that mode looks—changing colours, revealing elements, and animating them into view. This all hinges on adding a spring-mode class to my SVG.

How flowers are animated

Flowers are hidden by default and become visible when spring mode is active. JavaScript assigns each flower a slightly different delay, so they appear in a scattered sequence across the landscape without an obvious pattern. Each flower starts hidden and scaled down:

opacity: 0;
scale: 0;
visibility: hidden;

When spring mode is active and motion is allowed, the flowers play a short “pop” animation:

@media (prefers-reduced-motion:no-preference) {

#svg-large[data-animations=on].spring-mode .spring-flower {
animation-delay:var(--flower-delay,0s);
animation-duration:1.1s;
animation-fill-mode:both;
animation-name:spring-flower-pop;
animation-timing-function:cubic-bezier(.2,1.45,.35,1); }
}

The animation slightly overshoots before settling, giving a gentle, organic feel:

@keyframes spring-flower-pop {
0% {opacity:0;scale:0;visibility:hidden; }
70% {opacity:1;scale:1.06;visibility:visible; }
100% {opacity:1;scale:1;visibility:visible}; }
}

Respecting reduced motion

Animations only run when visitors haven’t asked for reduced motion. If they have, flowers appear without animation. It’s a small detail, but it keeps the experience inclusive without compromising the design.

The result

Use the flower button to toggle spring mode and see how these layers transform the scene.

Why this approach works

Treating spring as a mode rather than a separate design keeps everything lightweight and flexible. I can evolve the same SVG over time by adding seasonal or thematic variations without rebuilding it from scratch.

Plus, I love that these animated SVGs keep giving me new ways to play with my website.

I don’t enjoy bitty weeks as much as when I’m able to concentrate on one thing for the entire week. Still, it was satisfying to get a few things tucked away.

Mountain Duck

The fellas at Iterate came back with a couple of corrections and suggestions for their animated graphics. The biggest change meant thinking about how to include the desktop as a destination, as I’d already done with the “cloud,” without altering the composition of my graphics.

And, of course, I couldn’t resist adding a hidden Easter egg to one of my animations.

Ryan Knaggs

I’ve been working with Arizona-based composer Ryan Knaggs for the past few weeks, and last week his photographer delivered a stunning set of studio portraits. This meant I could crop, edit, and drop them into my design. They look especially good in the interactive panels on Ryan’s new homepage.

This meant we could transfer Ryan’s domain name and push his site live, done and dusted within a month. I’ll write a proper post about Ryan’s design, but in the meantime, check it out.

Spring has sprung at Stuff & Nonsense

After my friend Rachael came over—and we spent a day setting up her soon-to-launch wedding planning business with an Eleventy-based website—I had an idea for a new graphic animation for Stuff & Nonsense to celebrate Spring.

Head to the home page and press the spring flower button to watch the season change and the desert come to life.

Available in sizes XS to 5XL. These organic cotton t-shirts are made from sustainable materials and printed in Teemill’s renewable energy-powered factory.

Every purchase helps fund HOPE not hate, an organisation dedicated to challenging the far right in Britain and building communities based on unity and compassion.

Some weeks are “bitty,” and I need to jump from one thing to another. Those are the weeks I find the hardest. Fortunately, last week wasn’t one of those, as I was able to concentrate fully on a set of animated graphics for a new website design for the Mountain Duck app.

This design and the illustrations that go into it are intended to portray Mountain Duck as a product that lets people work with files in cloud storage and servers, as if they were on a local disc. Everything works transparently in the background, and files always stay in sync, so people never need to worry about where their files are.

So I created a series of duck machines, with this one intended for the home page. Here’s that CSS/JS animated SVG on CodePen:

See the Pen An animated SVG illustration for Mountain Duck by Andy Clarke (@malarkey) on CodePen.

My intention was to make the illustration feel meaningful, mechanical, and playful using bubbles, moving background elements, and streams of files travelling through different parts of the scene. The result should look effortless, which usually means there’s a lot going on behind the scenes. I built this with inline SVG, CSS, and vanilla JavaScript.

SVG was the right tool

I wanted to target individual parts of the artwork directly, style them with CSS, and use JavaScript only where timing or spawning logic genuinely needed it. Instead of treating the SVG as one asset, I structured it as a collection of moving parts: bubbles, buttons, cogs, dials, and file icons.

SVG structure matters, so I exported the static elements first and optimised them as much as possible by reducing the number of path points and merging them. Then, I brought in the animated elements one by one, adding CSS animations and the occasional bit of JavaScript as I went. CSS handles motion while JavaScript dictates when things happen and what values each instance should use. I made an initial pass for each animated element, then refined them over several iterations. This is the part I enjoy most. Not just making something move, but making it move in a way that feels intentional and natural.

More work from the week

This home page illustration wasn’t the only animation I made for Mountain Duck last week. There are several others which may find their way onto the new website I’m designing.

All in all, last week was productive, and I feel good about what I achieved.

I started using ChatGPT and DeepSeek to help me fix bugs and debug error messages, especially when I was new to working with Eleventy. I asked them questions, pasted in code, and then copied the result back into my project. Now, I use Codex to clone my boilerplate files and set up new projects. But whenever I started something new, I had to tell the machine my preferences again.

Machines don’t write code the way I do, so I constantly needed to reorder CSS selectors. Machines use too many class attributes and overly specific selectors, and don’t format CSS and HTML the way I like. When I switched to Codex, I realised there was a way to stop repeating myself by telling it ways to make the machine’s code more like mine.

The AGENTS.md file

Codex supports files called AGENTS.md, which is to a machine what a README is to fleshy ones. It can tell an agent what I care about and how I write code. It also defines a set of rules which prevent me from repeating myself at the start of every project.

You can add an AGENTS.md file to any project repo or put one into Codex’s hidden global config folder, which is in the root of your user directory (on a Mac.) Putting preferences there means that every new project starts using them.

~/.codex/AGENTS.md

I included a list of five things I was constantly correcting and needed the machine to stop doing. Here’s my global file:

# AGENTS.md## Core rules

- Prefer plain CSS and vanilla JavaScript.
- Prefer inline SVG when control, styling, or reuse matter.
- Use native platform features. Avoid dependencies and libraries.
- Use semantic HTML.

## CSS rules
- Don’t indent CSS declarations.
- Don’t use the `transform` shorthand property. 
- Keep the closing curly brace on the same line as the last property.
- Order all CSS properties alphabetically.
- Prefer shallow selectors and avoid deep selector chains.
- Use individual transform properties (`rotate`, `scale`, `translate`).

## Motion
- Always respect `prefers-reduced-motion`.
- Motion should be subtle, purposeful, and non-disruptive.
- Use CSS for animation and JavaScript for triggers.

## Writing
- Use British English.
- Use sentence case for headings, interface copy, and labels.

Quickly running through that list:

1. By telling Codex I prefer native platform features, I get solutions that rely more on CSS, which is faster and much easier for me to work with.

2. Machines will also happily wrap everything in <div> elements unless I tell it otherwise. I want meaningful structure, so I ask it to prioritise semantic elements like <article>, <header>, <footer>, and <section>. I also work mostly with inline SVG because I need control over animation and styling, so I make that explicit too.

3. I’m especially picky about how I write CSS. Nothing AI did was technically incorrect; it just wasn’t my way of doing things. My AGENTS file tells the machine to write properties in alphabetical order, so I can scan them more quickly. I also want consistent formatting and simple selectors, so code stays easy to read.

4. When I animate, I’m often aiming for ambient motion to add atmosphere. I also need animations that respect someone’s motion preferences, not as an afterthought.

5. Finally, when adding UI copy such as button text and form labels, I want British English spelling in sentence case.

AGENTS.md as a project brief

A global AGENTS file gets used by every project, but putting one in a project repo makes it act more like a brief. Here’s the boilerplate file I use with Eleventy projects:

# AGENTS.md## Overview
- This is an Eleventy project.
- Follow existing patterns in templates, styles, and naming.
- Make the smallest change that solves the problem cleanly.
- Don’t write new code unless absolutely necessary.

## Structure
- `src/` contains all source files.
- `src/_includes/` contains layouts and partials.
- `src/css/` contains global and component styles.
- `src/js/` contains small progressive-enhancement scripts.

## Working approach
- Don’t refactor unrelated code.
- Reuse existing patterns before creating new ones.

## HTML
- Don’t add unnecessary wrapper elements.
- Reuse existing partials where possible.
- Use semantic HTML elements.

## CSS
- Extend existing styles before creating new ones.
- Follow the global AGENTS.md for formatting and style rules.
- Keep selectors shallow and readable.
- Place media queries at the end of stylesheets.
- Use `.alt-*` for variations and `.item-*` for content types when needed.

## JavaScript
- Always use progressive enhancement.
- Don’t use JavaScript if HTML and CSS can solve the problem.
- Keep scripts small and vanilla.
- Scope behaviour to the relevant component or page.

## Eleventy
- Don’t duplicate already defined logic.
- Reuse existing collections, data files, and filters.
- Check if the content fits an existing collection before creating a new one.

## Verification
- Run the local build before finishing.

Wrapping up

I started using AI coding tools to free up time by avoiding repetitive tasks. AGENTS files define the rules the machine should follow, so I don’t have to also spend time editing its code to suit my style.

• Global AGENTS.md
• AGENTS.md project brief

Typography design

I always start with type, because it sets the tone for everything else, and I’ve developed a process for selecting type that balances personality with readability. For this project, I needed a readable typeface which isn’t overly academic-looking.

That process lets me shortlist a handful of typeface options to present to a client. I don’t ask clients to make the decision, as that’s my job. Instead, I help them respond to how type feels. I asked the team about which typefaces “felt right” to them.

Understanding the voice

Typography isn’t just about readability—it’s about a typeface’s tone of voice. I always demonstrate the characteristics of several typefaces to find out what they say. Are they neutral or opinionated? Approachable but still serious?

I explore how they look in branding, especially an organisation’s name, as that provides the first impression and can set the tone for the rest of a design.

Then, I test typefaces in real contexts—headlines, lists, and paragraphs—so I can see how they behave in the design, not just in isolation. I create what I call type sheets and always use copy as close as possible to what I’ll be setting in the design. If copy’s not available—which it often isn’t at the start of a project—I write my own, rather than use dummy lorem ipsum.

I study individual letterforms, looking for specific characters that can either add personality through a distinctive design or could be dealbreakers if they don’t look or feel right.

I also look at the design of numerals and special characters, which is important when client content will contain facts and figures.

Finally, I settled on Bankside Sans—designed by Dalton Maag. Bankside Sans has “clear, classic letter shapes (that) convey intent, while its extreme widths deliver impact.” It has a license fee that’s well worth paying for a variable font that perfectly balances approachability and seriousness.

Working through creative concepts

One of the parts of a project I enjoy the most is thinking of creative ways to tell stories through my choice of graphics, illustrations, and photography. Looking back through my folders, I’m reminded how many ideas never make it past a first iteration—and that’s never a failure. Design decisions are often subjective, so every attempt becomes a conversation.

My first creative concept included illustrations of birds which are native to Israel-Palestine, including the Eurasian Hoopoe and the Palestine Sunbird. Birds cross national boundaries, and using them seemed like a concept worth developing. But the Shared Homeland Paradigm team thought differently.

Instead, I incorporated topographical maps of the region and other ancient maps which were drawn before the state of Israel was formed. This idea resonated with the team.

Designing the colour palette

Colour is highly evocative and needs careful consideration, especially when dealing with sensitive subjects like Israel-Palestine. I started by studying the colours in the region’s flags, avoiding Israeli blue, and Arabic green and red.

First, I devised a new set of colours which have cultural associations for people in the region and included:

• Yellow: Happiness, optimism and warmth
• Orange: Love, happiness, humility and health
• White: Absence of colour, represents death and mourning
• Black: Can represent rebirth and mourning

Then, I created a second palette of blues, greens, and greys, which represent the earth, sea, and sky.

This second palette combined well with a set of simplified shapes, which represent populated areas overlaid on a map made before 1948.

Pulling everything together

The Shared Homeland Paradigm team needed a website on which they could add:

• Background papers
• Resources
• Scenarios for peace in the region
• Terms for their Alternative Lexicon

To make that happen, I developed their website using the open source Eleventy CMS (Now Build Awesome.)

When I design content-rich websites, I use layout, typography, and graphics to tell the story—not just the words on the page. This project brought together everything I care about in story-led web design—graphic design, layout, and typography, working together.

My typeface choice echoes their voice, and the SVG graphics help to tell their story. For organisations like The Shared Homeland Paradigm, a website isn’t just about presenting information. It’s about helping people understand complex issues and engage with them. Websites that make more people aware of sensitive subjects, help them understand the issues, and show how we might solve them are always the ones I want to work on.

A clearer, more confident direction

This was a redesign of a membership-focused website for a music organisation, with a strong emphasis on conversion, content discovery, and editorial-style layout. The Academy of Scoring Arts’ previous website felt bland and dated. It lacked a clear visual identity, and the benefits of joining weren’t obvious. I wanted to change that. The new design is bold, confident, and more expressive—better reflecting the energy of the Academy’s community while still looking professional.

That meant walking a fine line between personality and professionalism. Too safe, and the design fades into the background. Too expressive, and it risks undermining trust.

Typography as the defining element

Type plays a central role in the design. I chose Bankside Sans by Dalton Maag. It’s an early British grotesque reinterpreted for modern use, with clear letterforms that give it authority, while its extreme widths add impact and flexibility.

I used it to establish a strong, consistent voice across the site:

• Bold, condensed headlines
• Careful attention to typographic detail
• Layouts which rely on type as much as imagery

The result is a design where type isn’t just functional, it’s a defining characteristic.

A restrained colour system

The colour palette I chose is deliberately limited. Light and dark form the foundation, with just two accent colours used sparingly. There’s no shading or visual noise—everything is clean, direct, and intentional. This restraint helps the typography and layout do more of the work, and gives the site a confident, considered feel.

Structured layouts with editorial influence

Unlike some of my more expressive work, this design uses a straightforward 12-column grid. But within that structure, I leaned heavily on modular, editorial-inspired layouts—particularly for the video library and gallery.

These modular systems:

• Make content easier to scan
• Create rhythm and variation
• Allow the design to scale without becoming repetitive

It’s a reminder that even a conventional grid can feel distinctive when it’s used with intent.

Designing for clarity and conversion

The most important goal of this project was to increase member sign-ups. That meant making the value of joining obvious, and reducing friction wherever possible. I focused on:

• Better organisation of video content
• Clearer messaging around benefits
• Deliberate calls to action
• Stronger visual hierarchy

The result is a website that looks better—and works harder.

Interaction and detail

The interaction design for The Academy of Scoring Arts is subtle. There are no large animated elements, just micro-interactions and hover effects that add polish without distracting from the content.

Bringing it all together

This project reinforces something I believe strongly: even with conventional content and a standard grid, a website can feel distinctive, communicate clearly, and drive real results when design decisions are made with intent. I’m especially pleased at how well Sush Kelly implemented my design into the Academy’s WordPress CMS.

Websites like this, for The Academy of Scoring Arts, is the kind of work I like to focus on—designing websites for creative organisations where editorial layout, typography, and structure work together to improve clarity and conversion.

Bego was looking for a website to demonstrate her work and introduce herself to new clients. She wanted something which reflects her interests, personality, and the experience of working with her. This is exactly the type of project I love to work on.

Type design

I always start with type, because it sets the tone for everything else. I’ve developed a process for selecting type that balances personality with readability. The typeface Bego chose for her YouTube showreel gave me some idea of the style she preferred: irregular, quirky, and unconventional.

Over the years, I’ve developed a process that lets me shortlist a handful of typeface options to present to a client. When I do that, I don’t ask clients to choose typefaces—that’s my job. Instead, I help them respond to how type feels. I asked Bego about which typefaces “felt right” for her and how she wanted to express herself.

Understanding the tone

Typography isn’t just about readability—it’s about how something feels. That can be very subjective, so I always demonstrate the characteristics of several typefaces to find out how they make someone feel. Are they formal or informal? Approachable but still professional?

I explore how they look in branding, especially a person’s name, as that is possibly the most personal design element I can work on.

Testing type in context

I also need to bear in mind other typefaces I might include in a design. In Bego’s case, this involved evaluating how the combination of a highly stylised typeface with another, more readable one for setting longer passages of text.

For stylised typefaces like this one, I need to understand how much text I can set and the size I need to make it legible in both upper and lowercase.

Writing copy for type testing

I always test typefaces in real contexts—names, paragraphs, and combinations—so I can see how they behave in the design, not just in isolation. I create what I call type sheets to determine at what size I should switch to a more readable typeface. I always use copy as close as possible to what I’ll be setting in the design. If copy’s not available—which it often isn’t at the start of a project—I write my own, rather than use dummy lorem ipsum.

I study individual letterforms, looking for specific characters that can either add personality through a distinctive design or could be dealbreakers if they don’t look or feel right. This can be especially important when considering the letters in a company, person, or product’s name.

I also look at the design of numerals and special characters, which is important when client content will contain facts and figures.

For someone like Bego, who speaks Spanish, I also need to ensure that any typeface I choose includes any accents, special characters, and punctuation we don’t have in English.

Finally, I settled on Fido—designed by Canada Type—for branding, headlines, and short blocks of text, and paired it with Archivo Condensed—by Omnibus-Type—for longer passages of copy. Archivo is available from Google, whereas Fido has a license fee I was happy to pay. This combination gave me a typographic system that felt distinctive but still readable.

Animating SVGs with CSS and JavaScript

I use a combination of CSS and JavaScript to animate SVG graphics—CSS for continuous motion and JavaScript to control when animations start and stop.

Bego loves retro music tech, especially cassette tapes and reel-to-reel tape recorders. I wanted to recreate them both using SVG and explore ways to connect animation with playing her music.

In my cassette tape, I created a base layer which contains its static elements. I optimise SVGs by reducing points, merging paths, and stripping unnecessary data to keep them lightweight. After optimising it with SVGOMG, the cassette graphic weighs less than 12 KB.

I separate every SVG into a static base layer and independent animated elements. That way, I can control motion without affecting the rest of the graphic. Then, I added the animated elements, including the cassette spools and tape, which moves between them.

By naming paths and carefully structuring the SVG, I can reuse the same graphic in multiple variations—changing colours, labels, and details without duplicating the artwork. I was able to make as many cassette versions as I needed, with different colour branding, labels, and plastic cases.

I used the same approach for Bego’s animated tape reels and covers, where the reel slides out of its cover when the cursor moves over it.

Combining CSS animation with JavaScript control

For more complex interactions, I use JavaScript to control when animations run, rather than how they move. The large reel-to-reel tape recorder on Bego’s home page was by far the most complex graphic, even though it again weighs less than 12 KB.

I broke this graphic down into its animated and static components.

I use CSS for continuous, predictable animation like rotation and movement, and JavaScript to control state—starting and stopping animations based on user interaction or audio playback. CSS handles the motion, while JavaScript adds an is-playing attribute so animations only run when Bego’s music is playing.

Designing for interaction

Static deliverables like PDFs, and even interactive tools like Figma, can give an indication of how a design will feel. But they can’t replicate the experience of interacting with a real website. For that, I need to work in the browser using HTML, CSS, JavaScript, and SVG.

I spend several days experimenting with interactions—building, testing, and revisiting a design repeatedly to ensure it still feels right. If it doesn’t feel right in the browser, it isn’t right, no matter how good it looked in a mockup.

Bringing it all together

When I design portfolio websites for artists like Bego, I try to express who they are, not just present their work. This project brought together everything I care about in web design—animation, illustration, layout, and typography working as a single system.

The type choices shaped the tone. The SVG graphics gave the design personality, and animation brought it to life—subtly, but meaningfully. For artists like Bego, a website isn’t just a portfolio. It’s an experience. And that experience should reflect not just what they make, but who they are.

That’s what I’m always aiming for.

Listen to all tracks from this episode on Apple Music.

Sponsor Unfinished Business

The best way to promote your product or service to the Unfinished Business audience of creative professionals, designers, and developers. Sponsors get one exclusive two-minute ad per episode, live read by me or Rich, which feels personal and relatable. We can use your script or ad-lib, and you’ll also receive a link on each episode’s post, as well as a thank-you on our Bluesky and Mastodon accounts. Interested? We’d love to hear from you.

Support Unfinished Business on Patreon

We also have three monthly membership plans so you can support Unfinished Business on Patreon. $5, $10, and $20 if you’re feeling especially generous. All money goes towards podcast editing and hosting. Support Unfinished Business on Patreon.

The best way to promote your product or service to the Unfinished Business audience of creative professionals, designers, and developers. Sponsors get one exclusive two-minute ad per episode, live read by me or Rich, which feels personal and relatable. We can use your script or ad-lib, and you’ll also receive a link on each episode’s post, as well as a thank-you on our Bluesky and Mastodon accounts. Interested? We’d love to hear from you.

Support Unfinished Business on Patreon

We also have three monthly membership plans so you can support Unfinished Business on Patreon. $5, $10, and $20 if you’re feeling especially generous. All money goes towards podcast editing and hosting. Support Unfinished Business on Patreon.

Many design platforms started out as places to share work with friends. Then they became feeds. Then they became popularity contests. Then they became businesses built on attention. Along the way, the joy went missing. I want to bring it back.

I wanted somewhere where I could share what I’m working on every day, not a pseudo-portfolio, or a place to attract work. So, on sho!io, you post one thing a day. It can be an illustration, a layout, a sketch, or an unfinished work in progress. It doesn’t have to be perfect. It just has to be yours.

You can follow people, and they can follow you back, but no one else can see who you follow or who follows you. Likewise, you can like someone’s post, and they can like yours, but no one else can see how many likes a post received.

There are no public follower counts, visible popularity contests, and no pressure to perform. You can keep your profile private and share only with people you trust. Or it can be public. It’s your work, so your decision.

Building an app from scratch isn’t something I’ve done before, so building sho!io was a real journey into unexplored territory, as I had to create a Postgres database in Supabase and set it up using SQL queries. But, with a little help here and there, I managed it, and the scripts which enable membership, following, liking, and posting.

I know it can be improved massively, so if more people want to use it, I plan to find a developer who can help it scale.

Right now, I’m ready to open up sho!io to a few people. It’s early and very much still in progress, but I’d really value your feedback if you’re up for trying sho!io. Add your name to the wait list, and I’ll send 25 invites a week for the next few weeks.

Join the wait list

Sponsored by Contract Killer

Most web design contract templates are stuffed with boilerplate content your clients will never read. Contract Killer covers everything—payments, revisions, scope, and timelines—in plain, human language. Trusted by designers for over a decade. Peer-reviewed, fully customisable, and built to keep projects on track, and your invoices paid.

Buy Contract Killer

Also available on YouTube

For anyone who can’t get enough Unfinished Business, we publish the show in video format on YouTube.

Sponsor Unfinished Business

The best way to promote your product or service to the Unfinished Business audience of creative professionals, designers, and developers. Sponsors get one exclusive two-minute ad per episode, live read by me or Rich, which feels personal and relatable. We can use your script or ad-lib, and you’ll also receive a link on each episode’s post, as well as a thank-you on our Bluesky and Mastodon accounts. Interested? We’d love to hear from you.

Support Unfinished Business on Patreon

We also have three monthly membership plans so you can support Unfinished Business on Patreon. $5, $10, and $20 if you’re feeling especially generous. All money goes towards podcast editing and hosting. Support Unfinished Business on Patreon.

It has all the hallmarks of a Big Pilot, with an oversized onion crown and a large, clear display. From a reasonable distance, it looked very similar to an IWC Big Pilot and coffee shop watch nerds commented on it more than once.

I bought one in a sale for around AUD $400 and loved it. That was until the crystal mysteriously cracked during some very hot weather, and it’s been in a drawer ever since.

I really must send it back to Panzera for repair, although I suspect that will cost me more than what I paid for the watch when I bought it.

The Timex x Pan Am Waterbury bears more than a passing resemblance to the latest addition to IWC’s iconic Big Pilot line, the Big Pilot 43, which is on my wrist now. But it most closely resembles IWC’s Pilot’s Watch Mark XX. You can see just how closely Timex followed IWC when the two dials are scaled to match.

The Timex’s hour and second hands match the IWC Mark XX, while the minute hand is straighter. Its date window is the same size, although I’m unsure why the dot—between it and the marker in the 3 o’clock position—was necessary. Placing the word “Automatic” under the 6 is neat and leaves room for the Pan Am logo above. I actually prefer this placement to IWC’s, where it’s beneath the Mark XX type. The size relationship between the words “Timex” and “The Waterbury” looks identical to that between “IWC” and “Schaffhausen.”

Timex did a nice job of placing the Pan Am logo on the crown and using its signature blue on the inside of the strap.

On the dial, the line between that famous logo and the plane icon at the 12 o’clock position comes straight from Pan Am’s design history.

I don’t know which typeface Timex chose for their numerals on the Waterbury dial, but it certainly isn’t the Helvetica, which Pan Am briefly switched to between 1970 and 1973.

Oh, and if you’re curious how Helvetica looks on a watch dial, IWC used it for the numerals on its 1993-released Mark XII.

I suppose that, being a collaboration with Pan Am, the question to answer is whether this is a successful pilot’s watch design? I’d say it is. It’s not overly large, but it is legible. The skinny minute hand isn’t as obvious as IWC’s, and there’s that inexplicable dot next to the date window, but as an homage to the pilot’s watch, it’s nice. Is it more than an homage to IWC’s iconic Big Pilot design? I’d say so.

But I like it. Hell, I might just buy one for fun to wear places and times when I wouldn’t be comfortable wearing the real thing.

I’ve been writing about CSS relative colour properties for Smashing Magazine, but until those articles land, here’s the short version.

Instead of specifying my characters’ skin tones in the SVG using a fill value:

<path fill="#F7F1ED" class="skin-highlight" d="[…]"/>
<path fill="#F7BEA1" class="skin-mid" d="[…]"/>
<path fill="#BA7E5E" d="[…]" class="skin-dark" />

And changing the colours via those class attributes, I removed the fill attributes altogether and replaced them with inline styles, which include custom properties:

<path style="fill: var(--skin-mid);" d="[…]"/>
<path style="fill: var(--skin-mid);" d="[…]"/>
<path style="fill: var(--skin-dark);" d="[…]"/>

Now, before you rush to your keyboard to tell me that inline CSS is bad, when used with custom properties, it’s very, very good indeed. As for those custom properties, they’re not just plain ol’ colour values; they’re a colour system. To start with, yes, I have those normal skin colours:

--skin-highlight-base: #F7F1ED;
--skin-mid-base: #F7BEA1;
--skin-dark-base: #BA7E5E;

I used them to turn Hex into OKLCH so I could manipulate each channel separately:

--skin-highlight: oklch(from var(--skin-highlight-base)
calc(l + var(--env-l))
calc(c * var(--env-c))
calc(h + var(--env-h))
/ calc(alpha * var(--env-a)) );

Those --env-* variables define how much each colour channel shifts. These are my placeholders, which leave the original colours untouched:

.outlaw {
--env-l: 0;
--env-c: 1;
--env-h: 0;
--env-a: 1; }

Snow mode is a toggle, so I then defined a new set of variables just for when it’s active:

.snow-mode .outlaw {
--chilly-l: -0.04;
--chilly-c: 0.35;
--chilly-h: -38;
--chilly-a: 1; }

Rather than changing the base environment values, I introduced a second set specifically for cold conditions. Then swapped the environment variables for chilly ones:

--skin-highlight: oklch(
from var(--skin-highlight-base) calc(l + var(--chilly-l)) calc(c * var(--chilly-c)) calc(h + var(--chilly-h)) /
calc(alpha * var(--chilly-a))
);

Then, I registered those properties to make them animatable:

@property --chilly-l {
syntax: "";
inherits: true;
initial-value: 0; }

@property --chilly-c {
syntax: "";
inherits: true;
initial-value: 1; }

@property --chilly-h {
syntax: "";
inherits: true;
initial-value: 0; }

@property --chilly-a {
syntax: "";
inherits: true;
initial-value: 1; }

And added a transition so the characters start off looking warm and then get progressively colder:

@media (prefers-reduced-motion: no-preference) {
.outlaw {
transition:
--chilly-l 15s ease,
--chilly-c 10s ease,
--chilly-h 10s ease,
--chilly-a 10s ease; }
}

I love adding surprise behaviours—especially ones that reinforce the idea that these characters are reacting to their environment. So now, when someone hovers over a chilly character, they also shiver:

@media (prefers-reduced-motion: no-preference) {
.snow-mode .outlaw:hover {
--shiver-duration: 0.5s;
--shiver-x: 1.5px;
--shiver-y: 0.4px;
animation: shiver var(--shiver-duration) ease-in-out infinite;
transform-origin: center bottom; }

These are subtle changes, but they add to the fun. Most importantly, by changing the way I set up colour for my animated graphics, I can have much more fun more easily in the future.

Check out the new chilly characters on my home and blog pages.

This time, I set my Magnificent 7 pioneers in the entrance to a gold mine. There’s dust in the air, gold shimmering, and oil lamps glowing and swinging.

Sketching the scene

I started with a loose pencil sketch.

Preparing SVG elements for animation

I moved the artwork into Sketch to make my vectors. When designing SVG for animation, I separate anything that might move into its own element, so I can control it independently later:

• Background buckets swaying
• Dust particles in the air
• Lamps glowing and swinging
• Pile of gold shimmering

Layering animation effects

CSS animations make the buckets sway, and lamps swing, then a little vanilla JS spawns and animates the dust particles and gold shimmers. Here’s the gold mine graphic on its own, so you can see all the components.

As I said before, I’ve been having way too much fun with my website since I implemented the new pioneer characters, so I doubt this will be the last time I add new features. In fact, I guarantee it won’t be.

Visit my home page or blog to see that winter’s set in. On the home page, snow now covers the cacti and craggy rocks. On my blog, it’s settled on the buildings. And, unless animations have been turned off, snowflakes drift down from the sky. Brrrrr.

Adding snow to my existing animated graphics was surprisingly easy. I added three layers to my SVGs:

1. Falling snow
2. Settled snow
3. Chilliness overlay

That overlay lies on top of the background elements. It has a blue fill colour and a blending mode that cools whatever’s behind it. I think it’s incredible how much of a difference a colour blend can make to how the artwork feels. Then, alongside the button which starts/stops all animations, I added another which toggles the snow.

Toggle snow mode on and off to see the effect of these layers.

As you might’ve noticed, I’ve been having way too much fun with my website since I implemented the new pioneer characters, and in my mind, there’s nowt wrong with that.

Like 20,110,000^* others, the Academy of Scoring Arts website was topped by a full-width banner with a faded background image, intro text, and a big ol’ button. The image was somewhat relevant; the text did, at least, explain what the website is about; and the button was, well, big. But by now, most people have trained their brains to scroll straight past banners like this to get to the real content.

What I wanted instead was something that reflected the messages I cared about communicating—community, connections between musicians, and musicality.

I’m a big admirer of Erik Nitsche’s work. He’s best known for the annual reports and posters he designed for General Dynamics, but it’s his album covers—those mixes of colour, shape, and distinctive typography—that I return to most often.

Dozens of Nitsche’s covers went into my research folder, but the piano-key graphic from The Amazing Bud Powell, Vol. 5 stood out. Early in the design process, with only placeholder graphics needed for first concepts, there was very little difference between my version and Nitsche’s original.

At this stage, graphics like these are valuable talking points as I get to know a client and their likes and dislikes. The feedback was clear: the Academy is less jazz-oriented and more orchestral. More importantly, the graphic didn’t convey a sense of community or connection. That sent me in a different direction.

While visiting an abstract art exhibition in the summer, I saw work by Juan Gris, Wassily Kandinsky, Joan Miró, and Pablo Picasso. Gris’s cubist paintings resonate with me more than Picasso’s, so experimentation began with a graphic inspired by his 1913 painting Still Life With a Guitar.

These sketches used flat colour and no texture—enough to test the idea with the team without over-committing. The increased energy landed well, but the concept itself didn’t. It still felt too literal. The idea was worth pushing further, though. To make it more abstract and energetic, I looked to Kandinsky. His paintings are full of movement, and that sense of motion felt right for a community of composers.

Drawing abstract lines and shapes, with added shading and transparency, created more depth. The result was closer to what I had in mind. From there, I also explored a looser, more free-flowing direction inspired by Joan Miró.

These were by far my favourite artist-inspired designs. The Academy team weren’t convinced and asked me to explore a different direction, including images of their members to emphasise the community aspects of their work. I still wanted to communicate connections, so I added lines connecting the people and made parts of them pop out of the shapes to loosen the composition and give it more energy.

This was the direction the Academy team felt best reflected their brand and what they aimed to communicate to their members.

Looking back through my folders, I’m reminded how many ideas never make it past a first iteration—and that’s never a failure. Design decisions are often subjective, so every attempt becomes a conversation. Those conversations matter, because they’re how I move past my own preferences and get closer to what a client is trying to express. In the end, it’s those conversations that shape the final result far more than any single idea.

* May not be entirely accurate, but what the hell.

The Toon Text generator lets you use those properties to create Toon Text from presets or from scratch and see the results instantly.

Updates to Toon Text

As my collection grows, I wanted to add filtering to the page based on how I tag each example. There’s now navigation which filters the examples by tag, for example filter. JavaScript automatically populates this navigation from my tags and displays how many examples are tagged.

Previously, I’d added buttons which navigated to the Toon Text generator. Now, JavaScript reads the computed styles of each example and passes them to the generator to use as starting points for creating new Toon Text. It even passes the title text.

Updates to the Toon Text generator

As I mentioned, navigating from the Toon Text gallery to the generator now allows you to use its styles as starting points. I’ve also added new presets and a sticky contenteditable preview box.

I’ll no doubt refine both of these over time, but for now, here’s my updated Toon Text styles gallery and Toon Text generator. You might also like my more accessible text splitting tool, Splinter.js. which I also introduced today.

The problem

It’s an approach that keeps HTML readable and semantic, while giving me the fine-grained control I need to recreate the uneven, characterful typography you see in classic cartoon title cards. However, this approach comes with accessibility caveats, as most screen readers read text nodes in order. So this:

<h2>Hum Sweet Hum</h2>

Reads as you’d expect:

“Hum Sweet Hum”

But this:

<h2>
<span>H</span>
<span>u</span>
<span>m</span>
[…]
</h2>

That can be interpreted differently depending on the browser and screen reader. Some will concatenate the letters and read the words correctly. Others may pause between letters, which in a worst-case scenario might sound like:

“H…” “U…” “M…”

My solution, Splinter.js

To activate my Toon Text splitter, add a data-split="toon" attribute to the element you want to split:

<h2 data-split="toon">Hum Sweet Hum</h2>

First, Splinter.js separates each word into individual letters and wraps them in a span element with a toon-char class and aria-hidden attributes applied:

<span class="toon-char" aria-hidden="true">H</span>
<span class="toon-char" aria-hidden="true">u</span>
<span class="toon-char" aria-hidden="true">m</span>

The script then takes the initial content of the splintered element and adds it as an aria-label attribute to help maintain accessibility:

<h2 data-split="toon" aria-label="Hum Sweet Hum">
<span class="toon-char" aria-hidden="true">H</span>
<span class="toon-char" aria-hidden="true">u</span>
<span class="toon-char" aria-hidden="true">m</span>
</h2>

Lines of text separated by <br> elements are wrapped in a span element with a toon-line class attribute applied:

<h2 data-split="toon" aria-label="Hum Sweet Hum">
<span class="toon-line">
<span class="toon-char" aria-hidden="true">H</span>
<span class="toon-char" aria-hidden="true">u</span>
<span class="toon-char" aria-hidden="true">m</span>
</span>
[…]
</h2>

With those class attributes applied, I can then style individual characters as I choose.

My goal is make a text splitter which is more accessible than others I’ve found. If you’re an accessibility expert, I’d love to hear your thoughts and suggestions for how to improve Splinter.js.

I also wanted to make Splinter.js small, really small. The minified script file weighs in at only 1.3Kb. If you’re a Javascript expert, I’d love to see your improvements. Splinter.js is available on GitHub.

So here’s Splinter.js, a lightweight and (hopefully) more accessible text splitting tool.

]]> 2025-12-13T00:00:00Z https://stuffandnonsense.co.uk/blog/i-made-a-tool-to-generate-toon-text/ My Toon Text tool enables you to add colours, strokes, and multiple text shadows. You can change the paint order, apply letter-spacing, and preview your text using a few sample fonts. Then, you can copy the CSS to your clipboard to use in a project.

I’ll no doubt refine it over time, but for now, here’s my Toon Text generator. You might also like my growing collection of Toon Text examples, inspired by classic Hanna-Barbera title cards.

Sponsored by Contract Killer

Most web design contract templates are stuffed with boilerplate content your clients will never read. Contract Killer covers everything—payments, revisions, scope, and timelines—in plain, human language. Trusted by designers for over a decade. Peer-reviewed, fully customisable, and built to keep projects on track, and your invoices paid.

Buy Contract Killer

Also available on YouTube

For anyone who can’t get enough Unfinished Business, we publish the show in video format on YouTube.

Sponsor Unfinished Business

The best way to promote your product or service to the Unfinished Business audience of creative professionals, designers, and developers. Sponsors get one exclusive two-minute ad per episode, live read by me or Rich, which feels personal and relatable. We can use your script or ad-lib, and you’ll also receive a link on each episode’s post, as well as a thank-you on our Bluesky and Mastodon accounts. Interested? We’d love to hear from you.

Support Unfinished Business on Patreon

We also have three monthly membership plans so you can support Unfinished Business on Patreon. $5, $10, and $20 if you’re feeling especially generous. All money goes towards podcast editing and hosting. Support Unfinished Business on Patreon.

Space for creative code experiments and passion projects

So for the past few evenings, I’ve been bringing all these little projects together into what I’m calling my “workshop”. It’s essentially a landing page linking to the various projects.

I also created unified headers and footers, as well as a stripped-down stylesheet. The overall CSS architecture is a little more complicated than I’d like, but it works for now:

1. Top level stylesheet for all workshop components (workshop.css)
2. Second-level stylesheet for specific projects (styles.css)
3. Embedded CSS on specific pages, for unique elements

Hopefully, this will make new projects and updates to existing ones easier. Plus, I feel happier that everything feels more integrated into my overall website design.

Go to my workshop.

IWC first made its B-Uhr pilot’s watch for the Luftwaffe and was one of five suppliers to the German air force. The design requirements included an oversized crown—usable while wearing gloves—and a highly legible dial. Even its strap was extra-long, designed to be worn over a pilot’s jacket. But this isn’t a history of the Big Pilot. For that, you should read this article on Monochrome Watches.

We’d stopped in Schaffhausen on our way back from France this summer and visited the IWC boutique and museum connected to their factory. This was my first opportunity in a long time to try on the Big Pilot I wanted when I grew up.

IWC introduced a modern version (IW5002) of the wartime Die Grosse Fliegeruhr in 2002, retaining the signature elements of the original design. It had a matte black dial and highly legible Arabic numerals. It also included an impressively long power reserve, so—along with a date window at the six o’clock position—IWC added a power reserve indicator at three o’clock. That meant there was no room for a 2, 3, or 4.

A few years later, IWC redesigned the dial (IW500401), and it’s stayed the same ever since. So the model I tried on kept the power reserve indicator but brought back the 2 and 4 numerals, with the indicator cutting across them. That’s a detail I honestly hadn’t noticed until I tried the watch on in the boutique. And when I saw it, I knew it was a detail I couldn’t live with.

Fortunately, my dream wasn’t entirely shattered: in 2021, IWC released a smaller, more wearable 43mm version. The 46mm Big Pilot is a big watch, but as someone with big wrists, I didn’t mind that. I was concerned the 43mm might look too small on my wrist. Luckily, it didn’t. But most importantly, its design removes the date window and the power reserve indicator, restoring the full 2, 3, and 4 numerals. As I already own a black U-Boat watch, I opted for a Big Pilot 43 with a blue dial and strap and bought an extra brown strap to turn my watch into a mini Petit Prince design.

And unlike the closed case of the 46mm Big Pilot, the 43mm model has an open case back to show off the movement.

To say that I love my new watch is an understatement. Yes, it’s an expensive item, but I’ll enjoy wearing it every day. That, and I’m only going to turn 60 once. It’s funny because I don’t consider myself a “watch guy,” and I didn’t wear a watch at all for 30 years. My social media feeds are full of videos about Rolex and other luxury brands, but I’m not interested in owning one of them. I bought my IWC because I like the simplicity of its design and because I’m nostalgic for Schaffhausen. This isn’t going to be part of a collection, although (please don’t tell my wife) I’d also love to own this.

Mum’s the word.

Before I open Sketch to design or Nova to code, I study the content I’m laying out, as it’s crucial to start with the content and not a predefined container. I decide what’s most important on a page, what elements should be grouped, what should attract attention, and what can stay quiet. This research gives me a sense of the hierarchy I need to create and ideas for expressing it through layout.

Choosing the right grid for the job

How do I know which grid to choose? Each grid type brings something different to a design, so my answer depends on several factors. Let’s break that “it depends” down.

People will be familiar with the ubiquitous 12-column grid, which ships with most frameworks and platforms. The familiarity of its 2-up, 3-up, and 4-up components makes twelve columns an obvious choice when working with developers or in teams.

A compound grid is two or more grids of any type—column, modular, symmetrical, and asymmetrical—on one page. They can occupy separate areas or overlap. Compound grids provide more flexibility, and their interplay of two or more grids is often far more interesting than a single grid in isolation.

A modular grid contains rectangles or square units arranged horizontally and vertically, and is fabulous for organising complex content, so it’s puzzling why so few designers use them.

Then, occasionally, there’s no grid at all, for when I want to tell a very particular story.

What’s important to remember is that choosing a grid should be a design decision. There is no default. Different grids create different feelings and behaviours, so selecting the right one is a design decision, not a technical convenience.

Defining a grid

When I’m implementing a grid in HTML and CSS, I typically define it once, regardless of how many times I plan to use it. I keep a handy set of grid column templates in my boilerplate file, including a 12-column grid and a 4+5 compound:

:root {
--grid-12-col: repeat(12, 1fr);
--grid-compound: 2fr 1fr 1fr 2fr 2fr 1fr 1fr 2fr; }

I apply my chosen grid using a single style:

.layout {
display: grid;
grid-template-columns: var(--grid-12-col); }

I also define values for gap sizes, margins, and a maximum width:

:root {
--grid-column-gap: 1.5rem;
--grid-row-gap: 1.5rem;
--grid-margins: 0 auto;
--grid-max: 80rem; }

.layout {
gap: var(--grid-row-gap) var(--grid-column-gap);
margin: var(--grid-margins);
max-inline-size: var(--grid-max); }

Whether I intend to use child elements or subgrid, these styles permeate my entire grid implementation. And by defining grids, gaps, and max-width once using CSS custom properties, every layout across a project inherits consistency without repeating code.

Creating reusable layout permutations

Every layout instance contains either one, two, three or more child elements, usually divisions or other structural HTML elements. I separate my layout concerns into that underlying grid and then define the arrangements of the child elements using data-attributes:

<div class="layout" data-layout="flow">
<div>[…]</div>
<div>[…]</div>
</div>

[data-layout="flow"] > *:nth-child (1) { […] }
[data-layout="flow"] > *:nth-child (2) { […] }

Instead of designing layouts from scratch each time, I sketch and name arrangements of child elements so I can reach for them quickly as I design.

In that last example, I named the arrangement and proportions of the two-column layout “flow.” But how do I decide how to name them? Well, I could derive names based on their appearance, like “flow,” “split,” or “stack.” But I tend to run out of possibilities doing that.

Instead, I could call them after their content or function, with names like “hero” or “gallery.” But what happens when I need the hero’s layout for something different? Of course, I could just name them after the grid tracks they occupy, with names like “1–5,” “5–9,” and “10-13,” but what if I decide to change the underlying grid and those track numbers change? Honestly, I’ve driven myself nuts thinking about this.

What do I do instead? I avoid the problem altogether and name them after cartoon characters on my own website, capital cities in my Layout Love templates, Welsh politicians for Changemakers, and composers for the Academy of Scoring Arts:

[data-layout="bartok"]
[data-layout="beethhoven"]
[data-layout="bizet"]

Yes, I know this naming convention doesn’t reflect the appearance, content, function, or grid tracks, but it helps me think, “I need the Brahms layout for this.”

Should I use a standard naming convention across all my projects? Maybe. But then I wouldn’t be able to amuse myself coming up with names for my projects. Could there even be an industry standard naming convention? Heck, I wrote about that five years ago, twelve years ago, and as far back as 2004.

Deciding between Grid and Flexbox

I don’t have a checklist for when Grid is a better option than Flexbox, or vice versa, but I do have certain criteria when deciding which to use. Generally, when an element needs to be laid out in one dimension—such as a navigation bar or a group of elements—I will use Flexbox. When I need two dimensions, I choose Grid. Sometimes, the choice comes down to something as simple as how I want the last or widowed item to behave, and whether it should maintain the grid layout or flex to fill the available width. If it’s the former, I use Grid. When it’s the latter, I choose Flexbox.

Adding Multi-column layout

Then there are times when I want to introduce columns which don’t necessarily conform to the layout grid. These might be multi-column text in an article or spreading lists across more than one column to maximise my use of available space. This is when a Multi-column layout is ideal, and I use the measure to define column width rather than the underlying grid layout. Multi-column layout gives me freedom to break away from the grid when a story needs a more editorial flow.

A repeatable way to make layout decisions

My layout strategy isn’t really about grids; it’s about a repeatable way to make layout decisions. It starts with content, moves through choosing the right grid for the story I want to tell, and finishes with reusable permutations that help my designs stay consistent.

1. Keep styles as global as possible
2. Use element selectors
3. Identify things
4. Classify things
5. Vary things

To give you an insight into my strategy, I’ll use examples from the Academy of Scoring Arts project I finished most recently.

Element selectors keep styles as global as possible

When I begin a new stylesheet, I start with the broad strokes, typically colour, typography, and spacing. These global styles are the foundation for the rest of my CSS. Element selectors already describe what they are, so I rely on them to do as much as possible. Let’s say I’m styling headlines. I apply styles which will affect how every headline looks:

:is(h1, h2, h3, h4, h5, h6) {
font-family: "Bankside Sans VF";
font-style: normal;
font-variation-settings: "wght" 500, "wdth" 40;
font-weight: normal;
line-height: 1.3;
margin-block: 0 clamp(0.5625rem, 0.5408rem + 0.1087vi, 0.625rem);
text-transform: uppercase;
text-wrap: balance; }

By styling elements first, I get a consistent baseline across my entire stylesheet and avoid repeating styles in multiple selectors. Only when I have element selector styles for the HTML elements I’m using do I progressively narrow the scope by identifying, classifying, and varying their styles.

1) ID selectors identify things

Despite what you might’ve picked up, there’s absolutely nothing wrong with using ID selectors in the correct context, for example, when I know there’ll be only one of something on a page. This might be an introduction section, banner component, or site-wide footer.

On the Academy of Scoring Arts’ sign-up page, I know there’ll only ever be one block of pricing options, so I used an ID selector:

#options { […] }

There’ll be only one banner component:

#banner { […] }

And one banner logo:

#banner-logo { […] }

Using ID selectors makes an element’s identity obvious at a glance. They’re also handy for linking to those page fragments later.

2) Class selectors classify things

Narrowing the scope further, I start to classify things. For instance, the videos component contains multiple items. Quite often, I’ll style those child elements using a descendant selector:

#videos > * { […] }

Otherwise, I add class attribute values and use class selectors:

.item-video { […] }

Using class selectors defines repeating patterns of styling. Articles in a feed, members of a team, or videos in a collection:

.item-article { […] }
.item-member { […] }
.item-video { […] }

I use class selectors to apply typographic styles:

.alt-lede { […] } /* Lede paragraphs */
.alt-uppercase { […] } /* Uppercase text */

And other classifications of elements, including badges, buttons, and specific form elements:

.alt-btn { […] } /* Styled buttons and links */
.alt-pill { […] } /* Pill-shaped badges */
.alt-checkbox { […] } /* Styled checkboxes */

I also use a class selector to define all my various layouts, which are based on the same underlying grid:

.layout {
display: grid;
gap: 1.5rem;
grid-template-columns: repeat(12, 1fr); }

Once I’ve identified and classified the key elements, my next step is to vary them.

3) Attribute selectors vary things

Staying with layout styles, in the past, I might’ve used a single class attribute to bind a style to an element, like this:

.layout-bartok { […] }

But this meant duplicating styles whenever I added a new layout. I could’ve (and did) use BEM’s multiple class attributes:

.layout .layout_bartok { […] }

But this always felt clumsy, so now I separate my layout concerns into the underlying grid styles using a class selector and define the specific layout as data using an attribute selector:

.layout { […] }

[data-layout="bartok"] { […] }

[data-layout="beethoven"] { […] }

[data-layout="bizet"] { […] }

(Why I named my layout components after famous composers is a topic for another day.)

With data attributes, I’m not just styling layout components differently; I’m making it explicit that one layout is different from another in a way which is semantically richer than using class selectors.

Let’s say I have several price options in a group and I want to highlight one. Semantically, I want to state the identity of the element (#options,) classify the options (.option,) then vary how one of them looks:

<div class="option" data-variant="highlighted">

And in my CSS:

.option { 
border: 2px solid ##2896be; }

.option[data-variant="highlighted"] { 
background-color: #212121;
border: 3px solid #7ec339;
animation: triple-pulse-simple 3s ease-in-out 2s;
transform-origin: center; }

In my mind, there’s an important distinction between classifying elements which form part of a group and varying the styles. For example, I might have multiple standard blockquotes and other larger pullquotes. I use an element selector to style a standard blockquote. But although larger pullquotes have the same styling, they don’t form a semantic classification. Instead, they’re variations, so I use a data-attribute:

blockquote p { font-size: 1rem; } 
blockquote[data-variant="m"] p { font-size: 1.2rem; }
blockquote[data-variant="l"] p { font-size: 1.5rem; }

All my horizontal rules share styles, which I apply using an element selector. But when I need to vary thickness, I use a data-attribute:

hr {
border-block-start: 1px solid #2896be; 
margin-block: 1.5rem; }

hr[data-width="l"] {
border-width: 3px; }

My horizontal rules frequently act as section dividers, which require more space in the block direction, so I use a different data-attribute:

[data-function="divider"] {
margin-block: 3rem; }

And in my design for the Academy of Scoring Arts, some horizontal rules are decorative devices:

[data-device="stripe"] {
border-block-start: 40px solid #7ec339; }

Styled buttons can have several variants, from different sizes to various widths:

.alt-btn {
padding: .75em 1em; }

.alt-btn[data-variant="s"] {
padding: .5em .7em; }

.alt-btn[data-variant="block"] {
box-sizing: border-box;
width: 100%; }

And some buttons might animate when someone interacts with them:

.alt-btn[data-animation="shakeX"] { […] }

I often need to vary how some elements look, even when they’re built on the same blocks as others. For example, I might have an unordered list with items aligned to the left, and a list of social media links where they’re centred:

[data-content="social"] li { […] }

Or modular grid layouts which contain team members ([data-content="team"]) vs layouts which contain photos ([data-content="photos"]):

[data-content="team"] > * { […] }
[data-content="photos"] > * { […] }

Once I started thinking this way, I began to see every element in terms of its identity, classification, and variation. Each level builds on the last, intentionally narrowing the scope of my styles.

How I think about elements is my strategy

My selector strategy isn’t a framework or a naming convention. It’s how I think about what elements in my markup are, how they relate to each other, their role, and what content they contain. Progressively narrowing the scope keeps my stylesheets fast, small, and as well-organised as I can make them. And it avoids over-engineering to override how CSS was designed to work, including the cascade and specificity.

You’ll find the Shooting Gallery on my articles page. It’s a temporary place while I test out the game, as people hardly ever go there.

For the game, I flattened my characters into cut-outs, unifying and simplifying the colours to make them look more like the two-dimensional targets you find at a fairground.

Then I added three bullseyes to each target, a background graphic, some bunting, and a swinging saloon sign.

Playing the game

The aim is to hit as many bullseyes as you can in 60 seconds while the characters glide from left to right. You can change how quickly they move to make things trickier. Hitting each bullseye puts a hole in it and plays a sound. Hit three bullseyes on the same target, and it falls back (for a while.)

Level 1: HTML

I like to keep my markup semantic and straightforward. The game’s HTML starts with a container and the swinging sign:

<div id="shooting-gallery">
 <div id="shooting-gallery-sign">[…]</div>
 […]
</div>

Then, there’s a scrolling container in which the characters move left and right:

<div id="shooting-gallery-scroll-container">
 <div id="shooting-gallery-items">[…]</div>
 […]
</div>

Each character’s SVG and its three bullseyes sit inside their own division, with inline styles to position each target:

<div class="shooting-gallery-item">
 <div class="item-content">
 <img src="billy.svg" alt="">
 <button class="target" style="top: 0%; left: calc(50% - 15px);">
 <span class="target-hole"></span></button>
 […]
 </div>
</div>

There’s another division for the game controls, including the score, time remaining, and speed controls:

<div id="shooting-gallery-hud">

<div>
 <h3>Score</h3>
 <p id="shooting-gallery-score">0</p>
</div>

<div>
 <h3>Time</h3>
 <p id="shooting-gallery-timer">60</p>
</div>

<div id="speed-control">
 <label for="gallery-speed"><span id="speed-value">Normal</span></label>
 <input type="range" id="gallery-speed" min="1" max="4" value="2" step="1">
</div>

</div>

Plus divisions for my intro text:

<div id="shooting-gallery-intro">
 <h2 id="shooting-gallery-message">[…]</h2>
 <button id="shooting-gallery-button">Start</button>
</div>

And the overlay, which counts down to starting the game:

<div id="shooting-gallery-countdown">
 <span id="countdown-number">3</span>
</div>

Finally, there are sounds for that countdown and the bullet hits:

<audio id="bullet-sound" preload="auto">
 <source src="bullet-hit.mp3" type="audio/mpeg">
</audio>

<audio id="countdown-sound" preload="auto">
 <source src="timer.mp3" type="audio/mpeg">
</audio>

The HTML builds a simple structure: a stage for characters, a HUD for gameplay info, and a few extras for sounds and interactions. Nothing fancy, just semantic markup ready for styling and scripting.

Level 2: CSS

I began with the core animations, such as the targets falling back in 3D when they’re hit three times:

@keyframes gallery-fall {
0% { transform: rotateX(0) translateZ(0) scale(1); }
100% { transform: rotateX(80deg) translateZ(-100px) translateY(50px) scale(0.8); }
}

Then, I added a background to the shooting gallery and used border-image to add bunting to the bottom border:

#shooting-gallery {
background: url(bg.svg) no-repeat center / cover;
border-style: solid;
border-bottom-width: 50px;
border-image: url("border.svg") 0 0 100 0 / 0 0 50px 0 / 0 repeat; }

Character targets

The characters scroll horizontally inside a flex container:

#shooting-gallery-scroll-container {
overflow: auto hidden;
width: 100%; }

And applied perspective to their parent for a more realistic effect when the characters fall back:

#shooting-gallery-items {
display: flex;
min-width: 800%;
perspective: 1000px;
transform-style: preserve-3d;
width: auto; }

preserve-3d applied to the characters content creates the effect:

.item-content {
position: relative;
transform-origin: bottom center;
transform-style: preserve-3d; }

When someone hits all three bullseyes, the script adds a fallen class:

.shooting-gallery-item.fallen .item-content {
animation: gallery-fall 0.5s ease forwards;
pointer-events: none;
transform-origin: bottom center; }

Bullseyes

For each of the bullseye buttons, I added a background and a crosshair cursor:

.shooting-gallery-item button.target {
background: url("bullseye.svg") center/contain no-repeat;
cursor: crosshair;
height: 30px;
position: absolute;
width: 30px; }

I wanted audible and visual feedback when someone’s shot’s on target. Each button contains an additional span element:

<div class="item-content">
 <button class="target">
 <span class="target-hole"></span></button>
 […]
</div>

.target-hole {
background: url("hole.svg") center/contain no-repeat;
display: none;
height: 100%;
width: 100%; }

That hole is hidden by default but becomes visible when someone hits a target:

.target.hit .target-hole {
display: block; }

The characters also wobble every time they’re hit:

@keyframes gallery-wobble {
0%,100% { transform:rotate(0) }
25% { transform:rotate(-3deg) }
75% { transform:rotate(3deg)} }
}

shooting-gallery-item.gallery-wobble .item-content {
animation: gallery-wobble .3s ease; }

CSS handles the static styling and the wobbly characters and falling targets so that a browser using hardware acceleration for smoothness and performance.

Larger screens

On larger screens, I gave the shooting gallery a cinematic 16:7 aspect ratio:

@media (min-width:48em) {
#shooting-gallery {
aspect-ratio: 16/7;
overflow-x: hidden; }
}

Then I reset the container’s horizontal overflow and used a keyframe animation to move the characters left and right during the game:

#shooting-gallery-scroll-container {
overflow-x: hidden; }

@keyframes gallery-row {
0% { transform: translateX(0); }
50% { transform: translateX(25%); }
100% { transform: translateX(0); }
}

#shooting-gallery-items {
animation: gallery-row 30s linear infinite;
min-width: auto;
width: 80%; }

During the game, the script tracks hits for 60 seconds. When someone hits three bullseyes on the same target, it falls back, reappearing a few seconds later. Players can also adjust the difficulty level by changing the movement speed.

Level 3: Performance

What about those all-important file sizes? How small could I make the game?

Everything, including audio, graphics, and animation, fits comfortably under 300KB. Not bad for a complete mini-game with movement, sound, and interactivity.

Magnificent

This little game reminded me how much fun it is to build something purely for play, even if I’m the only one enjoying it. By keeping my markup minimal, reusing SVGs, and relying on CSS for movement and style, I ended up with a complete game under 300 KB. That’s lighter than one of those full-width hero images I’m always grumbling so much about.

Sponsored by Contract Killer

Most web design contract templates are stuffed with boilerplate content your clients will never read. Contract Killer covers everything—payments, revisions, scope, and timelines—in plain, human language. Trusted by designers for over a decade. Peer-reviewed, fully customisable, and built to keep projects on track, and your invoices paid.

Buy Contract Killer

Also available on YouTube

For anyone who can’t get enough Unfinished Business, we publish the show in video format on YouTube.

Sponsor Unfinished Business

The best way to promote your product or service to the Unfinished Business audience of creative professionals, designers, and developers. Sponsors get one exclusive two-minute ad per episode, live read by me or Rich, which feels personal and relatable. We can use your script or ad-lib, and you’ll also receive a link on each episode’s post, as well as a thank-you on our Bluesky and Mastodon accounts. Interested? We’d love to hear from you.

Support Unfinished Business on Patreon

We also have three monthly membership plans so you can support Unfinished Business on Patreon. $5, $10, and $20 if you’re feeling especially generous. All money goes towards podcast editing and hosting. Support Unfinished Business on Patreon.

I started building the game by making a black-and-white wanted poster version of each character’s face. These are SVGs and optimised; each weighs around 8kb.

Then I made a torn paper border, which weighs less than 1kb, so all the graphics combined weigh more than 50kb. I really love SVG.

Once I had all the outlaws staring back at me, I needed to present them in a way that felt like part of the site rather than a separate element. A <dialog> turned out to be perfect for that. It contains a header and a placeholder for the posters:

<dialog class="game-dialog">
 <button id="close-dialog">×</button>

 <header class="game-header">
 […]
 </header>

 <div class="game-content">
 <div id="posters-container">
 <!-- posters -->
 </div>
 </div>
</dialog>

A script then creates each of the posters:

<div class="game-poster">
<p class="status">[…]</p>
 <div class="game-svg">
  <svg>[…]</svg>
 </div>
<p class="game-reward">[…]</p>
</div>

It adds a data- attribute for each poster, plus another class attribute if the character has been caught:

<div class="game-poster game-captured" data-id="1">
 […]
</div>

I turned my attention to writing the CSS, starting with the dialog element. It fills 80% of the viewport width and 90% of its height and is centered horizontally and vertically:

.game-dialog {
height: 90vh;
max-width: 1200px;
position: fixed;
top: 50%;
transform: translate(-50%, -50%);
width: 80vw; }

When the dialog is open, the ::backdrop is slightly transparent to allow a hint of the page behind to peek through:

.game-dialog::backdrop {
background-color: #161d1a;
opacity: .75; }

With the dialog and its ::backdrop working, I could focus on how the posters should look and behave. The posters needed to look like they’ve been tacked to a wall, while still adapting to different screen sizes.

Posters grid

On small screens, the posters are arranged in a horizontally scrolling panel.

So I placed them into a grid container with six columns:

#posters-container {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 1rem;
max-width: 100%;
overflow-x: auto;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch; }

For larger screens, I reduced the grid to three columns:

@media screen and (min-width: 64em) {
#posters-container {
grid-template-columns: repeat(3, 1fr);
overflow-x: visible;
max-width: none; }
}

Wanted posters

The posters themselves have a torn-paper border applied with border-image, one of the least-used CSS properties:

.game-poster {
border-image-slice: 40 fill;
border-image-width: 40px;
border-image-repeat: stretch;
border-image-source: url("[…]");
border-style: solid; }

Finally, to break the rigidity of the grid, I rotated some of the posters:

.game-poster {
rotate: 0deg; }

.game-poster:nth-of-type(1),
.game-poster:nth-of-type(5) {
rotate: -2deg; }

.game-poster:nth-of-type(3) {
rotate: 2deg; }

Now that the posters looked the part, it was time to add interactivity. A few subtle animations can turn what’s essentially a static grid into a design that feels tactile.

Animations and interactions

Elements that respond to someone’s actions can help elevate what would otherwise be a static design. So first I reset those rotations on :hover:

.game-poster {
rotate: 0deg;
scale: 1;
transition: all var(--animate-duration-faster) ease-in; }

.game-poster:hover {
rotate: 0deg; }

Then—using one of my favourite :has techniques—I reduced the size of the posters except for the one being hovered over:

#posters-container:has(.game-poster:hover) .game-poster:not(:hover) {
scale: .95; }

Finally, to make a poster shake when someone presses the capture button, I defined a shaking animation and applied it to a poster when it contains an :active capture button:

@keyframes poster-shake {
0%, 100% { transform: rotate(0deg); }
25% { transform: rotate(-1.5deg); }
75% { transform: rotate(1.5deg); }
}

.game-poster:has(.game-capture:active) {
animation: poster-shake .2s ease-in-out infinite; }

With the animations in place, the next step was to show which characters had already been caught.

Captured stamp

Each poster contains a class attribute which indicates whether a character has been captured. It also includes a status paragraph with values including “game-available”, “game-captured”, and “game-wanted”:

<div class="game-poster captured">
<p class="status game-captured">[…]</p>
[…]
</div>

When a character is available to capture or is just wanted, this stamp is included at the top of a poster.

But once they’ve been caught, this status turns into a red rubber stamp across the poster. For this, I styled the status stamp, positioned, then rotated it on the poster:

.game-poster.captured {
position: relative; }

.status.game-captured {
background-color: rgba(230,250,240,.75);
border: 5px solid var(--game-accent);
border-radius: 5px;
color: rgba(90,10,25,.75);
left: 10%;
padding: 1rem;
position: absolute;
rotate: -30deg; }

Eyes blinking

I’ve written about ambient animations a fair bit recently (1, 2) and wanted to add a few subtle animations to my posters to indicate which characters are available and those who have been captured. I decided to do this by opening and closing their eyes.

First, I added extra paths for each character’s closed eyelids into their SVG:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1800 1800">
<g>[…]</g>
<path class="game-eyelids" d="[…]"/>
</svg>

Each poster has a data-id and includes its character’s status:

<div class="game-poster" data-id="1">
<p class="status game-available">Capture this outlaw</p>
<svg>[…]</svg>
</div>

When a character is available to be caught, I change the eyelid opacity to 0 and apply a blinking animation:

.game-poster:has(.status.game-available) .game-eyelids {
animation: eyelids 4s infinite;
opacity: 0; }

@keyframes eyelids {
0%, 92% { opacity: 0; }
93%, 94% { opacity: 1; }
95%, 97% { opacity: 0.1; }
98%, 100% { opacity: 0; }
}

But when a character has already been captured, his eyes stay closed:

<div class="game-poster" data-id="1">
<p class="status game-captured">Captured</p>
<svg>[…]</svg>
</div>

.game-poster:has(.status.game-captured) .game-eyelids {
opacity: 1; }

Reduced motion

Not everyone experiences motion the same way. For some, even a small shake or flicker can feel distracting or disorienting. That’s why I always wrap animations inside a media query that checks for the user’s motion preferences. The prefers-reduced-motion feature lets me detect when someone’s system is set to limit motion, so I can adapt the design accordingly. I only apply the shaking animation when someone hasn’t asked for reduced motion:

@media (prefers-reduced-motion: no-preference) {

.game-poster:has(.game-capture:active) {
animation: poster-shake .2s ease-in-out infinite; }

@keyframes poster-shake {
0%, 100% { transform: rotate(0deg); }
25% { transform: rotate(-1.5deg); }
75% { transform: rotate(1.5deg); }
}
}

This means the posters stay still for anyone who prefers less motion, while others still see the playful shake when they hit “Capture.”

Rewarding curiosity

I’ve always believed that the web should reward curiosity. Hiding this little Magnificent 7 game beneath my banners isn’t about gamification or engagement metrics, it’s a nod to the early web, when people built weird things for their own amusement.

Technically, this project reminded me why I still love SVG. The fact that I can fit my characters, a torn-paper frame, and all the surrounding interaction into less than 150kb still feels magical.

Twenty years ago, Dunstan Orchard was famous in web circles for adapting his blog illustrations to the current weather. I wanted to adjust my background to the time of day by changing its brightness and saturation.

So I created a dark blue overlay which covers the town’s buildings.

Leaving gaps for light from the windows to shine through.

A simple script checks for the time of day in a visitor’s location, then appends a class attribute value (time-day, time-twilight, and time-night) to the SVG.

Not knowing when to stop, I made ten moon-phase graphics and extended the script to include them, too. Then I added CSS rules that display the correct moon at twilight and during the night.

Lighting up the about page animation

I love including Easter Eggs in my designs, and the graphic animation on my about page seemed like the perfect candidate. So, using the same technique, I created a green overlay that covers the inside of the town jailhouse, turning it dark.

Then I added the elements I want illuminated when the overhead light is turned on.

A simple script toggles class attributes on the SVG (lighting-on, lighting-off). Triggering that toggle? Well, that should remain a mystery.

People may never notice the moon shifting or the jailhouse lights flicking on, but you know what? That’s fine. As web designers, we talk a lot about accessibility, performance, and responsiveness, and rightly so. But entertainment matters too, even if the only person entertained is the one making the website.

@media screen and (prefers-reduced-motion: reduce) {
html {
scroll-behaviour: auto;
animation-duration: 1ms !important;
animation-iteration-count: 1 !important;
transition-duration: 1ms !important; }
}

@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation: none !important;
transition: none !important; }
}

That looked fine until I noticed that when reduced motion was selected, grid layouts weren’t applied. They didn’t even appear in DevTools. It was like my whole layout was trapped inside a media query it shouldn’t be in.

Where it all went wrong

1. Two separate prefers-reduced-motion blocks

I’d written two different queries—one with screen and one without. Turns out that browsers treated them as separate layers in the cascade. Sometimes they combined, sometimes they didn’t, depending on their position in the file.

That made it possible for reduced-motion rules to override layout ones. In DevTools, it even looked like my @media (min-width:64em) rules were nested inside reduced motion, even though technically they weren’t.

2. The reduced-motion block came after my layout queries

Later in the file, I had a @media (prefers-reduced-motion: reduce) block sitting below my layout breakpoints. That meant when reduced motion was enabled, it took priority over my grid display rules:

@media (min-width: 64em) {
[role="banner"] {
display: grid;
grid-template-columns: var(--grid-compound); }
}

Even though my motion reset didn’t touch layout properties, the browser’s cascade flattened them together, and the result was no grid.

3. My animation reset wasn’t truly global

I’d disabled transitions on *, but only changed scroll behaviour on html:

html { scroll-behavior: auto; }
*, *::before, *::after {
  animation: none !important;
  transition: none !important; }

That meant nested containers—like scrollable divs or SVGs—could still animate or scroll smoothly. So even though the top of the CSS respected reduced motion, some other sections didn’t.

4. My motion reset didn’t really stop animations

Setting an animation’s duration to 1ms makes it very, very short, but it’s not the same as disabling it altogether. It still fires, just instantly. That can trigger layout reflows, flashes, or elements appearing mid-animation.

5. Layout transforms were tied to those animations

Some layout elements use transforms inside animations. When reduced motion shortened those animations to 1ms, the transform started and ended before the layout had fully rendered. That left my grid invisible until a resize or refresh.

The fix: isolate motion resets

Although it took a while to figure out, the solution turned out to be pretty simple—move all motion resets to a single, self-contained section near the top of the stylesheet.

/* REDUCE MOTION GLOBALLY */

@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto !important; }

*, *::before, *::after {
animation: none !important;
transition: none !important;
scroll-behavior: auto !important; }
}

@media (prefers-reduced-motion: no-preference) {
html { scroll-behavior: smooth; }
}

That was it. No more layout interference.

Why it works

By isolating motion resets early in the cascade, I:

• Keep layout media queries separate so breakpoints, flex, grids keep working
• Avoid nested screen and rules, which can confuse browsers (and me)
• Disable motion globally

So, now I think of my stylesheets in “layers”:

1. Global styles
2. Reduced motion reset
3. Layout media queries
4. Components and animations

That way, the reduced-motion section never affects my layout. Here’s the pattern I’ll follow from now on:

1. Put reduced-motion reset near the top
2. Keep it separate from grid or breakpoint media queries
3. Never mix layout and motion in the same block

That way, my designs will respect accessibility settings without breaking the layout as they’ve done before.

I’ve had animated SVG characters on my website for years, and I like to change them up once in a while. Last time, I went back to a Madness-inspired set of nutty boy characters, which were based on artwork I’d commissioned from Josh Cleland. This time, I planned to play on the pioneer theme with seven magnificent Old West characters, drawn in the style of Hanna-Barbera cartoons.

I struggle with poses and, for the life of me, can’t draw hands. But after a lot of cussing, I managed to sketch outlines of my characters in Procreate on my iPad Pro. I’m more confident drawing paths in Sketch, so I relaxed once I had my vector outlines organised and could concentrate on colouring.

I wanted the colours of my pioneers to be consistent, and for the browns, greys, and reds in each character to match, so I sampled colours from a few of my Toon Title recreations.

Breaking the characters into separate SVG files let me rearrange and resize them for each animated graphic.

The more time I’ve spent studying cartoon backgrounds, the more I appreciate the work of artists like Lawrence (Art) Goble. I took inspiration from Hanna-Barbera cartoons, which use a limited palette of colours, simple, solid shapes, and just the right amount of detail to avoid dominating a scene.

I made five backgrounds, including a desert scene, a hardware store, a jailhouse and saloon interior, and a station.

First, I made a rough sketch in Procreate, often sketching over parts of reference images I’d found online.

Using Sketch, I blocked out the simplest shapes I could and added objects, using the same symbols repeatedly. Finally, I added linework for definition, being careful not to add too much detail to the backgrounds.

For the monochromatic colour palette, I chose only four shades and tints to prevent the background from competing with characters in the foreground.

Adaptive SVGs

When I’m implementing animated graphics like these, I use a method I’ve called Adaptive SVGs. I wrote about it recently in Smashing Magazine where I said:

By combining <symbol>, <use>, CSS Media Queries, and specific transforms, I can build adaptive SVGs that reposition their elements without duplicating content, loading extra assets, or relying on JavaScript. I need to define each graphic only once in a hidden symbol library. Then I can reuse those graphics, as needed, inside several visible SVGs. With CSS doing the layout switching, the result is fast and flexible.

I won’t cover Adaptive SVGs again here. You should read the full rundown in the original article.

Ambient animations

And of course, having animated so many cartoon titles recently, I couldn’t resist adding a few ambient animations to my characters, plus a few background details. Eyes blink, heads move, moustaches twitch, and toes tap. I wrote about Ambient animations recently in Smashing Magazine, where I said:

Ambient animation is like seasoning on a great dish. It’s the pinch of salt you barely notice, but you’d miss when it’s gone.

Accessibility

Commenting on that article, Nat Tarnoff made a good point about ensuring that ambient animations can be turned off using a visible button and the prefers-reduced-motion media query. He wrote:

These animations are specifically what cause problems for users sensitive to motion or distraction, as they do not come across as “ambient.” WCAG has 4 success criteria about animation. This style of animation violates 2.2.2 Pause, Stop, Hide while conforming to the others. This means there needs to be a visible button for users to stop or pause the animation. Prefers-reduced-motion is not considered sufficient to meet this requirement.

That was a helpful comment, so I added a button to each animation to toggle it on or off using a little bit of JavaScript.

Pioneering web design

I’ve always loved cartoon animation, especially Hanna-Barbera. The more I’ve experimented with their techniques in CSS, JavaScript, and SVG, the more fun I’ve had. I hope visitors enjoy that same sense of play—and if you’ve got a project you think I’d enjoy (cowboys optional), get in touch.

Given a certain color value, contrast-color() returns either white or black, whichever produces a sharper contrast with that color. So, if we were to provide coral as the color value for a background, we can let the browser decide whether the text color is more contrasted with the background as either white or black.

So yeah, define a background colour and the browser will choose either black or white to contrast it with:

h1 {
background-color: var(--color-background);
color: contrast-color(var(--color-background)); }

For my website design, I chose a dark blue background colour (#212E45) and light text (#d3d5da). This colour is off-white to soften the contrast between background and foreground colours, while maintaining a decent level for accessibility considerations.

But here’s the thing. The contrast-color() function chooses either white for dark backgrounds or black for light ones. At least to my eyes, that contrast is too high and makes reading less comfortable, at least for me.

It feels even more uncomfortable on really dark backgrounds like my bio page.

And, inexplicably, there’s no way to adjust that contrast, even though there’s a contrast filter which does offer that flexibility:

filter: contrast(50%);

I just wish these two things were joined up in some way. Maybe by adding the filter syntax to the contrast-color() function. Something like this:

h1 {
color: contrast-color(var(--color-background) 50%); }

Oh well. I guess we just can’t have nice things. (Yet.)

Sponsored by Web Day Out

A one-day event all about what you can do in web browsers today. On Thursday, 12 March 2026, eight speakers will dive deep into HTML, CSS, and some JavaScript, getting you up to speed on the most powerful web platform features that you can use right now.

Buy a ticket

Also available on YouTube

For anyone who can’t get enough Unfinished Business, we publish the show in video format on YouTube.

Sponsor Unfinished Business

The best way to promote your product or service to the Unfinished Business audience of creative professionals, designers, and developers. Sponsors get one exclusive two-minute ad per episode, live read by me or Rich, which feels personal and relatable. We can use your script or ad-lib, and you’ll also receive a link on each episode’s post, as well as a thank-you on our Bluesky and Mastodon accounts. Interested? We’d love to hear from you.

Support Unfinished Business on Patreon

We also have three monthly membership plans so you can support Unfinished Business on Patreon. $5, $10, and $20 if you’re feeling especially generous. All money goes towards podcast editing and hosting. Support Unfinished Business on Patreon.

• I might host an in-person event or an online workshop.
• I could make a video course and sell it on my website or Skillshare.
• I may turn the script into an e-book to sell on my site or Amazon.

Then, I could repeat the process with other topics. I’ve heard Paul say plenty of stupid things, but this idea sounded plausible. After coming back from the summer break, I spent a few weeks working on content for the first topic and an online practical layout design workshop.

Marketing and sales

This was my first time producing an online workshop. Not knowing how well it would be received, I only marketed it to people who follow me on Bluesky, LinkedIn, and Mastodon, or who read my blog. Geoff kindly wrote a promo post on CSS Tricks and Andy included it in The Index, his Piccalilli email newsletter.

According to my survey of attendees, 60% heard about the workshop on my blog, 20% from LinkedIn, 10% from Bluesky, 10% Mastodon, and 10% somewhere else. This time, I didn’t email my 1300 newsletter subscribers, so I expect that might’ve made a difference too.

I sold tickets at £69, which is the same price as one of Paul’s two-hour workshops and hit my unambitious goal for ticket sales. Like Paul, I offered an add-on session for an extra £29, but no one opted for that, so I likely won’t offer it again.

Only one person said the price was “somewhat” fair. Everyone else felt it was a good value.

Setting up

Paul uses Google Meets for his online workshops. I’ve never used Google Meets for anything, so instead I opted for Zoom Webinars, as I use Zoom a few times a week for client meetings. I liked the familiar interface, the ability to overlay my camera video on top of the screen sharing, and how Zoom recorded the session to the cloud.

I didn’t like the fact that I couldn’t see attendees’ camera videos, and the usual chat was replaced by Q&A. It often felt like I was talking to myself, and it wasn’t easy to judge people’s reactions to what I was saying. I’m told that I could’ve changed those settings when I scheduled the webinar, so I need to look into that.

I have a Zoom Workplace Pro subscription, so paying for one month of Zoom Webinars costs me £64 excluding VAT. If this idea takes off and I run more workshops, I’d consider paying annually to save myself a few quid.

Presenting

I used my MacBook Pro and iPad Pro to present the workshop, running Zoom and my Keynote slides on my laptop and my notes on the tablet. Switching between apps was initially fiddly, especially since I had Keynote running in full-screen mode. It also meant that the Zoom Q&A was often hidden from view. Before my next workshop, I need to experiment with using my iPad Pro as an external monitor for the MacBook Pro so I can keep Zoom visible.

I decided to use my iPhone as a Continuity Camera to film myself, as it gives better resolution than the MacBook Pro camera. I also used my AirPods Pro for headphones and a microphone. Listening back to the recorded audio, next time I’ll try the DJI lavalier mic I use for my YouTube videos.

Demonstrating

I’d split the two-hour workshop into six chapters, each starting with a Keynote deck and then sharing my screen while I built layouts in Sketch. I’d pre-prepared these Sketch files so I could make the demonstrations appear smooth, and this went well. I only wish I’d used duplicate files for the demonstrations, as Sketch’s auto-save meant going back to the original state of the files was impossible. I won’t make that mistake again.

Getting feedback

I asked everyone who attended to complete a brief survey at the end of the workshop. 50% did. Seventy-five per cent said they’d attend a future workshop, and the rest said they might, depending on the topic. Comments were overwhelmingly positive, including:

I loved the mix of slides, cultural background, and practical sessions in Sketch.

And

Enjoyed the course. As a developer, I would also like to see how some of these designs translate to mobile.

That’s fair. I didn’t cover small-screen designs during the time we had. That’s possibly a topic for another workshop.

Final thoughts

I thoroughly enjoyed working on the content for this workshop. In fact, I didn’t get through everything I made, so I’ll have that for when I make a video version. I also enjoyed the event, although there are plenty of areas I’d like to improve on for next time, including:

1. Broader marketing and sales
2. Improved sound quality with a DJI mic
3. Different Zoom set-up so I can see attendees
4. Better MacBook Pro and iPad Pro configuration

After that, my plan is to host more in-depth workshops with deeper dives into topics such as responsive layout and techniques, including the use of compound and modular grids. However, my next step will be to adapt the content from this workshop into a video course for Skillshare and other platforms, and to transform the script into a short e-book.

An automatic preview of your grid also includes column and row position values. You can download a WebP image of the generated grid.

You can also copy the HTML and CSS code to your clipboard.

But there’s more. Press on any of the modules to open a modal where you can choose how many columns or rows a module can span.

This lets you easily create a variety of layouts from your modular grid.

And, if you’re the Tailwind sort, you can copy code for that framework too.

Finally, I also added Tailwind to the export options in my Compound grid generator, to keep the functionality of my layout generators in sync.

Try out the new Modular grid generator and improved Compound grid generator. If you like them, you can buy me a coffee.

• Add a gap value in em, px, % or rem
• Copy the generated compound grid CSS to the clipboard
• Download a WebP image of the generated compound grid

Try the new and improved compound grid generator and book a spot on my workshop. There are still one or two tickets available.

Let’s be honest: Website layouts have become a bit boring

Design systems, frameworks, and templates are everywhere. And sometimes, even great ideas look like everything else. Over the past year, I’ve been exploring how classic layout principles from comics, posters, and magazines can bring energy and storytelling to digital design. This session is where I share what I’ve learned, with examples, demos, and practical takeaways you can actually use.

Why attend?

Grab a seat and join me for a two-hour session where you’ll:

• Explore layout ideas from places like comics, fanzines, movie posters, wrestling promos, and more
• Learn how to break the rules of the grid without breaking your design
• See real-world examples of expressive, narrative-driven layouts for websites and products
• Leave with layout ideas you’ll want to try right away

What we’ll cover

Hour 1: Creative layout thinking

• Why 12-columns aren’t the only option
• How modular grids help create hierarchy
• Why compound grids expand creative options
• Patterns and layout techniques that create visual rhythm

Hour 2: Real demos, real feedback

• Watch me break apart and rebuild layouts live
• See how to apply layout principles to existing designs
• Ask layout questions, and I’ll answer as many as I can in a live Q&A

Who’s this for?

This is for you if:

• You’re a designer or front-end dev tired of playing it safe
• You love good craft, but want more fun and feeling in your layouts
• You’re building sites or products and want them to stand out, not blend in
• You’ve got a basic grasp of layout tools (Figma, Webflow, or code), but want to level up creatively

This isn’t a beginner tutorial or a deep dive into CSS. It’s for working designers who want to push past the obvious and bring more of themselves to the page.

Practical details

New date: Thursday, 25th September
Time: 3pm UK time
Duration: 2 hours live (with demos and Q&A)
Format: Online (join from anywhere)
Recording included

Only £69. Get all Layout ❤︎ templates free, worth £9.99.

UPGRADE: VIP feedback session

Want me to take a closer look at your layout challenges? Add a VIP follow-up session (capped at 8 people) for just £29:

Friday, 26th September, 3pm UK time
60 minutes of small group feedback—bring your own layouts
Recording included and tips tailored to you

Design doesn’t have to be boring

You don’t need to rip up your process or become a “creative genius” overnight. You just need fresh eyes, inspiration, and a few tools to help you bring more life into your layouts. I’ll show you how. Ready to design with more personality? Book your place now and get all Layout ❤︎ templates free, worth £9.99.

Sponsored by:

Practical layout workshop for designers and creative teams

This workshop is for designers who want to break free from the gridlock and create layouts that feel bold, expressive, and uniquely theirs, without losing clarity or usability.

Design systems, frameworks, and templates are everywhere. And sometimes, even great ideas look like everything else. Over the past year, Andy has been exploring how classic layout principles from comics, posters, and magazines can bring energy and storytelling to digital design. This session is where he shares what he’s learned, with examples, demos, and practical takeaways you can actually use.

Date: Thursday, 25th September
Time: 3pm UK time
Duration: 2 hours live (with demos and Q&A)
Format: Online (join from anywhere)
Recording included

Only £69

Also available on YouTube

For anyone who can’t get enough Unfinished Business, we publish the show in video format on YouTube.

Sponsor Unfinished Business

The best way to promote your product or service to the Unfinished Business audience of creative professionals, designers, and developers. Sponsors get one exclusive two-minute ad per episode, live read by me or Rich, which feels personal and relatable. We can use your script or ad-lib, and you’ll also receive a link on each episode’s post, as well as a thank-you on our Bluesky and Mastodon accounts. Interested? We’d love to hear from you.

Support Unfinished Business on Patreon

We also have three monthly membership plans so you can support Unfinished Business on Patreon. $5, $10, and $20 if you’re feeling especially generous. All money goes towards podcast editing and hosting. Support Unfinished Business on Patreon.

Available designs

• Smash the Nazis
• Nazis Keep Out
• Black & White Unite

Set up in 1977, the Anti-Nazi League opposed the rise of far-right groups in the UK. Until its closure in 1982, the ANL stood against the National Front and the British National Party (BNP). Now, with the far-right and racist Reform UK gaining ground, we must rekindle the spirit of the Anti-Nazi League.

Available designs

• Don’t Vote for Nazis (light)
• Don’t Vote for Nazis (dark)
• RFM=NZS (light)
• RFM=NZS (dark)

All proceeds go to Hope not hate

Inspired by the iconic Anti-Nazi League artwork by David King, every purchase helps fund HOPE not hate, who are dedicated to challenging the far right in Britain.

Sponsored by:

Practical layout workshop for designers and creative teams

This workshop is for designers who want to break free from the gridlock and create layouts that feel bold, expressive, and uniquely theirs, without losing clarity or usability.

Design systems, frameworks, and templates are everywhere. And sometimes, even great ideas look like everything else. Over the past year, Andy has been exploring how classic layout principles from comics, posters, and magazines can bring energy and storytelling to digital design. This session is where he shares what he’s learned, with examples, demos, and practical takeaways you can actually use.

Date: Thursday, 25th September
Time: 3pm UK time
Duration: 2 hours live (with demos and Q&A)
Format: Online (join from anywhere)
Recording included

Only £69

Also available on YouTube

For anyone who can’t get enough Unfinished Business, we publish the show in video format on YouTube.

Sponsor Unfinished Business

The best way to promote your product or service to the Unfinished Business audience of creative professionals, designers, and developers. Sponsors get one exclusive two-minute ad per episode, live read by me or Rich, which feels personal and relatable. We can use your script or ad-lib, and you’ll also receive a link on each episode’s post, as well as a thank-you on our Bluesky and Mastodon accounts. Interested? We’d love to hear from you.

Support Unfinished Business on Patreon

We also have three monthly membership plans so you can support Unfinished Business on Patreon. $5, $10, and $20 if you’re feeling especially generous. All money goes towards podcast editing and hosting. Support Unfinished Business on Patreon.

A party like Reform UK–exploiting people’s fears and led by former investment banker Nigel Farage, a political charlatan who both “delivered” Brexit and then applied for German citizenship while drawing a £73,000 EU pension–is not the answer.

I’ve seen the kind of distrust and hatred of immigrants whipped up by Farage and his supporters before, in the late 1970s and ’80s when The National Front—forerunners of the British National Party, who were forerunners of the Brexit Party and now Reform UK (no link)”marched with Union Flags and the cross of St. George through British Cities. The far right was defeated then, and it must be defeated again.

David King’s designs, the Anti Nazi League, and Rock Against Racism spearheaded opposition to the far right in the 1970s.

BWanker!

Inspired by David’s iconic designs for the Anti Nazi League, I’ve made a set of Far Right. So Wrong t-shirts. The first one, “BWanker!” is available in black, white, and Reform UK colours.

FCK FRG, FCK RFM

Then, there’s “FCK FRG” and “FCK RFM” in the style of FCK NZS, plus “Stop Racism. Stop Reform” which are available in black and white.

All proceeds go to Hope not hate

All proceeds from these shirts will go directly to help fund Hope not hate, the organisation dedicated to opposing far-right extremism.

Practical layout workshop

As well as writing for CSS Tricks I will also be running a workshop on layout design on Thursday, 18th September. I will be covering:

• Why 12-columns aren’t the only option
• How modular grids help create hierarchy
• Why compound grids expand creative options
• Patterns and layout techniques that create visual rhythm

You can learn more and book here.

Practical layout workshop

As well as writing for CSS Tricks I will also be running a workshop on layout design on Thursday, 18th September. I will be covering:

• Why 12-columns aren’t the only option
• How modular grids help create hierarchy
• Why compound grids expand creative options
• Patterns and layout techniques that create visual rhythm

You can learn more and book here.

Sponsored by:

Practical layout workshop for designers and creative teams

This workshop is for designers who want to break free from the gridlock and create layouts that feel bold, expressive, and uniquely theirs, without losing clarity or usability.

Design systems, frameworks, and templates are everywhere. And sometimes, even great ideas look like everything else. Over the past year, Andy has been exploring how classic layout principles from comics, posters, and magazines can bring energy and storytelling to digital design. This session is where he shares what he’s learned, with examples, demos, and practical takeaways you can actually use.

Date: Thursday, 18th September
Time: 3pm UK time
Duration: 2 hours live (with demos and Q&A)
Format: Online (join from anywhere)
Recording included

Only £69

Also available on YouTube

For anyone who can’t get enough Unfinished Business, we publish the show in video format on YouTube.

Sponsor Unfinished Business

The best way to promote your product or service to the Unfinished Business audience of creative professionals, designers, and developers. Sponsors get one exclusive two-minute ad per episode, live read by me or Rich, which feels personal and relatable. We can use your script or ad-lib, and you’ll also receive a link on each episode’s post, as well as a thank-you on our Bluesky and Mastodon accounts. Interested? We’d love to hear from you.

Support Unfinished Business on Patreon

We also have three monthly membership plans so you can support Unfinished Business on Patreon. $5, $10, and $20 if you’re feeling especially generous. All money goes towards podcast editing and hosting. Support Unfinished Business on Patreon.

A Google search for “web design north wales” brings up plenty of solo web designers, partnerships, and small businesses, and their websites are different and say very different things from mine. I wondered whether having a website more like everyone else’s would create leads. So, a year ago, I spent an evening making one.

I started by registering a supposedly SEO-friendly domain, north-wales-website-design.agency, and set up hosting on Netlify.

Fake images

Most small-ish web designers rely on stock or AI-generated images, so I tasked Midjourney to make some for me of a modern office with people working on laptops. It did a half-decent job, even though several people have no legs. They must be somewhere in the Metaverse.

Fake content

Continuing with AI, I copied content from the top 10 organic results on Google (excluding Stuff & Nonsense) and set ChatGPT to work on producing copy for my fake business. I was surprised how good the results were, and I pasted it word-for-word.

“As leading web designers in North Wales, we are renowned for our expertise and creativity in delivering website solutions tailored to your business needs. Whether you’re launching a start-up or an established business looking to enhance your existing website, we design and develop sites that drive growth. Our approach balances aesthetics and performance, ensuring every website not only looks fantastic but also delivers strong results. With a design process focused on aligning with your business goals, we guarantee a website that supports your success.”

Then, I included the types of content I see so regularly, and I added items—like FAQs and a list of local towns—which are purely there to stuff the pages with keywords. I even added a prices page complete with three packages.

Fake clients

Next came the portfolio. For obvious reasons, I didn’t want to include my real client work, so I created four fake clients. I intentionally designed their screenshots in the style I often see in designer portfolios, with full-width banner images, 2-up, 3-up, and 4-up components on a cookie-cutter 12-column grid.

Fake business

Back in ChatGPT, I asked it to write a few blog posts, with titles like “Websites for small businesses” and “What makes a great business brochure website,” which I used verbatim.

Finally, I added contact information and a form, uploaded the site to Netlify and sat back waiting for the phone to ring.

I’m still waiting.

It took just over a week before the new website appeared on Google, and with a little bit more work on SEO, it climbed to position four a week or so later for a search for “web design north wales”. I’m not sure where it ranks right now.

But did this fake web design company and its site generate any enquiries? Actually, no. Not a single email or phone call since its launch. The domain expires soon, and I won’t be renewing it.

It’s funny, because I have had enquiries via Google to Stuff & Nonsense from people using other search terms. They weren’t put off by my opinionated design and commented positively about it. Turns out, the problem might not be my weird website—it might just be that small business owners don’t search for website designers the same way anymore.

Update August 2025: The domain has now expired and the experiment is over.

Design systems, frameworks, and templates are everywhere. And sometimes, even great ideas look like everything else. Over the past year, I’ve been exploring how classic layout principles from comics, posters, and magazines can bring energy and storytelling to digital design. This session is where I share what I’ve learned, with examples, demos, and practical takeaways you can actually use.

Why attend?

Grab a seat and join me for a two-hour session where you’ll:

• Explore layout ideas from places like comics, fanzines, movie posters, wrestling promos, and more
• Learn how to break the rules of the grid without breaking your design
• See real-world examples of expressive, narrative-driven layouts for websites and products
• Leave with layout ideas you’ll want to try right away

What we’ll cover

Hour 1: Creative layout thinking

• Why 12-columns aren’t the only option
• How modular grids help create hierarchy
• Why compound grids expand creative options
• Patterns and layout techniques that create visual rhythm

Hour 2: Real demos, real feedback

• Watch me break apart and rebuild layouts live
• See how to apply layout principles to existing designs
• Ask layout questions, and I’ll answer as many as I can in a live Q&A

Who’s this for?

This is for you if:

• You’re a designer or front-end dev tired of playing it safe
• You love good craft, but want more fun and feeling in your layouts
• You’re building sites or products and want them to stand out, not blend in
• You’ve got a basic grasp of layout tools (Figma, Webflow, or code), but want to level up creatively

This isn’t a beginner tutorial or a deep dive into CSS. It’s for working designers who want to push past the obvious and bring more of themselves to the page.

Practical details

New date: Thursday, 25th September
Time: 3pm UK time
Duration: 2 hours live (with demos and Q&A)
Format: Online (join from anywhere)
Recording included

Only £69. Get all Layout ❤︎ templates free, worth £9.99.

UPGRADE: VIP feedback session

Want me to take a closer look at your layout challenges? Add a VIP follow-up session (capped at 8 people) for just £29:

Friday, 26th September, 3pm UK time
60 minutes of small group feedback—bring your own layouts
Recording included and tips tailored to you

Design doesn’t have to be boring

You don’t need to rip up your process or become a “creative genius” overnight. You just need fresh eyes, inspiration, and a few tools to help you bring more life into your layouts. I’ll show you how. Ready to design with more personality? Book your place now and get all Layout ❤︎ templates free, worth £9.99.

Read Comic book layouts as web design inspiration

El Kabong was Quick Draw’s spoof of Zorro. He’d swing down on a rope, shout “OLÉ!”, and smash his enemies with a guitar. “KABOOOOOONG!” Like many Hanna-Barbera title cards of the time, this one was illustrated by Lawrence (Art) Goble. To recreate it in SVG, I built a file containing layered background elements, title text, and El Kabong himself.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 1080">
  <path id="base" fill="url(#grad)" d="[…]"/>
  <g id="bg">[…]</g>
  <g id="text">[…]</g>
  <g id="swing-group">[…]</g>
</svg>

El Kabong is split into several pieces, ready for animation: head, body, cape, legs, tail, and tie.

<g id="swing-group">
  <g id="quick-draw-head">[…]</g>
  <g id="quick-draw-leg-back">[…]</g>
  <g id="quick-draw-tail">[…]</g>
  <g id="quick-draw-tie">[…]</g>
  <g id="quick-draw-body">[…]</g>
  <g id="quick-draw-head">[…]</g>
  <g id="quick-draw-leg-front">[…]</g>
  <g id="quick-draw-cape">[…]</g>
</g>

My goal was to animate as much as possible using just CSS. Here’s a simple sway animation for his head:

#quick-draw-head {
  animation-direction: alternate;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-name: sway;
  transform-origin: 50% 100%;
  animation-timing-function: ease-in-out; }

@keyframes sway {
  from { rotate: -2deg; }
  to   { rotate:  2deg; }
}

Using only CSS, I was able to get his legs kicking, tail wobbling, and cape flapping. That ambient movement brings the scene to life, and for many uses, it would be enough. But I wanted more.

Swing time

El Kabong swings in from above, so I needed his whole body to pivot. With GSAP, that’s easy:

gsap.fromTo("#swing-group", {
  rotate: 5,
  transformOrigin: "1920px 0px"
}, {
  rotate: -5,
  duration: 5,
  ease: "sine.inOut",
  yoyo: true,
  repeat: -1,
  transformOrigin: "1920px 0px"
});

But why introduce a dependency when the same effect is achievable using CSS?

#swing-group {
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-name: swing;
  animation-timing-function: ease-in-out;
  animation-direction: alternate;
  transform-box: fill-box;
  transform-origin: 1920px 0px;
}

So, why use GSAP at all?

When CSS isn’t enough

Because I wanted El Kabong’s cape to morph shape as he swings. And that’s where things change. CSS can’t morph between paths unless they have the exact same number of points, which mine didn’t. I could’ve rewritten them to match, or tried to morph them manually in JavaScript. But GSAP’s MorphSVGPlugin handles all that elegantly.

gsap.registerPlugin(MorphSVGPlugin);
const originalPath = "[…]";
const morphPath = "[…]";

gsap.to("#cape-path", {
  duration: 2,
  repeat: -1,
  yoyo: true,
  ease: "sine.inOut",
  morphSVG: { shape: morphPath }
});

This means loading the GSAP library core and their MorphSVGPlugin, which adds significantly to the weight, so I need to be sure that this animation is key to the overall feel of the animation.

The trade-off

This is the decision I face every time I animate a scene: When is a library like GSAP worth it? And once it’s loaded, should I use it for everything, or stick to CSS where I can?

There’s no perfect answer. But in the case of El Kabong, mixing CSS for ambient motion and GSAP for advanced morphing hit the sweet spot.

“KABOOOOOONG!”

I wanted to extend that idea to my blog entries. To make this work, I added a custom CSS field to my Statamic CMS and used an {{ if }} statement in my post template to check for it:

{{ if custom_css }}
<style>{{custom_css}}</style>
{{/if}}

Then, I added code to my CMS that adds a class attribute of custom to the body element of any customised posts:

{{ section:body_class }}{{customisation}}{{ /section:body_class }}

This renders a <body> tag like:

<body class="custom">
…
</body>

Customised colours

Most of the time, customisations will include a new colour theme. So I can now add overrides for my Custom Properties into the custom CSS field:

body.custom {
--color-accent: #9d181d;
--color-background-default: #000;
--color-base: #364461;
--color-border: var(--color-accent);
--color-text-default: #fff;
--color-text-link: var(--color-accent);
--color-button: var(--color-accent); }

But I also like to change the colour of my logo to match the customised design, so I added another Custom Property which overrides the default red:

--color-logo-enamel: var(--color-accent);

Customised headlines

Occasionally, I’ll want to style the headlines of my custom posts, either by changing their typography or even replacing the plain text with a graphical headline. Remembering the days of the CSS Zen Garden and how Dave added extra elements for styling flexibility, I added a class attribute and an additional span element to the template header:

<h1 class="custom__title"<<span>{{title}}</span></h1>

When I want a graphical headline—like the one on this page—I can hide the plain text headline (making sure it’s still accessible for screen reader users) and replace it with either a bitmap image URL or SVG code:

{{ if custom_headline }}
<div class="custom__headline" title="{{title}}">{{custom_headline}}</div>
{{/if}}

I could even insert code for animated SVGs when I really want a post to pack a punch.

Styling everything else

Customisations needn’t stop there, as I’ve added class attributes and extra elements to the page content container, post summary, and its content:

<div class="custom__page">…</div>
<div class="custom__summary">{{summary}}</div>
<div class="custom__content">…</div>

But customisations could go even further. My post template contains several structural layout containers which I use across the website:

<div class="container">
<div class="layout" data-layout="muttley">…</div>
</div>

Using that class attribute added to the body of customised posts, I’m even able to change the proportions and positions of those layout containers too:

<body class="custom">
…
</body>

body.custom .layout {
… }

Finally, to make custom posts easier to spot, I stuck little custom stickers onto their entries—on the blog home page, in categories, and even in search results.

Wrapping up

These custom post designs let me tailor the mood and style of each article. And because everything’s driven by CSS Custom Properties and lightweight templating, it’s easy to manage. I’m excited to see how far I can push this, maybe even bringing back the spirit of CSS Zen Garden, one post at a time.

1) Audit and diagnose with PageSpeed Insights

First things first—I ran Google PageSpeed Insights on my site. It flagged a few usual suspects:

• Images that were much larger than displayed
• Blocking CSS and JavaScript files delayed the largest contentful paint (LCP)
• Fonts that were render-blocking due to how they loaded

Images were an obvious place to start, as they weren’t adapting to different device widths.

2) Cloudinary optimisation for responsive images

My portfolio sections contain lots of images of my work, and I host them on the Cloudinary CDN. The key to optimisation was to serve correctly sized images, in efficient formats like WebP, and with quality optimised automatically. Cloudinary makes this easy with URL parameters.

• I added srcset with multiple widths so browsers can choose the best size
• Cloudinary’s f_auto and q_auto params to deliver the correct format and compression
• Added sizes so the browser knows the image display size
• Added loading="lazy" and decoding="async" for non-blocking load and decode
• Kept explicit width and height attributes to avoid layout shifts

<img
  src=".../upload/f_auto,q_auto,w_500/..."
  srcset="
    .../upload/f_auto,q_auto,w_320/... 320w,
    .../upload/f_auto,q_auto,w_500/... 500w,
    .../upload/f_auto,q_auto,w_800/... 800w"
  sizes="(max-width: 600px) 100vw, 500px"
  width="500"
  height="390"
  loading="lazy"
  decoding="async"
  alt=""
/>

This new markup significantly reduced the image payload on smaller devices, speeding up load times and improving Core Web Vitals.

3) Deferring fonts with font-display: optional

Fonts can be sneaky performance killers as they often block rendering while loading. I adjusted my font CSS to use:

@font-face {
  font-display: optional;
  /* other font-face properties */
}

This change tells the browser to render text immediately with fallback fonts if needed, then it swaps in the web fonts once they load, without blocking the initial render.

Results: from 80 to 96 on mobile

After these tweaks, my PageSpeed Insights mobile score increased to 96, which I consider a solid win. The site still looks just as sharp, but now it’s snappy and responsive for visitors on slower connections or less powerful devices.

If you want to chat about how to optimise your site’s performance, drop me a line. Happy to help.

Practical layout workshop

As well as writing for CSS Tricks I will also be running a workshop on layout design on Thursday, 18th September. I will be covering:

• Why 12-columns aren’t the only option
• How modular grids help create hierarchy
• Why compound grids expand creative options
• Patterns and layout techniques that create visual rhythm

You can learn more and book here.

Don’t look back in anger, choose be here now black and look like the rock ’n’ roll star you are.

Layout ❤

That ❤ is the Unicode character for a heart, which displays the same colour as the text around it in the majority of browsers. However, on iOS and iPadOS, instead of a flat heart, I got a glossy red heart emoji. That might work for some designs, but not for mine.

It turns out, this behaviour isn’t limited to hearts. It did the same to the spades in my Code ♠︎ Shirts ♠︎ Rock titles and the play/pause icons in my banner animations. I asked the socials and Colin kindly replied with a link to a post by Kevin Schaul about the “plain text modifier,” something I’d not come across.

On iOS Safari (and likely Android and other devices), these are rendered in the cartoony, emoji style, which means trying to colour them with CSS doesn’t work. Fortunately, there is an easy (but cryptic) fix: Simply append &#xFE0E; immediately following your unicode character, like ■&#xFE0E;. The code modifies the previous character to be rendered in text style rather than emoji style.

So now I need to write:

Layout ❤︎

Kevin’s post linked to another, more detailed explanation in 2015 by Matias Singers. So, I guess I’m not the only person to struggle with this.

I would be better if there was a meta tag I could use to tell Safari to turn this behaviour off, but there isn’t. I’m never in a million years going to remember how to type &#xFE0E; so I’ve added it as a new aText snippet so I only have to type §mod.

🍻

For anyone who can’t get enough Unfinished Business, we’re now publishing the show in video format on YouTube.

Sponsor Unfinished Business

The best way to promote your product or service to the Unfinished Business audience of creative professionals, designers, and developers. Sponsors get one exclusive two-minute ad per episode, live read by me or Rich, which feels personal and relatable. We can use your script or ad-lib, and you’ll also receive a link on each episode’s post, as well as a thank-you on our Bluesky and Mastodon accounts. Interested? We’d love to hear from you.

Support Unfinished Business on Patreon

We also have three monthly membership plans so you can support Unfinished Business on Patreon. $5, $10, and $20 if you’re feeling especially generous. All money goes towards podcast editing and hosting. Support Unfinished Business on Patreon.

1) Fanzinetastic web design

When I was growing up in the 1980s in a steel-making town that had lost its steelworks, there was a thriving subculture of fanzines and fly posters printed in garages and community centres.

2) Movie poster-inspired web design

What do you see when you look at a movie poster? Is it simply advertising to promote a movie or a piece of artwork you’d potentially hang on your wall at home or in an office?

3) Web design Smash Hits

How can a long-defunct popular music magazine for teens influence the design of today’s websites?

4) Web design inspiration from ’90s cartoons

Have you ever considered how ’90s animations might relate to web design today? I show how they inspired a new website design for Emmy-winning composer Mike Worth

5) Web design inspiration from retro wrestling

How can a collection of dog-eared posters from the golden age of British wrestling influence the design of today’s websites? Web design pioneer Andy Clarke steps into the ring to give us the lowdown.

6) Colour palette inspiration from B-movie posters

What do giant spiders, invaders from Mars, and a 50-foot woman have in common? Incredible colour. B-movie buff and web design pioneer Andy Clarke shows you how the over-the-top palettes of horror and sci-fi posters can inspire memorable colour choices for modern websites

Read Colour palette inspiration from B-movie posters

For anyone who can’t get enough Unfinished Business—you should get out more—we’re now also publishing the show in video format on YouTube.

Sponsor Unfinished Business

The best way to promote your product or service to the Unfinished Business audience of creative professionals, designers, and developers. Sponsors get one exclusive two-minute ad per episode, live read by me or Rich, which feels personal and relatable. We can use your script or ad-lib, and you’ll also receive a link on each episode’s post, as well as a thank-you on our Bluesky and Mastodon accounts. Interested? We’d love to hear from you.

Support Unfinished Business on Patreon

We also have three monthly membership plans so you can support Unfinished Business on Patreon. $5, $10, and $20 if you’re feeling especially generous. All money goes towards podcast editing and hosting. Support Unfinished Business on Patreon.

“Seasons in the Sun” has often been voted one of the worst songs of all time by listeners who complain about its predictable melody and saccharine-sweet lyrics. It’s true, there are some terrible versions of it. Westlife’s 1999 Christmas number one version is bad, but nowhere near as painful as The Fortunes’ 1968 cover, or worse, James Last’s 1998 version. But is it really one of the worst songs of all time? I don’t think so.

“Seasons in the Sun” was a worldwide hit for Canadian singer Terry Jacks in 1974, but it’s actually an adaptation of the 1961 song “Le Moribond” (The Dying Man) by the Belgian singer Jacques Brel. But what’s the best-ever version of “Seasons in the Sun”? I listened to every version available on Apple Music, so you don’t have to. Here are my top five, ranked by arrangement, originality, and vocal performance.

5) Jim Bob (2021)

4) The Beach Boys (2021)

3) Raisa Khan (1974)

2) Terry Jacks (1973)

1) Jacques Brel (Le moribond) (1961)

But, Brel’s studio version of Le Moribond still isn’t the best I’ve. For that, listen and watch this live version from French television in the 1960s. It’s quite simply fantastique!

French lyrics translated to English

Goodbye Émile, I loved you
Goodbye Émile, I loved you, you know
We sang the same wines
We sang the same girls
We sang the same sorrows

Goodbye Émile, I’m going to die
It’s hard to die in spring you know
But I go to the flowers with peace in my soul
Because since you're as good as white bread
I know you will take care of my wife

And I want us to laugh, I want us to dance
I want us to have fun like crazy
I want us to laugh, I want us to dance
When will I be put in the hole

Goodbye Curé, I loved you
Goodbye Curé, I loved you, you know
We weren’t on the same side
We weren’t on the same path
But we were looking for the same port

Goodbye Priest, I’m going to die
It’s hard to die in spring you know
But I go to the flowers with peace in my soul
Because since you were his confidant
I know you will take care of my wife

And I want us to laugh, I want us to dance
I want us to have fun like crazy
I want us to laugh, I want us to dance
When will I be put in the hole

Goodbye Antoine, I didn’t like you very much
Goodbye Antoine I didn’t like you very well you know
I’m dying to die today
While you are alive and well
And even stronger than boredom

Goodbye Antoine, I’m going to die
It’s hard to die in spring you know
But I go to the flowers with peace in my soul
Because since you were her lover
I know you will take care of my wife

And I want us to laugh, I want us to dance
I want us to have fun like crazy
I want us to laugh, I want us to dance
When will I be put in the hole

Quand c’est qu'on m’mettra dans l’trou
Goodbye my wife I loved you very much you know
But I take the train for the Good Lord
I’m taking the train before yours
But we all take the train we can

Goodbye my wife I’m going to die
It’s hard to die in spring you know
But I go to the flowers with my eyes closed, my wife
Because since I often closed them
I know you will take care of my soul

And I want us to laugh, I want us to dance
I want us to have fun like crazy
I want us to laugh, I want us to dance
When will I be put in the hole

The best way to promote your product or service to the Unfinished Business audience of creative professionals, designers, and developers. Sponsors get one exclusive two-minute ad per episode, live read by me or Rich, which feels personal and relatable. We can use your script or ad-lib, and you’ll also receive a link on each episode’s post, as well as a thank-you on our Bluesky and Mastodon accounts. Interested? We’d love to hear from you.

Support Unfinished Business on Patreon

We also have three monthly membership plans so you can support Unfinished Business on Patreon. $5, $10, and $20 if you’re feeling especially generous. All money goes towards podcast editing and hosting. Support Unfinished Business on Patreon.

Comment, Like, and Subscribe.

Every two weeks, Rich and I discuss making a living in creative services and the business aspects of working in online design and development. We have a lot in common, but have taken very different professional paths, so we have different perspectives. This is going to lead to some fascinating conversations. Then, every third episode, we’ll talk to a guest creative or web professional about their experiences.

The new Unfinished Business website is live today, and subscribe for new episodes through our RSS feed or your favourite podcast player.

Sponsor Unfinished Business

The best way to promote your product or service to the Unfinished Business audience of creative professionals, designers, and developers. Sponsors get one exclusive two-minute ad per episode, live read by me or Rich, which feels personal and relatable. We can use your script or ad-lib, and you’ll also receive a link on each episode’s post, as well as a thank-you on our Bluesky and Mastodon accounts. Interested? We’d love to hear from you.

Support Unfinished Business on Patreon

We also have three monthly membership plans so you can support Unfinished Business on Patreon. $5, $10, and $20 if you’re feeling especially generous. All money goes towards podcast editing and hosting. Support Unfinished Business on Patreon.

Our first episode is live

Our first episode is live and I hope you enjoy it.

Read Web design inspiration from retro wrestling

Transcript

Animations have come a long way in CSS. From basic hovers and transitions to full keyframe animations and scroll-linked effects. But even with those updates, CSS animation is still pretty simple. And honestly? That’s what makes it charming. It reminds me of the Hanna-Barbera cartoons I grew up with. Yogi Bear, Dastardly & Muttley, Penelope Pitstop, Wacky Races. You get the idea.

Those cartoons had tiny budgets. So, the animators got clever. They reused backgrounds, looped movements, and layered elements to create the illusion of motion. Like this scene from "Home Sweet Jellystone" where a postman rides across the screen. He doesn’t move—the background scrolls behind him. I recreated this with CSS. One element, a repeating background image, and a simple keyframe animation. That’s it. No JavaScript needed.

So how does this relate to Mike Worth’s website? One scene features Mike’s mascot, Orango Jones, driving across the screen. To make the jeep bounce, I used a second keyframe animation that changes the image’s position. It's lo-fi, but it adds personality.

Like the old animators, I reused elements to build layered scenes. Trees, rocks, and foregrounds scroll at different speeds to create depth. This layering trick is also great for parallax effects. It adds realism without adding bloat. Characters in Hanna-Barbera cartoons didn’t move much. Their bodies stayed still—only their mouths and eyes changed. In SVG, I did the same thing. I grouped the static parts and swapped out the mouths frame by frame using CSS animations. Six frames. One looping timeline.

Animations aren’t just decoration. They tell stories. Mike’s 404 page? His orangutan adventurer is sinking into quicksand while animated bubbles rise around him. And it’s all done in CSS. Animations can also be subtle. Like on Mike’s about page, where shafts of light move slowly across a stone tablet. They add atmosphere and depth without being distracting.

I also used CSS for interaction. On Mike’s review page, a red button toggles the desk lamp. When it turns off, the lights dim, and Orango Jones gets grumpy. And yes—there’s a vibrating crystal skull. It hints at a hidden Easter egg.

Just like Hanna-Barbera turned limitations into a visual style, CSS animations let us build expressive, lightweight experiences. For Mike Worth’s site, animation wasn’t just an add-on. It was part of the story. It made the site feel alive.

So next time you reach for an animation, think beyond movement. Think about mood, identity, and imagination.

CSS can create incredible ambient animations

Even with keyframes and scroll-based animations, CSS animation is still relatively rudimentary. But that’s part of its charm, and doesn’t mean it’s incapable of creating incredible ambient animations.

I didn’t animate much in the early title cards I tackled. In Brainy Bear, the waves of energy flowing around Yogi fade in and out sequentially using a combination of CSS opacity and separate animation-delay values to create the pulsing effect.

See the Pen Brainy Bear SVG animation by Andy Clarke (@malarkey) on CodePen.

The dome of the crazy scientist’s machine moves up and down using an infinitely looping keyframe animation and translateY. This is what I call “ambient animation,” as it helps create atmosphere and is unobtrusive.

As my eyes became attuned to elements that could be animated, and I grew accustomed to the idea of splitting my SVG illustrations into multiple animatable parts, my CSS animations gradually got more complex. In the far more detailed Bewitched Bear title card, Yogi has stolen a witch’s broom to help him grab “pic-a-nic” baskets.

See the Pen Bewitched Bear CSS/SVG animation by Andy Clarke (@malarkey) on CodePen.

I wanted to animate virtually every element in this Toon Title, from the sparkling stars to Yogi’s stolen broom, and Yogi himself with his moving head and body, and flapping tie.

CSS is great for simple, ambient effects, but it can get fiddly when animations need to be synced. I relied on animation-duration and animation-delay properties for the timings in most of my early Toon Titles. But then I remembered SMIL, and that took me down a new path.

SMIL isn’t dead, and it enables animation sequences

SMIL (Synchronised Multimedia Integration Language) was introduced in 1998 for synchronising multimedia. It was built into SVG 1.1, which is why we can still use it there today.

SMIL adds the animate property to SVG, which enables animations based on one or more of an element’s attributes. It also adds animateTransform to animate transformations, including rotations, scaling, skewing, and translations. Then there’s the begin property for starting and sequencing animations, and animateMotion for animating along motion paths.

In Bear for Punishment, Yogi conjures Boo-Boo from a magician’s top hat.

See the Pen Bear for Punishment, SMIL animation by Andy Clarke (@malarkey) on CodePen.

I used a CSS keyframe animation to fade, rotate, and scale the sparkles from Yogi’s magic wand, but the moving spotlight and Boo-Boo’s entrance were both created using SMIL’s animateTransform.

Brave Little Brave took SMIL even further. First, the little brave enters the frame, then the circle behind him appears. He releases his bow strings and looses an arrow which moves the title text. animatetransform moves the figure from -1000 off-screen and makes his ponytail wobble. animate changes the bow strings’ d values as the arrow is fired.

See the Pen Little Brave Bear, SMIL animation by Andy Clarke (@malarkey) on CodePen.

But, the big difference in this animation lies in how SMIL synchronises the animations. The arrow in the brave’s headband moves as the arrow is fired, and the title text wobbles when the arrow hits it. I could’ve created these effects with animation-duration, but it was far cleaner and easier using SMIL.

GSAP is powerful and now free

You may already know that scripting isn’t my thing, which is why I was reticent to try a JavaScript-based animation library. I read an article which recommended GSAP over SMIL, so I decided to see if I could get to grips with it.

GSAP (GreenSock Animation Platform) is now part of Webflow who made it and its plugins free this month. It’s taken me a few weeks to feel comfortable using GSAP, but I think I’m beginning to get the hang of it.

For Snow White Bear, GSAP made it relatively straightforward to animate Yogi and his seven dwarfs. Yogi walks onto the screen and is followed by each dwarf in turn.

See the Pen Snow White Bear, GSAP animation by Andy Clarke (@malarkey) on CodePen.

The titles fade in when the characters are all in position, and if you look closely, you might spot the trees swaying gently.

In Lullabye-Bye Bear, I combined GSAP with CSS 3D perspective to create the animation of Yogi swinging in his hammock.

See the Pen Lullabye-Bye Bear, GSAP animation by Andy Clarke (@malarkey) on CodePen.

As Yogi swings backwards and forwards towards the viewer, the titles above him also gently swing between the tree branches.

Then, in Duck in Luck, the dog gets taken by surprise when a duck creeps up behind him.

See the Pen Duck in Luck, GSAP animation by Andy Clarke (@malarkey) on

His tail stops wagging, his ears shoot up, and he puts his paws in the air. This animation wouldn’t be possible using CSS or SMIL, but GSAP’s MorphSVG plugin made it easier to flip the dog’s ear and change the d values of his front paws to put them above his head.

More than just a fun side project

Creating Toon Titles Series 1 was more than just a fun side project—it was an excuse to explore the quirks and possibilities of web animation. I learned how to push CSS further than I thought it could go, rediscovered SMIL, and finally wrapped my head around GSAP (and even started to enjoy it.)

I hope this gave you a few ideas, and I have a lot more to explore. So, stay tooned.

All Toon Titles

Recent animation articles on Smashing Magazine

I’ve written a series of articles about CSS and SVG animations on Smashing Magazine recently:

Smashing Animations Part 1: How Classic Cartoons Inspire Modern CSS

Smashing Animations Part 2: How CSS Masking Can Add An Extra Dimension

Smashing Animations Part 3: SMIL’s Not Dead Baby, SMIL’s Not Dead

All Toon Titles

I’ve mentioned before that game composer Mike Worth hired me to create a highly graphical design that showcases his work. Mike loves ’90s animation, and he challenged me to find a way to incorporate a retro style into his design without making it a pastiche. But that wasn’t my only challenge. I also needed to achieve that ’90s feel by using up-to-the-minute code to maintain accessibility, performance, responsiveness, and semantics.

Pretty much every reference to web design in the ’90s–when I designed my first website–mentions Warner Brothers’ SpaceJam from 1996.

But I’m not going to do that.

Artificial colours and hyperactive design

SpaceJam was cheesy but nowhere near as much as Cheestrings from 1998, the year I started my studio.

This Cheestrings homepage is what we’d now derisively describe as a splash screen. It had no real content or navigation–just clickable graphics. Its layout was fixed at 723 pixels, small by today’s standards but not far off a mobile screen.

Like many heavily branded designs of the time, the whole page was one big sliced-up graphic, laid out with tables. But forget the limitations for a moment: Cheestrings was pure fun. The design was playful, colourful, and full of character. Navigation buttons orbited the mascots in a circular pattern, echoing the brand’s mischievous energy. The sunken buttons, deep shadows, and twisty typography gave it energy and depth.

Like the brand, the Cheestrings home page was (artificially) colourful and hyper-energetic. But most of all, it was fun! That makes me wonder why we don’t see sites designed like this today.

Of course, Cheestrings didn’t have a flexible layout at the time. But then, why would it have? Squeezing that design down for modern mobiles wouldn’t be clever. But what we’re now smart enough to know about making designs which deliver fabulous experiences across screen sizes.

Sure, accessibility was non-existent, but today, we know how to improve that using meaningful markup and CSS layout. Yes, text was set in images, but now, HTML text and web fonts deliver the style without sacrificing accessibility. Load times could be excruciatingly long, but since then, SVG illustrations animated with CSS or JavaScript have eliminated that problem.

So when a brand demands a design which is as engaging and fun-filled as Cheestrings, one which breaks with convention and uses design to tell its story, there really is nothing to stop it.

Giving me Goosebumps

Goosebumps was a children’s horror series in the '90s. I can’t say I remember watching it, but I do remember being haunted–in the best way–by its gloriously garish website.

Before those ubiquitous full-width header images bewitched web designers, websites frequently included banners that combined branding with navigation. The Goosebumps banner attracted attention with its neon colours–set against a dark background–and hand-drawn character illustrations. Its navigation to The Video Vault, Under Wraps, and Spill Your Thrills created a fun-filled narrative. And its mix of theatrical type styles gave its typography an energetic style that reflected the Goosebumps brand.

Yes, that text was set using images without alt text, and no, that wasn’t very accessible. Screen readers struggled, and keyboard navigation was non-existent. But today, we have ARIA, semantic HTML elements, SVG, and web fonts to create similar experiences without compromising accessibility. Most importantly, we know how much accessibility matters and what we should do to improve it.

Modern design, in contrast

Fast-forward to today, and the predominant design style looks very different. It’s cleaner-looking and flatter, with more whitespace. Typography looks more refined, and there’s often a clearer hierarchy. Thanks to the rise of mobile, websites are more accessible, frequently faster, and almost always responsive, something we couldn’t have imagined during the ’90s.

However, a generation of designers has learned to rely on frameworks and platforms. They’ve been taught that a good design fades into the background and makes content and functionality someone’s focus. They’ve been brought up performing research, creating user journeys, and making endless usability tests to shape someone’s experience.

The web has matured as an industry and a platform. But in solving those early problems, we’ve also lost some of the web’s early spark. Today’s sites are safer–but often, they’re also duller, less expressive, and ultimately less memorable.

Cartoon Network doesn’t just have an unbelievable catalogue of characters; they have an almost unimaginable source of visual material to draw from. But, despite this incredible variety, today’s UK Cartoon Network website lacks the originality and personality of its sites from the ’90s.

With its symmetrical layout of content cards and scrolling panels, Cartoon Network’s home page is neatly arranged but instantly forgettable. It’s like a library full of stories. It offers plenty for someone to explore but nothing that begs them to turn the page.

Today’s Cartoon Network layout is conservative and conventional. But, in 1998, it was a terrific example of how early websites could be filled with content without appearing chaotic or cluttered. Colourful blocks looked hand-placed and more like a patchwork than a grid, with sections stitched together with angled lines and almost no padding or spacing. It used clickable cartoon character images, novelty fonts and text effects, and sticker-style graphics so that no two sections looked alike.

Which brings me back to Mike Worth and the designs I made for his website–the perfect excuse to bring a bit of the ’90s back to life.

I love to hide Easter eggs in my client work, and Mike’s project was the perfect opportunity to reimagine the Cartoon Network layout from the era Mike loves so much.

Back then, the original homepage was just a 642-pixel-wide image, sliced up and dropped into table cells. For a moment, I was tempted to do the same. But I wanted to show how far we’ve come–and how modern tools can recreate that retro feeling without sacrificing performance or accessibility.

Reboot the retro

Web design today is more polished than ever–but in all that polish, we’ve smoothed out a lot of the personality. We’ve traded quirks for conventions and spontaneity for systems. And while there’s no denying the importance of accessibility, speed, and structure, it’s also worth remembering what made the early web so engaging.

Those neon colours, jagged layouts, and pixel-perfect oddities weren’t just products of technical limitations–they were expressions of creativity unburdened by rules. They were joyful. Surprising. Fun.

So, let’s design pages that invite people to explore, not just scroll. Let’s create experiences that don’t just work–but stick in someone’s memory. The past doesn’t need to be a blueprint–but it can still be a brilliant source of inspiration.

All Toon Titles

This time, Yogi’s in an SVG spaceship group which includes him, several paths which create the impression of movement, and some twinkling stars:

<g id="ship">
<g id="ship-whoosh-1" opacity=".5">…</g>
<g id="ship-whoosh-2" opacity=".5">…</g>
<g id="whoosh-stars">…</g>
<g id="yogi">…</g>
</g>

For this animation, I want:

1. Yogi to fly across a motion path
2. Then fly across another motion path
3. Stars to twinkle in a random-looking pattern

So I need two motion paths in my SVG, and I set their opacity to 1 during production, but make them invisible while I’m finished:

<path id="motion-path-1" d="…" opacity="0"/>
<path id="motion-path-2" d="…" opacity="0"/>

First, I linked to the GSAP script plus the additional motion path plug-in:

<script src="/gsap.min.js"></script>
<script src="/MotionPathPlugin.min.js"></script>

GSAP timelines are a straightforward way to control multiple animations. They make it easier to build animation sequences without manually adding delays between each one. For example, without a timeline, Yogi’s ship animation might look like:

gsap.to("#ship", { …, duration: 8 });
gsap.to("#ship", { …, delay: 1 });

This isn’t too much of a problem with just two animations, but adjusting delays would quickly become tedious if there were many more. So instead, I created a timeline called “ship” and applied that to my ship group. There are two animations in this timeline:

<script>
shipTl.to("#ship", { … } 
} )

.to("#ship", { … } 
} );
</script>

Then, I attached a motion path to each, plus an eight-second duration:

shipTl.to("#ship", { 
duration: 8,
motionPath: {
path: "#motion-path-1" }
} 
} )

.to("#ship", { 
duration: 8,
motionPath: {
path: "#motion-path-2" }
} 
} );

During the first animation, the ship is normal size. I want it to appear further away when it comes around again, so I scaled it down to make it look smaller:

shipTl.to("#ship", { 
…,
scale: 1 } 
} )

.to("#ship", { 
…,
scale: .5 } 
} );

Now, Yogi’s ship makes two passes along separate motion paths, and GSAP’s timeline feature means no more setting delays between each animation.

One of the most charming details in the original title card was the group of stars behind Yogi’s ship. I want to animate these stars to appear and disappear in a random-looking pattern. I created an SVG group and filled it with star-shaped paths:

<g id="whoosh-stars">
<path fill="#D79B26" d="…"/>
<path fill="#D79B26" d="…"/>
…
</g>

First, I created a constant which finds every path inside the whoosh-stars group and puts them into an array called stars.

const stars = gsap.utils.toArray("#whoosh-stars path");

Now, I can run animations on each star one by one using a forEach() loop. The GSAP set property sets the stars’ starting opacity to 0, so they fade in as they twinkle:

gsap.set(stars, { opacity: 0 });

forEach() cycles through each star in the array, one by one. Math.random() gives a random number between 0 and 1. duration = 0.2 + Math.random() * 0.3 means the fade in/out will take between .2s and 0.5s.

stars.forEach((star, i) => {
const delay = Math.random() * 3;
const duration = 0.2 + Math.random() * 0.3;

Like real stars, each star has random timing, so they twinkle at different times and speeds. To create the stars’ twinkling effect, I used a GSAP timeline again for each star, making it fade in and out, repeating indefinitely and with a short delay between each instance.

gsap.timeline() builds a sequence of animations for the current star. repeat: -1 makes the timeline loop forever. yoyo: true reverses the animation so the stars fade in and out. repeatDelay: Math.random() * 2 makes a star wait up to two seconds before repeating the animations. This makes the twinkling feel natural. The delay is the random starting delay I set earlier, which means the stars start at different times:

gsap.timeline({ 
repeat: -1, 
yoyo: true, 
repeatDelay: Math.random() * 2, delay })

Now, the stars twinkle independently, at different times, with a pause before repeating. The first animation in this timeline fades the stars to full opacity over the random duration I set earlier. To make the fade start and end smoothly, I set an easing function like a sine wave:

.to(star, {
opacity: 1,
duration,
ease: "sine.inOut" })

Then, the stars fade out again:

.to(star, {
opacity: 0,
duration,
ease: "sine.inOut" });
});

With these .to blocks inside a timeline which repeats indefinitely and yo-yos, the stars twinkle endlessly in a beautifully random pattern.

Finally, to soften the stars and help them blend into the whooshing effect, I applied a Gaussian blur filter to each one:

<g id="whoosh-stars">
<path filter="url(#whoosh-stars-blur)" d="…"/>
…
</g>

<filter id="whoosh-stars-blur" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur in="SourceGraphic" stdDeviation="1.5"/>
</filter>

GSAP continues to surprise me with how powerful—and fun—it is to use. This Toon Title taught me how timelines can simplify complex sequences, and how even tiny details bring a scene to life. I’m still learning, but with each Toon Title I make, I feel like I’m getting closer to the kind of characterful animations I’ve always loved in classic cartoons.

Read Web design inspiration from ’90s cartoons

• 1Password: $59
• Backblaze: $118
• Calendly: $144
• CodePen: $96
• Dropbox: £95
• Fantastical: £59
• Fastmail: $120
• Grammarly: $139
• Hey: $99
• Plausible: $96
• Nova: $58
• Sketch: $144

And what I pay for monthly:

• Adobe Creative Cloud: Too much
• ChatGPT: £20
• Kit: $49
• Midjourney: $12
• SendOwl: $18

Then, I checked European alternatives for non-US, possibly cheaper options to the services I use.

What’s staying

There are some services I won’t want to change. The peace of mind Backblaze provides is worth its weight in gold. I back up all my media, photos, and work archives to it. I need CodePen for article and book examples.

Nova is by far the nicest code editor, and Sketch is indispensable. Finally, SendOwl handles my digital product sales, so it’s staying on my list to keep. Then, there’s Fantastical, a nice-to-have. It’s much nicer than Apple’s calendar app, so it’s staying for now.

What’s going

As for what to let go: 1Password is Canadian, not American, but there are now plenty of alternative password managers, including Apple’s Passwords app and Switzerland-based Proton Pass.

I set up Calendly for mentoring and meeting bookings, but I don’t use it enough to warrant spending money on it. It will be gone when my annual subscription expires.

I’ve been a Dropbox customer since the beginning, and while £95 isn’t an unreasonable amount for temporary file storage and Paper, I can replace it with Proton Drive.

Fastmail has handled my business email for years, but I can move that to Proton Mail. Likewise, Hey, which I set up to separate my business and personal email, can go too. Proton has a single annual fee, including Proton Drive, Mail, a VPN, and more.

Grammarly will be tougher to move away from as I use it whenever and whatever I write. So before my subscription expires, I’ll disable it and try Language Tool, which is an EU-based free alternative.

Plausible is an EU company, but as I rarely check my website analytics, $96 per year is steep. I’ll be replacing it with Simple Analytics, which has a free tier.

I use ChatGPT and Midjourney, but I will drop to a free or cheapest plan unless I need them more often or for a specific project. Then, I’ll fork out for a month ad hoc.

Kit (formerly ConvertKit) is my current email newsletter provider. It’s good, but too expensive for the benefits I get from it. So, I’m exploring other options, including using the newsletter feature that comes with my Squarespace store.

That leaves Adobe Creative Cloud, which I resent paying for more than anything else.

I can replace Illustrator with Affinity Designer, which I already have. I can switch from InDesign to Affinity Publisher, which I already use, and from Photoshop to Affinity Photo. As for Premier, I bought Final Cut a few years ago but haven’t used it. So, I plan to wean myself off Adobe apps over the next three months and cancel Creative Cloud in July.

Back to my list of what’s going or staying:

• Adobe Creative Cloud: Switch to Affinity
• 1Password: Cancel
• Backblaze
• Calendly: Cancel
• ChatGPT: Ad hoc
• CodePen
• Dropbox: Switch to Proton Drive
• Fantastical
• Fastmail: Switch to Proton Mail
• Grammarly: Switch to Language Tool
• Hey: Cancel
• Kit: Cancel
• Midjourney: Ad hoc
• Plausible: Switch to Simple Analytics
• Nova
• SendOwl
• Sketch

So, that’s where I’ve ended up. A bit less going out each month, and more of it staying this side of the Atlantic.

All Toon Titles

I’ve barely scratched the surface with what GSAP can do, and writing its code doesn’t feel natural yet. But I’m getting there, becoming more familiar with the syntax and how to structure the elements in my SVG to get them ready for animating. Here are a couple of things I learned while making this Toon Title.

First, the setup of my SVG. I have three main groups: Yogi, Ranger Smith, and his high-energy zaps:

<svg …>
<g id="ranger">…</g>
<g id="zaps">…</g>
<g id="yogi">…</g>
</svg>

For this animation, I want:

1. Ranger Smith to move from off-screen to his natural position
2. Zap Yogi with hypnotic rays
3. Yogi to rise up, rotate to a horizontal position, and fly off to the left
4. Ranger Smith to turn and move back off-screen

So, I constructed the animation in that order. Every element in an SVG has a natural position based on its coordinates. I can override that using GSAP’s set method, which places the ranger 2500px to the right of his natural position and pushes him off-screen.

<script>
gsap.set("#ranger", { x: 2500 });
</script>

Ranger Smith then moves into position using the .to method and overshoots his mark by 30px to create a more realistic entrance:

gsap.to("#ranger", {
x: -30,
duration: 2,
ease: "power4.in"
});

(GSAP has easing options and a useful visualiser in its docs which explains the ease property better than I can.)

After the overshoot, Ranger Smith then moves back to his natural position (0):

gsap.to("#ranger", {
x: 0,
duration: 0.2,
ease: "back.out(3)",
delay: 2
});

For a reason that’s best explained by watching the cartoon, Ranger Smith hypnotises Yogi, represented in the title by zapping him with hypnotic rays. I have paths with two colour fills (#fff and #daca85) and can use the contents of their fill attributes to create an array:

const whiteZaps = gsap.utils.toArray('#zaps path[fill="##fff"]');
const goldZaps = gsap.utils.toArray('#zaps path[fill="#daca85"]');

I wanted the rays to flash randomly, but I didn’t like the complication of coding each one individually. So first, I set both types’ initial opacity to zero which makes them invisible:

gsap.set([whiteZaps, goldZaps], { opacity: 0 });

Then, I created a function which sets up the flashing rays:

function flashPaths(paths, delay = 0) {
return gsap.timeline({ delay, repeat: 30, yoyo: true })
.to(paths, {
opacity: 1,
duration: 0.05,
stagger: { each: 0.02, from: "random" }
})

.to(paths, {
opacity: 0,
duration: 0.05,
stagger: { each: 0.02, from: "random" }
});
}

This function takes two arguments: the paths I want to animate and a delay before starting the animation:

function flashPaths(paths, delay = 0) {
return gsap.timeline({ 
delay, 
repeat: 30, 
yoyo: true })

.to(paths, {
opacity: 1,
duration: 0.05,
stagger: { each: 0.02, from: "random" }
})

.to(paths, {
opacity: 0,
duration: 0.05,
stagger: { each: 0.02, from: "random" }
});
}

The animation repeats 30 times and yo-yos backwards and forwards, perfect for creating the zapping effect. Each path switches between visible and invisible every .05 seconds. The fun part is the stagger, which adds a delay between the start of each animation. Each ray flashes after the previous one, but by appearing random, the rays feel more realistic.

Once I had the function, I could call it. The white rays start flashing one second after Ranger Smith stops moving, while the gold rays begin their animation .15s later:

flashPaths(whiteZaps, 3.2);
flashPaths(goldZaps, 3.35);

GSAP timelines are a way to chain sequences of animations. When Ranger Smith’s hypnotic rays hit Yogi, I wanted him to rise into the air (1,) spin from vertical to horizontal (2,) bounce up and down (3,) then fly left and off the screen. My first task was to create a timeline for Yogi, which starts after the ranger and his rays have finished animating:

const yogiTl = gsap.timeline({ delay: 4.4 });

I then applied that timeline to each of Yogi’s animations in order, first by rising into the air and rotating:

yogiTl.to("#yogi", {
y: "-=80",
rotation: -90,
duration: 0.3
});

Then bouncing up and down by 5px for 5s:

yogiTl.to("#yogi", {
y: "-=5",
duration: 0.15,
yoyo: true,
repeat: Math.floor(5 / (0.15 * 2)),
});

Before finally exiting stage left:

yogiTl.to("#yogi", {
x: -1100,
duration: .25,
});

Finally, having succeeded in hypnotising Yogi, Ranger Smith turns and zips away to where he started from. The scaleX property and a value of -1 flips the ranger’s direction from left to right.

gsap.timeline({ delay: 9.65 })
.to("#ranger", {
scaleX: -1,
transformOrigin: "center center",
duration: 0.2,
ease: "power1.inOut"
})

.to("#ranger", {
x: 2500,
duration: 1.2,
ease: "power2.in"
});

This Toon Title was my most extensive GSAP animation challenge so far and the most fun I’ve had with it. I’m starting to get a feel for how timelines work, how to structure SVGs so they’re easier to animate, and how powerful even the smallest bit of easing or stagger can be when injecting character into flat artwork.

More Toon Titles coming soon as I’ve got my eye on a few more Yogi Bear episodes.

All Toon Titles

The Toon Titles I’ve made so far have all used SMIL (Synchronized Multimedia Integration Language) in SVG, which adds extra capabilities to simple CSS animations. SMIL isn’t dead but isn’t being developed, and performance is a concern, so I figured it was time to try something new.

SMIL animations can change an element’s attributes:

<animate 
attributename="cx"
from="50"
to="500"
dur="1s" />

Or control transformations, including rotations, scaling, skewing, and translations:

<animatetransform
attributename="transform"
type="translate"
from="0, 0"
to="500, 0" />

And they can even animate an element along a motion path:

<animateMotion
…
<mpath href="#yogi"/>
</animateMotion>

But by far, the most interesting aspect of SMIL is its ability to more easily synchronise animations using the begin attribute:

<animateTransform
id="dog"
type="translate"
begin="yogi.begin + 2s"
fill="freeze"
… />

NB: Watch out for a full explanation of SMIL on Smashing Magazine soon.

SMIL animations in SVG are powerful tools. They can bring a design to life without needing a framework or relying on Javascript. However, several people have mentioned that SMIL isn’t hardware-accelerated—unlike CSS and JavaScript animations—and that I should look at GSAP.

I’ve never written more than a few lines of Javascript, and I try to steer clear of frameworks whenever I can to avoid introducing outside dependencies. So this isn’t a lesson in GSAP; it’s just my experience using it for the first time while making this new Toon Title.

The minimised GSAP core script is 74Kb, and I won’t pretend to understand every byte of it, but I didn’t need to—it just worked. As Yogi and the dog in this animation move along a motion path, I also needed to include GSAP’s Motion Path plugin, which adds another 25Kb.

<script src="…/gsap/3.12.2/gsap.min.js"></script>
<script src="…/gsap/3.12.2/MotionPathPlugin.min.js"></script>

I needed two motion paths in my SVG to create the effect of Yogi moving from right to left, chased by the bounding dog. I used the opacity attribute to hide these paths:

<path id="motion-path-bears" d="…" opacity="0"/>
<path id="motion-path-dog" d="…" opacity="0"/>

<g id="move-bears">
<g id="yogi">…</g>
<g id="boo-boo">…</g>
</g>

<script>
gsap.registerPlugin(MotionPathPlugin);
</script>

In GSAP, a single animation is called a tween, and the syntax is straightforward enough that even I can get my head around it. There’s a method gsap.to, one or more targets #move-bears, and an object which contains information about the animation.

This tween has a duration of 5 seconds. It moves the bears along the #motion-path-bears path from their current position, and their X and Y positions are aligned to the bears’ centre. Then, the bears are moved up 200 to place them on the top of their path:

gsap.to("#move-bears", {
duration: 5,
motionPath: {
path: "#motion-path-bears",
align: "#motion-path-bears",
alignOrigin: [0.5, 0.5], 
offsetY: -200, },
ease: "power1.inOut",});

I wanted Boo-Boo to wobble as Yogi carried him across the screen, so I added a second tween, this time rotating him by 5 degrees over .75s. The yoyo value causes the animation to alternate backwards and forwards on each repeat.

gsap.to("#boo-boo", {
rotation: 5, 
transformOrigin: "center center", 
duration: .75,
yoyo: true,
repeat: 10,
ease: "power1.inOut" });

Whereas the bears move smoothly along an arched path, I wanted the dog chasing them to bound across the screen. First, I used GSAP’s set method to initially position the dog 3000px off-screen:

gsap.set("#dog", {
motionPath: {
path: "#motion-path-dog", 
start: 3000, }
});

Then, I added a tween, which moves the dog along its uneven path after a one-second delay:

gsap.to("#dog", {
duration: 4, 
delay: 1, 
motionPath: { path: "#motion-path-dog", … },
ease: "power1.inOut", });

The dog comprises three elements: body, ear, and tail.

<g id="dog">
<path id="dog-tail" … />
<g id="dog-body">…</g>
<path id="dog-ear" … />
</g>

I wanted the ear to move and its tail to wag while the dog moved. Those tweens are similar to how I made Boo-Boo wobble, using yoyoing rotations with different transformOrigin values:

gsap.to("#dog-tail", {
rotation: 5,
transformOrigin: "bottom left", 
duration: 0.2,
yoyo: true,
repeat: 30,
ease: "power1.inOut" });

gsap.to("#dog-ear", {
rotation: 10,
transformOrigin: "top center",
duration: 0.2,
yoyo: true,
repeat: 20,
ease: "power1.inOut" });

I’ve only scratched the surface of what GSAP can do. But now Yogi flees, Boo-Boo wobbles, the dog chases, its ear twitches, and its tail wags. The syntax felt intuitive, and the transition from SMIL was smoother than I expected. Despite my usual hesitation around third-party scripts, GSAP’s earned a place in my toolkit—and I’ll reach for it again.

See the Pen Stranger Ranger SVG animation by Andy Clarke (@malarkey) on CodePen.

Check out Toon Titles

Or see the source code on Github.

I’m not an animator by trade, so if you fancy forking these Toon Titles and making new versions, I’d love to see them.

See the Pen The Buzzin’ Bear SVG animation by Andy Clarke (@malarkey) on CodePen.

Check out Toon Titles

Or see the source code on Github.

I’m not an animator by trade, and I’m relatively new to CSS and SMIL animations, so if you fancy forking these Toon Titles and making new versions, I’d love to see them.

Read Web design Smash Hits

See the Pen Scooter Looter SVG animation by Andy Clarke (@malarkey) on CodePen.

The animated shorts Hanna-Barbera made in the late 1950s and ’60s lacked the budgets given to live-action or animated movies. They were also far lower than when the pair made Tom and Jerry cartoons for MGM Cartoons. This meant the animators needed to work around their cost restrictions and the technical limitations of the time.

See the Pen Big Brave Bear SVG animation by Andy Clarke (@malarkey) on CodePen.

Hanna-Barbera’s animators’ simple and efficient techniques can now be implemented using CSS, SVG, and SMIL to bring static experiences to life. To learn what they’re capable of, I’ve been animating Toon Titles.

Check out Toon Titles

Or see the source code on Github.

I’m not an animator by trade, and I’m relatively new to CSS and SMIL animations, so if you fancy forking these Toon Titles and making new versions, I’d love to see them.

Hyphenated ID values stop chained animations from working in Firefox

SMIL enables you to create a sequence of animations which either begin or end relative to other named animations. Take this Toon Titles example based on Yogi Bear’s Big Brave Bear from 1958, where Yogi enters the frame and is chased quickly after by the car. I chained the two animations together like this:

1) I gave the Yogi animation a name:

<animatetransform
id="yogi-enter"
… />

2) I set the car animation to begin one second after Yogi began:

<animatetransform
id="car-enter"
…
begin="yogi-enter.begin + 1s" />

That animation worked perfectly in Blink and Webkit-based browsers, but in Firefox, the car just never appeared. After scratching my head and comparing this chain with others I’d made for Toon Titles, I realised the problem was the hyphenated ID values.

After changing the hyphens for underscores, the car arrived in Firefox, too.

<animatetransform id="yogi_enter" />
<animatetransform id="car_enter" />

Noise filters kill performance in all versions of Safari

When you look at many of the original Yogi Bear title cards, the artwork’s background has a texture which I wanted to add to some of my Toon Titles, like this one based on Scooter Looter from 1959.

Noodling around the web, I found an SVG grain generator and used it to add a grainy layer over my SVG’s background :

<filter id="grain" …>
<feTurbulence type="fractalNoise"
…
result="turbulence">
</feTurbulence>

<feColorMatrix
…
in="turbulence" result="colormatrix">
</feColorMatrix>

<feComponentTransfer
in="colormatrix" result="componentTransfer">
…
</feComponentTransfer>

<feColorMatrix x="0%" y="0%"
in="componentTransfer"
…>
</feColorMatrix>

</filter>

<!-- noise -->
<path fill="transparent" 
filter="url(#grain)" 
d="…" 
opacity=".25" 
style="mix-blend-mode: overlay"/>

But, just applying this filter turned every other animation into a stuttering mess in all versions of Safari, from Scoob’s 5-year-old iPad to Technology Preview on my M1 Max-powered Macbook Pro with 64Gb RAM.

Needless to say, I removed the filter, and the animations moved smoothly again.

Those are two quick gotchas about SMIL animations I’ve found while working on Toon Titles. I’m sure there’ll be more as I build my collection.

Check out Toon Titles

Or see the source code on Github.

Read Movie poster-inspired web design

Premium Squarespace templates

To encourage Squarespace designers and developers to create inspiring work, we’ve launched Stuff & Nonsense Premium Squarespace templates. We designed these Squarespace templates for website designers, developers, and web professionals in mind. However, they’re equally ideal for creative professionals, consultants, freelancers, and businesses who want a stand-out website design. Each Squarespace template is a complete website design ready to be customised.

Visit Premium Stuff & Nonsense Squarespace templates

Read Fanzinetastic web design

Premium Squarespace templates

To encourage Squarespace designers and developers to create inspiring work, we’ve launched Stuff & Nonsense Premium Squarespace templates. We designed these Squarespace templates for website designers, developers, and web professionals in mind. However, they’re equally ideal for creative professionals, consultants, freelancers, and businesses who want a stand-out website design. Each Squarespace template is a complete website design ready to be customised.

Visit Premium Stuff & Nonsense Squarespace templates

Premium Squarespace templates

To encourage Squarespace designers and developers to create inspiring work, we’ve launched Stuff & Nonsense Premium Squarespace templates. We designed these Squarespace templates for website designers, developers, and web professionals in mind. However, they’re equally ideal for creative professionals, consultants, freelancers, and businesses who want a stand-out website design. Each Squarespace template is a complete website design ready to be customised.

Visit Premium Stuff & Nonsense Squarespace templates

Last year, I worked with several composers and sound designers who wanted their websites to contain information about their work, look professional, and reflect their personalities. Composing and designing sound for film, TV, and video games is a competitive business, and many decisions about who to hire are made in the first few seconds.

They told me repeatedly that out-of-the-box Squarespace and Wix templates aren’t designed with music professionals in mind. Plus, they use generic layouts and patterns, so they all look very similar. This is hardly ideal for a creative industry like music.

After talking with my composer and sound designer friends about what a music professional’s website must contain and how it should be customisable to fit a musician’s brand, I added three new designs made specifically for artists, bands, composers, sound designers, and other music professionals.

Pages for music professionals

Each set of templates includes pages for:

• Home (two alternatives)
• About
• Contract
• Discography
• FAQs
• Filmography
• Gallery
• News
• Reviews
• Showreel
• Tour dates
• Videos
• 404

All are highly customisable to match any music professional’s brand colours, business, and content. For ReelCrafter customers, there’s also an easy way to add embedded reels to any page.

These templates cost £249 per website, so emerging artists, bands, composers, sound designers, and other music professionals can have a website which stands out while showcasing their work. There’s also a 10% launch discount until January 30th 2025 using the offer code LAUNCH10.

View templates

I’m not someone who can sit idle, though, and I constantly need to find ways to stimulate my imagination. That’s why I’ve spent time this year developing new products and putting my energy into making videos. The first of my design tutorials for Envato will be out in the new year, and in the meantime, I’ve made my series of videos on YouTube.

I’ve also branched out into making Squarespace design templates and have learned a lot about that business. Then, there’s the Contract Killer, which saw its biggest update ever this year.

In 2025, I plan to develop more templates, make more videos, and write more articles. My Unfinished Business podcast will make a long overdue return with a new co-host and format. My Design Chatter events will also restart after the holiday break with a new format, allowing me to share more about my design process.

2024 was rough, and I hope 2025 will be a better business year for me, you, and everyone else. Happy Christmas.

Love, Andy

This is my first time selling Squarespace templates, and I knew I wouldn’t get everything right. Thanks to some incredibly useful feedback from people in the Squarespace community, I’ve updated my three templates with a host of new components and page designs.

New demo content and images

Me being me, I wanted all of the templates in this first set to have a common theme so they looked great together. It turns out that’s not especially useful for people choosing which template to buy. So, I’ve now given each template unique content and images based on popular Squarespace template categories.

Squarespace is often used by bars and cafes, hospitality, hotels, and people who offer professional services. Fleckhaus illustrates how the template can be used for a hotel, Gerstner shows the template used for a cafe, and Pintori for a piano teacher. Of course, the layouts are flexible so that they can be easily adapted for many other purposes. I hope these changes better demonstrate how my templates can be used to make compelling designs using Squarespace.

Limited to 250 worldwide licences per design

Just as before, I limit each Stuff & Nonsense Squarespace template to only 250 installations to help our customers’ websites look distinctively different. Whereas Squarespace free templates have been used thousands of times on countless websites, the number of websites using Stuff & Nonsense Squarespace templates will always be limited, helping them stand out.

Dagnabbit discount

I had hoped to get these new templates ready for Black Friday. But. Dagnabbit. I didn’t. So, instead, I’m offering a 10% discount until January 30th 2025 when you use the discount code LAUNCH10.

• Stuff & Nonsense Premium Squarespace templates
• Fleckhaus template demo
• Gerstner template demo
• Pintori template demo

I hope you like them.

Charities, NGOs, and non-profits are some of my favourite clients. I’ve been fortunate to work with Greenpeace and WWF, to name two. In both projects, I used storytelling to engage the audience and encourage them to support the charity. Balancing creative direction and user-experience design is one of my favourite things to work on.

For over a decade, I’ve worked with Equfund. That organisation provides affordable accommodation to people in Liverpool.

I’ve made their websites and designed their quarterly supporters’ newsletter.

The scandal of homelessness

It’s a scandal that homelessness exists in this country or any other in the 21st century. It’s unacceptable that charities like Crisis are left to solve the problem.

Crisis has been a campaigning voice for homeless people for almost sixty years. Last year, they supported a new bill in Parliament to root out rogue landlords, and the year before, they succeeded in their campaign to repeal the Vagrancy Act.

Crisis aims to be bold and impactful

Crisis strategy documents and mission/vision statements present them as being “bold” and “impactful.” They talk about “not being afraid to try new things,” “taking risks,” and sometimes failing.

Well, that attitude isn’t clear from their website design, which is neither bold nor impactful. Look, I mustn’t come down too hard on Crisis. This lack of strong design isn’t unique to them. Take a cursory look at other homelessness charity websites; you’ll find the same generic layouts and typography.

Shelter is one of the best-known homeless charities, and its website design suffers from the same issues. After asking people to donate, it explains that 150,000 children will go to bed homeless, but its content design leaves a lot to the imagination.

Likewise, Centerpoint leads with a request for donations inside—yes, you guessed it—another full-width banner. Their powerful message—that another young person faces homelessness every four minutes—isn’t matched by their content design.

St. Mungo’s approach is conventional, but its design adds personality to its messaging. Still, I’m baffled why their eye-catching new “We’re here” campaign posters aren’t included in the website design. (I’d love to work on integrating those assets, but that’s probably a topic for another video.)

Glassdoor includes facts about the impact of their work, but they’re placed far, far down the page beneath the scroll and aren’t links to ways people can support Glassdoor. Like many homelessness charity websites, including Crisis, Glassdoor includes stories about their work and its impact.

Like the RSPCA’s stories I spoke about in a previous video, the Crisis stories section lacks clarity, direction, and a hierarchy that draws people in and encourages them to engage. It leaves me with questions:

• What story should someone read first?
• Why choose Gaz’story over Charlotte’s?
• How many people scroll as far down as Stuart’s story or Mohammad’s?

These are essential questions to ask before beginning a redesign. The design of these stories isn’t especially inviting. They’d benefit from an upgrade to the article template to improve its typography or an editorial overhaul to tell those stories better.

Redesigning information about homelessness

But this video isn’t about Crisis stories; it’s about how the charity’s website can be bolder and how redesigning its information about homelessness can make it more impactful.

Take this article on the cost of homelessness. It’s packed with facts, but you wouldn’t know that from its content design. The same applies to this article on types of homelessness. Again, it’s full of figures, but they’re buried in a block of text, and nothing in the design explains or illustrates them.

When tackling a redesign like this, my first job is to study the content, looking for facts, figures, or phrases that I can highlight using graphics or typography.

I could scour the document and underline the data, but I prefer to let ChatGPT handle that job. I added a prompt and provided the URL of the “types of homelessness” page. ChatGPT then gave me a handy list of the numerical data on the page.

Numerical data is text, and a typeface with fantastic-looking numerals can go a long way in bringing this content to life. A typeface like Museo and Museo Sans, chosen by Crisis, offers a variety of styles and weights for designing facts and figures. There are serifs, sans-serifs, condensed, and rounded styles, which I can mix to add interest while keeping the design connected. I often use a condensed version of a typeface when space is limited and on small screens. Then, I switch to a regular or extended version when there’s more space available.

Making minor adjustments to the tracking for numerals—letter-spacing for CSS types—can significantly affect their appearance. Ordinarily, longer strings look better when there is more space between the numbers, but when numerals appear larger, negative tracking solidifies them into blocks.

But it’s not just numerals that need the type styling; symbols do, too. So, when 3,069 gets abbreviated to 3k, how should the “k” look? I made it smaller than the number. Should the plus (+) and percentage symbols be lighter in weight? I could sit them on the baseline or shift them up.

How should the typography adapt when reversed on a darker background? The symbols could be lighter, and the numbers made heavier by switching to the display version of a typeface if there’s one available. Museo Sans has a terrific display font for these large, boxed-in numbers.

The original Crisis article design didn’t differentiate between the different types of content. This improved design doesn’t only change how the content looks. Dividing the content into clearly defined sections and emphasising the numbers helps people understand it more easily.

I’m obsessive about details. Look closely; maybe you’ll see I’ve used thicker lines to separate sections and thinner lines between the items inside a section.

The Crisis brand is bold and impactful, so I should style those sections to align with the brand with the solid colours and sharp edges of the Crisis logomark. I’m always keen to keep colours to a minimum, and the pairing of signature red and dark grey makes very stylish panel backgrounds.

I could consider adding images to illustrate the content in each panel. To maintain their overall size, I switched to the condensed version of Museo Sans, which fits the same content into a smaller space. The small screen design of these panels would also make very effective infographics for sharing on the charity’s social channels.

Consider the purpose of information

Before beginning any new content design, it’s critical to consider the purpose of the information and the messages you intend to communicate. This Crisis article about homelessness types should tell its audience that:

• Homelessness is a growing problem
• The effects of homelessness are serious
• Homelessness comes in several forms
• It affects people in different ways

Remember, this page isn’t disconnected from other parts of the website. It’s part of a journey, and its goal should be to convince people of the seriousness of homelessness and encourage them to support Crisis by donating. Sadly, the original design fails at every step, and it’s crying out for a redesign.

Crying out for a redesign

I started by selecting an evocative background image. Then, I removed the colour and applied a vignette.

I blocked out content areas and arranged them around the image’s focal point, considering the hierarchy and source order and how it would be displayed on medium-size and small screens.

Reading content on the original design is a thoroughly unpleasant experience. Far from being immersive and allowing someone to settle into reading, its single column of unappealing text could look more attractive and engaging. Restructuring the content into sections and using a compound grid of four and five columns can transform someone’s reading experience. So, what’s a compound grid?

Simply put, it’s two or more grids that overlap or stack on the same page. The familiar 12-column grid Crisis uses gives us four even-width columns. Odd numbers of columns are less frequently used online but can be helpful, especially when it overlaps four columns, creating a compound grid with eight columns and a distinctive rhythmic pattern.

So now I have three options for laying out Crisis’s content: the familiar four columns, the flexible five columns, and a combination of the two. I can use one or more of these on a page to create various layout patterns that all feel connected.

For this redesign of the article about the types of homelessness, the compound grid adds tension to the composition. The look in the young man’s eyes draws someone into the content and makes them want to discover more. Zooming into the man’s eyes helps someone connect with his situation. It amps up the drama and increases our pathos.

Crisis should want its website design to be as bold and impactful as its brand values. Those oversized numerals already look captivating, but by combining their gigantic size with graphic elements, they won’t politely ask someone to pay attention; they’ll demand to be noticed.

Storytelling stirs emotions

Storytelling stirs emotions and fosters strong personal connections. When people interact with a narrative, they’re significantly more likely to remember it. Visual elements like graphics, illustrations, and photographs enhance the memorability of stories. This is down to our innate attraction to images. Our brains process pictures more easily, enabling us to retain their information.

Illustrated content doesn’t just make your content look more appealing; it makes information glanceable and can explain complex ideas in ways that text alone can’t.

Plenty of libraries have off-the-shelf charts, so you often see these data visualisations in products and websites. However, rather than relying on someone else’s methods for presenting data, you should find ways which are authentic to a brand.

Instead of an out-of-box column chart, I used differently-sized houses to represent the number of people sleeping rough in the four nations of the UK. This design is understandable, visually appealing, and customisable with the Crisis signature colours.

Content should be illustrated in ways that resonate with a brand’s identity, and brands should tell stories in their own way and use their unique style to stand out.

Illustrating content

Remember, illustrating content is as much about the story behind the data as it’s about the data itself. Graphics like these present information in engaging and informative ways. I used differently-sized buildings to represent the 26% increase in rough sleeping; then, I increased the size of one of these boxes to demonstrate the 61% increase in London’s rough sleepers.

Graphics simplify complex subjects by breaking them into easily recognisable visual assets. This makes graphics like these powerful tools for communicating with diverse audiences. So, whereas the original design hides its information, this redesign brings it into view. I combined evocative imagery, graphic illustrations, and a selection of type styles and weights to add a new dimension to the design while balancing creative direction and user experience design.

When someone donates, they have several questions that need answering. They want to know what or whom their donation will benefit and how that money will be spent. Answering these questions can be a fabulous opportunity to combine creative direction with user experience design.

The Crisis Christmas campaign

The Crisis Christmas campaign page includes a motivating story and information about what a Christmas donation could provide. But somehow, the composition of this page feels disjointed, as there’s no connection between the story and the donation form.

There’s also nothing about how someone’s money will be spent nor any information about their previous successful activities to reinforce why someone should donate. They’d have to track down the Crisis Annual Report for that information.

That Crisis Christmas campaign page could be instantly improved using a modular grid to add hierarchy and structure. The donation form fills four of the twelve modules in the top-most field, and the adjacent donut chart lets people know precisely how their money will be spent.

The modular grid, module size, and typographic scale add hierarchy and structure to the added stories. Most occupy a single module, but Johnny’s story has been proven to attract donors, so I set that in six of the eight columns in that field to create a large spatial zone.

Creative direction can help maintain the connection between motivation and donation by making them part of the same journey rather than separate experiences.

Connecting motivation and donation

Motivational stories help people know what or to whom their donation will benefit, so connecting them to ways for someone to donate makes sense. This new design for Charlotte’s story page inspires donations, and it’s essential to keep her in mind when someone takes the next step to support her.

This redesigned donation page includes images and text that connect these two pages. Previous successful activities can reinforce why someone should donate, so this new page provides information about how many people Crisis helped last year, the number of people who received 1–1 support, and how many ended their homelessness for good.

Where possible, donation pages should feel connected to the page that refers them. This is done by using creative direction to keep critical messages at the forefront of people’s minds. That’s as true for information pages as it is for motivational stories.

When someone’s motivated to donate after learning about the various types of homelessness, how many people sleep rough, and the number of families in temporary housing, the following donation page should reinforce that information.

So, on this final donation page redesign, I connected its design with the referring page using the same graphic illustrations and photographs. The photograph establishes an emotional connection between the subject and the reader. At the same time, the graphic illustrations and typography bring the content to life and make her story—and how Crisis can support her—even more compelling.

Full versions of my designs

Article redesign

Information with typography

Information with graphics

Donation page

Information with graphics

Donation page

I’m passionate about combining creative direction with user experience design and would love to help more charities. Of course, this redesign was me imagining what I’d do if Crisis called Stuff & Nonsense. I have no insight into their CMS, design, development, or editorial processes and haven’t had to consider their unique challenges. Most of all, I don’t have to answer to anyone if my assumptions are wrong.

What do you think? Does my redesign make the facts about homelessness more real? Does it better tell the story of the Crisis charity, and would it encourage more people to support them?

And if you’re reading this from Crisis, I’d love to work with you.

Crisis has been a campaigning voice for homeless people for almost sixty years. Crisis strategy documents and mission/vision statements present them as being “bold” and “impactful.” They talk about “not being afraid to try new things,” “taking risks,” and sometimes failing. But does their website design live up to those goals?

I’m passionate about combining creative direction with user experience design and would love to help more charities. When tackling a redesign like this, my first job is to study the content, looking for facts, figures, or phrases that I can highlight using graphics or typography. Visual elements like graphics, illustrations, and photographs enhance the memorability of stories. This is down to our innate attraction to images. Our brains process pictures more easily, enabling us to retain their information.

Illustrated content doesn’t just make your content look more appealing; it makes information glanceable and can explain complex ideas in ways that text alone can’t. Creative direction can help maintain the connection between motivation and donation by making them part of the same journey rather than separate experiences.

Watch on YouTube:
https://youtu.be/v90fVUttlq4

Crisis:
https://www.crisis.org.uk

My wife has always believed that her family were immigrants for a few reasons. The eldest daughters have always been called Letsy, an uncommon name with a Spanish origin meaning “joy.” Sue’s dark colouring and the fact that people regularly remark that our daughter Alex looks Spanish or Portuguese made sense if her family had roots in Spain or possibly Portugal.

Then there’s Jeremiah Shirbird — anglicised from “Sherberg?” — her distant relative and a watchmaker with distinctly Jewish features. Around 1880, Jeremiah lived and worked in London’s East End. It was a vibrant Jewish community where Jews had settled from many parts of Europe. Many were expelled from Portugal in the fifteenth century and came to London, so we imagined there might be some connection to her family history. To find an answer, Sue suggested we test our DNA.

I didn’t expect to find out much I didn’t already know about my family. Andrew Doyle is the name on my birth certificate. My Dad was John Doyle, and his father was Francis Joseph Pious Doyle. Further back, I can’t say for sure, but I’ve always thought of myself as coming from Irish roots.

Sue and I spat in our tubes, stuck on our respective labels, sent our spit to Ancestry, and waited. When we got the results, something happened that affected me in ways I can’t explain.

Sue was surprised to find no mention of Portuguese or Jewish ancestry when she logged in to see her results. It wasn’t the result she’d expected. Her markers were from southern England, mainly around Kent and London, plus a smattering of Irish.

On the other hand, mine were extraordinary, with 64% coming from England and 24% Ashkenazi Jew. Only 3% of me is Irish. In fact, Sue’s more Irish than I am in percentage terms.

24% indicates Jewishness from a grandparent. So, I compared my results with those of my brother from the same mother, and he has no Jewish markers, meaning mine must’ve come from my Dad’s side of the family.

Only the daughter of my other brother from the same father has taken a DNA test, and she has no Jewishness. So I’m left wondering, where does mine come from?

Being 24% Jewish is a puzzle. Maybe my mother met a travelling salesman? I don’t know, but she did that at least once, which led to one of my brothers. Being 24% Jewish doesn’t bother me, but what does is not being more than 3% Irish.

My mental picture of myself has always been Irish. I’ve spent time in parts of Ireland where Doyles are common. After Brexit, I researched whether my grandfather Francis Joseph Pious Doyle was born in Ireland, hoping he might’ve made getting an Irish passport possible. Sadly, he was born in Carlisle in the north-west of England. Still, maybe, I thought, my dad’s dad’s dad was probably Irish; therefore, my roots were too. But, according to my DNA results, they weren’t.

I’m no more Irish than Guinness brewed in Baltimore.

While Sue took her DNA test looking for answers, I was left with questions. Who am I? Where are the bits of me that make me, me, from?

All I know right now is that I took a DNA test, and I’m not who I thought I was.

The RSPCA’s rebrand work was handled by London-based branding agency Jones Knowles Ritchie (JKR) and includes a custom typeface called Wilberforce Sans, designed exclusively for the RSPCA by type foundry Studio DRAMA. It was inspired by protest signs they found in the charity’s archives.

Rebrands are often controversial, and The Daily Mail described the RSPCA’s rebrand as “wildly woke.” However, I was keen to see if JKR’s distinctive design translated to the RSPCA’s website design.

(Here’s a spoiler. I didn’t.)

Watch on YouTube:
https://youtu.be/B7RW9XCo6ZQ

RSPCA:
https://www.rspca.org.uk

Jones Knowles Ritchie (JKR):
https://www.jkrglobal.com

ProPublica:
https://www.propublica.org

The RSPCA rebrand

One of my favourite charities is the Royal Society for the Prevention of Cruelty to Animals (RSPCA.) This year, the charity unveiled its first rebrand in 50 years, marking its 200th anniversary. The work was done by London-based branding agency Jones Knowles Ritchie (JKR.)

The previous RSPCA logotype was tightly tracked and trapped in an octagon. The new logo uses a custom typeface called Wilberforce Sans, designed exclusively for the RSPCA by type foundry Studio DRAMA and inspired by protest signs they found in the charity’s archives.

Its tracking is now open, and JKR cleverly kept the octagon for the period in the logo and used it again for the animal icons, which blend beautifully with the style of the brand typography.

The RSPCA has always been associated with blue, but JKR introduced a brighter, more saturated Swallow Blue plus a suite of supporting colours, with names like Butterfly Blue, Fox Red, Lizard Green, and Rabbit White.

Rebrands are often controversial, and The Daily Mail described the RSPCA’s rebrand as “wildly woke.” However, I was keen to see if JKR’s distinctive design translated to the RSPCA’s website design.

(Here’s a spoiler. I didn’t.)

What’s up with the RSPCA website?

Sadly, although the RSPCA’s website design includes all the elements designed by JKR and Studio DRAMA’s Wilberforce Sans, the implementation leaves plenty of room for improvement.

What’s up with the RSPCA website? Well, despite its boldness, the RSPCA’s new typeface plays only a supporting role. The bulk of their typography is carried by Roboto–one of the intentionally least characterful fonts anyone can choose–designed by Google for its products and available free from Google Fonts.

Then there’s the website’s layout. With its generic 12-column grid, ubiquitous full-width banners, and two-, three-, and four-up components, it bears more than a passing resemblance to GOV.UK, a website hardly known for its flair for storytelling.

Its index pages lack hierarchy, and its article pages lack cohesiveness, which results in an unfocused reading experience.

I was especially interested in these charities’ story pages, which should be designed to draw readers in, capture their imaginations, tug on their heartstrings, and encourage their support.

The RSPCA stashes its stories in the Next Gen section, implying they’re primarily for younger readers. However, the cookie-cutter content cards on the index page do little to capture anyone’s imagination, and the article layout is anything but engaging.

Look, I mustn’t come down too hard on the RSPCA. This lack of originality is hardly unique. Browsing other animal charity websites reveals the same generic layouts and components.

The Donkey Sanctuary’s full-width banner and left-right lock-ups can be found on countless websites. Single columns are many designers’ standard solutions to solving responsive design challenges, but these long lines of text combined with exaggerated paragraph spacing produce a particularly unpleasant reading experience. That’s hardly helped by the seemingly randomly placed images interrupting the copy flow.

Sadly, things are not much better at The People’s Dispensary for Sick Animals, where the pet patient stories start on a seemingly unstructured index page. Its single-column full-width images and text are stacked to form a scrolling skyscraper. Without a hierarchy of headlines, blockquotes, or, in fact, any typographic design, the PDSA’s article pages do little to tell their stories through type. It’s a problem I frequently find when clients add content to their CMS without it being designed to tell an engaging story.

Stories on The Dogs Trust website start with a yellow-branded panel, which introduces but is otherwise detached from the rest of the page design. There are 70 stories in their archive, but this index page shows just six, stacked two up in cards. I’d put money on only the most diehard doggy lovers going further than this initial page. Except for its blockquotes, The Dogs Trust article pages are absent any actual typographic design and, just like the PDSA, full-width images and text are stacked to form a single-column scrolling skyscraper.

Look, I get it. Frameworks and templates make web design easy. Conventions often mean there’s no incentive to design something distinctive. Designing systems for non-designers who input content is challenging, and maintaining it in the long term is even harder. Been there, done that. But honestly, is this the best we can do?

Back at the RSPCA, their story pages have all the ingredients of a sensational story design. JKR’s colour palette and graphics are present, and The Wilberforce Sans typeface evokes those protest placards which inspired the rebrand. But there’s literally nothing else in this design which contributes to that narrative.

I challenged myself to redesign RSPCA stories

How would I approach this project if the RSPCA called Stuff & Nonsense? How could I improve their website design and get the most from JKR’s rebrand work? I challenged myself to redesign their stories using their content, images, and graphic assets and keeping their colours and typefaces the same.

The RSPCA’s stories index page contains three rows of three columns. But while this creates the appearance of structure, it doesn’t deliver a hierarchy, tell people which are the most important or recent stories, or suggest which story they should read first.

The modular grid

I replaced this arrangement with a modular grid and used module size and a typographic scale to add hierarchy and structure. What’s a modular grid? Modules are rectangles or square units, and modular grids arrange them horizontally and vertically.

I can use each module independently or combine them to form what is known as a “spatial zone.” Devoting more space for content using spatial zones creates a hierarchy, with the largest units at the top and progressively smaller units further down.

I can make more exciting compositions and add rhythm to a design by incorporating wider or taller spatial zones.

I removed the introduction’s yellow background and incorporated the magazine subscription to integrate that section into the composition. Without a background, the eye can wander more freely towards the stories’ grid.

Most stories in this grid occupy a single module, but “How Reggie the Puppy Got a New Home” is the most-read story in this collection, so I set it in six of the eight columns in that upper field to create the largest spatial zone. Reggie’s story is at the top of the hierarchy, so I should only use this pattern once per page. Articles about beavers and seals–neither as cute as puppies–sit neatly alongside.

Other spatial zone sizes can define their stories’ place within the hierarchy, so second-level stories occupy four of the eight columns in this field. I can vary the position of the larger story, putting it on the left, on the right, or in the centre to create an interesting flow as the reader scrolls down the page. The article order was unclear in the original RSPCA design, but this redesigned layout uses its modular grid to define a hierarchy. It looks orderly and structured, but most importantly, it feels intentional.

Teen magazines

I couldn’t get out of my head that the RSPCA had organised these stories into a section intended for kids. I’m not a regular reader of teen magazines, but I have been known to pick one up on those irregular trips to the supermarket. Their covers look chaotic and crammed, but their energy is contagious.

The RSPCA produces a quarterly magazine called Animal Action, which could be fun. But nothing about the current story section could be described as fun.

“Keeping consistent doesn’t mean things must look the same, but they must feel connected.”

Inside pages of teen magazines aren’t any less energic and frequently feel like the designers have thrown any rule book out of the window. But, how can this approach possibly coexist with the RSPCA’s visual identity? Keeping consistent doesn’t mean things must look the same, but they must feel connected. That connection might come from the colour palette, the grid you use, or the suite of typefaces. Not all of these things need to stay the same across every application, but there must be a thread that stitches them together.

Take those content cards on the RSPCA’s stories index page. They would look more fun if they were transformed into instant photos scattered across the page. [img-38] Although the arrangement appears random, the grid still defines the placement and size of these photos and pull quotes.

Flat colours, a lack of texture, and sharp edges have made much of the web design look two-dimensional. This is in stark contrast to magazines read by the young people who are the audience for the RSPCA’s stories. I could add lines to the background to introduce depth and then scatter the RSPCA’s new animal icons to add interest and lead someone’s eye down the page.

Maybe it’s their energy? Perhaps it’s because they don’t look like they follow the rules, but there’s something optimistic, even joyful, about teen magazine design. If I were responsible for inspiring young people to read RSPCA stories and possibly even subscribe to their magazine, I’d want some of that joy and optimism in my design.

By rotating elements and using a mixture of irregular shapes, I could add energy to this design without altering the colour palette or changing the typefaces.

Layering elements–like this sticker-style headline–can add depth. Introducing a gradient background made by mixing two brand colours reduces the flatness, and scattering those animal icons gives the design an energetic feel.

So far, I’ve stuck religiously to the RSPCA’s new typography palette, but sometimes, an eclectic mixture of typefaces is what’s needed. The RSPCA uses this approach in its Animal Action magazine, and it can instantly transform a design.

Crafting a reading experience

Reading an article on many animal charity websites is a thoroughly unpleasant experience, and that’s true of the RSPCA. Far from being immersive and allowing someone to settle into reading, this single column of disjointed, unstructured, and unappealing-looking text is simply off-putting.

The compound grid

Restructuring the content into sections and using a compound grid of four and five columns can transform someone’s reading experience. So, what’s a compound grid?

Simply put, they’re two or more grids that overlap or stack on the same page. The familiar 12-column grid the RSPCA uses gives us four even-width columns. Odd numbers of columns are less frequently used online but can be helpful, especially when it overlaps four columns, creating a compound grid with eight columns and a rhythmic pattern of 4,1,3,2,2,3,1,4.

So now I have three options for laying out the RSPCA’s content: the familiar four columns, the flexible five columns, and a combination of the two. I can use one or more of these on a page to create a variety of layout patterns that all feel connected.

For this redesign of the story about Reggie finding a new home, an asymmetrical layout from the five-column grid adds tension to the introduction, emphasising the sad look in this bedraggled puppy’s eyes. It draws someone into Reggie’s story and makes them want to discover what happens to him.

Beneath that introduction, the balance from a four-column grid feels reassuring, just like the sight of Reggie playing with his new family.

The five-column grid is perfect for this sequence, showing Reggie chasing and catching his ball. Rotating those images and making them progressively and playfully larger injects energy into Reggie’s story.

Zooming into Reggie’s eyes helps someone connect with his plight. It amps up the drama and our pathos. Re-cropping images to tell a story better is often an opportunity to rearrange the text in a banner, dramatically enlarging the headline and moving the introduction into a new four-column block below.

Then, to connect this article’s layout with the previous index page, I reintroduced the modular grid, this time for the sequence of images which ends with Reggie and his happy family.

Creative direction and the CMS

Only some pages need creative direction. For example, this RSPCA page about beef cattle welfare could be improved dramatically just with better typography, but otherwise, it needs only a light touch.

One of the challenges developers at organisations like the RSPCA face is integrating the flexibility needed for creative direction into their content management software. I know it’s a complex problem, but some organisations have succeeded.

This RSPCA story about beavers could share the standard template, which already looks better thanks to its improved typography. Like the developers at ProPublica, the RSPCA could create CMS templates containing regions that can be adapted for an art-directed design. These regions allow ProPublica to swap out standard components like this article’s introduction for an alternative design.

Adding a custom introduction design to Reggie’s story elevates it above articles developed using the default template. Another adaptable region could be used for images showing Reggie chasing his ball.

The more flexible RSPCA’s developers make their CMS, the more possible it could be for their content creators, designers, and editorial teams to create pages which bring their stories to life in engaging and imaginative ways. I understand this takes effort, but if a job’s worth doing… and all that malarkey.

Full versions of my designs

Animal stories

Animal stories (alternative 1)

Animal stories (alternative 2)

Article

Article (alternative 1)

Article (alternative 2)

Of course, this redesign was just me imagining what I’d do if the RSPCA came calling. I realise I have no insight into their CMS, design, development, or editorial processes, and I haven’t had to consider their unique challenges. Most of all, I don’t have to answer to anyone if my assumptions are wrong. Still, I enjoyed spending some time imagining.

What do you think? Does my imagined redesign make better use of the RSPCA’s new brand? Does it make their stories more compelling? And if you’re reading this from the RSPCA, I’d love to work with you.

Watch on YouTube:
https://youtu.be/i37_hN1Rd48

Stuff & Nonsense Premium Squarespace templates

To encourage Squarespace designers and developers to create inspiring work, I’ve launched Stuff & Nonsense Premium Squarespace templates. These templates have been inspired by the work of graphic and editorial designers and art directors. The first three templates were inspired by Willy Fleckhaus, Karl Gerstner, and Giovanni Pintori.

Fleckhaus

Inspired by the history-making work of German art director and designer Willy Fleckhaus.

Template details • Live demo

Gerstner

Inspired by the influential layout designs of Swiss designer Karl Gerstner.

Template details • Live demo

Pintori

Inspired by the groundbreaking work of renowned Italian graphic designer Giovanni Pintori.

Template details • Live demo

Why Squarespace?

Squarespace is a powerful platform for website design, perfect for designers, developers, and other web professionals. Squarespace 7.1, with its flexible Fluid Engine, enables countless layout possibilities. So, why do so many Squarespace websites look the same?

Squarespace’s built-in templates—plus many third-party templates available to buy—follow the same layout patterns and design styles we see everywhere online. Ubiquitous full-width banner images, rows containing two, three, or four columns of centred buttons and text, and layouts which don’t make the most of the responsive canvas. But Squarespace websites needn’t look this way. They can have distinctive designs which are packed with personality.

I designed Stuff & Nonsense Squarespace templates for website designers, developers, and web professionals in mind. However, they’re equally ideal for creative professionals, consultants, freelancers, and businesses who want a stand-out website design.

Limited to 250 worldwide licences per design

I limit each Stuff & Nonsense Squarespace template to only 250 installations to help our customers’ websites look distinctively different. Whereas Squarespace free templates have been used thousands of times on countless websites, the number of websites using Stuff & Nonsense Squarespace templates will always be limited, helping them stand out.

20% off launch discount

As I’m new to template design and while I settle into this new aspect of the business, there’s 20% off each template when you use the discount code LAUNCH20. Check out Stuff & Nonsense Premium Squarespace templates. I hope you like them.

Willy Fleckhaus and his designs can teach us a great deal about improving our work on the web today. Although his name is not commonly associated with product and website design, his designs can be influential. There’s an excellent 2017 book about Willy Fleckhaus’ work—Design, Revolt, Rainbow—packed with examples from his career.

Watch on YouTube:
https://youtu.be/RAov7dvZjcY

Read the original posts:
/blog/election-2024-labours-general-election-websites-since-1997
/blog/imagining-labours-lost-1997-election-website

Watch on YouTube:
https://youtu.be/OhNyJdjQMi0?feature=shared

Although Otto Storch was an award-winning graphic designer, he and his work have been largely overlooked. Storch amassed a vast body of work, and it’s an incredible shame that his work isn’t more widely known, especially online. There’s not even a Wikipedia page devoted to Storch, and no one has published a book about him or his work. Discovering Otto Storch has made me want to make more people aware of the man and his work.

Watch on YouTube:
https://youtu.be/eCrPjdfYLDM ]]> 2024-08-20T00:00:00Z https://stuffandnonsense.co.uk/blog/video-labours-post-manifesto-website-could-have-clearer-messaging/

On my new YouTube channel, the second in a series I call Design Chatter where I talk about techniques for improving product and website design.

Read the original post:
/blog/election-2024-labour-8217-s-post-manifesto-website

Watch on YouTube:
https://youtu.be/nuJC8wvksHg?feature=shared

On my new YouTube channel, the first in a series I call Design Chatter where I talk about techniques for improving product and website design.

Read the original post:
/blog/election-2024-imagining-labour

Watch on YouTube:
https://youtu.be/F0oKpEeBxgY?feature=shared

One of the things I want to do with this new channel is to study work from designers who work outside the web on books, graphics, magazines, or other projects. I want to understand the problems they hope to solve, see what we can learn, and then apply that to the web.

This is important because if we’re going to keep improving product and website designs, we need to look for design inspiration in different places. If we always only look at other products and websites for inspiration, we’ll end up with carbon copies and pale imitations.

In my first video, I talk about one of my favourite Italian designers, Giovanni Pintori. He did incredible work for Olivetti, the Italian business machine manufacturer, including their brochures, catalogues, and other marketing materials. Then, I break down some of his ideas and use them to make something for the web inspired by him.

I think YouTubers are supposed to say, “If you like this video, Like, subscribe, and don’t forget to hit the bell to be notified when the next one’s available.” So yeah, do that.

Watch Giovanni Pintori inspired web design on YouTube

Whoever had cloned my website had used software to crawl it—even down to some of the deepest-level pages in my blog—and convert my CMS-driven pages to static .html files. At first, I thought this might be someone’s attempt to phish my customers or trick them into contacting a third party. However, even the links to my Calendly booking service and SendOwl commerce platform were intact, so this didn’t seem like an attempt to hijack my sales.

The clone of my website had to go.

Still, I wasn’t happy about the possibility of someone posing as me. I was even less enamoured with the situation when I realised that Google had indexed the cloned website.

I thought maybe the cloners did this because they wanted to learn from my code. That might be plausible, but why post the files to a live server? They possibly wanted to use my layouts as a basis for their design. It wouldn’t be the first time that had happened. Maybe there was an innocent explanation, but I wasn’t in the mood for being magnanimous. The clone of my website had to go.

The WhoIs records didn’t tell me who registered the clone’s domain as they’d been redacted, but another search told me the clone used Cloudflare. I fired off a DCMA cease and desist and waited to hear. To their credit, only a few hours later, I received an email from Cloudflare Trust & Safety letting me know the clone’s hosting provider, including their email address, for reporting abuse, so I sent them a DCMA cease and desist too.

Cloudflare offers network service solutions including pass-through security services, a content distribution network (CDN) and registrar services. Due to the pass-through nature of our services, our IP addresses appear in WHOIS and DNS records for websites using Cloudflare. Cloudflare cannot remove material from the Internet that is hosted by others.

Hosting Provider: Scalaxy B.V.
Abuse Contact: abuse@iroko.net

We have notified our customer of your report. We have forwarded your report on to the responsible hosting provider. You may also direct your report to:

–The provider where [redacted] is hosted (provided above);
–The owner listed in the WHOIS record for [redacted] and/or;
–The contact listed on the [redacted] site.

Cloudflare Trust & Safety

Meanwhile, I found a company or individual with the same name in Ohio. Their Facebook page offers “High quality, yet cheap web design, advertising, and social media services”, so I guessed I was on the right track.

The page had a phone number, and I called it hoping to speak with someone. I got redirected to voicemail, so I left my number and a terse message. I emailed the Gmail address listed on Facebook too:

You have cloned all branding, logo, images, code, and written copy from my website at stuffandnonsense.co.uk to your website at [redacted].top. You have 24 hours to permanently remove my copyrighted material from your website, or you will face immediate and punitive legal action.

I do not mess about.

Andy Clarke

Back on their Facebook page, I reposted my DCMA cease and desist letter and hoped that might prompt them into action.

24 hours later, I haven’t heard again from Cloudflare or the cloner’s hosting provider, but today, I checked their domain, and the copy of my website is gone. I’m glad it’s been deleted, but I’m still curious what the cloner was thinking when they set about copying me so deliberately.

Through his coaching, Andy has helped me improve my design skills significantly by challenging me to step out of my comfort zone. His friendly approach to teaching, experience, and expertise make him the ideal design mentor.

Jerome Kalumbu. Designer.

I love mentoring

I love mentoring new and established designers. Maybe you’re new to the industry and need advice on growing your skills, or perhaps you’ve been in the business a while and need help developing your career. That’s where working with an experienced design mentor like me can help.

Let’s say you’re a freelancer who wants an experienced pair of eyes and a fresh perspective on your designs. You’d benefit from talking over creative concepts and maybe advice on improving colour, layout, and typography. Perhaps you’d like help presenting your portfolio or advice on contracts and client relationships.

You might also be part of a team of designers, and you sometimes struggle to find fresh approaches for the products or websites you design. Sometimes, it’s difficult to convince managers or stakeholders of the benefits of new ideas. I can help by offering advice, guidance, and support.

Staggering amount of experience

I’ve experienced the ups and downs of working in design and running my design business for over 25 years. I have gained a staggering amount of experience, which I can share to help mentor other designers.

My mentoring works on a simple time bank system: You buy a block of 10 hours for £1,100. We can arrange weekly or monthly sessions or find a schedule that suits you. You can schedule video calls whenever needed, email me designs to review, or ask questions anytime. You can even include your colleagues if you need them.

The song is now a classic and Rolling Stone ranked “While My Guitar Gently Weeps” at number 10 on its list of The Beatles’ 100 Greatest Songs and number 7 on its list of the 100 Greatest Guitar Songs of All Time. It’s been covered dozens of times by artists from many different genres, especially by guitarists because of its solo.

But what’s the best-ever version of “While My Guitar Gently Weeps”? I listened to every version available on Apple Music, so you don’t have to. Here are my top five, ranked by the arrangement and its originality, the vocal performance, and, of course, that guitar solo.

5) George Harrison (Live in Japan) (1992)

4) Peter Frampton (2003)

3) The Beatles (1968)

2) Tom Petty, Jeff Lynne, Steve Winwood, Dhani Harrison, and Prince, etc. (2004)

1) Carlos Santana (with India Arie and Yo-Yo Ma) (2010)

Proposals can also be effective selling tools, answering clients’ questions and encouraging them to hire you. Your goal should be to create trust and show that you understand their problems and know how to solve them. In other words, you want the client to see you as the right person for the job.

The brief

It might sound like stating the bleedin’ obvious, but a killer proposal should always start with the brief. This should reiterate what a client asks you to do and explain how your expertise, experience, or people can benefit them.

“We discussed a project to redesign the Count Binface website. You made it clear how important it is for you to increase the number of newsletter and podcast subscribers and generate ticket sales for live events. Stuff & Nonsense has the experience, expertise, and people to overcome these challenges for you.”

If your client faces challenges and you can help overcome them, this high-level overview should restate those problems and the solutions you propose. If your client has wider aspirations and objectives, summarise them and briefly explain how you can help them accomplish them. Here’s an example:

“Your problem: The current website is template-based and lacks a distinctive design that would differentiate Count Binface from competing intergalactic space warriors. The content is uncompelling, and the website lacks clear calls to action, resulting in few newsletter signups.

Our solution: Design a visual identity, including colours, graphics, and typefaces. Develop engaging page designs for your content and implement a high conversion rate landing page for your newsletter.”

Scope

When describing the scope of your work, be clear about the deliverables so your client understands what you’ll deliver and what is and isn’t included. While this proposal is not a contract, it should be referenced in the Contract Killer contract, which both parties sign before work begins.

Process

Your process shouldn’t be a mystery; explaining your steps can encourage a client to trust you. These steps may also form milestones and opportunities to invoice the client throughout the project. My process includes research, workshops, content audits, copywriting and editing, creative concepts, user experience design, and prototypes, and I explain my approach to each stage:

“Prototypes: Develop HTML, Figma, or Sketch prototypes to test customer flows and user stories and finalise interactions.”

Timeline

Including a timeline in your proposal helps your client understand how long each deliverable or milestone will take to complete. You should include activities like creative concepts, research, user experience design, and technical development.

Content editing platform

If, like many of mine, your project involves setting up and using a specific content editing platform, briefly explain why it is the best choice for the client. One example might be:

“Eleventy (11ty) is an open-source static site generator software that is easy to use, fast, and flexible. It allows us to create bespoke CSS, HTML, and Javascript code, ensuring the very best accessibility and performance. Eleventy is best hosted on Netlify, with backups and version control provided by GitHub.”

Fees

Most designers I know are uncomfortable talking about money, but in a killer proposal, be clear about what your client will pay and what they will receive by itemising the deliverables and presenting them in a table format. You may choose to categorise these items by type (e.g., content creation, design, and development) or by milestones.

Payment schedule

It is your decision how you will charge the client. Many designers and developers invoice a 50% non-refundable deposit upon signing the contract, with stage payments and the balance on completion. Others invoice for each stage in advance.

Ongoing fees

List the products and services that the client will be required to continue paying for after the project is complete. These may include annual or monthly fees for domain names, email, hosting, and software platforms.

Why choose us?

It’s never a bad time to remind a potential client about your experience and expertise or introduce them to the people they’ll be working with. Briefly explain again why the client should trust you. For example:

“We started Stuff & Nonsense in 1998, and our talented team of content creators, designers, developers, and marketers have experience and expertise that businesses, charities, and organisations trust. You can see our portfolio of recent work at stuffandnonsense.co.uk/design. You’ll be working with:

Andy Clarke is our Creative Director, and they have 30 years of experience in designing products and websites for clients like you.”

Include a short testimonial from an existing satisfied client to encourage trust using social proof.

Call to action

Effective proposals don’t leave clients hanging around; they encourage them to take the next step. Let the client know what to do next, including requesting more information or clarification. Ask them to agree to the proposal and give them a date by which to respond. Outline the steps you will take after receiving agreement on your proposal. Don’t set up obstacles or reasons for a client not to move forward. Offer them ways to say “Yes” immediately, perhaps by digitally signing a PDF.

Small print

A killer proposal is designed to answer clients’ questions and encourage them to hire you, so it needn’t include your full business terms and conditions. Include only small print which relates to the proposal. An example might be:

“Prices exclude VAT at the current rate. This proposal is quoted in UK Pound Sterling and remains valid for ten days from the date we sent it.”

Since I launched Contract Killer, I’ve lost track of the number of times people have asked me to make a proposal template for web designers and developers. I’m not sure why it took me so damn long, but now I’ve launched “Killer Proposals.” It’s a proposal template that’s an effective selling tool that answers clients’ questions and encourages them to hire you.

After studying numerous articles on writing effective design and development proposals, I was left unsure about the reliability of their advice. So, I asked for advice and examples from many of my industry friends who have been fine-tuning their own proposals over many years. I also spoke with clients to understand what they wanted to see included in a design or development proposal. The result is Killer Proposals. It’s a proposal template that’s an effective selling tool that answers clients’ questions and encourages them to hire you. I now use Killer Proposals to pitch to Stuff & Nonsense clients.

Killer Proposals include

• Outlining the brief
• Setting the scope
• Defining deliverables
• Explaining the process
• Project timeline
• Presenting fees
• Payment schedule
• Selling your value
• Clear call to action

Buy Killer Proposals

Killer Proposals templates are available in HTML, Markdown, PDF, and Word formats and include one year of free updates. They cost only £10.99+VAT.

However, the best value is the updated Killer Bundle which includes:

• Killer Proposals +
• Contract Killer +
• GDPR privacy policy +
• NDA template

This costs just £15.99 and saves over £20.

Updated content

Contract Killer still uses the same clear language it always has. And it’s still easily customisable to suit your business and clients. But times change, so I updated almost all of the sections, including:

• Overview: Added milestones
• Confidentiality: Updated with clearer language
• Intellectual property: Updated responsibilities
• Intellectual property: Added options for copyright ownership
• Payments: Added information about payment for third-party services
• Revisions: Added how to view work in progress
• Revisions: Added information on feedback sessions

In several sections there are also now ‘and/or’ boilerplate options and content suggestions.

New sections

Many users asked for entirely new sections, and I was only too happy to oblige. I added a new section on cancellation, which explains how a client can cancel a contract. It also explains how a designer or developer can cancel if their client deliberately acts in a manner that they feel is incompatible with a working relationship. Finally, it now includes a clause on a kill fee, which a client must pay to compensate for lost opportunities if they cancel or delay a project.

There’s a brand new section on communications which sets out how quickly both sides should respond to emails and how projects will be rescheduled if a client fails to respond within a specified number of days.

I included a new section on non-exclusivity which clarifies that a designer or developer can work with other clients, even within the same sector.

One of the biggest updates is a new section on progressive enhancement in relation to browser testing. It explains how progressive enhancement creates a solid baseline experience and that products and websites may look visually different across browsers and platforms.

Finally, there’s a section on support which clarifies the bug fixing period immediately after launch and a placeholder for ongoing maintenance and support contracts.

Same price

This updated and new content makes Contract Killer even better value, but I’m keeping the price the same. It’s £10.99 for just the contract template in HTML, Markdown, Pages, PDF, and Word formats. However, the best value is the updated Contract Killer + GDPR policy + NDA bundle, which costs just £15.99 and saves over £20. Plus, there’s a 50%-off upgrade discount for my newsletter subscribers.

Over the past year, I’ve worked on several projects, which have given me the space to explore the more creative aspects of design.

• I designed a campaign website for the Open University encouraging young people to become more involved in politics
• I worked with composers Alessandro Mastroianni, Michael Baugh, and Tristan Jakob-Hoff
• I designed the campaign website for comedy candidate Count Binface, who stood against Rishi Sunak at the general election

I also took the opportunity of my website redesign to blog more about design, including a recent series on how political parties could improve their communication and engagement through better design.

Working on these projects made me realise the benefits better design can bring to businesses, charities, and even political organisations and how my experience in art direction, creative design, and user experience design can help them.

What I’m looking for in the year ahead

One of the things I miss from my five years at Nozomi Networks is being able to shape an organisation’s design direction over a period longer than a single project. I’d love to work with a business, charity, or political organisation to improve their communication of messages and increase their donations, engagement, memberships, and sales. I’d like to work part-time—1–2 days per week or 2–3 weeks per month—or full-time with the right organisation as a Design Leader, Head of (Product) Design, or Chief Design Officer.

I also appreciate how much I enjoy the variety of working on different projects, so I would love to work with other designers, developers, or agencies. I can lead projects and collaborate and often bring an alternative perspective to problem-solving.

Of course, I’d also like to work on product and website design projects through Stuff & Nonsense. I’ve updated my portfolio to include recent work, which I hope demonstrates how I use design to tell a brand’s story, communicate its messages, and ultimately improve its results.

If you work with a business, charity, or political organisation and would like to discuss my joining you as a Design Leader, I’d be thrilled to hear from you. If you’re a designer, developer, or agency interested in collaborating, please get in touch. And if you’re looking for an experienced designer to work with you on a project, I’d love to hear about that.

Reconstructing Labour’s website means knowing what websites looked like in 1997. The Wayback Machine is one source, and the Web Design Museum has a section on Web Design in the 90s which starts the year before the 1997 election. It includes screenshots of websites from Adobe, AOL, Apple, and, interestingly, the very first BBC election website.

Back then, links were (mostly) blue, the typographic hierarchy was (relatively) flat, and fonts came from the system unless they were embedded in images. Shadows were popular for graphical-type elements, and list markers were (frequently) three-dimensional. As for the layout, widths were (almost) always fixed with a side column that contained the navigation. The BBC’s election website typified this design style with its fixed sidebar and three-dimensional and pill-shaped navigation.

Labour’s printed campaign materials from the 1997 election are also useful, including campaign leaflets, the famous policy pledge card, and the cover of their manifesto. Back then, Labour’s signature red was a different hue and more saturated than its current colour, and they used their now-defunct yellow accent.

For text in today’s online and offline materials, Labour has standardised on Poppins, the free-to-use typeface designed by Indian Type Foundry and available from Google Fonts. In 1997, Franklin Gothic was their chosen typeface, mostly used in bold or black and with subtle negative tracking.

Knowing what we know about the design styles common in 1997 and how Labour branded itself offline, how might its general election website have looked?

Macromedia acquired FutureSplash in 1996 and rebranded it as Macromedia Flash. Although Flash wasn’t installed on most desktop browsers until the early 2000s—launching a generation of websites with splash screens—you could find similar intro screens in the late 1990s. With its eerily similar colours, McDonalds’ intro screen encouraged people to “Click on the Golden Arches to enter the main site!” Labour could’ve followed their lead by asking people to “Click on the rose.” Similarly, the three buttons on the left could’ve taken people to the most important areas of Labour’s website: their message from Tony Blair, five pledges, and the election manifesto.

Microsoft FrontPage was launched in 1996. Macromedia then launched Dreamweaver, its IDE for web development, in the same year as the 1997 general election. Both made laying out web pages using HTML tables easier, spurred on by David Siegel’s 1997 book Creating Killer Web Sites. But, both David’s book and the popularity of Dreamweaver came after the election. This didn’t stop designers at the time from creating relatively complex, often off-the-grid layouts.

Designers at Nokia—then “Europe’s largest mobile phone manufacturer”—used image maps and tables to create an integrated panel including HTML and replaced text content and a sliced-up graphic. Labour’s designers might've made something similar, combining the black-and-white photograph of Tony Blair with new Labour messaging and red/yellow sticker-style graphics they used offline.

Whereas the Nokia grid is implied, many designs—like this 1997 design for Centura—featured an explicit grid made obvious by its use of borders between the HTML table cells. Those boxes contained graphic text elements that Labour might’ve used for their links to Tony Blair’s message, five pledges, and election manifesto. Labour could’ve also included their five pledges as HTML to make the page more appealing to search engines. Infoseek had launched in 1994. A search facility was added to the Yahoo! directory in 1995 and Excite launched the same year along with AltaVista. Google wasn’t founded until a year and a half after Labour’s victory.

So, how do I imagine Labour’s lost 1997 general election website looked like? Judging by the post-election graphic with which Labour replaced their labourwin97.org.uk campaign website, their offline materials, and the design styles popular at the time, it would’ve included a black-and-white photograph of Tony Blair similar to their election manifesto.

Gleaning what I can from code snippets on the Wayback Machine of other Labour websites around the time, the navigation would’ve included links to news and views. These could’ve been styled similarly to the three-dimensional pill-shape buttons on the BBC election website.

It could’ve also included graphic text elements linking to the most important content, plus a Javascript “jump” menu, which was also popular. And, of course, there may have been those “Best viewed in” browser badges.

What did Labour’s lost 1997 general election website look like? This is my best guess, but I don’t know. Maybe if someone at Labour Party HQ answers my email, I might, at last, find out.