Blogging and all that Malarkey

Richard Rutter and I have both co-founded and run design agencies, with over 50 years of combined experience in the creative industries. Our work has taken us on different paths, but we’ve come together to discuss business, clients, creativity, and more, because we both have Unfinished Business.

Yours truly over at the Envato blog: “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.”

What do Yogi Bear cartoons and CSS animations have in common? More than you think. In this video, I show how low-budget animation techniques from Hanna-Barbera cartoons—like background loops, talking heads, and minimal movement—can inspire expressive, lightweight web animations using only CSS and SVG.

Working on a design for composer Mike Worth gave me an idea. What if I created animated title cards inspired by classic Hanna-Barbera cartoons? Thirty-five SVG animations later, Toon Titles Series 1 is complete. These are based on artwork from the first appearance of Yogi Bear in The Huckleberry Hound Show.

It’s fascinating just how many opportunities for animations there are in a static cartoon title card. Here’s another Toon Title, this time based on Prize Fight Fright, a Yogi Bear cartoon from February 1959.

Yours truly guesting in a fun episode of the Boagworld podcast. “Why do so many websites feel like colored-in wireframes? Why personality in design still matters, and how to bring it back.”

Yours truly over at the Smashing Magazine: “Now, you might’ve heard that SMIL is dead. However, it’s alive and well since Google reversed a decision to deprecate the technology almost a decade ago. It remains a terrific choice for designers and developers who want simple, semantic ways to add animations to their designs.”

This time, I put GSAP and SMIL to one side and made a Toon Title using only CSS animations. It’s based on Bewitched Bear, a Yogi Bear cartoon from January 1960. I’ve written a detailed write-up on optimising SVGs for animations which will be published on Smashing Magazine over the next few weeks.

Yours truly over at the Smashing Magazine: “What if you could take your CSS animations beyond simple fades and slides—adding an extra dimension and a bit of old-school animation magic?”

Yours truly over at the Smashing Magazine: “Have you ever thought about how the limitations of early cartoon animations might relate to web design today? From looping backgrounds to minimal frame changes, these retro animation techniques have surprising parallels to modern CSS.”