The ZURBlog is where we discuss interaction design and strategy.

Photo courtesy of Terry Chay

At midnight on March 19, 2007 Justin Kan attached a webcam to his cap and started streaming his life through online video via a laptop-backpack system. He decided he would stream continuous live video and audio 24 hours a day 7 days a week. Justin became a media sensation rather quickly landing his first interview at Today Show in April 2007. He went on to interview with CNET Live, ABC News Nightline, and World News Tonight throughout the rest of 2007 raising a tremendous buzz. Justin.tv now attracts more than 30 million users worldwide which produce and watch live shows, meetings, and other events. Justin will share with us:

• What motivated him to come up with the idea of streaming video?
• How has the site evolved since the launch of Justin.tv?
• What is the business model?
• How has his role changed in the company since the founding?
• The funniest moment in his career?

About the company: Justin.tv is the easiest way to create and share live video. Just a laptop and a webcam lets users share what they're seeing or doing as viewers interact and respond in real-time via chat. Justin.tv's live video platform receives 30% more incoming video than YouTube each day and streams video to hundreds of thousands of viewers simultaneously. Justin mentions that live video engages an audience and inspires immediate actions such as: to follow someone on Twitter, to click a link, or to buy a product.

Lunch will be provided. We'll be streaming Justin's event live at http://www.justin.tv/zurb

Your mom has always told you "It's the thought that counts," but unfortunately you can't buy thoughtfulness at Target. You can however buy a collection of inexpensive items, a 99-cent card, some decent gift wrap and become renown for your thoughtfulness.

We like to think that our processes here at ZURB can be applied to almost anything in life. Our project management philosophy is an especially good fit for gift giving. It consists of three simple steps:

1. Tell me
2. Show me
3. Tell me what you showed me

Tell me

This is where the 99-cent card comes in. We all understand that with gifts need to come cards, and within cards needs to be scribbled some generic message. Maybe "Wishing you the best," or perhaps you skip the message all together and go straight to "Love Peter, Paul and Ringo the Dog." The card is where the most opportunity is to properly setup your gift and deliver maximum thoughtfulness.

In your card describe why you choose the gift and allude to some hurdles (fictional or real) you had to overcome to acquire it. It's OK to give hints as to what the gift is, but try to refrain from stating it explicitly.

Dear Leia,

I know how much you love plants and I went to dozens of boutique garden stores before finding the absolutely perfect one for you. It reminds me of that lovely time we had at the french bistro last summer.

I sincerely hope you enjoy it, Han Solo

Show me

Picking the perfect gift is straight forward if you stay focused on the message you will write in the card. If you're out shopping at Walmart and have doubts about your mother enjoying the bucket of laundry soap you're holding, think through what the card would say.

Mom, I was frantically looking for a gift two hours before your birthday party and remembered how much you like doing the laundry for me and the rest of the family. I hope it does not give us all a rash like the last bucket of discount detergent we tried. Doug

Venturing out to your local mall without a plan is like being dropped into the middle of the jungle with a Nerf gun and a pair of safety scissors. MacGyver would make it out alive, but you won't. Use your card as your guide to keep you on task and on message.

Tell me what you showed me

After your gift has been opened make sure to follow up with the recipient. You are going to reiterate all the points you laid out in card to ensure the full extent of your thoughtfulness has been expressed. A typical conversation may go something like this:

Hey Meredith, did you like the Firefly box set that I bought you? I know how much you love Dollhouse and wanted to see some of Joss Whedon's other shows. It was a bit of a pain to find it during the holiday season but I knew you would really enjoy it.

Applied to Project Management

So how does this work for project management? Substitute the card for an email, the gift for the deliverable, and the follow up for a ... well that part is the same.

You may need to rinse and repeat a few times for larger projects but the core principle stays the same. For everything you deliver you need to be able to tell me, show me, and tell me what you showed me. Happy holidays.

Our latest ZURBsoapbox was a hit last Friday with Richard White of UserVoice. Richard joined us to share his story of how UserVoice was born, how it gained traction, and some of the lessons learned along the way.

You can listen to the entire podcast below or download it on iTunes. We've put together our favorite highlights below.

Genesis of UserVoice

All attention was directed on Richard's crazy shoes. Twinkle toes.

A few years back Richard came across a group of folks in Cambridge, MA trying to build the first Ajax calendar (pre Google calendar timeframe). He instantly loved the functionality of the product, but the site looked like "s***!" They had gotten their TechCrunch post early on and were surprised to hear poor feedback. Richard ended up joining these folks and it turned into Kiko.com.

As the product developed, keeping track of customer feedback got real messy at Kiko. Customers left their suggestions in all sorts of ways: forums, emails, blog comments, and voicemails. It was really tough for the internal team to communicate with all the customers and understand their pain points. Richard was eyeing this service called Reddit.com which allowed people to vote stories up and down (similar to Digg).

Long story short, Justin Kan (Justin.tv) ended up suggesting that the team put Kiko.com on eBay to sell. After plenty of laughes, there was an actual auction and what do you know? The site was sold for $250,000! To date it has been the largest single website sale on eBay.

After Kiko was sold, Richard was inspired by combining the idea of Reddit and their troubles of customer suggestions at Kiko. Energized by Joel Spolsky's article, he decided to substitute points instead of Spolsky's $50 and open it up to all the users of the product. UserVoice was born.

Gaining Traction

"It's amazing what happens when you just talk to people" Richard says. There are a few things to remember:

1. Talking to people on Twitter early on really works! When you don't have access to influencers this is a best tactic to spread the initial word.

2. Reaching influential bloggers and writers is key to scaling your efforts. "You talk to one guy he gets you in front of 4,000 people—now that scales!"

3. Creating a brand through something like the UserVoice feedback tab or a "Twitter" logo on as many pages out there as possible opens up lots of doors. "After a while, people see the feedback tab everywhere, and they can say—yeah I've seen it! So when we come to large companies they no longer give us the cold shoulder."

4. People in California are extremely nice and hardly say no to a product demo. "We had all investors and entrepreneurs come over from Europe and ask, 'What's so special about CA?' My answer was that nobody says no to meeting or a demo."

Saying "No" the Healthy Way

Richard mentioned that the number one customer suggestion for UserVoice (ability to vote ideas down) will not be implemented. The reason is simple: the company is not about voting things down. StackOverflow, one of UserVoice's clients, declined 60% of their customer suggestions. "This is a key indication of how healthy the company is," Richard says.

"Saying no is great, but it's better to do it in public. Just say no publicly. It's more of a healthy kind of no. Customers understand why we are not doing it."

Innovations from Customers?

"Users won't give you major innovations. You have to get that one yourself. Users will give you incremental innovations which might prove pretty important." Richard said.

"What's the difference between Blackberry and iPhone? It's the last mile. Last 10-15% of the product. Both make calls, both do email, but that 1 mile of difference! That last mile is the innovation which comes from customers."

People have to relate to pain points in order to innovate. Feedback such as: "I've been killing goats for 5 hours on level 35 here" sparks a note with other users, they feel the pain point and want to innovate.

We had a blast and enjoyed Richard's talk—we hope you did, too! We'll be posting details of our next ZURBsoapbox shortly. In the mean time, be sure to check out the rest of the photos from Richard's ZURBsoapbox on Flickr. See you next time!

Subscribe to Our Podcast!

Keep up to date with ZURBsoapbox by subscribing to our podcast in two ways:

• Podcast on iTunes
• Podcast on RSS

Highlights from our past ZURBsoapbox lectures are available online at ZURBlog:

• The Cat, The Dog, and Web 2.0 by Mrinal Desai
• Tapping a Vein: Lessons from an iPhone App Startup by Bart Decrem
• Product Excellence Principles by Luke Wroblewski
• Lessons Learned: Technorati to Offbeat Guides by Dave Sifry
• Van Halen, Marriage and Crucial Mistakes by John Marshall

Photo courtesy of UserVoice

Our next ZURBsoapbox, featuring Richard White of UserVoice, is this Friday at 12pm at ZURB HQ. Lunch will be provided and space is limited so please make sure to RSVP via email to make sure we can accommodate everyone.

Richard White is a founder and CEO of UserVoice. He is driven by a passion for building simple tools that improve productivity and make peoples lives easier. UserVoice does just that.

UserVoice is the feature suggestion box that actually works. It helps companies empower their customers to come together and vote up the best ideas for improving the product.

Along the way, those customers begin to feel a sense of ownership in the product and will go out of their way to make sure it succeeds.

On the back of widget distribution (those feedback tabs you might see popping up all over the web) UserVoice has grown monthly uniques from 100,000 to 6,000,000 and now helps over 25,000 organizations turn customers into sources of innovation and evangelism.

Earlier this year the UserVoice team turned that traction into $800,000 from top angel investors in one of the toughest venture markets in recent history. Ever wonder how it was done? Come to the ZURBsoapbox to find out.

This Friday, Richard will join us at ZURB HQ to share his insights on:

• A framework for quickly testing business ideas and failing fast
• The power of widgets to drive brand awareness
• How to turn your customers into your best distribution channel
• Why sometimes it's helpful to make features harder to use
• How "connect and close" can be a better fundraising strategy than "divide and conquer"

We'll be there with food and drinks for those in attendance. Email us to RSVP and we'll see you there!

Looking for the plugin? Skip the article and go straight to the plugin page. For everyone else...

Like it or not, JavaScript has become the heaviest asset on modern webpages. Long gone are the days of waiting for large images to load, now we wait for fancy effects libraries, re-tweet counters, and cornification.

When you load Twitter, Yahoo, or Google docs, almost half the data you load will be JavaScript. Below is an asset breakdown for docs.google.com.

Users Hate to Wait

After download JavaScript files need to be evaluated as well. The greater the complexity and size of the JavaScript the greater the load time and frustration of your users.

Users hate waiting for pages to load, and if most of that time is spent loading JavaScript then reducing the amount of JavaScript is the easiest way to turn that hate into love.

You probably already know this, but you haven't done it yet because it can be a major pain. Odds are most of your JavaScript weight (file size) is in large libraries that need to be included on any page that uses a single function from that library. You could try and split them into smaller libraries but then you would have to manage all the dependencies.

Less JavaScript Without the Hassle

What if there was an application that could automatically determine what functions you don't need and removed them for you? It turns out that Google released just such an application last week.

The Google Closure Compiler goes a step beyond minification. Rather then just remove spaces, comments and line feeds, it renames variables and functions to use less characters and will completely remove functions that you don't need.

Even if you are not using unobtrusive JavaScript (shame on you), you can add a bit of code to tell the compiler not to rename certain functions that are referenced from your XHTML files.

Effortless Work Flow Integration

We got so excited about the Compiler here at ZURB that we wrote a Rails plugin that integrates it with the standard Rails deployment work flow.

There were two issues we needed to resolve:

• Once you compile a JavaScript file it becomes damn near impossible to read and edit.
• Compiling all your JavaScript files together so the the compiler can properly determine what functions to remove.

It turns out Rails has built in functionality to combine and cache JavaScript files to minimize the number of http requests and improve the effectiveness of gzip compression. Our plugin hooks into that functionality and runs the combined files through the compiler before caching them. This allows us to mix and match our JavaScript libraries and have a single compiled file containing only the functions we need.

In our development environments the JavaScript files are linked individually allowing us to debug using the original source code.

So What are you Waiting for?

The complete documentation and source code are available on GitHub. Run script/plugin install git://github.com/mkelly12/google_closure_compiler.git and your all set with some sensible default settings. Configuration options are provided for the obsessive compulsive types.

Yesterday Google announced their Javascript Closure Library is available for public use. You may think you need another Javascript toolkit like you need another browser, but this library offers the experience of the Google collective which means speed, stability and cross browser support.

It also means we now have access to the libraries used to implement all the nutty things Google does in their most popular apps. Take this toolbar for example, used in Gmail and Google Docs, now available for you to do even cooler things with.

They also provide even higher level functionality, like this rich text editor used in Gmail and Google Docs which makes use of the toolbar shown above.

The library also includes a vast number of complex (and possibly obscure) JavaScript elements you would never want to code yourself, like this two thumb slider.

OK, I know what you're saying, there are already lots of JavaScript widgets like this at scriptkiddies.com and icantcodemywayoutofajsbag.net, but the key difference is this library has been battle tested in Gmail, Google Docs and Google Maps.

This is industrial strength stuff that will run fast, and is organized in a way that minimizes the amount of JavaScript you need to attach to each page. This reduces both the size of the scripts that need to be downloaded and the time the browser takes to evaluate them.

Want to see more? Browse over 70 demos on the Closure Library documentation page (click the demo tab). Ready to ditch the pickup and gas up the earth mover? Hop on over to the getting started pages.

We had a rockin’ discussion with John Marshall last Friday at ZURBsoapbox. John discussed mistakes he’s made, as well as guidelines for success of product- vs. service-based companies. You can listen to the entire podcast below and read some great highlights from the event.

John starting out talking about his experiences at ClickTracks.

Marry Someone Who Can Take Risk

ClickTracks started from the idea that all John wanted to know was what people click on. No 3D pie graphs, no charts, no large tables, just tell me what people click on. John convinced his wife to use all of their life savings to get the company started. She was not 100% on board but she went along with it. If his wife had not grown up in entrepreneurial environment she would have said: “Go get a job like a normal person!”

John says you’ve got to marry someone who is comfortable with risk. Since developing products as an entrepreneur is risky, you’ve got to have a spouse or a partner who understands your goals and visions.

Crucial Mistake

One crucial mistake John made very early on was that he did not make ClickTracks web based. He could never correct it. Other companies did make their services web based and were very successful (think Google Analytics). John’s background called for code which runs on a machine, he just wasn't comfortable with a cloud solution. “I still want to get my email on my own machine,” he mentioned to us. Nevertheless, they recovered their investment quite nicely when ClickTracks was later sold for over $10 million to Lyris.

Three Rules for Every Product

John shared three must haves for every product. No matter whether it's websites, web apps, or stand alone software these apply to all products. Here they are:

1. Must solve pain or create gain. John talked about these two fundamentals for any product; if they don't solve a problem or create value, they'll go nowhere.
2. Got to understand utility very quickly
3. Must be able to use it for free

Jeremy loving the discussion.

Van Halen and
Losing Early

John shared a great analogy with us regarding losing early. It turns out Van Halen had a contract written for every venue they played. The contract stipulated all sorts of details, one of which was that the band wanted a bowl of M&Ms with all brown ones taken out provided backstage. The reason they put this detail in was not because they had a big ego, but to ensure people read the contract. NPR's This American Life has a great episode outlining this story.

If the brown M&Ms were not taken out, then the venue folks did not pay attention to details in the contract and therefore the entire set was not properly set up. Van Halen wanted to lose early. As soon as they walked in if they saw brown M&M behind the stage they walked out. Same applies in business, if you’re going to lose— lose early! Don’t fight it. We’re taught that only quitters lose. Not true according to John, if you lose early you actually win in long run!

More Info

• Rest of photos from John Marshall's ZURBsoapbox
• John’s current gig, MarketMotive

In part 1 of this post we talked about why we needed to redesign the Notable visual annotations, and how we went about framing the problem. Now we'll show how we actually implemented the design, including some cool CSS techniques we picked up along the way.

Creating an Overlay with Layers

The overlays comprise two objects: an overlay with the shine and a border with the transparency.

Our solution was not technically too complex. With Notable (as well as most of our projects) we've embraced the concept of graceful degradation: we take advantage of new CSS techniques that degrade cleanly to older browsers.

Our note overlays are composed of two main elements, an outer border div and an inner overlay div.

The overlay was the easy part. As Notable doesn't currently support IE6 (though it does support 7 and 8) we were able to use a PNG overlay to create the glass shine effect. It stays pinned to the top-left of the div so we don't have to worry about it scaling out to something enormous.

The border div has as its background a 1x1px white PNG, which creates the overlay itself. Combined with the shine overlay we had our glass effect. The border div also has a border-radius applied to it to round the edges in any newer browser. We gave the active state a -box-shadow property so that notes being created or edited would jump off the page.

Fun with border-image

The trickiest piece, and most fun, was actually the gradient on the border. As you can see in the mockups or below in the live code, the notes have a 4px border that fades from bright orange to a darker shade as you go from top to bottom. We didn't want to use a canvas knockout so instead we used border-image, which is a really versatile but slightly tricky CSS property.

The basic gist of border-image is that you can set an image of your choosing as the overlay for the border of an object, but the truth is quite a bit more complicated.

What happens is that the web browser takes your image and divides it into 9 equal section, a 3x3 grid. It then takes the top left section and makes that the top left border corner, then takes the top middle and stretches it across the top border, and so on around the object. What's tricky is it does the same for the center of your image, stretching it across the entire object.

As you can imagine even just like that border-image has some really cool applications for making a complex object out of a fairly simple image file. However we needed to cut out the middle, or it would obscure our glassy overlay. So, we cut it out.

Our border image is created with a 15x15 image with:

• The middle 5x5 square removed (or completely transparent)
• The top 5 and and bottom 5 pixels as solid colors (they are such a small part of the overlay they don't need to be a gradient)
• The left center and right center 5x5px sections contain the actual gradient we stretch across the left and right hand borders.

1. div.border {
2. border: 5px solid #feb515;
3. -moz-border-radius: 3px;
4. -webkit-border-radius: 3px;
5. -moz-border-image: url(border-image.png) 5 5 5 5 stretch;
6. -webkit-border-image: url(border-image.png) 5 5 5 5 stretch;
7. }

The border-image property only has a few values: image source, width (on all sides) and the method of applying the image.

Awesome, huh? These little lessons in implementation are pretty exciting for us; it's always fun to learn new tools to make awesome stuff happen. You can see our new note style by checking out this public Notable post.

More Behind the Scenes

These short sprints happen all the time at ZURB, not only for Notable but for clients as well. Our process has worked out well for us so far, and we hope you enjoyed this little window into it. We'll keep our eyes peeled for another opportunity to share our process and how we get things done.

Yesterday, Jon and I were going back and forth about what to blog about next. Love of CSS and doing something cool with it is kind of our thing and we quickly jumped on a brand new idea: polaroid style images with just CSS. Holy super awesome, Batman!

With our end goal in mind (polaroid style images), we needed to set a few ground rules:

1. Has to work on a grid of linked images
2. Images must be randomly rotated like a pile of images you're sifting through
3. No actual text should be used on the images (only title and alt attributes)
4. Has to be done with just CSS (no javascript)

After establishing those requirements, we got down to business. Here's a quick rundown of how we did it. (Not big on reading? Jump right to the demo.)

Starting with the Images

We get underway by first coding up our grid of images. We used an unordered list with each image linked to our Flickr account as the baseline for everything. This would allow us to echo the title text of the anchor while creating a clickable set of images.

Once we laid the groundwork, we moved on to getting the title attribute's content to show. That was difficult at first—we didn't realize the img element wasn't fully supported for this—but we quickly got it working with the anchor.

Using :after to Create Content

If you were to look at our demo, and then at the source code, you might be a little surprised. We're not showing any actual text in our HTML. Instead, we're using a CSS2.1 pseduo-selector, :after, to get the job done. Here's a look at the CSS:

1. ul.polaroids a:after {
2. content: attr(title);
3. }

By using the :after, we can add a rule to our CSS that gets the anchor tag's title attribute and echoes the content immediately following the img. You'll note that despite the selector saying "after," it actually means "after the actual content of this element," thus showing the title text withing the anchor and after the image.

And now comes the fun part of rotating our images and applying some badass styles for impact and cool-factor.

Randomly Rotate the Images

With some help from our browser-specific CSS3 properties, we can "randomly" rotate our images. To do it, we first set a default angle at which to rotate our images. From there, we apply additional rules with the :nth-child pseudo-selector to give the feeling of random.

Here's the CSS to do it:

1. /* By default, we tilt all our images -2 degrees */
2. ul.polaroids a {
3. -webkit-transform: rotate(-2deg);
4. -moz-transform: rotate(-2deg);
5. }
6.  
7. /* Rotate all even images 2 degrees */
8. ul.polaroids li:nth-child(even) a {
9. -webkit-transform: rotate(2deg);
10. -moz-transform: rotate(2deg);
11. }
12.  
13. /* Don't rotate every third image, but offset its position */
14. ul.polaroids li:nth-child(3n) a {
15. -webkit-transform: none;
16. -moz-transform: none;
17. position: relative;
18. top: -5px;
19. }
20.  
21. /* Rotate every fifth image by 5 degrees and offset it */
22. ul.polaroids li:nth-child(5n) a {
23. -webkit-transform: rotate(5deg);
24. -moz-transform: rotate(5deg);
25. position: relative;
26. right: 5px;
27. }
28.  
29. /* Keep default rotate for every eighth, but offset it */
30. ul.polaroids li:nth-child(8n) a {
31. position: relative;
32. top: 8px;
33. right: 5px;
34. }
35.  
36. /* Keep default rotate for every eleventh, but offset it */
37. ul.polaroids li:nth-child(11n) a {
38. position: relative;
39. top: 3px;
40. left: -5px;
41. }

In the above code, we rotate all our images 2 degrees and then go back through to programatically rotate more to add variety. Here's how it looks:

The rotating above breaks down like so:

• Every image is rotated -2 degrees by default
• All even images are rotated 2 degrees
• Every fifth image is rotated 5 degrees and moved right 5px
• Every eighth image keeps the default rotation (-2 degrees) and is offset 8px from the top, 5px from the right
• And every eleventh image keeps the default rotation but is offset 3px from the top and -5px from the left

Now, in a group of 12 images, they appear to be randomly rotated and positioned. Pretty slick, huh? Now we move onto the final details of visual aesthetic.

Final Touches

With the rotating in place, we can focus on the sex appeal of our grid of images. In addition to the basic stylistic changes, we'll add in drop shadows and a Webkit transition to smooth things out in Safari (sorry, Firefox users, but there is no support for transitions yet).

And that's a wrap! With just a bit of love from CSS, we've created some freaking sweet polaroid style images with nothing more than a list of images.

View the Demo

Be sure to read through the demo for more explanation around the CSS we've used and where to find additional information. We also included a true "pile of images" farther down the page—check it out!

View Demo »

We use our extranet daily to present a lot of work to our clients. From wireframes to Photoshop mockups and business goals to sketched opportunities, we have several established ways of presenting information. One of the ways we handle versioning, or the updating of assets on the extranet, is through a dl-powered navigation list.

When we need simple and effective on-page navigation, to either jump to content on the page or flip to another view, we use the dl element. Its sub elements, the dt and dd, make it very easy for us to create inline links with a clear label. Here we're going to share with you a fast, lightweight method for how we'll use CSS to do it.

What's a DL?

The dl element is a definition list. Plain and simple, it's an HTML element that is used to display terms (dt) and their descriptions (dd). However, definition lists aren't just semantically limited to dictionary style definitions. Rather, they are very versatile and can be used in a handful of meaningful ways:

1. Showing terms and descriptions (like a dictionary)
2. Presenting dialogue between people
3. Showing simple biographical information for a person

Each instance is still semantically correct (you have a term and description), but serves a variety of different uses. We love to see HTML elements be flexible enough for varied applications and have no problem utilizing them this way in our own work.

Creating the Sub Navigation

As we mentioned before, we use dls for simple, scalable sub navigations. It's an easy and semantically correct way of labeling a set of links for added context. To better illustrate what we mean, here's a screenshot from one of our client's extranet page:

As shown above, the light gray "label" is the dt while the sub links are instances of dds with links inside. The gray label on the left helps tell users what this nav is for: links on this page. This makes our nav easy to understand and more meaningful. Now, let's break down the HTML and CSS used to create this sub navigation.

The HTML

We'll use four HTML elements to create the necessary markup for our sub navigation. Take a look:

1. <dl class="nav">
2. <dt>On this Page:</dt>
3. <dd class="active"><a href="#">Final Wireframes</a></dd>
4. <dd><a href="#">Updated Wireframes</a></dd>
5. <dd><a href="#">Initial Wireframes</a></dd>
6. <dd><a href="#">Sketches</a></dd>
7. </dl>

The CSS

The CSS is equally simple as the HTML. We've coded up styles for the entire list below, including an active or current state for our links. Check it out:

1. dl.nav {
2. width: auto;
3. height: 27px;
4. margin: 0 0 18px;
5. }
6. dl.nav dt, dl.nav dd {
7. float: left;
8. display: inline;
9. }
10. dl.nav dt {
11. color: #999;
12. font-weight: normal;
13. }
14. dl.nav dd a {
15. margin-left: 6px;
16. padding: 5px 12px;
17. text-decoration: none;
18. -webkit-border-radius: 12px;
19. -moz-border-radius: 12px;
20. }
21. dl.nav a:hover {
22. background: #eee;
23. }
24. dl.nav dd.active a {
25. background: #2daebf;
26. color: #fff;
27. }

Here's a quick step-by-step look at what we're doing with the CSS for the list:

1. First, we ensure the dl can properly contain all children elements, so we fix the width and height. (This is the best option for quick cross browser compatibility).
2. Then we float: left; the links and list label to make them appear all on one line.
3. Next we give our links and list label their own styling
4. And finally we add our hover and active states for the links so users know which page they're on.

And that's that. Small HTML footprint and light, flexible CSS that works well across all browsers (save the browser extensions) and doesn't even require any images.

The Finished Demo

We've put together a shorter walk-through with our demo code. It works in all browsers, but it works especially well in Safari and Firefox (due to the rounded corners). Be sure to check it out and leave your questions or comments below!

View Demo »

Our fifth ZURBsoapbox, featuring John Marshall of MarketMotive, is coming up next Friday Oct.16th at 12pm here at ZURB HQ. Just as before, space is limited and lunch will be provided, so RSVP via Email » at least one day before the event so we can keep things comfy!

Lessons Learned: ClickTracks to MarketMotive

Photo by Lee Odden

When ClickTracks' CEO John Marshall first approached ZURB with a request for ten icons and a rough prototype of a website—neither company realized at that moment just how far they'd travel together. ZURB helped John build ClickTracks (a web based analytics business) over the next months to come. John sold ClickTracks for over $10 million and went on to start MarketMotive. Through real life stories he will share the failures and successes of moving from a product focused analytics business to a service focused consulting business. He will share with us:

• Things he would *not* do again based on his experience at ClickTracks
• Top three pitfalls in transitioning from product to service
• The start-up culture: Product vs. Service
• Van Halen and the role of analytics in a business

About John: John Marshall is an entrepreneur with over 20 years experience and quite a few companies under his belt. His latest startup is MarketMotive, which he describes as "a company focused on helping companies get the maximum from their online marketing." Market Motive teaches a complete set of step by step programs for web analytics, SEO, paid search, online press and more. John is a former CEO and Founder of web-analytics-success story ClickTracks Analytics, which was acquired by Lyris Inc. in 2007. As a Netscape alumnus responsible for several other successful software companies, John brings a wealth of knowledge on the topic of web analytics, conversion techniques and marketing.

Email Us to RSVP

Subscribe to Our Podcast!

You can subscribe to our podcast in two ways:

• Podcast on iTunes
• Podcast on RSS

Highlights from our past four soapbox lectures are available online at The ZURBlog:

• The Cat, The Dog, and Web 2.0 by Mrinal Desai
• Tapping a Vein: Lessons from an iPhone App Startup by Bart Decrem
• Product Excellence Principles by Luke Wroblewski
• Lessons Learned: Technorati to Offbeat Guides by Dave Sifry

We've released Notable to the public, which means now it's time to start iterating, iterating, iterating to keep polishing the app. Recently we rolled out a change to the screenshot annotation toolbar; easier to use, more functional, and much better looking. As a result our note overlays started to look a little anemic: they couldn't hold up next to the new toolbar. So, we decided to redesign the overlays as well.

The Notable overlays are not a huge project, but they were a cool little learning exercise and an interesting microcosm of our process and how we go about solving problems here at ZURB, so we decided to dissect the process, why we did what we did, and how we implemented it.

First Steps: Defining the Problem

The original Notable visual note style

It wasn't just that the notes didn't look good enough (though they didn't) but they had some major usability problems. The visual notes overlay put a heavy yellow hue on the selected section which was great from a detection perspective and terrible from a visual feedback perspective. If you needed to call out that something was the wrong color, well...of course it was, it was yellow.

Defining a problem like this is how we solve everything here at ZURB. Without constraints how do you reach a solution? We could have just said 'we don't like these notes, so let's make cooler ones' but we could have gone down a hundred different paths instead of the 5 or so we ended up with. Defining the problem and the constraints on the solution keeps us focused and efficient.

So we knew what we wanted to fix in the current overlays, and what the new ones would need to do:

• Not obscure the visual design hue
• Clearly call attention to where the notes were on the page
• Be easily resized and have clear selection and focus states.
• Look awesome.

Framing the Solution

We had our marching orders, now it was time to make it happen. In most cases at ZURB we start with some quick sketching; it's low investment, quick and helps us clearly state our intentions and give each other feedback. With this little project we jumped into Photoshop to knock out some fast visual iterations. The problem was clearly defined and with such a small project the devil would be in the details.

These are three of the iterations we went through before we reached a final mockup. Once we've got the page element started we go through iterations quickly, grabbing a layer set and riffing on it again and again until we've built up a good sized set of options and refinements to make some decisions around. As with our clients our goal is to provide what we need to come to a decision and execute on it.

After some internal discussions (and a healthy bit of swapping the mockups around) we arrived at this final mockup:

Our final version met the criteria we set in the first phase:

• It doesn't obscure the visual hue like our old notes
• It clearly calls attention thanks to big, eye-popping orange borders
• They are easy to grab and resize thanks to larger hit areas and large resizing handles (twice as big, in fact)
• It looks awesome. We were pretty giddy about the glass effect. You've got to love the little things.

Fast Iteration to an Awesome Solution

This project only took a couple days, and that with a number of other projects and client work on our plate. We have to move fast at ZURB and this was no exception — in fact we've discovered that most times when you have to get something done in a short stretch you'll do a better job than if you can just noodle on it for days and days.

Coming Up Next...

In part 2 we'll look at how we implemented our visual mockup and some cool code tricks we learned in the process. You can see the implementation yourself by checking out this public Notable post!

We had an amazing event last Friday with a great turnout, delicious food, and an animated discussion with Dave Sifry. Dave spoke at ZURBsoapbox about the lessons he learned from founding Technorati and starting OffBeat Guides. He shared some truly great points about building great products and growing start-ups. You can find a copy of the full podcast below.

The crowd at ZURBsoapbox focused in on Dave Sifry.

Use data, not your own ego

Technorati was an ego project for Dave. As both the product manager and customer for Technorati, he decided to build the site as something cool to satisfy his own needs. He would think of features to add and the team would run with the ideas he proposed.

There were no analytics or any data measurements of how these features were converting customers. Dave used a loose measurement of how many people were writing him emails about the new feature or how many people were talking about it on the internet.

Technorati lacked the discipline of evaluating if new feature ideas would help them achieve their conversion goals or simply satisfy the person who came up with the feature.

"It's not about what Dave thinks should be added to the product, it's about what the data says about the feature. "

Jeremy and Mark getting excited before John starts talking.

Understand your
business model

Technorati was founded by Dave in order to build something cool. It was a search engine so the natural way to monetize it was ad revenue. The team found that people using Technorati to search were looking for blog ranking, compared to people who searched on Google for information on a wide variety of topics and products. As a result ads did not work very well on Technorati.

The first step, Dave says, is to figure out your business model and sell your services around it. Then you set a conversion goal and test the conversions to see how well you're performing.

If you're planning beyond 6 months, you're just guessing

Investors love five year plans, Dave says, but the reality is that if you're planning feature functionality one year out you're wasting your time. Ideal time for planning features is 3-6 months. Going further that 6 months you become inflexible to changes in the marketplace.

A product is like a pregnancy; no matter how many people
you throw at it, it still takes 9 months.

A smaller team, Dave says, is always better for a young product. It's easy to throw people and resources at issues which arise. The key to a successful product is to find as few people as possible to deliver the product. Adding more people to a project just slows down the product. A talent pool ratio of three designers/coders to one business person is the best makeup for a start -up team.

Be of service

After Technorati closed their funding Dave had one question facing him: If Technorati succeeds what would I be most happy to see from the business? The answer which he had was: Be of service. Dave mentioned that all of us want to be of service to something more than just ourselves. All of us want to change the world. The job of a business, he says, is to make money, but if you're making money and being of service to the world you know you're on the right track. Hence, before any new feature is added in Technorati or OffBeat Guides the same question is always asked: Are we being of service to our customers?

Measure your virality

Viral is a strategy you can understand if you can measure it. The key is to make your customers into product evangelists. To move your customers from sub critical mass to critical mass you need to measure your virality.

"If I put out a tweet, how many people will retweet this information? How many people will pass on the message you give them? If your coefficient of virality is 1.0 then you're growing fast. If it is 2.0 you're growing insanely fast."

There are tools to measure all these things, the trick is to make sure you have a good handle on these metrics.

More Info

We have yet another ZURBsoapbox lecture coming up next Friday Oct. 2nd @ noon. Just as before, space is limited and lunch will be provided, so RSVP to getstarted@zurb.com at least one day before the event so we can keep the things comfy!

Lessons Learned: Technorati to
OffBeat Guides

Our fourth ZURBsoapbox, featuring Dave Sifry of Technorati and Offbeat Guides, takes place at ZURB HQ at 12pm on October 2, 2009. Email us to RSVP »