ZURBlog

How to Mask Passwords Like the iPhone

Fri, 10 Jul 2009 09:15:00 -0500

Jakob Nielsen made quite a stir not long ago suggesting that password masking should go the way of the dodo:

Usability suffers when users type in passwords and the only feedback they get is a row of bullets. Typically, masking passwords doesn't even increase security, but it does cost you business due to login failures.
Jakob Nielsen

Nielsen argues that providing feedback and an indicator of current status is a basic premise of usability. More importantly from a business perspective he argues that failed logins are costing businesses time in support as well as lost users. That may be true, but here's why we need to mask passwords anyways.

Users expect masking for their own peace of mind.

Passwords Mean Security

Passwords are all about security – In some cases passwords are simply about the reassuring appearance of security. A site that has password protection is, to many users, secure – whether the site is really secure or not. When you eliminate masking you might be saving your users a few seconds irritation, but you'll be damaging your own credibility.

Nielsen's research was largely based on mobile devices, but mobile devices have one advantage that desktops do not have – ease of obfuscation. If a phone didn't mask passwords it wouldn't be the end of the world, because users can much more easily conceal their actions on a tiny device than a full size machine.

The (Awesome) Solution

Many smartphones, including the iPhone, solved (part) of this issue by showing the most recent character of a password field with a delay of a second or two. You can see what you just typed, but not the entire password. This provides Nielsen's much vaunted feedback and status, while still retaining the majority of the field's appearance of security. Just one problem: browsers don't do what mobile devices do. So, we'll make them do it with some fancy javascript and a little behind the scenes trickery.

View the Demo »

How to Implement It on Your Site

Here's how we'll help your visitors keep their security while improving password masking—with just some javascript and CSS magic.

Put a standard text input where the password input would be and label it 'password' for the user.
Create a real, hidden password field which the javascript will copy the password into with a type and ID of password.
When the user submits the form, send the username and real password fields, while discarding the fake one they typed into. (Since the field they typed into has been converted to bullet characters we can't submit that field).

The Code

This version of the solution is written as a Prototype behaviour and requires the lowpro behaviours plugin, but the code isn't terribly complex and could be adapted to most any system. Here's the behaviour itself:

With that in place you simply have to attach the behaviour when the page loads:

Solved! Sort of.

Does this solve the problem? Well, mostly. It's a nice interaction and it does seem to strike a middle ground between fully masked and Nielsen's total unmasking rallying cry. Security expert Bruce Schneier actually backs this Blackberry/iPhone method, as he refers to it, as an "excellent compromise."

However, it also introduces a few problems: it doesn't work well in older browsers and doesn't play nice with browsers trying to autofill the saved password. The ideal solution is in the hands of the browser manufacturers, and making type=password fields act this way by default as they already do on mobile.

Security online will only become a bigger deal as we and our users invest more and more of our lives in other sites. There will come a day when passwords are seen as hilariously antiquated, and retina scanning or voice identification (or colonic maps, yikes) are the truly secure ways we identify ourselves. Until then we'll keep looking for awesome solutions.

ZURB Sketchsheets: Better, Faster, Stronger

Wed, 08 Jul 2009 11:30:00 -0500

Nearly four months ago we released our first suite of ZURB Sketchsheets—and now we're back with an awesome update. Having used these with countless client projects, we've found the sweet spot for them.

With a bit of reader feedback and another few rounds of iterations, we're calling them final once again.

About the Sketchsheets

You may not have noticed, but we're fans of sketch wireframes here. Sketching is just hands down the most efficient way to rapidly explore quick UI concepts or workflows. When we realized we could streamline our sketching efforts and make a better presentation, we took to OmniGraffle to bust out some templates. The result was the ZURB Sketchsheets.

What's Changed

Now in their second incarnation, we've modified the sketchsheets to better suit our needs. Here's an overlook of what's changed with this release.

An Opened Focus. We removed the bar across the top for a lighter "ZURB footprint." We felt the bar was too heavy and detracted from the sketches themselves.
Forced Presentation. To help us help ourselves (and our clients!), we rethought how we present ideas on our sketchsheets. Certainly the main sketching area is the focus, but we added lines for notes to remind us to explain our ideas. This helps clients understand vague concepts.
Interactive PDFs. Since we're a Mac and PC shop, it's important for us to have official ZURB resources that work across both. To that end, we moved our OmniGraffle templates to interactive PDFs. Just download, fill in the form fields, and hit print!

We're sure to continue evolving our process and presentation, but so far, these are working great for us. The sketchsheets serve as a guideline for our Sharpies and our thoughts as we continue to present well thought out concepts to our clients.

Help Us Help You

Have an idea for us to improve these sketchsheets? Have questions on how we created and continue to use these? Just reply in the comments below!

Download

And now we can stop beating around the bush. We've zipped up five of our favorite sketchsheets in three different colors as interactive PDFs. Just download, fill in the optional hidden form fields, and start sketching! Enjoy!

Download the PDFs

Each ZIP file contains five sketchsheets—single, 2-up, 3-up, 4-up, and 6-up—in one color as interactive PDFs.

Download the Source

Interested in riffing on our sketchsheets or modifying them for your own use? Download the OmniGraffle template file and get to it!

3 Ways to Add Depth to Any Website with CSS

Mon, 06 Jul 2009 11:35:00 -0500

In design, the small and subtle details can have the biggest impact. Smoother lines, refined textures, and the right shape and size bring a lot to the hardware and software we know and love here at ZURB.

We think the same thing should apply to websites, where finer details can take your designs from good to great. One technique we use regularly is adding depth to a design to give it that extra flair. Here are three ways to add visual depth to any website—with nothing but CSS.

Establishing a Testing Ground

To help illustrate the effectiveness of these CSS tweaks, we'll modify a snippet of code throughout the post as we discuss each tip. We'll start with a lightly colored div with two sections of content divided by an hr already in place. Have a look:

Section Heading

Consectetuer lorem lorem humanitatis vero consequat. Eorum illum est suscipit dolore claritas. Tincidunt est nulla sit erat mirum.

Section Heading

Consectetuer lorem lorem humanitatis vero consequat. Eorum illum est suscipit dolore claritas. Tincidunt est nulla sit erat mirum.

Now that we've established what we'll be adding depth to, we can move on to the tips!

Tip #1: Raising the Hr

For this effect to work, we start off with our reset hr. We use a technique created by SonSpring to style our hrs here on ZURB.com—his reset turns a default hr into a cross-browser friendly 1px line that everyone can appreciate. Here's a look at the CSS for it:

hr {
margin: 17px 0 18px;
height: 0;
clear: both;
border: solid #ddd;
border-width: 1px 0 0;
}

To add depth to our hr, we simply add another border into the mix. The trick is to use two shades of your background color—one lighter and one darker. In our example, we're using a background color of #eee, so our borders will be #ddd and #fff. Here's what we change our borders to on the hr:

hr {
...
border-top: 1px solid #ddd;
border-bottom: 1px solid #fff;
}

Here's the result: a recessed border that subtly divides two blocks of content with just that little extra touch. This effect pushes the content outward by making it appear as though the border is slightly indented on the background color. Slick, right?

Section Heading

Consectetuer lorem lorem humanitatis vero consequat. Eorum illum est suscipit dolore claritas. Tincidunt est nulla sit erat mirum.

Section Heading

Consectetuer lorem lorem humanitatis vero consequat. Eorum illum est suscipit dolore claritas. Tincidunt est nulla sit erat mirum.

Here's the real kicker. We can take the same borders and flip them to create the opposite effect. Check it out:

Section Heading

Consectetuer lorem lorem humanitatis vero consequat. Eorum illum est suscipit dolore claritas. Tincidunt est nulla sit erat mirum.

Section Heading

Consectetuer lorem lorem humanitatis vero consequat. Eorum illum est suscipit dolore claritas. Tincidunt est nulla sit erat mirum.

By reversing our borders, they stand out over the background and actually push the content back slightly, giving your content that recessed look. (Bonus Tip: You can achieve the same effect on lists by applying the top and border borders to your list items.)

Tip #2: Getting that "Recessed Text Look"

If you use a Mac, you've probably noticed this effect already—and loved it. We're of course referring to the text shadow that OS X Leopard adds to the titles in your application windows.

Good news: we can do the same thing to our text with a bit of CSS magic using nothing but a text-shadow. CSS text shadows are supported by both Safari (v3+) and Firefox (v3.5+). Let's take a look at the CSS behind this effect:

h4 {
text-shadow: 0 1px 1px #fff;
}

And here's our testing ground updated with the text effect (note: we darkened the background for extra emphasis on the shadow). Compare the difference between the first heading (with) and second (without):

Section Heading

Consectetuer lorem lorem humanitatis vero consequat. Eorum illum est suscipit dolore claritas. Tincidunt est nulla sit erat mirum.

Section Heading

Consectetuer lorem lorem humanitatis vero consequat. Eorum illum est suscipit dolore claritas. Tincidunt est nulla sit erat mirum.

The best advice for using the text-shadow effect is this: don't over do it. The subtle effect here adds a nice touch because it adds depth, but not at the sacrifice of readability. That said—have fun with it!

Tip #3: Fall into the Well

For our final tip, we'll take that light colored background and turn it into a "well." A well is a block of content that's styled to look recessed or indented. The most common applications of the well effect is fieldsets in forms, but it also works well in conjunction with border-radius on blocks of content like our testing ground.

To achieve the well effect, we need only add a slightly darker top border to our div.

div.well {
border-top: 1px solid #ddd;
}

With the rounded corners, the border wraps to the div and creates a unique effect. Here's the updated testing ground:

Section Heading

Consectetuer lorem lorem humanitatis vero consequat. Eorum illum est suscipit dolore claritas. Tincidunt est nulla sit erat mirum.

Section Heading

Consectetuer lorem lorem humanitatis vero consequat. Eorum illum est suscipit dolore claritas. Tincidunt est nulla sit erat mirum.

We can create variations on the well effect, too. Some of our other favorite well effects, working in tandem with the above two tips, are using a full border (all four sides) and using a bottom-border for a raised div.

Full Border

Consectetuer lorem lorem humanitatis vero consequat. Eorum illum est suscipit dolore claritas. Tincidunt est nulla sit erat mirum.

Bottom Border

Consectetuer lorem lorem humanitatis vero consequat. Eorum illum est suscipit dolore claritas. Tincidunt est nulla sit erat mirum.

And there you have it! Three tips to refine your website by adding depth with just a bit of CSS. The advantage to these effects is two fold: you get some sweet looking elements on your site and because the overhead in adding them is so low, it's nothing but awesome for you. Enjoy!

ZURB Has a Fresh Batch of Interns

Wed, 01 Jul 2009 11:15:00 -0500

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.

Wireframe Faster with OmniGraffle Variables

Wed, 01 Jul 2009 09:18:00 -0500

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.

When do I get to use Notable? Can you give a sneak peek?

Wed, 24 Jun 2009 18:42:00 -0500

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.

Request Early Access to Notable

Tue, 02 Jun 2009 19:34:00 -0500

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!

Making Forms Convert Through Awesome Inline Labels

Fri, 01 May 2009 01:43:00 -0500

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.

A container div for the input (we'll use span.wrap)
A label (label.overlay)
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:

When the user clicks into an element, reduce the label opacity by half
When the user starts typing, reduce the label opacity to 0
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.

Super Awesome Wireframes with Shared Layers in OmniGraffle

Thu, 30 Apr 2009 16:17:00 -0500

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!

Testing gratification in Firefox

Tue, 28 Apr 2009 16:28:00 -0500

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.

/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.

Super Awesome Buttons with CSS3 and RGBA

Tue, 28 Apr 2009 11:00:00 -0500

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:

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

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.

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

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:

/* Sizes ---------- */
.small.awesome {
font-size: 11px;
}
.medium.awesome {
font-size: 13px;
}
.large.awesome {
font-size: 14px;
padding: 8px 14px 9px;
}
/* Colors ---------- */
.blue.awesome {
background-color: #2daebf;
}
.red.awesome {
background-color: #e33100;
}
.magenta.awesome {
background-color: #a9014b;
}
.orange.awesome {
background-color: #ff5c00;
}
.yellow.awesome {
background-color: #ffb515;
}

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.

Outside In Product Development

Fri, 24 Apr 2009 18:36:00 -0500

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."

The Dreadful Mission Statement

Thu, 23 Apr 2009 18:40:00 -0500

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?

Term	Definition	Tips
Mantra	A short 3-4 word description of what your company does. It's a rally cry.	Be authentic, concise and make it easy to understand. It should be memorable.
Purpose Statement	A broad and inspirational statement that gives the business a sense of direction. This may be unachievable, but it's a motivation for employees. It doesn't have to be flashy.	A purpose statement is often confused with a mission statement. Purpose is farther reaching and not guided by an end goal.
Mission Statement	A single sentence that is tangible and has a specific goal. It's got to present a clear finish line that keeps people focused on a result. It should verge on unreasonable, but it's got to connect with employees.	Be grounded. A mission should have an end goal that the company can achieve. When the goal has been met, refocus and set the bar higher!
Vision Statement	The tangible result of your mission. A compelling and detailed visualization of your successful outcome that could as simple as one descriptive paragraph.	If the result seems unreasonable for your company, go back and redefine your mission!
Positioning Statement	A focused statement that identifies how your product or service is different from your competitors. This includes your customers, product category and compelling reason to buy from the business.	This should be extremely accurate. Your positioning can be forward looking, but your product or service must meet the spirit of the statement.
Proof Points (Differentiators)	Simple one line statements that prove your positioning statement. A solid business will only need 3 or 4 proof points.	These have to be accurate and real- customers will lose trust in the business if they are inaccurate.
Validation Points	Clear functions, features, services or processes that validate a proof point. These are grounded in the operations and should map directly to the proof points.	Validation points need to be grounded in reality. If your short on validation to support a proof point, then the proof point probably is not accurate.
Benefits	The results of clearly articulated validation points. A customer should be able to understand how a function, feature, service or process benefits them.	Benefits should be measurable and help close the circle of the company mission. If your business can track the success of each benefit, then it is going to be in a great position to build on its original mission.

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.

Mantra	Design for People
Purpose Statement	Help People Design for People
Mission Statement	Build a design business that teaches people how to create better products & services through our consulting, products, education, books, training and events.
Vision Statement	Share in the success of other people that have experienced working and interacting with ZURB. Appreciate how innovative and people centric design improves the financial success of businesses and increases the enjoyment for their customers.
Positioning Statement	World's best interaction design & strategy company for start-ups & teams that want to get stuff done.
Proof Points	Most experienced Effective methods & flexible process Most accessible Strong culture
Validation Points	Most experienced 75 start-ups 12th year of business $600,000,000 in market capitalization Effective methods & flexible process Fast projects Work within your existing structures Goal driven Explore possibilities Involve your whole team Qualitative and quantitative evaluation Most accessible Consulting Education Products Events Strong culture T-shaped employees Collaboration Share in victory
Benefits	Most experienced Learn to find answers faster from our vast experience Less time and money, especially from redoing work We help you win Effective methods & flexible process Minimize disruption to workflow Amazing possibilities Lasting process that you own Wows & Wins Most accessible Get help when you need it Control how you get the help Solutions that fit different budgets Strong culture You get more than an answer, you get a team to help you out Things happen faster Easy to build off momentum It's funner!

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!

Please Stand Up

Fri, 17 Apr 2009 14:59:00 -0500

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?

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."
Standing gets more blood flowing and this activity encourages participation.
Long meetings standing up are tiring, so people will tend to keep them short and productive.
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.

ZURBwired Wrap Up

Fri, 10 Apr 2009 10:00:00 -0500

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:

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.