My site’s moved CMS and servers. If you spot a problem, let me know.

Stuff & Nonsense product and website design

0/6

Can you catch ’em all?

There’s a different outlaw to capture on every page.

Shop

Eleventy in a Box

A premium Eleventy starter kit for designers and developers who want to spend less time setting up the same project structure and more time designing distinctive websites.

Shop

Layout ❤︎

Free compound grid and modular grid layout generators, plus a set of HTML/CSS layout templates you can call on to make more interesting layouts, available to buy.

Blogging and all that Malarkey

Search articles, blog posts, and my portfolio.

Latest posts

IW329303 4 ME AT 60

I’m not entirely sure how it happened, but it was yours truly’s 60th last week. I spent it in Germany with Sue and Alex and one of the highlights of the trip was buying a watch to celebrate that big birthday.

My CSS layout strategy

Last week, I explained my strategy for writing CSS selectors. Today, I’ll explain how I decide on and design layouts. It isn’t really about grids; it’s about a repeatable way to make layout decisions.

My CSS selector strategy

Writing good CSS is all about restraint. As an example, I used to over-specify too many things in my stylesheets. It was a bad habit picked up from BEM, OOCSS, and from developers who flattened everything with classes to dodge specificity. Now I think of my CSS selector strategy as a “progressive narrowing of scope.”

I built a silly shooting game in less than 300KB

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.

Getting creative with small screens

Yours truly over at CSS Tricks: “Over the past few months, I’ve explored how we can get creative using well-supported CSS properties. Each article is intended to nudge web design away from uniformity, toward designs that are more distinctive and memorable. One bit of feedback deserves a follow up.”

Ambient animations in web design: Practical applications (Part 2)

Yours truly over at the Smashing Magazine: “Ambient animations are subtle, slow-moving details that add atmosphere without stealing the show. In part two of his series, web design pioneer Andy Clarke shows how ambient animations can add personality to any website design.”

Can you catch ’em all?

I’d been tinkering with animations last week and wondered what else I could do with my Magnificent 7 characters. I love surprising people with hidden Easter Eggs, so I decided to use them in a little hidden game.

More Magnificent 7 Malarkey

I had some spare time earlier this week to add a little more finesse to my Magnificent 7 animated graphics, so I added a new background to my blog pages’ illustrations, which has some hidden features.

Showing 41 to 50 of 1262 posts

Newer
Older

Andy Clarke. Web design pioneer

Andy Clarke

I’m Andy Clarke, a product and website designer. My work blends art direction, branding, and editorial to help people improve their products and websites. I’ve written books about website design, given talks, and delivered design workshops worldwide.

Browse topics

Browse tags

Britpack

Favourites