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

How I fixed my Reduced Motion Broke My Layout problem

It’s incredibly important to respect people’s preferences and to ensure that any movement is turned off when they’ve set “reduced motion” in their OS settings. After adding my Magnificent 7 animations yesterday, I went back to check them with reduced motion enabled. Oh hell, my CSS grid has also stopped working, and it took me all morning to realise the issue wasn’t the grid, but how I’d structured my media queries.

Say hello to my Magnificent 7

When I started writing for CSS-Tricks, Geoff and I talked about what to put in my bio. He called me a “veteran” web designer. Geez, I felt old enough. So we settled on “pioneer.” That word stuck—and it’s what inspired the new set of animated pioneers now roaming my website.

Getting creative with shape-outside

Yours truly over at CSS Tricks: “There are so many creative opportunities for using shape-outside that I’m surprised I see it used so rarely. So, how can you use it to add personality to a design? Here’s how I do it.”

The thing about contrast-color

I have to admit that I got a little over-excited when I read that the contrast-color() function is supported in Safari and was keen to try it out. But there’s a problem, the thing with contrast-color is…

Meet my new Modular grid generator

Before my workshop last week, I made some changes to my Compound grid generator. After the workshop, I made a new grid generator tool, this time designed to create modular grids.

Ambient Animations In Web Design: Principles And Implementation (Part 1)

Yours truly over at the Smashing Magazine: “Creating motion can be tricky. Too much and it’s distracting. Too little and a design feels flat. Ambient animations are the middle ground — subtle, slow-moving details that add atmosphere without stealing the show.”

New and improved compound grid generator

To get ready for my first practical layout workshop for designers this week, I upgraded my compound grid generator with a new and improved version.

Showing 51 to 60 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