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.
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.
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.
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.
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.
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.
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.
What will you tolerate in this community? Will you tolerate a conference circuit swamped by supposedly the same speakers and vote with your wallet? Or will you tolerate conference organisers being continually beaten up for genuinely trying to do the right thing? Will you tolerate speakers being abused for getting on stage and sharing their experiences? Will you tolerate harassment, bullying and exclusion?
(Cynics will no doubt now accuse me of linking to my friend, another old face.)
Yesterday I had the pleasure to speak with Jen Simmons on her show The Web Ahead. We riff about design process and tools, but I start off talking about public speaking, the destructive effects of cynical criticism and I issue a challenge to those who complain about regular conference speakers.
Being in Freiburg for Smashing Conference helped me regain my confidence for speaking. I was thrilled and honoured to be a part of it in a small way. Now Smashing Magazine are publishing interviews with all the speakers and videos of their talks. The first three excellent talks by Jeremy, Rachel and Stephen are available now.
Docracy’s Veronica Picciafuoco, a recovering lawyer, with a wide ranging article about contracts that very kindly mentions Contract Killer. Watch out for another of Veronica’s articles and an interview with me about Contract Killer and The Three Wise Monkeys NDA on Smashing Magazine, coming soon.
For the second year running, Cole Henley has compiled the results from his survey of freelancer demographics, rates and working practices in the UK.
Even within a business culture of openness and transparency, some things are meant to be kept secret. NDAs, non-disclosure agreements, are meant to help with this, but most NDAs are the opposite of open and transparent because they’re written in the same jargon-laden legalese that I avoided in Contract Killer. So I’ve written ‘Three Wise Monkeys’, a plain speaking, easy to read, open source NDA.
Good work by Brett Jankord:
You can replace, the min–moz-device-pixel-ratio, the -o-min-device-pixel-ratio with a resolution media query. You can also just remove the unprefixed min-device-pixel-ratio.
After I boasted how nice my site looks in IE10 on a Microsoft Surface tablet (it really does), Grant Hutchinson thought he’d put it through its paces on an Apple Newton MessagePad 2100. Turns out it’s not too shabby.
I spent last week in Geneva. Nothing out of the ordinary about that as I’ve been working there fairly regularly over the last couple of years. But last week was my birthday week — Tuesday. 47. A new wallet. Thanks for asking — so they had to be very special people to persuade me to spend the week with them. They were. Good honest folk.
This article looks at the CSS @supports rule, part of the CSS3 Conditional Rules Module Level 3, which provides a perfect mechanism for selectively applying CSS based on feature support. Here we’ll look at basic syntax, along with an applied example.
I did not know this.
Yesterday, my friends at ISO and I were discussing the impact that their social media icons have on the performance of their site. (Short story, they add 14 seconds to the rendering time of every page.) Then last night I found SocialCount (via Brad Frost.)
SocialCount is a small jQuery plugin for progressively enhanced, lazy loaded, mobile friendly social networking widgets.
Funny how the universe works.
After I posted my review of Hammer – the simple to use, GUI app that helps me design with HTML – this week, several people tweeted a few alternatives. Oooh, oooh, let’s go look!
Here’s Luke Wroblewski with notes from Mike Monteiro’s talk this week at the final An Event Apart of the year, in San Francisco. There’s so much wisdom here, so much to like. In particular:
Your process is a mystery. Show people what it’s like to work with you on a day to day basis. Let them the sequence of events, when you’ll connect and how often. If you don’t control the process for the start, clients will start telling you how it should go. They’ll fill in voids when they see them.
(And if you haven’t already bought Mike’s book, you really should.)
Summary: If you use OSX and write HTML, screw the trial version. Buy Hammer. You’ll earn back what you spent on it during the first hour you use it.
I’ve found that if you want rough indication of a designer’s experience, look at the time they spend on different stages of the design process.
Novice designers spend most of their time creating a solution, and maybe 20% refining it.
Intermediates split the time roughly evenly.
For senior designers, the ratio flips: 20% creating, 80% refining.
And the experts realise that creating and refining are actually the same thing.
This is a fabulous insight. Next week I’m heading back to Geneva to do exactly this with ISO, because ‘expert’ clients realise it too.
Remote preview is a tiny JavaScript based tool which I built for our test lab. It allows you to preview any URL on large number of mobile devices simultaneously. Just enter a URL, hit Cmd+S, and new URL gets automatically loaded on each device. Remote preview works on platforms like Android, Blackberry, iOS, Maemo, Meego, Symbian, Windows Phone and WebOS.
I’ll test Remote Preview for myself later this week. I hope it’ll be another reason for me not to renew my Adobe Creative Cloud subscription next year.
It’s coming up on four years since I published my original Contract Killer over on 24ways. The reaction to it was astonishing and over the last four years the feedback I’ve received has been overwhelmingly positive. I feel very, very happy that so many people have found Contract Killer useful.
Although Adobe have said nothing officially, their silence says it all. Unofficially my little birdies tell me that Fireworks is not being updated for retina displays so the tool I’ve used and loved for a decade or more is effectively dead.
“Prototype iPhone apps with simple HTML, CSS and JS components.” From the fellas that brought you Bootstrap.
Two great reads this week, on connected subjects:
Two things about the iPad mini as I’ve owned one since Friday:
Jordan Moore (who wears crocodile skin shoes) made a handy little tool for “showing what @media features your device can and can’t see.”
Don’t be put off by ‘Windows Store apps’ in the title. There’s lots of really good information about designing for tablets in general here.
Aside: I spotted this in the ‘Windows 8 touch posture’ section:
Because slates are most often held along the side, the bottom corners and sides are ideal locations for interactive elements.
That’s a big difference between iPads and Microsoft’s Surface ‘slate’ (do they actually still call it that?). Microsoft sees the 16:9 Surface as a landscape device, whereas a 4:3 iPad is for use any way up.
The big news here is actually that Internet Explorer 10 on Windows Phone 8 supports web fonts in the standard WOFF format.
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.
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: