The ZURBlog is where we discuss interaction design and strategy.

The ZURBwired plans are in full swing now, and we're happy to announce that open submissions for nonprofits are running now through March 18th! All nonprofits interested in participating in ZURBwired have from today until March 18th at midnight to submit their interest to the team at wired@zurb.com.

What is ZURBwired?

Siming Wong and Brice McGowen work on the menu template.

ZURBwired is a 24-hour design collaboration, hosted annually by ZURB, where we complete a marketing effort for one lucky nonprofit. It's 24 straight hours of doing what we do best, all to benefit one special nonprofit organization, and all at almost no cost to them. That's right; maybe it's a new website, maybe it's posters and invites for an upcoming event, whatever the materials involved, the nonprofit will walk away at the end of the day with all the completed and printed collateral—literally hot off the presses—and it will cost only their time and commitment to the event.

ZURBwired is an opportunity for ZURB to use it's skills to give back to our local community. The idea is to collaborate with a nonprofit organization using our design expertise to produce something great. This year will be our third ZURBwired and every year we're more overwhelmed by the results, as well as the number of people volunteering to help us make the event a success.

What can you really get done in 24 hours?

A lot more than you would think thanks to ZURB's talented team and our dedicated partners and volunteers. You can get that sweet new logo along with a website relaunch. You'll finally get that newsletter campaign going and setup those AdWords landing pages you've been meaning to do. And print collateral? We can design and produce all the cool schwag and marketing brochures you need, all in 24 hours. They'll be in your hands that very day. For real.

It's at no expense to your non-profit if you're willing to join in with us and work just as hard as we do for it. And did we mention it's for 24 hours straight? It's crazy, but as our last ZURBwired showed, it's exhilarating and creates results fast.

What do I need to do?

If you're a nonprofit, you need to gather your core team—those folks who will be here with us all day (and night!)—and send us an email at wired@zurb.com that includes:

1. The project you need ZURB's help with
2. The team who's going to be here for 24 hours helping us make it happen
3. Why your organization is a fit for ZURBwired.

If you're a vounteer or a potential partner for ZURBwired, you just need to email us (wired@zurb.com) and tell us what skills or services you'll bring to the event and why you think you're a fit for ZURBwired.

Find out more about ZURBwired »

We'll be announcing our ZURBwired 2010 nonprofit partner on Friday, March 19th.

The ZURBsoapbox with Alex Faaborg of Mozilla was absolutely hopping! We had so many folks show up that we had trouble piling into the brainstorm room this time around.

Alex started off sharing how design works in a large open source community as well as the challenges which Mozilla has faced as a company. He went on to talk about the future of Firefox as he showed us mockups of FF3.5, FF4 and FF5. A long line of questions followed from the audience at the event, as well as the Twitter stream and blog comments.

Feel free to view Alex’s slides as you listen to the entire podcast below. You can download the podcast on iTunes.

Two approaches to design

Alex started off with stating Don Norman’s two approaches to UX design.

1. User Research: user studies, focus groups. Study your users, how they behave, which features they want, what they do on the site. Microsoft is perfect example of this - they design against their user needs.



2. Vision Designer: Designer who has a vision of what they want to make. They are designing for the user they envision. Apple is a perfect example of this – it’s a team of designers working in secret, not interacting with users, focusing on core principles.

So which approach does Firefox take?

Alex paused before he said: “Most of the time we take the second design approach. We focus on core principles. The difference is that we’re doing it in the open source so people can join in the community. Hence we partially lean toward the first approach as well."

How does Firefox use the best of both approaches?

Courtesy of Mozilla

“Remember that Komar & Melamid painting where they sent out a survey asking people what they most enjoyed seeing in paintings and tried to incorporate all these elements into one painting? Take a look – it came out awful didn't it!” Alex said.

The lesson here is: Don’t add all the suggestions from your users into your product unless you want a painting such as this one above.

“In open source everyone throws in what they think the design should be influenced by. Even though it’s hard to come to a decision that pleases everyone it’s important for Firefox that people remain engaged because that’s how we fuel all of our work.” Alex says.

“We considering every feature suggestion by going back to the drawing board and focusing on core principles.” Alex mentioned. If a certain feature or functionality does not make it into Firefox the company asks people to create a Firefox extension for it.

Alex mentioned that great contributors from open source community can turn into people who steer Firefox in the direction we want it to go. A good example of this was the logo design for Firefox. The browser was called “Phoenix” originally. A couple of designer showed up and said that this logo will not work and that “We have something better." The Firefox icon was created by these folks, Jon Hicks rendered it, and now we see it everyday on our browser.

What’s coming in FF4 and FF5?

All of us want to see what Mozilla has in store for Firefox 4 and Firefox 5. Alex discussed this in detail. The slides and the podcast walk you through all the changes in discussion for the future versions. Here are a few teasers for you:

Thinking of putting tabs on top finally.

Courtesy of Mozilla

Courtesy of Mozilla

Trying to change the way we think about bookmarks. “Instead of hierarchical trees and folders we’d like to give folks an ability to use all of FF interface to navigate through all the bookmarks visually. We’ll also give people an ability to sync all their data to a central location so that they can access it from any FF browser."

Courtesy of Mozilla

Lot’s of great questions we answered as we discussed future versions of Firefox. The full set of slides can be viewed here as you listen to the podcast.

Alex - Thank you once more for giving us such a great talk!

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
• $250,000 Site Sale on eBay, Killing Goats for 6 Hours, & Healthy "No" by Rich White
• Justin.tv: One camera broadcast to a website with 35 million users by Justin Kan

At ZURB we're fans of what we call the ZURB framework — really just a lightweight global CSS file containing a global reset, some basic typography styles, structural elements like a body container, and the grid. The way we say the grid is no accident — it's an evolving entity that we use frequently and that generally makes prototype and site construction quite a bit faster and easier on us. However: there's a catch.

The grid is a 940/960 grid; 940 pixels of usable space with 10px padding on both sides, broken up into 16 columns. Each columns is 40px wide with 20px of gutter space, and we can break the content up into any subset of those columns. What we've found, however, is that our designs don't always map to the grid. Sometimes we need less space, sometimes we need an alternate column count. Modifying the grid isn't rocket science but it's time consuming, so we often work around it — which of course is almost the exact opposite of why we have a grid! I know. Fail.

Meet the ZURB CSS Grid Builder

To help ourselves out (and by association, help you out) we've created another addition to the ZURB playground: the ZURB CSS Grid Builder. This playground page lets you enter in the number of columns, column size, and gutter spacing to generate the CSS you need to quickly implement our grid system. You can even check the grid you've created against common screen sizes to make sure you're designing for likely use cases.

Well, go build something!

The grid isn't everything — it's nothing as robust (or heavy handed) as YUI and it won't solve all your problems, but it can be a big help when it comes to rapid prototyping and implementing on a grid based layout. Feel free to grab the grid you need, use it where you want, modify it as you need to. And hey if you want to tell everyone how great the grid is and how awesome ZURB is well, we won't stop you or anything.

Check out the ZURB CSS Grid Builder »

P.S. While you're out there gridding up a storm, don't forget that there's great value in breaking the grid. Compelling designs, moments of interest, sweet interactions and psychological motivators can all rely on breaking the grid and doing what you need to with your design. Here's a great article on techniques to break the grid, and why you should use them.

Go Directly to the Demo and Code →

We've all seen the basic file upload form for uploading avatars, images, memes, etc. The problem with these is that once you upload your image it's hidden from you. It's the same issue with masked passwords, you enter some data and then poof, it's gone. And not gone like sexy was gone, this is the kind of gone that not even Justin Timberlake can fix.

The file input is going to look something like this:

Did I upload a new picture of my face? Or maybe something less professional. It's like buying food at the grocery store, except you can't see what you have in your cart. Wait, did I just buy the diapers or the case of Tantrum (read highly caffeinated beverage)?

The solution is to use a little bit of JavaScript to upload the image as soon as it's selected and display a thumbnail so we can easily review the form before we submit it.

Head on over to the ZURB code playground to see a complete demo and breakdown of the JavaScript we use to accomplish this. The code playground is where we do crazy awesome stuff with JavaScript, HTML, and CSS.

Our last ZURBsoapbox with Justin Kan of Justin.tv was rocking! Justin shared his story of how he came up with the idea of a 24/7 live broadcast, how he became an international celebrity, and the sharp turn Justin.tv had to make to shape the company into the successfully operating business it is today.

You can listen to the entire podcast below or download it on iTunes. Below is a quick summary and highlights from the event.

Google Calendar & the birth of Justin.tv

Back in 2005 Justin Kan and Emmet Shear built Kiko, the first AJAX web calendar. It was hot. Early customers really liked Kiko but right before their launch Google came out with their own calendar which was already integrated with Gmail. Kiko was a YCombinator funded company so Justin and Emmet went to Paul Graham of YCombinator and pitched their next idea: A way to turn your blog into a magazine.

“Ummm. Do you have another idea? ” Paul said.

“Well I thought of a site where I can broadcast myself 24/7 and we can make a reality tv show out of it.”

“Tell me more…” Paul responded.

In 2006 Justin got his seed capital from YCombinator and moved out to San Francisco with Emmet and Mike to start Justin.tv

In the beginning...

A friend at MIT helped out with creating prototype of a laptop in a bag with a camera attached to Justin’s cap. Technology was still a bit unstable but the group consensus was that they’d go ahead with the launch of the site on March 19th, 2007. Now Justin had to do what he promised all along:

“Strap a camera to myself to run around and be interesting for the rest of my life”.

Justin started broadcasting right away. Local news picked it up a week after the launch and the week after that the San Francisco Chronicle contacted Justin to do a story. News sources from around the world followed in following months.

Change of plans

After a little while Justin realized that “I’m not that interesting all the time." People weren't sticking around to watch Justin and, instead, were asking for an ability to broadcast themselves instead.

So the team went back to the drawing board to add this feature to the site. Six months later, in October 2007, Justin Kan turned off his video stream and the “anyone can broadcast” feature went live on the site. Since then they've focused on making it simple and easy for anyone to use live video and broadcast themselves.

We asked Justin a lot of questions during the event, here are some highlights:

What makes it tough to build your product?

"We make decisions based on data now. We log every action on the site and we parse all the data. We know everything that goes on our site. This type of tracking took a long time to build and take a lot of time to monitor and report on. Before we used to make decisions based on team consensus. One good decision we made this was chat. Other features such as groups we probably did not need to spend time and money on. Data driven decisions is an investment but it certainly pays off."

What’s the biggest obstacle in reaching your goals?

"Convince an average person that Justin.tv is an easy to use tool for broadcasting your video. Building an easy channel sharing mechanism – it’s not fun to broadcast yourself when you have no viewers. We’re trying to make it easier to share."

What sets Justin.tv apart from ustream and Livestream?

"We focus on community and lowering the barriers for broadcasting. Livestream and Ustream focus on quality broadcasting for professionals. It’s great but it won’t change the world."

We truly enjoyed Justin's talk—we hope you did too! Be sure to check out the rest of the photos from Justin's ZURBsoapbox on Flickr. See you this friday for the next ZURBsoapbox with Alex Faaborg of Mozilla!

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
• $250,000 Site Sale on eBay, Killing Goats for 6 Hours, & Healthy "No" by Rich White

This coming Friday you will have an opportunity to meet and learn from Alex Faaborg the principal designer behind Firefox! We'll have a catered lunch and some hang out time with the man after which we'll jump into the discussion. How cool is that? What more can you ask for?

Photo courtesy of Mozilla

Every day Firefox is used by 120 million people as their window into the Web. The browser has a 25% market share, is the second most popular browser worldwide after Microsoft's Internet Explorer, and is the most used web browser independent of any one operating system.

What makes Firefox so remarkable is not its success but the way a distributed global community of contributors have organized to effectively compete with corporations like Microsoft, Apple and Google.

Ever wanted a chance to meet the principal designer behind your favorite browser?

Alex will share with us:

• The design philosophy at Mozilla
• The unique process of coordinating user experience design in
  an open source environment
• The future of Firefox's user interface

Alex Faaborg focuses on the visual and interactive design of Firefox. He also contributes to Mozilla Labs, which explores the next stage in the evolution of the Web and its long term future. He has extensive experience in artificial intelligence, user interface design, and cognitive science and is a graduate of the MIT Media Laboratory.

ZURB's kicking off the new year with some brand new ZURBians. The one and a half additions to our team are Tanya Breshears, designer extraordinaire, and Dave Gamache, aka Intern Dave.

Meet Tanya

Tanya's a California native who spent most of her life in San Diego before moving to the Bay Area to go to Stanford, where she earned both her Bachelor and Master's degrees in Symbolic Systems.

One month after applying, Tanya was gearing up for her first day as a ZURBian. We put her straight to work and she's just completed the whirlwind that is the ZURB five-week ramp up plan.

"ZURB doesn't slow down, I don't have to worry about getting bored, and I end up laughing a lot at work" Tanya Breshears

Tanya was drawn to ZURB's "creativity, eagerness to learn new skills, enthusiastic people, sense of humor, and impression that everyone is part of a team," everything she was looking for in an awesome workplace.

This is Dave

Dave is ZURB's most recent Design Intern. He's been working everyday at ZURB between his classes at Santa Clara University, where he's earning a degree in Marketing.

"ZURB is the elusive crossroads of work and fun." Intern Dave

He's another California native who grew up in Woodside. He discovered ZURB while looking for "ballin' web design studios in the area." Currently he's working with the team on several internal projects and just had a hand in implementing the new recap site for ZURBwired 2009.

Join Our Team

Interested in joining the ZURB team? Think you've got what it takes to be ZURB's next intern? We're always looking for talented, T-shaped people who can help us build great things.

To get a hold of us, just shoot us an email to jobs@zurb.com and tell us what your top three skills are and why you want to work at ZURB.

It's that time of the year again. ZURB has started planning our annual ZURBwired design marathon for April 8, 2010.

What is ZURBwired?

It's 24 straight hours of doing what we do best, all to benefit one special Bay Area nonprofit organization, and all at no cost to them. That's right; maybe it's a new website, maybe it's posters and invites for an upcoming event. Whatever the materials involved, the nonprofit will walk away at the end of the day with all the completed and printed collateral—literally hot off the presses—and it costs their team nothing but their time.

We'll team up with area volunteers and vendors who will all spend the day (and night!) at ZURB Headquarters powering through web and print collateral for the nonprofit whose proposal is chosen for this year's event.

What Do I Need to Do Now?

The event's not until April 8, but open submissions for nonprofits will be March 4-18.

In the meantime, we're looking for volunteers & partners to participate on the big day. We need people who want to work with the ZURB team and our chosen nonprofit from 8:00am April 8th until 8:00am April 9th. To be considered, just shoot an email to wired@zurb.com to tell us what skills you'll bring to the day, and why you want to participate.

Vendors interested in partnering with us should also send an email to wired@zurb.com to let us know how they can help provide the goods and services donated to the nonprofit.

Last year's partners included Zazzle, Tradewinds HD, and Chase VP, not to mention our long list of volunteers who stuck it out with us during ZURBwired 2009:

Let's Make Sure You've Got This

• The 24-hour design marathon is April 8th, 2010.
• Volunteers & potential partners should start sending us emails today.
• Interested nonprofits should be ready to send us their proposals during
  open submissions: March 4-18.

For more information on this incredible event, or to see what we did for ZURBwired 2009, check out zurbwired.com.

The team is psyched to get the ball rolling on this year's event. Will we see you there?

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