Tag: Development

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.

If you’re reading this, the patient survived the surgery, and I successfully migrated this website and all its many parts from its old Statamic CMS to a brand new Eleventy installation.

I’ve added a “spring mode” to my animated SVG desert. Flowers bloom, colours shift, and the whole scene feels more alive—all without creating a separate version. Instead, I’m layering changes on top of the same SVG and letting CSS and JavaScript do the work.

As well as showing off work in progress on Sho!io, I thought it might be interesting to document what I’ve been working on here. So I’m starting a new regular “Last week in the studio” series.

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.

Yours truly over at the Smashing Magazine: “CSS relative colour values are now widely supported. In this article, pioneering author and web designer Andy Clarke shares practical techniques for using them to theme and animate SVG graphics.”

Winter’s definitely arrived, and there’s a chill wind blowing. We haven’t had snow in the village yet, but it’s falling on my website, courtesy of a new ‘snow mode.’

Yours truly over at the Smashing Magazine: “In this article, pioneering author and web designer Andy Clarke shows his techniques for creating Toon Text titles using modern CSS and SVG.”

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.

Yours truly over at the Smashing Magazine: “SVG is one of those web technologies that’s both elegant and, at times, infuriating. In this article, pioneering author and web designer Andy Clarke explains his technique for animating SVG elements that are hidden in the Shadow DOM.”

When I’ve had a few spare minutes, I’ve been adding to and optimising my Magnificent 7 character animations to improve rendering speed. Then I had the idea to build a silly fairground-style shooting game, and I set myself the challenge of keeping it as small as possible.

Yours truly over at the Smashing Magazine: “SVGs, they scale, yes, but how else can you make them adapt even better to several screen sizes? Web design pioneer Andy Clarke explains how he builds what he calls “adaptive SVGs” using symbol, use, and CSS Media Queries.”

Working to simplify this website’s CSS last week, I updated the pages which promote my CSS Grid templates. I’d called them Layout Love, but I wanted to restyle them as Layout ❤︎. However, I encountered an issue when I checked the pages on iOS and iPadOS, which turned my Unicode characters into emojis.

Yours truly over at the Smashing Magazine: “What’s the best way to make your SVGs faster, simpler, and more manageable? Andy Clarke explains the process he relies on to prepare, optimise, and structure SVGs for animation and beyond.”

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.”

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.

Jon posted about his icon design for ShareOpenly, so I decided to add it to my blog too.

Emma Bodger is a film/television producer, and recently, I’ve spent time working on her visual identity and a new website. It’s been a lot of fun, and I also learned more about SVG while working on it. I’m digging into the details this week, and today I’ll reveal the Easter Egg theme which I hid on Emma’s website.

Emma Bodger is a film/television producer, and recently, I’ve spent time working on her visual identity and a new website. It’s been a lot of fun, and I also learned more about SVG while working on it. I’m digging into the details this week, and today I’ll explain how I made experimental banner images for Emma’s home page using SVG masks.

Emma Bodger is a film/television producer, and recently, I’ve spent time working on her visual identity and a new website. It’s been a lot of fun, and I also learned more about SVG while working on it. I’m digging into the details this week, and today I’ll explain how I made an experimental word search concept for Emma’s home page.

Emma Bodger is a film/television producer, and recently, I’ve spent time working on her visual identity and a new website. It’s been a lot of fun, and I also learned more about SVG while working on it. I’m digging into the details this week, and today I’ll explain the SVG filters I created to transform images on Emma’s website.

After writing yesterday’s blog entry on Re-coding Apple’s Black Friday dates I realised I had missed the bleedin’ obvious solution. That instead of wrangling CSS and HTML, SVG could’ve been the better option.

This week I’ve been diving deeply into how I approach projects, using a recent design for Zombie Hunt as an example. Yesterday, I wrote about catering for small screens. Today’s all about performance and accessibility considerations when coding my designs.

This week I’m diving deep into how I approach projects, using a recent design for Zombie Hunt as an example. Yesterday, I wrote about making decisions about colour. Today is all about using colour across dark and light themes.

Two weeks ago, I took a week—away from work on Nozomi Networks—and spent some time working on a redesign for Zombie Hunt. The team are franchising their successful business and needed a new design to attract customers and potential franchisees.

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.

Given that SVG makes it possible to create cool compositions of images and text, I’m surprised I rarely see designers and developers using it for more than just icons.

Looking back, I’ve redesigned this website roughly every three years. Today I’m proud to show you the new Stuff & Nonsense.

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.

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.

My Responsive Web Design workshop at Smashing Magazine is getting closer and some tickets are still available. In the meantime, here are three useful new resources for responsive layout using CSS3:

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:

There’s been a lot written about device testing over the last year. Jeremy instigating open device testing labs has rightly generated a lot of column inches like Smashing Magazine’s Establishing An Open Device Lab. However, I think we need to be clear just what we mean by testing.

Thank-you to everyone who tweeted and emailed about the site. The reaction was overwhelmingly positive. More than I’d hoped for. And I’d hoped for a lot. Some of the comments came with bugs I need to fix and suggestions for improving the site and its performance overall. I’m really grateful for that. A little bit of follow up from yesterday’s site launch.