As a fan of Vimeo’s, I was stoked to hear that Blake Whitman would be giving a talk at FOWD in NY. (You may recognize Blake from that time he had some questions about the homepage...) Blake’s presentation showed that cultivating a vibrant community online is, in no small part, a tractable design problem.

Let me explain what I mean by that.

Vimeo stands out to me because I think they’ve done a great job of embodying simplicity on the web. And it turns out that this is a by-product of thinking about their site in a really focused way. First and foremost, Blake explained that Vimeo is NOT a video site: it’s a community for creative folks who like to make and watch videos. So all of the design decisions are built around this core identity.

I’d argue that understanding the team behind Vimeo’s design decisions can help us bust some popular implicit myths about building online communities:

Myth 1. Online communities are like the wild-west: they work best when uninhibited by constraints.

It’s tempting to think that there’s very little mechanical or social control we can or ought to exert when it comes to building online community. After all, members need to feel like this is their space and we wouldn’t want to stifle engagement–especially early on. Vimeo’s approach challenges this notion.

Blake explained that designing for a specific type of user and imposing key limitations have made their online community flourish, not flounder.

For example, unlike YouTube, Vimeo constrains the type of videos you can upload. Another example: rather than deploying the standard designer’s toolbox for building community around content (e.g. ratings and reviews), Vimeo only lets members formally designate videos they “like.” Blake was pretty adamant: “Vimeo is not a popularity contest.” This makes sense when you think about it since two traits of a strong community—online or otherwise—are 1) shared identity, and 2) a sense of belonging. If other people in the “community” are trash-talking something you’ve created and contributed, both of these traits are strongly diminished.

Myth 2. Successful online communities require strong and deliberate social engineering

This myth swings the pendulum all the way to the other extreme. Clients often default into this line of thinking as a way of hedging their bets. Above all, they want to manage and mitigate potential risks associated with an open online community.

Vimeo demonstrates the promise of a much simpler approach: get involved and lead by example.

Vimeo hires community positions out of their actual community. Their staff are very active on the site: they engage with other members, are supportive where they can be, they make and post their own videos. The upshot of all this is that the team has a vested interest and and embedded perspective—they’re effectively designing their own community space.

To wrap it all up, Blake’s talk encouraged me to think about the cultivation of online community as a a multi-disciplinary undertaking, but assuredly one where design plays an important role.

To keep the conversation going, what are some other design principles that can be applied to these sorts of online environments?

While attending FOWD last week in New York an overarching theme of Progressive Enhancement started to develop as more and more presentations preached it’s benefits. So what exactly is Progressive Enhancement? and how can we realistically use it and ensure our users and clients are happy with the end result?

Progressive Enhancement is all about delivering structured content to browsers and devices regardless of their capabilities, then adding layers of style and behavior that are progressively more complex. If you’re using a modern browser it will be able to render those complex styles and behaviors and deliver a beautiful rich experience. However, if you’re using a legacy browser or device, the content will be rendered to the best of browser’s ability with less complex styles and interactivity. The key here is that nothing breaks, it simply doesn’t look or behave the same in older browsers.

This probably sounds very similar to something web designers and developers have been preaching for years, Graceful Degradation. While they are similar, they have completely different objectives. Graceful Degradation has you building what the most modern browser can handle, and then ensuring that it degrades (or breaks) gracefully in older browsers. Progressive Enhancement on the other hand has you building for the lowest common denominator and then adding extra polish and functionality for browsers that can render it. Graceful Degradation has you looking backward, and Progressive Enhancement has you looking forward.

Why would you want to Progressively Enhance your website? Quite simply, you want to ensure that anybody who wants to consume the content you’re delivering can do so without getting slapped in the face with a broken unusable site. It will also lead to cleaner, semantic code which is easier to maintain and easier to upgrade (or enhance) at a later date.

Lets a take a look at a quick example. Here we have a pretty really basic nav with rounded corners, shadows, and a custom font. Normally we would build this using something like:

You can see we have code in there just to support the design, a div for the bottom corners, a class on the last list item to get rid of the last underline, and a container div to keep it all together. We would also have about 8 different image files for the corners, background, shadow and custom fonts. Don’t forget the PNG hacks to get everything looking properly in legacy browsers. All of that just to support a pretty basic design.

Ideally we would use something more like this:

Here we have clean semantic code with nothing but a class name (maybe) for the styling of this basic nav. No images are required for this navigation, we’ll let CSS take care of all the styling. Rounded corners, shadow, gradient background, custom fonts, and removing the underline on the last list item can all be taken care of with the latest CSS styles. I won’t dig into the CSS code for this today, but we’ll take a look at how this would look in different browsers.

As you can see, nothing would break and everything is still usable no matter which browser you’re using. If you’re using a newer browser you’ll see a little more polish than users with an older browser, and your experience will be a little bit better. Dan Cederholm used television as an excellent analogy for Progressive Enhancement. You can watch the latest episode of 30 Rock in glorious HD and surround sound if your home theater has an HD TV and a surround sound system. However, you can watch the exact same show on a 15” black and white TV with mono sound. You’ll get the same content, and be able to talk about the same jokes around the water cooler regardless of what your home theater looks like. If you’ve invested in the latest and greatest TV and Audio gear you’ll be rewarded with a better experience. If you have a 15” black and white TV, chances are you don’t care about that better experience, or at least understand why you’re not getting the best experience.

We need to use this type of analogy to explain Progressive Enhancement to our clients. Websites absolutely do not need to look the same in every browser. You can deliver an enhanced experience to users with the latest technology and not alienate users with legacy technology. The tricky part comes when you present a design with all the sparkle and polish to a client, and they can only see the basic lacklustre version of the final product because they’re using a browser that’s 10 years old. Finding a way to present the lo-fi and hi-fi versions in tandem will be key in selling Progressive Enhancement to clients, and moving web design forward.

The @font-face rule allows authors to specify online fonts to display text on their pages. In other words, you’ll be able to use fonts outside the usual Arial, Verdana, Georgia and the like, even if the end user doesn’t have them resident.

There are a few other things worth mentioning. The rules are unique to CSS3, so only a few of the newest browsers support them. The fonts you use must be made public, so if you use the rule you’re essentially distributing the fonts – not cool. That’s its biggest hurdle right now and may in fact lead to its demise unless someone can figure out how to protect the fonts. I’m not convinced services like Typekit are the answer.

Originally, we had designed a page using some recently purchased H+FJ fonts but quickly realized we couldn’t use the layout without distributing the fonts. Don’t hate the playa, hate the game.

Before you go clicking you’ll need a really modern browser. Firefox works best, not only in the way it renders the actual type but also the way it displays letter spacing. The new Safari and the Opera beta browsers will also render it decently. We could have made the page degrade gracefully for older browsers, but we didn’t. While you can still view the page in older browsers it’s gonna look like it’s 1999.

Update: It seems as though Firefox 3.5 for Vista doesn’t render a few of the fonts well or at all.

view the sample page

Okay, so we won’t be using it anytime soon due to the issues stated above, but it sure does look promising. There’s a good post at craigmod on this subject too if you want to learn a bit more.

First off I need to commend Canada Post on improving their Web site. I can actually find out what a stamp costs for the 4 times a year I send a letter. That used to be an exercise in torture on the site. Real improvement.

But I hate it when sites ask me questions they should know the answer to.

Shouldn’t you guys know if this is business or personal based on the tracking number? Are there really duplicate tracking numbers? What is the difference between business and personal?

In my case I received the tracking number from a business who was shipping me something to my office so I selected “business”. I was wrong, its personal. I’m so stupid.

Why can’t I enter the tracking number and Canada Post figures it out? Am I asking for too much?

Along with Apple’s official release of the new iPhone 3.0 software came a number of new graphic GUI elements. We’ve been holding off updating the Photoshop file until we could properly implement the additions. We built it using vectors, so it’s all still fully editable. Apple’s SDK is amazing, but when we need to mock up something quickly for a pitch we turn to this.

Some of the changes and additions in the 3.0 iPhone GUI PSD include:

• Map and map elements including curl
• Copy and paste elements
• Timeline bar editor
• Horizontal iPhone
• Horizontal Panels bars and keyboards

If you like it or use it, help us out by retweeting it.

Download The iPhone GUI PSD Here (9MB)

(Thanks to Finn O’Hara for the photo)

Magic Happens When You Give Smart

The 2008 holiday season was certainly a busy one for us and TELUS. Ads, ads, some more ads, a few signage pieces, and a little microsite kept us well occupied in the weeks prior to Christmas. Now, I won’t bore you with all the little details, but I did want to share a few of the pieces we created this past holiday season.

Online Ads

The Q4 campaign was quite broad and required a large variety of ads. We created a mix of standard and rich ads, cross-talkers, a mini product-viewer, and even an ad where you can search Google on the phone… in the ad. You can see a few of the ads here, but we’ve also put together a little highlight reel to show them off.

Microsite

I suppose magic doesn’t happen on its own… it’s really something that has to be manufactured, right? Enter the Magic Machine – a simple machine that helps you find the right smartphone.

Our internal team modeled and animated a number of scenes, all of which were dynamically assembled depending on the features you select at the beginning. We wanted to make the experience playful and if you use with the machine a few times, odds are you’ll see a completely different scene each time.

A friend of ours, Daniel Burka, who also happens to be the Creative Director at Digg posted this video to his twitter feed today. I was blown away by it. Aside from being visually stunning, its core message runs deep and has little to do with motorsport or automotive manufacturing. Everyone should take more personal time to reflect upon their failures rather than trying to forget about them.

This is along the same lines as our iPhone PSD. Everyone here in our office seems to get these form elements and browser windows from different sources, some of them are good, most are out of date. So, in an effort to keep our stuff up-to-date and consistent we put together our own. Included is a set for Mac Firefox 3 and another for Vista IE7.

If you’re a web designer and think this may be useful, you can download it here

Big news. Our most recent TELUS project is the FWA site of the day. Thanks to everyone who helped make the Magic Machine a huge success.

UPDATE: Apparently, yesterday was the FWA’s “highest trafficked day ever, with over 60,000 site visits.” I wonder if we had anything to do with that.

Often times my friends and family ask how we get any work done, here at Teehan+Lax. Based on the stories they hear from me – it’s all fun and games! And guess what? It is. But as it turns out, that’s not a bad thing.

In the new Ted.com presentation (:30 minutes in length), Tim Brown demonstrates how, as adults we learn to fear the judgment of our peers. He explains how professionals need to relearn how to be playful in the work place. Go back to the things we learned as a child: Exploration, Building and Role Play.

Quickly conducting several games from the stage to the audience, Tim demonstrates how as adults we:

• self-edit as we are coming up with ideas – our desire to be original is a form of editing
• forget to be open to the questions: what is it? AND what can I do with it?
• need to use the materials around us to get our point across (lots of great prototyping examples in the last half of the presentation)

• should “try-on” experiences, as a form of role play

  I can’t say that in this day and age we’d ever go as far as the Peyote tests conducted in 1960s (another example cited by Tim) to get over our adult habits. But luckily, at T+L we don’t need to.