I’m taking on new projects next month. Start a conversation

Stuff & Nonsense product and website design

Development

Swapping a lightweight image for an animated SVG

I’ve been on a mission to improve performance since [I migrated this site to Eleventy,](/blog/migrating-from-statamic-to-eleventy/) especially after I realised I was burning through bandwidth once I moved to Netlify. Some of the biggest offenders were the animated illustrations I use across the site. They look great, but they ain’t cheap.

I thought AVIF would make every image smaller. It didn’t.

I mentioned earlier that I’ve been replacing the WebP images on my website with AVIF to reduce file sizes and decrease bandwidth usage. But when I started converting my portfolio images, I noticed something odd. Some weren’t smaller—they were bigger. Sometimes much bigger.

Switching my website images from WebP to AVIF

The images on my website have changed formats several times over the decades. JPEG, PNG, and GIF were designed in a very different era of computing, and their compression methods reflect the technology available at the time. Formats such as AVIF, HEIC, and WebP use newer techniques which can preserve more apparent detail while storing less information.

Tracking down a nasty Netlify bandwidth burner

Most days, my website sits there quietly, publishing writing, showing off my work, selling a few products, and generally behaving itself. But today, I got an email from Netlify telling me that, although my migrated website was only days old, I had already burned through 50% of my allocated monthly bandwidth.

I made sho!io. Share what you’re working on without the social noise

I’ve been quietly working on a side project called sho!io, and I’m opening it up to a few people. It’s meant to be a quiet place where you can share one thing you’re making each day, without the usual social noise. It’s early and very much still in progress, but I’d really value your honest feedback if you’re up for trying it.

Splinter.js — I made a more accessible text splitting tool

Sometimes I don’t want to style a whole word or heading. I want to style individual letters—to nudge a character into place, give one glyph extra weight, or animate a few letters independently. Sadly, some splitting solutions don’t deliver an always accessible result. With the help of a developer pal, I've written my own text splitter, Splinter.js.

Developing for Count Binface using Squarespace

Yours truly over at the SQSP Themes blog. “Squarespace is (obviously) the platform of choice for intergalactic space warriors. So, less than a week before Count Binface was due to announce his manifesto, the challenge was to develop my designs into a new website using Squarespace.”

Squarespace website templates for music professionals

While more established artists, bands, composers, sound designers, and other music professionals often have a bigger budget to spend on their websites, plenty more choose the DIY route with Squarespace or Wix. To help those people stand out, I added three new designs to my Squarespace templates store.

Introducing Stuff & Nonsense Premium Squarespace templates

For most of my career, I’ve encouraged designers and developers to learn from past masters of design and make inspiring web work. Now, I’m launching Stuff & Nonsense Premium Squarespace templates that help them do just that.

Disallowing Disallow: How to properly hide pages from Google bots

My earliest blog posts date back to 2004. There’s very little in them which is relevant today, and they’re full of dead links, which, I’m told, is bad for my site’s SEO. So recently, I’ve done two things to hide these posts from search engines.

Text substitutions and aText

Dan Cederholm has been designing a stylish interrobang (‽) for his next new typeface and tweeted that he needs to learn how to type one. John Gruber replied with his suggestion using text replacement in MacOS. I use a similar solution using aText to make typing these unusual characters easier.

Dawn Of The Planet Of The Large, Modern Browsers

The Official Movie site for Dawn Of The Planet Of The Apes has launched and, chattering chimpanzees, is it a piece of work! As if I weren’t excited enough about the film. It’s not released until July 2014 but the site gives fans a taste of what’s happened since the end of Rise.

Falling foul of iOS’s 3 megapixel resource limit

One of the most important elements in our recent redesign is our new portfolio. We ran out of time during the redesign week and couldn’t include all of the portfolio pieces we’d planned. This week we’re adding more and while we were doing that I discovered something I hadn’t known before about large images and iOS.

Quotes & accents (& Dashes) and TextExpander

Jessica Hische made Quotes & accents (& Dashes). Remembering keystrokes for these characters is hard, but for me remembering character entities is downright impossible. So I made TextExpander do the remembering for me. Here’s how I did it:

Categories


Andy Clarke. Web design pioneer

Andy Clarke

I’m Andy Clarke. I’ve spent over thirty years helping businesses, charities, and organisations create distinctive websites. I’m also the author of books on web design.