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.
So you’ll forgive me if I feel a certain sense of vindication now that everyone is finally doing what I’ve been banging on about for years.
Jeremy is like John The Baptist, except with dry trousers. Follow the links to some of his older posts too. I like this in particular:
Arguing about 640, 800 or 1024 pixels is like arguing about whether Pepsi tastes better than Coke when really, a nice glass of water would be much more refreshing. The numbers game is a red herring. A big fixed-width red herring.
From August 2005.
2005
2. 0. 0. 5.
Five!
For anyone who read my I don’t care about Responsive Web Design (from two years ago) and missed the original reference (from almost ten years ago) and therefore the point I was trying to make; that responsiveness should be something we build in, not bolt on.
Cennydd Bowles thinks:
Users used to tap phones and click mice. But the latest high-end devices combine the two, and it’s now highly likely your interface needs to be designed with both touch and mouse/trackpad in mind. So, unless I’m sure only one applies, I’ve stopped saying “click” and “tap”. Instead, I say “select.’
That’s smart thinking, but I’m not convinced “select.’ is the right word either. I can’t imagine talking an ‘average“ person through an interface and saying “Now ‘select’ the Submit button to buy (those ape action figures).’” That’s why I’m going with “press.’ because whether on an input type is physical or virtual, keyboard, d-pad button, trackpad or mouse, that’s what people do.
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:
In no particular order:
In this week’s episode of Unfinished Business, Anna and I discuss our experiences of working from home (or living at work), and some of the techniques that help us block out distractions. We also debate the most important issue of how to make the perfect cup of tea (and knock the top of an egg.) After hours, we talk about Kill Bill Volume 1.
This episode is sponsored by Typecast; quickly style type in the browser and check for readability, rendering and beauty as you work and Beyond Tellerrand a conference and workshop event for the web community. Beyond Tellerrand is happening May 27th to the 29th in Düsseldorf in Germany. Use the offer code unfinished1 for 10% off the standard price.
How excited am I?
I can remember the first cigarette I ever smoked. It was 1983 and on my way to art foundation one day, I stopped my car at Kettering railway station and bought a packet of ten Benson & Hedges and a box of Swan matches. I pulled on the cellophane band, tore off the top and flipped open the golden box. I’ll never forget the smell of tobacco that rises from a freshly opened pack or the bitter smell of a match. I slipped a cigarette between my lips, struck a match and lit it.
I’d always admired the work of, and the people behind the Web Standards Project. What they had achieved in only a few short years in bringing browser vendors and tool authors together behind open standards was nothing short of magnificent, so when I was asked to join the project on March 31st 2005 it was an ambition fulfilled.
Handheld is “the conference for all things mobile” that’s happening in Cardiff, Wales on 27th – 28th November 2013 at the Wales Millennium Centre. Handheld has a fabulous line-up of speakers and tickets go on sale on March 1st, St. David’s Day. (You can get get 10% off your ticket with the offer code unfinishedbz.)
If you needed another reason to head to beautiful Cardiff Bay, I’m hosting a new workshop, “CSS3 for Responsive Web Design.”
Tarantino would rabbit-sit Honey Bunny, her pet, when she went on location. (Tarantino refused, and the rabbit later died; Tarantino named the character in Pulp Fiction played by Amanda Plummer in homage to it.)
A fascinating read about one of my top ten movies.
- Add your URL to the input field
- Click GO (reloads the preview) or press Enter (reloads the page)
- Admire your good work
A little bit of responsive fun from Brisbane based Justin Avery. (Via Jordan Moore who has a name like a country singer but has never drunk moonshine.)
Don’t be a jerk.
That about sums it up.
I’ve known about daleks all my life.
I decided that this year I would spend more time in universities and with students than I would at conferences. Maybe that’s because my son’s a student and I’d like to think that he’d appreciate a visiting lecturer. Maybe it’s because I’m not ready for the pressure of larger events yet. Whatever the reason, this week was all about students and my visits to Winchester School Of Art and Manchester Metropolitan University.
(That’s “horse meat free” not “free horse meat”.) In this week’s episode of Unfinished Business, Anna and I follow up last week’s episode with listener questions about the professional (and unprofessional) ways to handle business disputes. We also discuss how best to say goodbye to a client and cue up a few movies to watch and talk about ‘after hours’ in the coming weeks.
BLOKK is a font for quick mock-ups and wireframing for clients who do not understand latin.
Brilliant! (via)
You should know by now that I’m a huge fan of Hammer For Mac. I couldn’t and wouldn’t start a project without it as I’d miss its variables and partials and includes too much. I like Hammer so much I moved from LESS to Sass because of it.
If you’re a CodeKit user — and many are — you can get some of Hammer’s functionality in that too. I haven’t had the need to try CodeKit and The Kit Language myself yet, so I’d be keen to know if you have and what you think? Let me know on Twitter @malarkey.
This year’s An Event Apart in Atlanta (the first of 2013) looks to have been filled with fantastic new talks. So much so that I’m considering attending one show this year. Once again, Luke does the web a great service by taking notes from the talks. I’d love to hear this one, from Josh Clark, in person.
I sometimes struggle with creating colour schemes, so this is exactly what I need. Using it on a touch device is fun, or on the desktop try hacking the URL if you have a starting colour in mind and carry on from there. Just replace the hex value with your starting colour, color.hailpixel.com/#fa52a6,
(via)
Following on from Three clever people talk about CSS layout, here’s more from Zoe Mickley Gillenwater on Flexbox including a handing comparison between the current specification (2012) and the 2011 syntax implemented sadly by Internet Explorer 10.
Not since the turn of the century, when we largely shifted from using CSS positioning to floats, has CSS layout been so interesting. Here are three great reads from just today that are all worth your time:
Jeremy is at An Event Apart in Atlanta, and reports on Eric Meyer’s new talk, Strong Layout Systems in which Eric speaks about flexbox and grids, both new CSS modules that were created specifically to allow us to create layouts.
Chris Coyer Coyier (who deserves a medal for the work he does (and his name spelling correctly, sorry)) weaves together old and new flexbox syntaxes for better browser support. Anything lower than or equal to Internet Explorer 9 is still tricky though, so you’ll still need to get handy at designing around that problem.
Back at a conference, this time in Orlando, Zoe Mickley Gillenwater also spoke about CSS layout techniques including Grid Layout and Flexible Box Layout. Her slides are available on Slideshare, then check out her post as it’s full of examples and resources.
PS: If you can remember either The Noodle Incident or Position Is Everything, it’s past your bedtime.
In this week’s episode of Unfinished Business, Anna and I talk about how to get work and how we both found our first clients. Anna gets annoyed about revenge sites and I tell, for the first time, how I lost my business and restarted Stuff and Nonsense from nothing again in 2006.
The Duke of Lancaster — a landlocked former cruise ship — is about a twenty minute drive away from our house on the North Wales coast. I must’ve driven past it hundreds of times, but have never parked up and walked the quarter mile from the road down to the old boy. Recently, the Duke has become a (huge) canvas for artists. Although I’m personally not a fan of street art, I’m somehow glad that the ship’s been getting some love, even with a spray can. One of these mornings I must take a walk and say hello to the old Duke.
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: