Stuff & Nonsense product and website design

Blogging and all that malarkey

Toon Titles

Explore my growing collection of classic cartoon title cards, lovingly recreated using CSS, SVG, and SMIL animations. Enjoy the nostalgia and learn from the code on CodePen.

Kerfuffle on the Planet of the Apes

Kingdom of the Planet of the Apes is out and I decided to update one of my responsive easter egg headers—Kerfuffle on the Planet of the Apes—with more efficient, modern code.

CSS Specisithity

Originally published in 2005 and updated in 2024, CSS Specisithity explains how to master specificity using Star Wars metaphors. It’s been credited with helping web designers and developers understand what’s often considered a complex subject.

The popular Contract Killer template

Clarify what’s expected on both sides to help build great relationships between you and your clients. Contract Killer is plain and simple and there’s no legal jargon. It’s customisable to suit your business and has been used on countless web projects since 2008.

Layout Love

I wanted a simple set of layout modules I could call on for design projects, so I developed my own. I call them Layout Love and rather than keep them to myself, I’m offering them to everyone to use which I hope will encourage people to make layouts which are more interesting.

Transcending CSS Revisited

I wrote my first book, Transcending CSS: The Fine Art of Web design, way back in 2006. It became a success and since then I’ve had countless people tell me it was influential in their careers. Transcending CSS Revisited is available to read online for free, with a new foreword by Rachel Andrew.

Encouraging Better Client Participation In Responsive Design Projects

My first article for Smashing Magazine is my (ever so expanded) notes from my talk at the fabulous Smashing Conference in Freiburg. The original title was “How to call your client an idiot, to their face, without getting fired, then have them thank you for it.” I still like that one best, but we didn’t want a controversial title to get in the way of the serious points I wanted to make.

Changes to Stuff and Nonsense RSS

I know RSS isn’t perhaps what it was for a lot of people, but it’s still as important to me as Twitter as a source of good content, and well, you know what they say about eggs and baskets. Today I’m making some changes to Stuff and Nonsense’s RSS.

Brad Frost’s notes from my talk at Smashing Conference

I’ve also expanded on my notes from my talk for my first article for Smashing Magazine, to be published any day now. Read that, read this, then watch the video from the conference (also coming soon) and you’ll have me in 3D. Fancy that.

Adobe announces Edge Reflow

Create truly responsive layouts thanks to an intuitive user interface. Design simultaneously for all screen sizes without sacrificing quality or capability.

Fireworks is dead.

Reviewing the Hard Graft Phone Fold Wallet Plus

For about the last five years, my wallet’s been a big Lakeland travel wallet. It was designed to carry a passport and boarding cards, not for everyday use, but I used it everyday. It was big enough to hold all my stuff; credit cards, plenty of cash and the pile of train tickets and receipts that I collect when I’m out and about. When I say it was big, I mean big. I couldn’t mistake when I had it in my pocket and I could easily dig into my bag to find it in my bag without looking. I loved it and was very upset when it was lost.

Harry Roberts: Big CSS (YouTube link)

I’d intended to go to The Digital Barn this weekend, but having just come back from Freiburg, I couldn’t make it. My main reason for attending was Harry Roberts and his talk about Big CSS.

I’ve linked to Harry a lot recently. I’m a big fan of his work, so I was disappointed I wouldn’t hear his talk. That’s why I was so pleased to find a rehearsal run through on YouTube.

It’s great when conference organisers record audio or video, but speakers shouldn’t rely on that. Like Harry, more people, particularly younger or newer speakers, should record their talks. It makes them more widely available, spreading the word about what you have to say and about you. It’s exactly what conference organisers are looking for when seeking out new speakers.

Tantek Çelik: microformats2 and bits of HTML5

I’ve been asked quite a bit recently, “Do I regret devoting a good sized section of Hardboiled Web Design to microformats when authors and browsers have largely ignored them?” My answer’s always been “no”, although microformats haven’t been adopted as much as I’d hoped they would be, if nothing else they provide some great naming conventions for our attribute values.

Out in Lisbon, at the end of a pretty packed week for European conferences, Tantek gave a talk on ‘microformats2 and bits of HTML5’. I’d missed what Tantek and others have been working on for microformats2. It’s worth your time running through his presentation and then following up on the microformats2 wiki.

Mobitest

Brad Frost mentioned Mobitest during his talk last week at Smashing Conference. I’ve becoming more aware of performance issues these last few months, and tools like Mobitest can only help me do better. (This site’s home page, crammed full of retina quality bitmaps, weighs in at 649.36kb and 10.22s average load time. I need to halve that. At least.

Josh Brewer: Responsive Measure

Responsive Measure is a simple script that allows you to pass in a selector (ideally the container where your primary content will go) which generates the ideal font size needed to produce the ideal measure for your text.

Josh brings my proportional leading idea to life.

I spoke at a Smashing Conference

A couple of months ago, Smashing Magazine’s Vitaly Friedman, Marc Thiele and I were talking over email when he asked if I’d fill an open speaking slot at Smashing Conference. I was already hosting two ‘Fashionably Flexible Responsive Design’ workshops there, so I hesitated because, as you might remember, I’m cutting down the number of conferences I speak at and I’d planned to speak at only An Event Apart in Austin this year.

Designing for the Hillsborough Independent Panel

It was January, 2011 and an email arrived from a name I recognised.

Would you be available for me to phone you to discuss a potential project? I’ve attached an NDA. Could you sign a printed copy, scan and send it back to me?

John Jones
Jones Olson

Hillsborough: Brian Reade on the day that changed football forever

[Chief Superintendent David] Duckenfield, in charge of his first big football match had given the order to open the gate without ensuring the thousands who entered Leppings Lane would be funnelled into the outside pens. He had seen the over- crowding and suffering on the terraces on CCTV cameras with zoom facilities and done nothing. And when asked for an explanation he mouthed something he believed outsiders would buy. A hooligan mob had stormed the stadium and killed their own.

It was a lie which would travel all the way around the world before it was corrected.

A calculated slur that would never go away.

Maybe today.

This Is Responsive

Brad Frost (I want his dog. So badly.) and Pon Kattera collect the latest links, news and thinking in responsive web design. There’s some great resources in here already.

About those long line lengths

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.

New Adventures and me

Some conferences just have ‘that’ special feeling. @media was the first for me in 2005. The An Event Apart in Seattle in 2010 where Ethan Marcotte first talked about responsive design, another. Most recently, the first New Adventures also in 2010.

The long goodbye to Fireworks

Adobe announced yesterday that Creative Cloud customers (like me) will receive an upgrade to HiDPI and Retina Display Support. This sounds like great news if you’re a Photoshop or Lightroom user — two apps that will receive the update first — but not if your everyday design app is Fireworks, not Photoshop. There was no mention of when (or more likely if) Fireworks will be upgraded.

ClearLess

“A reuseable collection of carefully-considered Less mixins” from our friends at ClearLeft.

Retina size screen grabs without a retina Mac

Making screenshots for the some portfolio panels for my new site design — It’s out on Wednesday kids — I came across a problem. I couldn’t get screenshots sharp enough for a retina display because I’m snapping on a plain ol’ Macbook Air.

Damn.


Browse topics

Browse tags

Andy Clarke portrait

About Andy

Hello. I’m Andy Clarke, an internationally recognised product and website designer and writer on art direction for products the web. I help product and website owners captivate customers by delivering distinctive digital designs.


Subscribe to RSS feed

Britpack

Favourites

Would you like advice and inspiration on making better designs for the web?

Every two weeks you’ll get design inspiration and insights on how to improve your design. View some recent emails, sign up today, and get:

  • Email advice once or twice per month + 
  • Design tips + 
  • Inspiration + 
  • Free Layout Love templates worth £9.99 + 
  • Early access to books + 
  • Coaching offers

    I promise never to share your email and you can unsubscribe with just one click.

    Get a free set of Layout Love grid templates if you sign up today.