The lovely (and responsive) Great Discontent site has a lovely interview with Dan, who is lovely.
Tuesday, May 22nd, 2012
Tuesday, August 19th, 2008
Implementing Design: Bulletproof A-Z
Dan Cederholm is in the house at An Event Apart San Francisco. He’s all about the bulletproofing.
Simplebits describe what they do as
The case study will be a site all about coffee called Iced or Hot (it doesn’t actually work).
- A is for anchor links with meta information. If you’re going to put data inside links, think ahead to links with really long text.
- B is for
border-radius. This is progressive enrichment. Rounded corners are usually a pain in the ass. But you can do them today with namespaced
moz-border-radius declarations. Dan puts these vendor-specific properties into a separate stylesheet called
enriched.cssto keep them quarantined like hacks. What about other browsers? Well, they don’t get rounded corners but so what? Rounded corners just degrade gracefully to rectangles.
- C is for colour transparency with RGBa. You could use
opacitybut that sets the transparency for an element and all its children. Giving colour values with RGBa (
background-color: rgba(0,0,0.7);) you only set the opacity of the background. A PNG would reach more users but like
border-radius, RGBa is great for prototyping.
- D is for Do Websites Need To Look Exactly The Same In Every Browser? No!
- D is also for decision-makers who get that. The example of the semi-transparent menus on the Sundance Festival site (made by Airbag) demonstrates this. IE just gets flat colours and that’s fine. Dan himself used generated content on Foamee to add images to the headlines. Browsers that don’t support generated content don’t get the ornaments and that’s fine.
- E is for easy clearing of floats. There’s the classic
clearfixsolution but man, that’s a crappy class name to put in your markup. The alternative of creating a list of wrappers that you want to clear is as bad. Dan uses a class name of
- F is for frameworks. We all use our own frameworks: the code you start from for each project.
- G is for gridlasticness. From the latin Gridius Lastius Emius which means working with em-based grids. Dan shows some grid-based designs: Mark Boulton, CNN, Erskine. Then he gives a refresher in elastic layout. Em-based layouts force you to ensure ultimate flexibility. You have to think about font sizes, layout, margins and padding in ems. Richard’s 62.5% rule helps make the calculations easier. Set a
max-widthon elastic layouts (of 100%) you can make sure that the layout won’t go outside the viewport. On Iced or Hot, has four columns of 16em with a 2em gutter between them. The XScope tool is handy for checking your grid lines.
- H is for horizontal grid? Sure. Vertical grid? Sort of. Here, Dan is talking about that annoying habit that visual designers have of lining everything perfectly on the top and bottom of element. It looks great in Photoshop but it bears no relation to reality. It’s like those people who make the pillows look perfect on the bed. It’s a waste of time because they’re just going to get messed up. But we can uses classes for groups of content so that there are break-points in the vertical layout.
- I is for IE8 beta still refuses to resize text sized in pixels. WTF? We still need to use relative units for text sizes. Does page zoom change things? Who knows.
- K is for Kitty.
- L is for
.last. Dan is constantly having to put a class of
.laston the last item in a list (for style reasons). You can use jQuery to add the class programatically.
- S is for shifting backgrounds. Heeeeere’s Silverback! Parallax scrolling is a great example of craftmanship. Not everyone is going to see it but it’s a lovely added extra.
- T is for a testimonial for
- U is for ur stats.
When can we…?Drop support for X. Start using Y. Answer: when your site shows the stats to support that decision.
The alphabet ends with U.
Friday, November 9th, 2007
Here's Dan's latest project (and of course it looks gorgeous). I've been testing it for a while before the official launch and it's really sweet. Best of all, there is no sign up. All the interaction happens through Twitter. Clever.
Tuesday, February 13th, 2007
I’d twit that
He’s not the only one with something to say about Twitter. At Web Directions North, the subject came up at least once every evening and usually resulted in an hour-long conversation/discussion/argument about its merits and failings. I can’t remember the last time that a service prompted such strong feelings.
Personally, I found my emotional connection to Twitter deepening while I was in Vancouver. I didn’t have much opportunity to Twitter myself because my phone didn’t want to play nice with Canadian networks but Jessica was twittering. Being able to catch up with the minutiae of her activity during the day was just wonderful. Of course there’s always emails, chats, phone calls, blog posts and Flickr pics but they all require a certain level of effort.
If you want to see some real Twitter addiction, Patrick Haney has it bad, man. He paid the price for his addiction when a Twitter drinking game was decreed at the Media Temple closing party. The rules are simple:
- If you receive a Twitter, you must take a drink.
- If you send a Twitter, you must take a drink.
- If you say the word Twitter, you must take a drink.
I hadn’t seen Tantek in an inebriated state until that night.
Monday, December 4th, 2006
Dan has redesigned his site and it looks gorgeous.
Sunday, June 11th, 2006
Dan documents the process of adding microformats to Cork'd.
Friday, May 19th, 2006
From Dan Cederholm and Dan Benjamin: a lovely looking piece of social software all about wine. I've been trying it in pre-release and it's really, really nice. This is my kind of website.
Friday, March 17th, 2006
Dan has redesigned. Or maybe that should be realigned. Either way, it feels just perfect. Talented bastard.
Thursday, June 30th, 2005
Dan's new book will be out soon. I predict it will be great: the subject matter is exactly what CSS coders need to know.