Bulletproof Notes (A Day with Dan Cederholm)


Today, I spent the day at a small 40-person class with Dan Cederholm, titled “Bulletproof Design with XHTML and CSS”. My notes:


It was raining in Boston today, so I headed into the Museum of Science and wiped my glasses clean. As I looked up, there was Dan Cederholm getting coffee. So, I went over to say hello, and to my surprise, he said “Hey Adam.” Now, I met Dan once, in late July. Apparently remember names is a skill much needed in this business. So, it’s always nice when your “web design superhero” knows you by name. I guess if I was a kid and walked up to Nolan Ryan and he said “Hey Adam”, it would be a similar type of thing. Okay, maybe not quite… but still…

For those wondering, Dan’s son Jack was a monkey for Halloween. :)

With Dan was Ryan Carson of Carson Systems (they’re puttin’ on the show). So, I was able to meet him as well. I got to thank him for making the Future of Web Apps podcasts available for us that were not able to go. I rode the elevator with the two of them until we got to the conference room, and then I realized I was the first one there. Not bad… got to lay claim to a spot on one of the few power adapters. Also got to meet Gillian Carson, Ryan’s wife and partner in Carson Systems. Carson Systems also runs the wonderful web design resource, Vitamin.

I also had coffee and muffins (or for me, tea and a gooey cinnamon bun thingie) with Scott and Justin of Dealer.com. They’re from Burlington, VT and are applying CSS designs to the automotive industry. Kind of a similar situation to me, I suppose—implementing modern web technologies in an industry that generally isn’t associated with them.

Part 1: Introducing the Bulletproof Concept

Timeline: W3C, Web Standards Project, Box Model Hack, Zeldman’s Designing with Web Standards, Wired News redesign (with all CSS), CSS Zen Garden, Blogs/Corporate Sites/etc. using standards.

Bul•let•proof (adj.)

Bulletproof vest is not 100% protection.

Guideline #1: Turn off images. Turn off images to ensure the page is still readable in the absence of graphics.

Bulletproof Paths:

Guideline #2: Let go of pixel precision. Take a deep breath. Realize you’re not in complete control. This is OK.

Using pixels for font sizes: IE6 and below, users cannot resize.

Guideline #3: Provide a flexible base for text. Try using keywords or ems for sizing text. Allow users to adjust as needed.

IE7 allows pixel resizing. So, pixels should be fine for sites that don’t rely on IE6 and older very much. However, keywords do add a semantic quality to it (“small” on whatever device). Ems just seems like a hack for px.

Guideline #4: Use the ‘DigDug Text Test’: Resize text a few notches to see what happens. (get actual text from Dan’s slides)

Vitamin uses em based layout. The entire site adjusts when you increase text size. Everything in the entire site is scalable.

Dan then went through many specific examples: The bulletproof arrow, the tabs from Cork’d, the NetFlix expanding box. They are examples I’ve seen before, but always good to see again.

Guideline #5: Accept the box. Look for simplistic ways (get rest of text)

More examples: ClearLeft, Hicksdesign, Odeo, Cameron Moll…

Guideline #6: Reuse/recycle. Plan for multiple instances and uses for a particular style.

Cork’d ornamentation, Tundro

Microformats.org: <li> hover (doesn’t work in IE6 and below)

Break #1: Sat with the guys from Dealer.com again. They’re looking to hire HTML/CSS designers, BUT in the Burlington, Vermont area. So, if you know anyone…

Dan started the second session with an indepth look at redesigning the navigation of Lance Armstrong’s site navigation with an unordered list and CSS instead of images. {display: block} is something I hadn’t used. That makes the entire tab clickable instead of just the link. I’ll have to look into this some more because I didn’t use it on my last site but the whole box seems to still be a link.

Internationalization: using more code and less images makes translation much easier.

Great design does not always equal great web design.

Part 2: A Design Uncork’d (Markup)

Styleframing (Wireframing with CSS):

Iterative Prototyping:

Semantic markup:

Now it’s time for a closer look at the markup of Cork’d. We just combed through the site, also discussing things like Derek Powazek’s site. Some nice semantic discussion ensued.

Break #2 (Lunch): Had a very good lunch just now, setting with folks from a bunch of different companies. The bunch included Carson Systems’ own Gillian Carson, who educated us all on the UK and gave us some dirt on Ryan (of course).

“Post lunch… it’s always ‘that time’, you know…” Dan says…

Microformats for Designers

Dan’s definition of Microformats:

Person 1: “I’m going to mark up a contact like this.
Person 2: “Cool. I’ll do it that way too.”

Man, some of Dan’s logos for Microformats that weren’t used are simply gorgeous. I do like what the final logo conveys, though. The three parts are XML, XHTML, and Microformats (gradually from larger to smaller).

Dan then show the different tools for identifying and using Microformats (using Technorati’s converter, John Hicks’ user style sheet, and LeftLogic’s bookmarklet).

I then asked a question I’ve had about Microformats for quite some time… Dan seemed to think it was a valid concern. However, I think that’s a blog post for another time.

Part 3: A Design Uncork’d: (Style)

Style property order: I haven’t worried about this much. Maybe I should…

Guideline #7: Build for moder browsers first. Future-proof your designs by developing and testing in modern browsers. Later, adjust with patches for others.

Multiple style sheets:

Guideline #8: Master floats. They can be tricky—but critical for creating independent modules.

Containing Floats by Eric Meyer

Self-clearing floats:

Think modular

CSS Typography

Core fonts:

Good for headlines:

Next, we went step-by-step through styling the Cork’d layout.

For the h1:

For the wine table on the home page:

Part 4: Beyond Template Design

Fixed vs. Fluid

Framing by percentage can give you a manageable line width (along with max-width)

Sliding Faux Columns:

What about 3 columns?

Variable fixed-width layouts:

Em-based layout (elastic):

Guideline #9: The 10-second usability test. Routinely check your pages with CSS turned off, quickly gaugeing its semantic structure.

Guideline #10: Validate. Validate markup and stylesheets as you’re building to avoid baffling display issues.

Bulletproof dashboard:

In Conclusion: Fantastic. The full-day session and interactivity provided a level of detail you can’t get elsewhere. Dan is a great presenter… modest, quietly humorous, and extremely knowledgeable. I’m glad I built on his WebVisions session with this full day crash course.

Meeting Ryan and Gillian was also damn cool. Ryan was very excited to talk about what’s in store for Carson Systems—and rightly so. I agree that it is very exciting. I hope to meet up with him at an event in the future.

And of course, the other attendees were really cool. I talked quite a bit with Scott and Justin of dealer.com—very cool guys. They picked the right place to look for help on the XHTML/CSS front. I hope they find their designer.

So, in a word… awesome. I am now bulletproof. :)

Here are some photos taken from the balcony…

Boston Skyline from d'Arbeloff Suite at Boston Museum of Science

Boston Skyline from d'Arbeloff Suite at Boston Museum of Science

Boston Skyline from d'Arbeloff Suite at Boston Museum of Science

One Comment

  1. On November 6th, 2006 at 12:37 pm Scott McCracken said:

    Hey Adam -

    Thanks so much for the kind words and the great notes summing up the day’s events. I really enjoyed meeting you and hope we’ll meet up again some time down the road.

    By the way, if you ever change your mind about moving to VT, we’ll have a seat waiting for you at Dealer.com ;o)

    Great site, I’ll be stopping by more often. Take care.