Fantastic photo by LaughingSquid via Flickr.

Do I really need to provide an intro? My two heroes.

• Dan Cederholm (SimpleBits)
• Brian Oberkirch (Small Good Thing)

Location. Does it matter where you are?

“Daddy, where do web apps come from?” – Jackson

• Location doesn’t matter (except when it does)
• There are some amazing virtual companies being created
• What it takes is the right people
• You can build great web apps anywhere in the world
• Silicon Valley happens to be where more people do it
• What makes the valley different?
  • Talent
  • Startup mojo
  • Infrastructure/funding
    • Don’t think about funding. Think about making great stuff.
  • Community
    • What we outside the Valley would like to replicate
    • SuperHappyDevHouse
  • The valley doesn’t understand people
• Knowing your users > Who you know
• Build your tribe
• Come bearing gifts
• Building Blocks: Vitamin, Co-working, A List Apart, Distributed tools (Skype, Basecamp)
• Tundro
  • Cork’d: Dan & Dan hadn’t really met each other when they started
    • Didn’t meet until after it was done
  • IM, phone, Skype, Basecamp
  • Location doesn’t matter
    • You can successfully work with people virtually
  • Dan works by himself, 10×10 office with no windows
  • The benefit of being able to sit next to someone and bounce ideas around is huge
  • How did they hook up?
    • Knew each other through blogs, worked on a couple projects together (freelance)
    • Skills overlap on lots of things, IA, copy writing
    • No easy answer for how to find people (friends, people online)
  • How do you add to the number of people you know to work with?
    • Conferences, Twitter, Flickr (who’s doing what?), Barcamps
    • Hosted Boston-area designers meetups
  • How did Cork’d come about
    • The user was them – they wanted to use it
      • Started off using Flickr to share wines
    • Very “Getting Real” – no mockups
      • One main template outside of Rails
      • Dan B dumped it into Rails
      • Built on top of that
      • SVN made building with the two of them easy to do in real time
    • Downsides to not sitting together?
      • Not able to collaborate on other types of projects
    • Not wine experts, but now talking to wine companies
      • You should really be passionate about the subject
    • What’s the status?
      • Sidetracked by interest in site that stalled development (that sucked)
      • Chugging along
• Does being remote hurt?
  • Hasn’t worked with a company in Boston yet
  • If he had to go to meetings, he couldn’t get any work done
  • Physical meetings take up a lot of time
  • It helps being virtual
• Etsy: In Brooklyn
  • Don’t get distracted by issues that are important to alpha geeks

I expected a lot of this panel, and it did not disappoint. It was great to hear Dan talk about not only the process involved in creating Cork’d, but also how “lonely” it can get, working by himself out in Salem. One of the highlights of this panel was the folks I met afterwards, but I’ll write more on that later.

If you ever get the chance to hear either of these guys talk, go. I love hearing Dan talk about CSS. I love hearing Dan talk about business. I would go to a panel where Dan was discussing Guided By Voices. Or ukulele. Brian, to quote Josh Porter, is the ultimate “aggregator.”

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…

One that I have really come to admire is Dan Cederholm of SimpleBits. Dan is a web designer/developer here in Massachusetts. If you read the many interviews with him, his other interests come out—good music (The Pixies, Spoon, etc.) and baseball (he’s a Sox fan) among them.

Dan gives a great interview, both written and spoken. If you’d like to read one, I recommend a recent (September 2005, many of them are much older) interview with Digital Web Magazine. If you’d like to hear a couple, he did podcast interviews with the Web 2.0 Show (a podcast that interviews many cutting edge web designers/developers) and Inside the Net (a podcast by video and audio podcast superstar Amber McArthur).

Dan also has a pair of design books out—Bulletproof Web Design and Web Standards Solutions. I can’t vouch for these yet (trying to order them through work), but the reviews have been great.

Dan recently launched Cork’d, a web site that allows users to track and suggest wine purchases. I’m not much of a wine guy, but the site exhibits Dan’s knack for clean design, perfect iconography, and an excellent user experience.

The best thing about Dan is that he’s always there to help. He’s constantly writing, posting, and speaking about design and development, sharing his knowledge with the masses. He’s already been a huge help to me and I’m sure I’ll continue to learn more from him as I start reading his book and not just his blog, articles, and interviews.