| View | Upload your own

Today (a couple of hours ago, actually) I gave a presentation called “Introduction to Web Standards” at NewBCamp08, a new unconference in Providence. I’m pleasantly surprised by the turnout, considering it was a first time event with minimal marketing used to spread the word (Twitter played a hand, I bet).

Here’s my talk about Web Standards, microformat goodness, and some URL as UI craziness. The talk seemed to be pretty well received and had a decent turnout with some excellent questions asked.

Yeah, I had to look it up, too.

Meryl tagged me on a couple levels. First, she presented me with an “Inspirational Blogger Award.” I’m not really sure what to say about that. There are a lot of people out there far more inspirational than myself (I mean, I can’t think of how I am at all). Meryl seemed to like the whole “blog is the new resume” story, so perhaps she was inspired by that.

The meme says that I in turn have to award the blog awards. For “Inspirational Blogger”, it is very hard for me to pick. A ton of bloggers have inspired me. Would it be a cop out to name the crew of Dan, Brian, Jeremiah, and Joshua? For”Courageous Blogger” (the award Meryl was given), I’ll give it to Kathy Sierra. She took a stand after dealing with crap she shouldn’t have had to. She did what was right, though I feel like I’m not as smart a person when she’s not blogging. Kathy could also get “Creative Blogger Award,” but Tara is also quite deserving. I’ll stop there since what I mostly read are tech blogs and those are the ones that fit best.

Not done there, Meryl also tagged me to reply to a meme about revealing tips for dealing with problems (or dealing with adversity, as the original post said). I have five to offer off the top of my head. While most relate to solving technical problems, some can work at a higher level as well.

1. Figure out the high-level problem. This will actually allow you to solve all issues related to the greater problem. This way you can avoid simply endlessly applying band aid after band aid.
2. Get a baseline to work from. This one works best in interface design. A lot of things go into an interface. There are tons of decisions to make. To avoid feeling overwhelmed, you just have to make a first version. You will throw all of it away, but you need to have something to look at to say “I don’t like that.” Otherwise, you’ll never know what you want.
3. Don’t dwell. This one rises above software design. Is this problem really the end of the world? Probably not. I’m totally a “make lemonade” guy. Hell, I love lemonade. Not that crap made from powder, though.
4. Do the other little things first so you can focus. No, it’s not procrastonating. It is eliminating one of the additional stresses you have—the stuff you have to do AFTER you solve this impossible problem. When all that’s left is the impossible problem, you can focus on just that.
5. Get another set of eyes. I’m not ashamed to run something by someone else. I love feedback. It’s why I listen to Mogwai.

So, I hope that fit the bill. I think I survived my first memetag.

I’d have five cents.

So, I trimmed my RSS list not long ago and made a category called “Must Reads”. I’ll share those here:

• Brian Oberkirch: The ultimate aggregator
  
• Joshua Porter: Social web design
• Creating Passionate Users: Empowering user to kick ass
• Jeremiah Owyang: Social media guru, though he digs far deeper than I do
• Dan Cederholm: Because he’s my hero
• Chris Messina: He’s just got his finger on everything
• Tara Hunt: Pinko marketer extraordinaire
• Guy Kawasaki: The legend
• Ryan Carson: Just because I love all of his ventures

I know, for a “designer” it’s a little light on design blogs. But I figure if anything too crazy is talked about in the design world, I can get that from Dan or Chris. I also listen to Paul Boag’s Boagworld podcast, which helps out on that front. But what can I say? I love the strategy side of things.

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…

Thursday, I’ll be spending the day learning how to be bulletproof from the bulletproof master himself, Dan Cederholm. I met Dan and attended a short session with him at WebVisions in July, but this is an ALL DAY session put on by Carson Systems. For those that don’t know what the heck I’m talking about, Bulletproof Web Design is the title of one of Dan’s books. Bulletproof web design is the philosophy of creating flexible designs that survive in worst case scenarios. It essentially covers three areas in which you can be bulletproof:

• Content: Flexible at different text sizes and with different amounts of content.
• Editing: Content changes and maintenance must be simple.
• Environment: The design must survive different devices (any browser, handheld device, cell phone) and scenarios (images off, printing instead of viewing on screen, no javascript/CSS, etc.)

There are best practice and then there’s bulletproof. It takes things to a whole new level.

Okay, everyone knows that Dan is my “web design superhero”, but I’ve been dying to get to a Carson Workshop for like… ever. They have a ton of them overseas and in San Francisco, but the combination of a Carson Workshop… In Boston… featuring Dan Cederholm was too much to pass up.

So, I immediately wrote an email to my entire company telling them about the session and what the benefits would be of me going. And then I asked for money. See, I need to find projects to fund me to go to such things (like WebVisions). Luckily, the funding came through, because I had gone ahead and booked it anyway (hey, there’s only 40 seats at this thing). I offered project managers whatever they needed in return—a report, code samples, and even eight hours of clapping erasers.

This brings me to another topic that is related. I have started sending out emails with “Adam the Aptima Scout” in the subject line. My company likes to see everyone go to a conference or a seminar every year for professional development. But with everything that’s going on in the web community, one is just not enough. So, I’ve been aggressively persuing funding to go to more. Call it personal marketing. I’ve already identified at least three conferences I want to go to next year (SXSW, @media, and WebVisions).

A month or so ago, I sent out my first scouting offer, for Refresh ‘06. I was interested in that one because Paul Boag, Andy Budd, Cameron Moll, Jeremy Keith, and many others I’d love to see are going to be there. There was a bit of interest in sending me to that one, but whereas it is pretty much all Web Standards, it was a pretty small group of project candidates.

Luckily, Cederholm’s session is just one day (no hotel stays needed), in Boston (can take the T, no planes), and is relatively inexpensive ($495). So, this has been my first success in my “Adam the Aptima Scout” approach. I’ll try it again next with SXSW. That’s a bigger conference with much more diverse panels, so hopefully that will help me get multiple projects interested in order to cover costs like flight and hotel.

Anyway, you can expect me to blog all about the session with Dan. It’s November 2… and I can’t wait!

Also, a quote of MINE made Derek Powazek’s site?

Well, I’m not going across the Atlantic, but on the way home from WebVisions, I am going across the country. I’m going from Portland, Oregon to Providence, RI via… Phoenix. Yeah, a big checkmark across the good ol’ U S of A. I’m on the Phoenix to Providence leg right now (the five hour flight that came after the three hour one). Since it’s a five hour flight, Southwest gave us a WHOLE CAN of soda. Of course, I open it up and, it explodes.

How do you deal with it? I’m in the window seat, so it’s not like I can hold it over an empty seat until it’s done erupting. And it’s not like I can move around at all. I even had my PowerBook out (but closed), sitting on the traytable. Luckily, I quickly moved the can away to save it. Then I’ve got it hanging over the back of the traytable… I look down and my laptop bag is open with my recently signed copy of Dan’s Bulletproof Web Design exposed. Oh hell no, that’s not going to do.

The only thing I have left to do is just let it finish erupting while running down my leg. Not a pleasurable experience, but the laptop and the book are fine. I guess a super-sticky leg isn’t as bad as a lapful of cranberry juice though.

With that, I will go into some final thoughts about WebVisions:

• This was my first modern web design conference. I absolutely loved it. With the exception of one snoozer of a session, every single one was inspiring and insightful. I can’t wait until next year’s event.
• I met Dan Cederholm. Twice. I made sure to talk about Dave Roberts.
• People like Jeremiah Owyang are what the so-called “Web 2.0″ is all about. It’s about sharing, collaboration, and helping. I used to feel like web design was similar to many other fields—people were protective of their intellectual property. Not this new crop of designers. They write, they share, they help. And it makes this a great field to be in. It’s not just Jeremiah, but all I had to do was mention to him that I was getting into community and he immediately showed me things to help me out.
• The Design Panel was one of the most enlightening seventy-five minutes of my professional career.
• I have never seen such a high concentration of Macs ANYWHERE (and I’ve been to a Macworld Expo).
• User Experience design is so much cooler than… well, anything else. I’m pretty jealous of the jobs that Jeremiah, Kelly Goto and Gene Smith have. I think a lot of what they are doing can help Aptima, and I plan to get that ball rolling.
• For some reason, I feel like the Derek Powazek and Heather Champ reality show would be addictive to us techies.
• When I started Traces of Inspiration, it was really just to dump some thoughts and links while researching community and Web 2.0 for a new Aptima project. I blogged my WebVisions notes and suddenly I’m getting my first trackbacks ever. I’m being linked to, and it’s pretty darned cool. Jeremiah was the first trackback I ever received, for waht it’s worth. I told him that and he was like “cool… wait… first ever?”
• And lastly, there’s just one thing that I don’t like about WebVisions… the fact that I was away from my wife and little girl for a few days. I’m still a fairly new dad and that’s very hard for me (harder for Erin, I’m sure). I can’t imagine how Dan Cederholm feels after all this speaking with a little one of his own at home (dude, Jack is totally adorable!).
• I want to thank those who set up WebVisions and the folks at Aptima who’s projects paid the bills for me to go. It was well worth it for not just the projects, but for the company itself.

Some more wrap-ups:
Dan Cederholm
Jeremiah Owyang
D. Keith Robinson
Bryan Veloso
Micki Krimmell
Matt Anderson
Erin Julian
Bryan Veloso
Nick Finck
Conference Web Page

Design Panel

Spakers: Bryan Veloso (Moderator), Dan Cederholm, D. Keith Robinson, Mike Davidson

Every once in a while you go to a panel that is just … fantastic.

This panel was three web rock stars (Dan, Keith, and Mike) and a guy that looks like he’ll be part of the next generation very soon (Bryan). Bryan was nervous going into this (as stated on his blog), but he did very well as the moderator.

My battery was low for this one, so I scribbled down five pages of notes. here’s the transcription (if I can read them)…

What’s wrong with web design today:

• Internet Explorer
  • IE7 is better but still not where it needs to be
  • It’s not necessary to wait until IE6 is down to 0% usage before ignoring it.
  • Some site serve or more basic CSS for IE6 & below (make them want to upgrade!)
• Revenue being the bottom line in driving design decisions
  • Problems happen when short term revenue drives design decisions and not long term revenue.
  • You’re not an artist. Get over it.
    • Art provokes emotion.
    • Design provokes reaction.
• The disconnect between graphic design and web design.
  • Creativity bar is higher in graphic design.
  • David Carson would be a bad web designer (too abstract)
• Too much focus on technology, technique, and latest trends
  • Technology is means to an end
  • Talk about fundamentals
  • learn to design; solve the design problem with something like AJAX
  • CSS isn’t design, it’s a technique.
  • More focus on graphic desing & usability
  • There is such a small set of tools
    • Real creativity comes from constraints
• Browsers, HTML & CSS are moving along at a glacial pace
  • CSS3 will take a long time to become standard
  • The web exists for communication
    • Not for clean code nazis
    • Know when to break the rules
• There are ridiculous arguments about bad design actually being good
  • MySpace, Google, Craig’s List, etc.
• There isn’t enough focus on copy as a design element
• We need new heroes.
  • Every industry needs someone to look up to.

What’s right with web design today:

• Best practices are now part of web standards
• Designers are creating their own design products and companies
  • If you an’t convince them your idea is better, become their competitor.
  • Having someone focused on design at the top of the company is great, until you have to worry about really making money.
  • Freedom to make something as you would want to do it.
• People are learning the right way at an earlier age.
  • There weren’t classes for this when we were in school (I didn’t learn web design in college, even)
• Many different people from many different backgrounds are trying their hand in design
  • There is a lot you can learn from print design (white space, grid, typography, etc.)
• Web designers are maturing, beginning to develop good fundamental basis
• Complexity of design is increasing in proportion with average bandwidth
  • Nobody cares about dialup anymore
• Flexible platforms make design more leverageable (WordPress, etc.)

The most important design elements:

• Clear and defined purpose
• Solid concept well executed
• Solid architecture
• Balance
• Answers “who?”, “what?”, and “why?”
• Easy for beginners, but still good for advanced users
• Easy navigation from one area to another
• Personality and memorability: standing out in the crowd
  • Learn how to write!

Breaking it down (what’s good):

• JeffCroft.com — creative comments
• thebignoob.com — great photos
• 31three.com — laptop image
• Technorati — clean URLs
  • URLs are interface design
  • no subdomains effects your search results positively
  • good structure helps your rankings
• veerle.duoh.com — art & illustration
• dustindiaz.com — style switcher
• muledesign.com — creative fine print
  • (scroll to bottom)
• uxmag.com — widget front page
• tatteredfly.com — flybox
• nytimes.com — typography
• digg.com — comment ratings
• digitalmash.com — dynamic head
• bearskinrug.co.uk — interactive bear
  • (on the right side of screen)
• nymetro.com — typography

Reassembly:

• Take elements of design and apply them to projects
• Do what fits
• Little details can make the most impact, but don’t spend 99% of time on it
  • Concept first
  • Details later

Spin it to make it your own:

• Nothing is new, just spun differently
• Every designer develops a style eventually
• Better to be good than original (on the web)
• Don’t steal: use nodes of design inspiration
• Mix up your process (comp first, css first, etc.)

I attended a snoozer of a seminar in the middle here… the only dud. I won’t comment on that one… This next one was another good one, though.

Social Metadata and the Relevance Revolution

Speaker: Gene Smith

• Harness what users are doing to make your site more relevant
• Emergent Information Architecture
  • Became Collective Intelligence
  • Social Information Architecture
• Takeaways
  • Better understanding of social systems we are so engrossed in today
  • Think about feedback and how to incorporate it into the design process
• IA: Structural Design of shared informaton environments
• Shared design of semi-structured information environments
  • Users are co-creators
• Social IA: User actions create some or all of the structure of an information environment
  • Using the wisdom of crowds to solve the problems of IA
• Amazon: Granddaddy of social IA
• Wikipedia: without the contributions of users it would be empty
• Flickr & tagging
• Augmentation vs. Co-creation: Levels of contribution from users
• The web is now part of our social structure
  • Go on to have fun, too.
  • Shouldn’t ESPN know that he ALWAYS clicks on the NHL button?
• Three ingredients of SIA
  • Capture user actions
    • Things people do online that we can track
    • Building blocks
      • Popularity
      • Community
      • Reputation
    • Ignore higher goals and motivations
  • Aggregate and display
    • Brining together user actions in a relevant way
    • Displaying them
    • Rules
    • Kinds:
      • Listing
      • Ranking
      • Clustering
      • Collaborative Filtering
      • Other algorithms
  • Feedback
    • Places to intervene
      • Introduce delays (comment moderation on blogs)
      • Modify the strength of feedback loops
      • Who has access to what informaton?
      • Adjust incentives and punishments
      • Change the system
• Challenges
  • Spam
  • Gaming the system
  • Balance
  • Relevance
  • Unintended consequences
• Design Principles (for Social IA)
  • Allow for different levels of engagement
  • Monitor and tweak feedback loops
  • Participate in larger ecosystem
    • YouTube is viral
  • Design new actions, aggregators, display
• genesmith@atomiq.org

Keynote: The Dawning of the Age of Experience

Speaker: Jared Spool

This keynote was done by Jared Spool of Boston-based User Interface Engineering. I’m actually more familiar with Jared’s colleague Joshua Porter for his writing on Bokardo. Jared was very entertaining, though. A few notes:

• Successful user experience integrates the user AND the business.
• Successful experience design is learned, but is not available to introspection.
  • (Chicken sexing example)
• Successful experience design is invisible.
  • (Think air conditioning — if it’s just right, nobody notices it)
• Successful experience design is multidisciplinary.
• Successful experience design is cultural.
• Redesign is dead — embrace incremental change.

More Notes:

• Ryan’s Notes
• Brian’s Notes (on the Design Panel)

Bulletproof Web Design

Speaker: Dan Cederholm

Well, if you’ve been to this site before, you know that I’m quite the Dan Cederholm fanboy. So, it was great to see him speak (and introduce myself afterwards). This seminar went over ways to make your site less vulnerable to worst case scenarios (content adjustment, browsers, user settings, etc.). Well, I’ll avoid the gushing and go into the notes:

• Dan filled the room.
• Bulletproof =
  • Worst-case scenarios
  • flexibility
• Baby Jack – born premature
  • Real life worst-case scenario
  • Easy to worry about stupid stuff (diapers, strollers)
• A site visitor couldn’t read site with images off
  • Used Faux columns
  • Text was same as background color
  • Fix: Include background color equivalents to background images
• Building in Salem – storage facility
  • Built windows, but covered with cement
  • Was this because they planned for future, thinking that it wouldn’t always be a storage facility?
• Bulletproof pants
  • Tab slides in an out as your waistline expands.
• 3 areas you can be bulletproof
  • Content – text sizes, content amounts (pants)
  • Editing – content changes, maintenance (building)
  • Environment – device/browser, scenarios (images off, etc) (baker’s dozen)
• Recommended from ALA: John Allsopp “A Dao of Web Design”
• Bulletproof arrow
  • 4,362 ways to accomplish the same goal
  • Solution #1
    • make an image
  • Solution #2
    • CSS
    • Arrow as background image, place text over it
    • Not bulletproof (if text is increased, arrow does not resize)
      • People really do adjust text size
      • You’re not only testing text size, but adjustments in content amount
      • Use relative text sizes with confidence
  • Solution #3
    • Flexible
    • Easy to edit
    • allows for varying text sizes or content amount
    • Make the text a heading
    • use a background image for just arrowhead
• Web design in a nutshell
  • Ways that Work
  • Ways that Work Better
  • Ways that Don’t Work
• Bulletproof tabs (Cork’d)
  • Absolute positioning – breaks if text size increased
  • Double self-clearing floats
  • Think Modular
  • NetFlix
    • They think in fixed height
    • Use vertical sliding doors
    • There is a breaking point (but can accommodate much more than before)
• Clearleft.com
  • Dog ear on right – simple to attach
  • Simple details easy to implement
• Odeo
  • Rounded corners in top left and bottom right
• Reusable ornaments (Cork’d)
  • Swash below text
  • Same image, different widths
  • Always centered
  • Tundro, reusable line behind text
• ESPN search tabs
  • Needed to hold number of search results
  • Needed to go from image to CSS (to allow tab to expand)
• Microformats.org
  • Hovering over unordered list items
• Haveamint.com – link treatment with background, two borders, and padding
• Cork’d – Icons attached to text links
  • class=edit (each class gets a type of icon)
• Fixed vs. Fluid
  • max-width, min-width (no IE)
  • Frame by % instead
  • Simplebits (maxwidth in center, % columns on side)
• Variable fixed-width layout
  • Javascript checks size of window and adjusted styles accordingly
  • Collylogic.com
• Bulletproof tools
  • 10 second usability test
    • Take away the design
    • Is the site still understandable?
    • Like an x-ray of the document
    • Does the structure make sense?
  • MLB=bad
  • McAfee=good
• Validation as a tool
  • 100% validation is difficult to maintain
  • Validation during construction is key
  • Eliminates head-scratching CSS problems
  • Firefox: Web Developers Tool Kit
  • Safari: Tidy
• Bulletproof dashboard
  • 10 second usability test (disable styles)
  • Turn off images
  • Validate
  • DigDug Text Test (DDTT)
• The bulletproof concept
  • The positive power of buzzwords
  • Embrace flexibility
  • Let go of pixel precision
  • plan ahead for worst case scenarios

For Aptima: Well, this is one of those things that can only help design of all kinds.

About Interface: Designing for Lifestyle

Speaker: Kelly Goto

I hadn’t planned to go to any of the seminars at this time, opting to just wing it and see what looked interesting. I’ve seen Kelly Goto’s name around quite a bit, but knew little about her. I was glad I attended this one—she’s a great speaker. This talk was a lot about mobile technology, but also about ethnography.

• This is the year for US to shine or flop in mobile space
• “Getting inside the minds of customers is essential for ‘aha!’ moments that lead to innovation.” (Business Week, April 2006)
• Lifestyle and Innovation focused companies
  • jetBlue, TiVo, Google, Apple
    • jetBlue designed around what customers want.
    • TiVO has an interface that fits in with how people actually live.
    • Google GMAPS – people on the go know what’s near them
    • Apple iPod – personality & lifestyle driven
      • Apple & Nike (corporate giant mashup)
• How can you design an appropriate experience
  • Practical
  • Emotional
  • Ordered pretty coffee maker despite poor interface
    • Worked until they “got it” because they were emotionally attached
• More than usable
  • Are you emotionally attached to it?
  • Do you think it is useful?
  • Does it meet your needs?
  • Can you integrate it into your life?
  • Just because something is usable doesn’t mean it is meeting your customer’s needs.
• 3 takeaways
  • See how large brands are incorporating lifestyle research
  • Gain insight on the trends impacting our society
  • Take away practical methods of rapid research incorporating usability and “deep hanging out” into your design & development process
    • observe customers
• Ethnography = “deep hanging out”
• Research & Design
  • Traditional: Research informs design
  • Goal: Disciplines are merged
• Focus group/survey vs. Observation
  • People are themselves in observation, not as much in a focus group

For Aptima: Not sure, but as we get into more productizing, we can see how to make our customers really get into our products. Our products are more like something they would use on the job, so perhaps there’s a way to make that a little easier on them.

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.