With summer upon us, the intern floodgates have opened and ZURB is hosting not one, but two summer interns. Meet Boris and Josh.

Josh and Boris present the most recent version of an internal app they've been working on. The Interns give a once weekly presentation to the ZURB team where they solicit feedback on their tool and get chopped up on their preso skills.

The duo are chugging away on some top-secret internal applications in the same laboratory where Notable was created. They're working in tandem on some of our best ideas to turn them into reality. Like we've said before: ZURB interns do real work. This ain't no job shadow.

Intern Boris

On the Design side of things, we have Boris Taratutin. He's a San Jose local, but a native of the Ukraine where he lived until he was six. He's back for the summer from Franklin W. Olin College of Engineering in Needham, MA where he's working toward his Bachelor of Science in Engineering.

In addition to working on our internal apps, Boris is spending his 3 months at ZURB learning Rails and working on his CSS and presentation skills. The skill he's used the most since arriving? "The ability to go; hit the ground running, crank something out, get feedback and crank more."

There was no time to dilly dally or 'get situated.' I started drawing sketches and writing blueprints the first day I got here, and it hasn't slowed down since."

Intern Boris

Intern Josh

Josh Carver is our Engineering Intern and a veteran to ZURB. He spent last summer here as well, cranking on our Dashboard. He's currently double majoring in Computer Science and Business & Economics at Westmont College in Santa Barbara.

After spending last summer developing his Rails chops and learning to build web applications, Josh says he recognized this summer would be another great opportunity to continue to grow his engineering skills and work with a great team of designers.

[The] team is always thinking about the users first and how they are going to interact with the finished product (or website). It's something you don't really get in school."

Intern Josh

If you're interested in being ZURB's next intern, we have openings at the end of August for interns in Design, Engineering, and Marketing.

We use OmniGraffle to bust out fast, high quality wireframes here at ZURB. To help us crank those bad boys out, we rely on a few core features of OmniGraffle that allow us to stay focused on what really matters—the wireframing.

As is the case with all our deliverables, we do our best to maintain presentation and context with every deliverable (sketches, wireframes, mockups, etc) as they'll typically be emailed around without the original message. To keep as much context as possible, we put our logo, project name, document name, and task in the headers of our files like so:

Here's the Problem...

We're all human here. After a good jam session creating those wireframes, we sometimes forget to update that header information. We solved a big problem here by using shared layers in our documents, but needed to take it one extra step to help us out here.

In OmniGraffle, we typically have several canvases per document, meaning we have a lot of repeated information. To keep us sane and that information the same across canvases, we've used these sweet variables across shared layers. Here's how we wireframe faster by using OmniGraffle variables.

Inserting Variables

Inserting variables is easy. First, add some text to your wireframe. Next, while editing your text, open the Edit menu and select Insert Variable. You'll see a list of variables that come built into OmniGraffle including canvas name, layer name, dates, and more. Choose Canvas Name and you'll see your text field updated with the new variable.

Now, to make this work, you'll have to name your canvas as we have with our own wireframes. Be sure to keep the canvas names accurate while working to ensure your headers are always presentable and correctly identifiable. By having those descriptive canvas names, you also force yourself to consider the presentation more and keep your documents laid out well.

Ta-da!

And that's it! Coupled with shared layers, you can quickly and easily create a worry-free working template for all your wireframes. It'll save you time, keep you focused on the wireframing at hand, and does away with the worry of outdated document names.

Guest blogger and future ZURBian Dmitry Dragilev steps in to offer this introduction to Notable, ZURB's web feedback product currently in a private release.

We know all of you are wondering—when am I going get a chance to try out Notable? When is Notable going public? What features does it have? So, for all of you who cannot sleep anymore: here's what we can tell you.

When do I get to try it out?

We’ve had an overwhelming response since we announced Notable just weeks ago! Hundreds of people signed up for a private invite and we’ve had tons of great feedback (with some people actually using the tool to give feedback on the tool!).

At this point we’re encouraging people to sign up for the private invite and wait for a little bit while we incorporate all the feedback we’ve received so far. Once we've done that, we’ll give more people private access to check the tool out.

A lil’ preview of this tool? Please?

Ok, ok, no problem. We’ve had enough folks asking us about how it looks, what editing features it has, whether you can edit screenshot from the moon, etc. So here is a sneak peek for all you early adopters who can't sleep at night and just keep fantasizing about Notable App (we know a few names of people like that!)

Let's all imagine we’re working on a site and want to give someone feedback on it. I know it’s hard to imagine, but just do your best. So instead of making a screenshot, saving it to your machine, launching an image editor, highlighting things, adding notes, sticking it in PowerPoint, how about...

1. Click on the Notable button on your toolbar.

2. You’ll see the following on the lower hand right corner of Firefox

3. You click on the "Add Notes" button to get to the annotate page:

As you see: the "Screenshot" button is indented–you can add your notes about the screenshot itself.

Click on "Code" button above and you can comment on the page source code.

You can do the same for Copywriting of the webpage.

4. You can save your comments in your online workspace where the screenshot is stored or get a PDF with all these comments:

5. You can check out your new post in your workspace and share your feedback with other people in your company:

Why use this tool?

We found this process much simpler and more efficient than the old way of doing things.

ZURB created Notable after a fruitless search for a simple capture and annotate tool we could use to improve our workflow. We created it to help us with the website design, implementation and consulting we do for our clients.

We love it, Guy Kawasaki loved it, the private invites that checked it out all loved it, so we know you’ll love it. Hey–sign up to try it out! It’s free for 30 days, so there's nothin to lose.

ZURB's mission is to build a design business that teaches people how to create better products & services through our consulting, products, education, books, training and events. We’d love to hear what you think of Notable. Leave us a comment.

We're excited to announce the private release of Notable, the easiest way for teams to provide feedback on a website. Over the last few months we've put significant time into building what we think is a pretty cool utility for teams that build websites and products online.

Why did we create Notable?

After years of struggling to exchange quick feedback on dynamically changing websites, we were determined to come up with a solution that made it incredibly easy to get stuff done. Photoshop, Powerpoint, screen capture tools and email are useful tools, but they're not great for exchanging quick feedback on websites. Our biggest problem with feedback on websites and online applications has been just getting it done!

We spent months prototyping a tool that solved our problems. And we're pretty sure that these are the same problems that you deal with on a daily basis. Notable took shape when we put in the necessary development time to build the core technology. After a lot of iteration and ideation, we're now comfortable sharing our little innovation. We've been fortunate to work with many helpful testers that have given us great feedback over the last few months.

So what makes Notable great?

• We've made it incredibly easy to capture visual, code and copy notes. All you need to do is install a Firefox extension- it takes less than 10 seconds. It's the most comprehensive tool for quickly giving feedback on a website.
• You can provide feedback from anywhere and without bloated software. Photoshop and Powerpoint can be useful, but they're a drag for giving feedback. We host and run all the necessary tools- there's not technical expertise needed!
• Easily control permissions and share only with those you choose. Feedback is most effective when it's focused, timely and from the right people.

So does ZURB still provide consulting services?

We sure do. Our goal is to be the world's best interaction design and design strategy company, and that includes providing tools to help people design for people. We want to help you make better products and websites online.

We look forward to hearing your feedback!

Forms are everywhere on the web – it's the primary way users can interact with a web-based system. If your site or app uses forms (and we'd bet that it does) those forms need to be well designed, or users aren't going to follow through. They may not sign up for your service, they may not fill out their demographic information, they may not even log in again after sign up.

We love well-designed forms here at ZURB, and recently we've been exploring some cool new tricks for how we can display form inputs and labels in a concise, usable and totally awesome way.

Inline labels are nothing new – in fact the easiest way to label a field is to simply set the field value up front and blow it away when the field gains focus. Easy, right? But what if the browser focuses on the first field right off the bat...what field is it? The label is gone, so to find out what we're supposed to type we have to switch out, then back...what a terrible interaction! This little jolt could be the difference between a conversion and an abandoned form. Happily, there's a better way.

The first implementation we saw of this was over on the MobileMe login screen. We sniffed around a little and figured out how to create that type of interaction ourselves in an abstracted fashion – now we can use it when we want with a simple plugin. You can too. Check it out:

The HTML

Nothing shocking here: in order to get the effect we want you need three elements.

1. A container div for the input (we'll use span.wrap)
2. A label (label.overlay)
3. A form input (input.input-text)

The only piece here beyond even the most basic forms is the input/label container which actually works for us, allowing us to tailor our CSS and Javascript to only the elements we want. This technique is cool, yeah, but with great power comes great responsibility: we want to use this in certain circumstances but certainly not everywhere.

The CSS

The CSS is dead simple. For our example we'll set all our inputs to a width of 200px and a font-size of 18px. You don't have to use static widths for this to work but it simplifies our example.

Now we position the label behind the form element and set the form element background to "none." The label then becomes the form element background and between the two we can still create any form element design we'd like.

The Javascript

There's nothing too fancy about the Javascript but there are a couple of nuances. At ZURB we generally use either JQuery or Prototype – this example uses Prototype to select the element but how you select these is totally up to you.

The Javascript has to accomplish a few goals:

1. When the user clicks into an element, reduce the label opacity by half
2. When the user starts typing, reduce the label opacity to 0
3. When the user switches out of the field check if the field is empty - if so, bring the label back to the original opacity

The observer snippet in the middle of that javascript code block solves an odd little problem for us: autocomplete doesn't fire javascript events in most browsers. If Firefox drops in your username and password for you, the labels won't fade back like they should. We get around that by checking the field value on a timer – the user will see a flash after the autocomplete and everything will be just ducky. Cool, huh?

Et Voila! Super Awesome Form Labels

When you've got these few pieces in place you'll have forms that look more or less like these. We added some styles to the form inputs for the grey borders, etc – but you can handle all that. We also threw in some sweet CSS3 transitions that make these elements really sing in cutting-edge browsers.

Use Sparingly

This is a cool effect that solves an obnoxious little usability problem for inline labels, and we're getting some great use out of it already on the public facing pages for Notable, our upcoming feedback tool – but we don't use it everywhere and neither should you. It has strong novelty appeal to help you get that conversion, and the interaction is pretty smooth, but in a large form ease of comprehension is more important than slick presentation. Use your best judgement: we trust you.

Shared layers are orange.

As heavy users of OmniGraffle, the Mac-only wireframing and diagramming app, we spend enough time working on wireframes with multiple canvases for easy file management.

To keep our wireframin' awesomeness under control, and to be as efficient (or lazy) as possible, we use a feature called shared layers. Shared layers make wireframing faster, more efficient, and just plain easier.

What are Shared Layers?

Like normal layers in OmniGraffle, a shared layer sits in your Canvases panel and allows any objects to be placed on it. They are added just like regular layers (right click) and can be distinguished by their orange tint.

The key difference between normal and shared layers is that shared layers can be applied to multiple canvases via drag-and-drop, syncing the shared layer's contents across each canvas. Awesome, right?

How to Use Shared Layers

We love this feature so much we'd like to show you how to use it. Here's a quick guide to using shared layers in your OmniGraffle work.

1. Create Your Canvases

Get started by opening an existing OmniGraffle document with multiple canvases, or by creating a brand new document with a few canvases. Here's a look at what our Canvases panel looks like:

2. Right Click, Select "New Shared Layer"

Once you've got your canvases in order, right click on a canvas and select "New Shared Layer." You'll see a new orange layer appear in your Canvases panel. Give it a name and hit Enter.

Once you've got your shared layer made, add some objects to it; text, images, boxes—anything works. Remember, the point of a shared layer is to sync content across multiple canvases, so be practical about it. We like to use shared layers for header and footer information, stuff that we only need to update once in a document. (This helps us avoid updating a client's name in one canvas and missing it in another.)

3. Drag-and-Drop the Shared Layer to Other Canvases

Finally, when you're ready to apply your shared layer to a second canvas, just select the shared layer in the Canvases panel, then drag and drop it. As you drag and hover over the second canvas, you'll see it highlight (as seen below)—drop it when ready.

Left: Drag and hover over the second canvas.
Right: Drop the shared layer to apply it to the second canvas.

Super Awesome? Check.

And that's it! Three simple steps to creating super awesome wireframes using shared layers in OmniGraffle.

One layer to rule them all. Editing a shared layer syncs its contents across all instances. Edit one, update them all. Super. Awesome.

Shared layers in OmniGraffle are a great way to ensure those finer details aren't overlooked. It's easy to update something in one canvas and forget to do it in another. Shared layers solves that problem easily and intuitively. Just edit an instance of a shared layer and your changes will be applied to all other instances of it on any other canvases.

Have any questions or additional tips for us? Chime in below—we'd love to hear 'em!

We all need to test our applications (or reverse engineer other peoples' applications) with multiple user accounts – however this is often skipped because it can be a headache to deal with. Here are two 500mg tablets of testing relief.

Make use of disposable Gmail addresses

You may not know this but as the proud owner of jonandkate@gmail.com you are also the owner of jonandkate+8@gmail.com. In fact you can place anything you want after the plus sign and Gmail will treat it as an alias for your regular email address. The only exception is jonandkate+spam@gmail.com in which case it goes straight to your spam. It also does not pass go or collect $200.
You now have limitless (for the most part) email addresses to setup test user accounts. All email messages go to one place and you can setup filters based on which disposable address the email was sent to.

Open multiple instances of Firefox

This is going to requires use of the terminal but stay with me here. You are probably familiar with the idea of browser profiles. Each profile has separate bookmarks, cookies, add-on's preferences etc. Great when you don't want grandma seeing your ping pong paddle fetish sites. But I'll bet you didn't know that you can launch different profiles at the same time.

Now regardless of how the application you are using does authentication, you can be logged in as both Jay and Jane, at the same time. Here's how we do it.

First open Firefox as you would normally.

Next fire up terminal.

Paste in this command.

1. /Applications/Firefox.app/Contents/MacOS/firefox-bin -no-remote -P dev &

Assuming you don't already have a profile called dev the Firefox profile manager will open so you can create one. You will see default which is the profile you have been using up until this point.

Click create profile and name it dev (or whatever makes you happy). Select the new profile and click Start Firefox. You should now have two Firefox icons in the tray completely separate of each other.

The next time you want to launch your second instance run the command above again. This time since the profile already exists you will skip the profile manager. If you want to get to the profile manager again substitute dev for a profile name that does not exist. You can run as many separate instances as you want using the above command provided that they each have a different profile.

One added benefit of this method is that any add-ons you install on the dev profile will not effect your default profile. If you are working with experimental (or just obnoxious) Add-ons you can install them on the dev instances to keep your regular browsing experience clean and uninterrupted.

One thing to note is that if you close the terminal window you ran the command above from all the dev instances of FireFox will close. Consider yourself warned.

We love CSS at ZURB. We love it so much that we're using the new, yet-to-be released version (CSS3) in some of our projects. In the works for nearly 10 years now, CSS3 is finally starting to see the light at the end of the tunnel as new browsers like Firefox and Safari continue to push its implementation.

One of our favorite things about CSS3 is the addition of RGBA, a color mode that adds alpha-blending to your favorite CSS properties. We've kicked the tires on it a bit with our own projects and have found that it helps streamline our CSS and makes scaling things like buttons very easy. To show you how, we've cooked up an example with some super awesome, scalable buttons.

The Button

Here's what we're looking at:

Our original button we'll use to show how RGBA colors rock your world. See how the hex drop shadow works on white, but not dark? We'll fix that.

It's a simple button made possible by a transparent PNG overlay (for the gradient), border, border-radius, box-shadow, and text-shadow. Here's the CSS that we've got so far to make this super awesome button:

1. a.awesome {
2. background: #222 url(/images/alert-overlay.png) repeat-x;
3. display: inline-block;
4. padding: 5px 10px 6px;
5. color: #fff;
6. text-decoration: none;
7. font-weight: bold;
8. line-height: 1;
9. -moz-border-radius: 5px;
10. -webkit-border-radius: 5px;
11. -webkit-box-shadow: 0 1px 3px #999;
12. text-shadow: 0 -1px 1px #222;
13. border-bottom: 1px solid #222;
14. position: relative;
15. cursor: pointer;
16. }

Not too shabby considering it's nearly all done with CSS. We could use CSS3 to do the gradient as well, but currently only Safari supports that. For a little backward compatibility, we'll keep it as a transparent PNG. Besides, the transparent PNG is easier to work with than setting the gradient in CSS since Safari only does CSS gradients at this point.

Making it Scale with RGBA

Sweet, so we've got our button styled up and looking great, but since we're using "static" colors (Hex value), this button doesn't scale very well. What if we need it to be shown on dark and white backgrounds? What about other colors? Here's where RGBA comes in.

Small Details. Notice the shadow on the button on the dark background? We fixed the buttons' shadow blending by using the RGBA colors.

With a little RGBA love, we'll scale this single button to add five more colors, two more sizes, and make it work on any background color. Check this out—all we have to do is modify three lines of CSS.

1. a.awesome {
2. ...
3. -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
4. text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
5. border-bottom: 1px solid rgba(0,0,0,0.25);
6. ...
7. }

There, now we have our super awesome button with some alpha blending added in. Still looks the same right? That's because we have a 25% black border, 50% box-shadow, and 25% text-shadow in place of regular hex values. This gives us what we need to make our original button scale to various backgrounds, colors, and sizes. With the RGBA values, we have layers of color instead of separate colors, much like what you get when doing transparent drop shadows in Photoshop.

Adding the Colors and Sizes

Now that we've got our default button to where we need it, let's add some colors and sizes. Here's the CSS to do it:

1. /* Sizes ---------- */
2. .small.awesome {
3. font-size: 11px;
4. }
5. .medium.awesome {
6. font-size: 13px;
7. }
8. .large.awesome {
9. font-size: 14px;
10. padding: 8px 14px 9px;
11. }
12.  
13. /* Colors ---------- */
14. .blue.awesome {
15. background-color: #2daebf;
16. }
17. .red.awesome {
18. background-color: #e33100;
19. }
20. .magenta.awesome {
21. background-color: #a9014b;
22. }
23. .orange.awesome {
24. background-color: #ff5c00;
25. }
26. .yellow.awesome {
27. background-color: #ffb515;
28. }

Done Deal

And now we have six buttons, each with three different sizes. You can see the final coded example here to take a closer look at the code.

And there we have it: scalable buttons with minimal CSS that work everywhere.

Although this example may be overkill—who really needs this many button colors?—the point is that RGBA is actually much more powerful than typical Hex values. Consider this: if we were using hex values, we'd have three times the CSS per color—one color for background, one for border, and one for text-shadow.

With a little CSS3 magic, we've created a scalable set of buttons with nearly half the CSS it would have taken with hex colors. Give it a go in your next project and see how it can help add that extra polish you want without huge impact on your code.

If your product is a representation of your company, then your UI (user interface) is a reflection of how your business is run.

Building Great Product

Yesterday our post on mission statements took us to a conceptual level higher than ZURB's sweet spot of building great products. We're not a business consulting firm, but defining a "mission statement" is important for communicating the strategic goals in order to build a solid product.

Over the last couple years we've been tweaking our design strategy framework to help businesses build better products. Its been a great tool for keeping things focused, but it's also difficult for many people to immediately understand how it solves product development problems. Let's explore this concept further from an organizational perspective.

Drawing a Picture of the Problem

A few weeks ago Luke Wroblewski gave a ZURB Soapbox lecture on product excellence. A key concept of his talk emphasized that great product development happens from the "outside in." To summarize, great products happen when companies observe and use customer insights to drive product innovation. Most people would agree that this concept makes sense—so why do companies struggle to use customer insights?

Below is a quick sketch diagram to visualize where product development breaks down in a company. We'll state up front that these ideas are broad; there is a myriad of potential problems every company faces when building products. The key takeaway from this post is that a company's product UI can highlight where the business is having organizational issues.

This product development diagram highlights the conversations (arrows) that different business units have within a company. The customers reside on the outside of the circle and the UI is in the inner circle surrounded by business unit conversations.

Two Key Issues in Product Development

In many businesses the interaction between the engineering, marketing, and business teams are unstable or one group's voice is too dominant. Take Google for example. The engineering teams have a dominant voice in the conversation. It's an engineering strategy they've implemented to be data driven—which for free products is fine, but as margins and revenue in specific product categories become more important, then the voice of marketing and business teams must play a larger role to improve the products. In most of their products, the UI lacks refinement and user satisfaction.

Another big challenge businesses face is translating the conversations they are having with customers into meaningful action items to improve product development. Customers have an uncanny ability to give companies a healthy mix of horrible and good ideas (to no fault of their own). This balance is typically weighted in the "horrible" category, but a company with a strong vision will be able to laser in on "good feedback." The opportunity lies in translating and conveying those ideas to the product development team.

What These Problems Expose

In most of our consulting engagements, companies ask us to fix their UI. On a surface level, it's very easy for us to make quick fixes that have a huge impact on a business. Many immediate interface problems are universal and not necessarily tied to the business. However, the challenge most businesses face is iterating on our feedback. The reason? Companies struggle to support continual development because its business units (which may even be just a couple of people!) can't work together to nail opportunities. They get stuck.

Improving your product starts by looking at the interface (UI) and determining what parts are broken in your organization. This will help your company look at your product "outside in."

One of the toughest business problems start-ups have is agreeing to a common goal. In corporate circles we often summarize this exercise as "creating a mission statement". The exercise is meant to provide guidance for employees to empower them to make better decisions for the company.

Don't Let the Wrong Event Sour You on the Mission

The intent is good, but the "mission event" is often stimulated by the loss of a key employee, lack of product focus or a general dissatisfaction with the company. In the end, it's a reaction to something the business should have been doing all along. Most of us have encountered dealing with a corporate mission that doesn't resonate with anyone in the company. And confusion and disenchantment are usually the end result. Remember, your goal is to empower employees to do kick-butt work.

So is a Mission Statement Bad?

No, definitely not. It's critical for success. But it's got to gel with the people in your company before it will ever help you broadcast the right message to customers. Big, long-winded statements that project self-importance or imply market dominance rarely help a company achieve their goals. Left undefined, mission statements can create more chaos than guidance.

Mission statements have to be achievable. They also have to be actionable and embraced by the company culture. Which gets us to our next item: what the heck does "mission statement" mean?

What a Mission Statement Really Is

At some point in your professional life you've probably come across a vision statement, purpose statement, mission statement, mantra or positioning statement. If you're like us, these terms seem a little disconnected from day-to-day business. Most mission statements we've read are not good. Heck, when you see poor results of companies like GM, you wonder what the point of their mission statement is:

G.M. is a multinational corporation engaged in socially responsible operations, worldwide. It is dedicated to provide products and services of such quality that our customers will receive superior value while our employees and business partners will share in our success and our stock-holders will receive a sustained superior return on their investment.

Doesn't GM make cars?!

Let's Make This Real

Because these business "statements" seem vague, we thought it would be helpful to break down the concepts into easy to understand definitions. If employees can't understand the concepts, what's the point of the statements?

Using ZURB as an Example

To make the exercise more valuable we took a stab at outlining ZURB's mission. Below you'll find a concrete example of how ZURB looks at it's business. You could call this a draft, but it should be a working document that is updated as our business grows or changes.

Creating a Metaphor

Lists and definitions are helpful, but they rarely create excitement about ideas. We decided to take these ideas a step further by creating a visual brainstorm of the concepts. After some exploration we used the metaphor of a soapbox car to help us tell a story through each statement. When you map out the terms, you'll see how each one plays off the other.

A close-up shot of the mission statement brainstorm. In this detail we explore the concept of a soapbox metaphor.

After a few passes of telling the story to guys in the office, the flow seemed to resonate even more. Here is a capture of the entire board.

A whiteboard capture of a mission statement brainstorm session. Click on the image to see a full size image.

A Winning Mission Statement

The process of creating a mission statement can seem daunting and a bit prickly if you focus on everything except just getting the ideas down. Getting your team to buy into the mission statement requires some simple language, understanding of the tool, a grounded view of your business and a little bit of politicking. But we bet the need for extensive persuasion disappears when you get people excited about the real company goal. People will rally!

In a recent conversation with a client, we made the suggestion that the company should remove the chairs in the conference room. The suggestion got a little bit of a chuckle, but the reality is that chairs in a group discussion rarely help the team get stuff done. Removing chairs isn't a solution to the meeting problem, but it's a fantastic tactic to improve the quality of most meetings.

Seth Godin has a nice blog post on fixing the meeting problem. Seth takes a broader view of the problem, but ZURB would agree on most of his points. Removing chairs happens to be number four on his list.

So why do standing meetings work?

1. The first obvious reason is that people don't like to stand for long periods of time, so it creates a sense of "moving on to the next thing."
2. Standing gets more blood flowing and this activity encourages participation.
3. Long meetings standing up are tiring, so people will tend to keep them short and productive.
4. Standing encourages people to do something other than talk. Whiteboards become a new opportunity to drive the meeting.

Just to prove the chair point, here is a great example of standing "meetings" from ZURBwired last week. If you watch this time lapse video over the second part of the 24 hours (10PM-8AM), you'll notice there were many standing scrums. There's a great one around 1:30am where a flurry of activity around whiteboards is followed up by individual efforts and smaller scrums (keep in mind this was only one big room- there were other breakout rooms where more projects were being worked on).

If your company has a problem with meetings, start removing chairs. Get your team invested in getting projects done. Tell everyone to please stand up.

I've got a coffee in one hand, but the eyelids are still a bit heavy. On behalf of ZURB, I'd like to congratulate everyone that worked so hard to get this project completed. It's been an amazing 24 hours working with the Pie Ranch team. We're extremely proud of the effort everyone put in to make this event a success. This is our second ZURBwired event, so I'll just go ahead and call us the craziest design team in the world. It's great to know that our efforts have helped Pie Ranch get closer to their goal of raising 5 million dollars. Thanks again for everyone’s hard work!

We hope parts of this experience will rub off on other non-profits that are looking to drive their organizations forward. Progress doesn’t always have to happen in 24 hours- but with a little inspiration and a motivated team, quite a lot is possible. Heck, corporations might learn something!

Over the course of 24 hours we created (we'll link to these over the coming days):

• Functional website with blog
• Newsletter template
• Content for donor packets and website
• Donations self-mailer with envelope
• Invites and envelopes
• Thank you cards and envelopes
• Round stickers
• Donor packet label
• A Poster
• Zazzle store
• Letterhead templates
• Envelope templates
• Pocket map template
• Farm dinner menu template
• Facebook page
• LinkedIn profile
• Twitter page

On the marketing side we published:

• 9 edited videos
• 300 images on Flickr
• 50 tweets (90 total zurbwired mentions)
• 19 blog posts

Special thanks goes out to Jeremy and Amanda of ZURB who put in the extra effort to pull this event off. Great job guys.

It came down to the last hour, but we have a fully functioning website launched at PieRanch.org. It's a fully redesigned site that includes new pages for their upcoming events and campaigns, better donation page flow, integrated social sites (YouTube, Flickr, and Twitter), and a clearer mission.

Here's a few pages from the website:

Michael has been rockin the video segments- here is a great one documenting Hunter's arrival with the printed materials. It was something special to see the completed pieces when Hunter walked into the office.

The web team has been diligently working on copy, visual design, front-end code and a modified wordpress backend all night. Most of the work started at 8:00pm with the teams breaking into separate groups to tackle the navigation and marketing concepts.

It's been amazing to see the ideas and critiques happening- awesome work by the entire team.

The content team is adding content directly in the admin screens:

Part of ZURB's process is to start stubbing out the CSS and XHTML before the visual design is complete:

Here is another screenshot of the in-progress work:

...and for a sneak peak of the final design, here is a psd screenshot: