Traces of Inspiration

Bulletproof Notes (A Day with Dan Cederholm)

• November 2nd, 2006
• Filed Under: Cork'd, Dan Cederholm, Design, Microformats, Web Standards

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

Reception:

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.)

• Worse-case scenarios
• Embracing flexibility
• Design that is difficult to “break”
• Future-proofing
• Making it easier to hand off templates to teams and clients
• Accessibility from semantic markup
• “Working yourself out of a job”
  • You can hand it off and not have as much follow-up work

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:

• Content
  • Text size
  • Content amount
• Editing
  • Content changes
  • Maintenence
• Environment
  • Device/browser
  • Scenarios

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.

• font-size keywords
  • body {font-size: small}
  • h1 {font-size: 130%}
• setting a base in ems
  • body {font-size: 62.5%}
  • sets a base of 10px

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):

• Saves time if IA and designer are the same person
• Clickable, usable
• A head-start on template code
• Realistic Environment
• Don’t need to worry about cross-browser CSS issues
• Worry more about markup structure than optimal CSS

Iterative Prototyping:

• Sculpting an Interface
• Combination of CSS and image editing

Semantic markup:

• Choose HTML elements based on meaning
• Separating presentation and content
• Search engines love it
  • greater importance to headings, etc.
• Understood by a wider variety of browsers and devices
• Markup once, redesign more
• Describe what something is, rather than what it should look like
• “left” or “right” are not semantic for class names
• Leverage inheritance
• Use link title attributes to further explain
• divs and spans = empty calories

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:

• Markup calls screen.css
• screen.css calls master.css and ie.css (for all the damn hacks)
• Article by Molly about management of hacks
• Filtering CSS by Doug Bowman

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

Containing Floats by Eric Meyer

Self-clearing floats:

• Using div.box:after, can self-clear the float
• Position is Everything bug fix for IE6 and older
• IE7 requires “*:first-child+html div.box”… ugh.

Think modular

CSS Typography

Core fonts:

• Verdana, Arial, Georgia, Times, etc.
• Lucida Sans, Trebuchet, Helvetica

Good for headlines:

• Georgia
• Trebuchet
• Helvetica
• Arial

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

For the h1:

• Dan put an image in the header that would look good if the site was unstyled.
• In CSS, he positioned that 9999 px off the screen.
• He then served up a background image (that blended with the background color of the header) within the <a> tag.

For the wine table on the home page:

• For the wine’s region, Dan used an <em> with the class “region” that he could then style and display as block (forcing it to a new line).
• Also, he used <tr class=”alt_row”> to alternate the row color.
• He uses <tr class=”alt_row last”> to remove the final border to the last item in the table. (this part added in the Rails portion by the developer)

Part 4: Beyond Template Design

Fixed vs. Fluid

• When executed well, fluid layouts can be betterproof
• Can have drastic effects on page design.
• Each has their place

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

Sliding Faux Columns:

• 70% column, 30% column
• anchor at 70% from left, 0 from top
• can’t have one pixel frames (will slide off screen)
• might want to set max width for over 2000px.

What about 3 columns?

• Uses two background images with Sliding Faux columns technique
• Attach background images to two divs (#wrap, #wrap-inner)
• wrap image is orange (right column) and white
• wrap-inner image is green (left column) and transparent (so they don’t cross over each other)

Variable fixed-width layouts:

• Wider layout for wider browser windows.
• Javascript swaps class or serves alternate stylesheet when window is narrowed.
• Predictability for designers, increased flexibility for readers.
• an example from collylogic.com

Em-based layout (elastic):

• Based on text size (not window size)

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:

• Disable styles
• Turn off images
• Validate your markup and stylesheets
• DigDug Text Test

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…