ZURBlog

Crazy Go Nuts JavaScript Released by Google

Thu, 05 Nov 2009 17:26:00 -0600

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.

Van Halen, Marriage and Crucial Mistakes

Wed, 21 Oct 2009 15:35:00 -0500

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.

Listen to John Marshall's Podcast

Subscribe:

iTunes RSS

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:

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.
Got to understand utility very quickly
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 loosing 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 loose 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 loose— loose early! Don’t fight it. We’re taught that only quitters loose. Not true according to John, if you loose early you actually win in long run!

More Info

Behind the Scenes: Building the New Visual Annotations

Thu, 15 Oct 2009 08:45:00 -0500

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

Creating an Overlay with Layers

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

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

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

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

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

Fun with border-image

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

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

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

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

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

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

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

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

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

More Behind the Scenes

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

Easily Turn Your Images Into Polaroids with CSS3

Wed, 14 Oct 2009 12:48:00 -0500

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

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

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

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

Starting with the Images

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

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

Using :after to Create Content

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

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

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

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

Randomly Rotate the Images

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

Here's the CSS to do it:

/* By default, we tilt all our images -2 degrees */
ul.polaroids a {
-webkit-transform: rotate(-2deg);
-moz-transform: rotate(-2deg);
}
/* Rotate all even images 2 degrees */
ul.polaroids li:nth-child(even) a {
-webkit-transform: rotate(2deg);
-moz-transform: rotate(2deg);
}
/* Don't rotate every third image, but offset its position */
ul.polaroids li:nth-child(3n) a {
-webkit-transform: none;
-moz-transform: none;
position: relative;
top: -5px;
}
/* Rotate every fifth image by 5 degrees and offset it */
ul.polaroids li:nth-child(5n) a {
-webkit-transform: rotate(5deg);
-moz-transform: rotate(5deg);
position: relative;
right: 5px;
}
/* Keep default rotate for every eighth, but offset it */
ul.polaroids li:nth-child(8n) a {
position: relative;
top: 8px;
right: 5px;
}
/* Keep default rotate for every eleventh, but offset it */
ul.polaroids li:nth-child(11n) a {
position: relative;
top: 3px;
left: -5px;
}

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

The rotating above breaks down like so:

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

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

Final Touches

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

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

View the Demo

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

View Demo »

How to Create Simple and Effective Sub Navs with Definition Lists

Mon, 12 Oct 2009 11:15:00 -0500

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

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

What's a DL?

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

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

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

Creating the Sub Navigation

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

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

The HTML

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

<dl class="nav">
<dt>On this Page:</dt>
<dd class="active"><a href="#">Final Wireframes</a></dd>
<dd><a href="#">Updated Wireframes</a></dd>
<dd><a href="#">Initial Wireframes</a></dd>
<dd><a href="#">Sketches</a></dd>
</dl>

The CSS

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

dl.nav {
width: auto;
height: 27px;
margin: 0 0 18px;
}
dl.nav dt, dl.nav dd {
float: left;
display: inline;
}
dl.nav dt {
color: #999;
font-weight: normal;
}
dl.nav dd a {
margin-left: 6px;
padding: 5px 12px;
text-decoration: none;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
}
dl.nav a:hover {
background: #eee;
}
dl.nav dd.active a {
background: #2daebf;
color: #fff;
}

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

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

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

The Finished Demo

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

View Demo »

ZURBSoapbox: John Marshall of MarketMotive Joins Us October 16th

Mon, 12 Oct 2009 10:00:00 -0500

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

Lessons Learned: ClickTracks to MarketMotive

Photo by Lee Odden

Where?

ZURB HQ
55 N. 3rd Street, Suite 100a
Campbell, CA 95008

When?

12pm on Friday, October 2, 2009

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

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

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

Email Us to RSVP

Subscribe to Our Podcast!

You can subscribe to our podcast in two ways:

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

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

Behind the Scenes: Redesigning Notable Annotations

Fri, 09 Oct 2009 10:42:00 -0500

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

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

First Steps: Defining the Problem

The original Notable visual note style

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

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

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

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

Framing the Solution

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

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

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

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

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

Fast Iteration to an Awesome Solution

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

Coming Up Next...

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

Lessons Learned from Technorati to OffBeat Guides: A ZURBsoapbox Podcast with Dave Sifry

Tue, 06 Oct 2009 15:15:00 -0500

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

Listen to Dave Sifry's podcast

37 minutes, and it'll be that long no matter how many people you add.

Subscribe:

iTunes RSS

The crowd at ZURBsoapbox focused in on Dave Sifry.

Use data, not your own ego

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

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

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

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

Jeremy and Mark getting excited before John starts talking.

Understand your
business model

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

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

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

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

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

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

Be of service

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

Measure your virality

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

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

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

More Info

Photos from all the ZURBsoapbox talks
Dave Sifry's blog

ZURBSoapbox: Dave Sifry of Technorati/OffBeat Guides Joins Us October 2nd

Fri, 25 Sep 2009 12:00:00 -0500

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

Lessons Learned: Technorati to
OffBeat Guides

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

Where?

ZURB HQ
55 N. 3rd Street, Suite 100a
Campbell, CA 95008

When?

12pm on Friday, October 2, 2009

There is no single framework that helps shape a successful product. Through real life examples of his own experience, Dave Sifry (the founder and Chairman of Technorati—the largest blog search engine in the world) will open up his own folder of lessons learned in online product development. He will share with us:

Top 5 things you'd always do again and never do again based on Technorati
Describe your design process for building Technorati. How is Offbeat Guides different?
Everyone wants to "go viral." How important is that to a successful site?
What makes or breaks a great web product?
When *not* to introduce features to a product

About Dave: Dave Sifry is an entrepreneur and blogospehere icon with over 20 years experience and five companies under his belt. His latest startup is Offbeat Guides which he describes as "making absurdly simple personalized travel guides for over 30,000 destinations around the world". Prior to Technorati he was a co-founder and the CTO of Sputnik where he directed the engineering of all Sputnik products, including its new WiFi security and management products. Prior to Sputnik, he was a Vice President of Engineering at Linuxcare, Inc, where he built Linuxcare’s services infrastructure.

Email Us to RSVP

Subscribe to Our Podcast!

You can subscribe to our podcast in two ways:

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

The Cat, The Dog, and Web 2.0 by Mrinal Desai
Tapping a Vein: Lessons from an iPhone App Startup by Bart Decrem
Product Excellence Principles by Luke Wroblewski

Notable is Live, Get the iPhone app

Wed, 23 Sep 2009 19:26:00 -0500

I have to be honest this is one post I’m very excited to write—so here is the most exciting update from the time I (Dmitry) joined ZURB: Notable is now live and open to public! So now you ask yourself:

Matt launches Notable with a push of a button this morning.

What does this mean for me?

You don't need to request an invitation to the private release anymore, just sign up from Notable homepage and start giving feedback.

Do you have an iPhone app for Notable?

Funny you ask! We do! Our iPhone app lets you capture apps or websites from your iPhone and iPod touch and upload the captures to your Notable account. It's great to give feedback on development you’re doing for iPhone. Read more about it here.

I heard I can win an iPod nano by using Notable?

Yes, you can. Read this blog post to find out how you can win.

Why is this an important event for ZURBians?

As you probably remember from our prior posts, Notable was initially created to improve our design workflow. We incorporated many suggestions and comments from our private release users into this release. While we have a lot more work to do, we're thrilled to see our creation go live.

To capture our excitement here at ZURB we were all asked “Why is Notable release exciting?” Here are our responses:

ZURBians Join the Mix

Tue, 08 Sep 2009 19:47:00 -0500

A look of triumph which can only mean that another bug has been vanquished.

The ZURB team has hit a growth spurt.

While we scramble to find extra desks and consider housing all interns in the Fish Bowl, four (yes, four!) new faces have arrived at ZURB HQ in the past 2 weeks.

Yeah, it's Genetic

Here to continue improving Notable and to work on our super-secret application is our newest Engineering Intern, Philip Kelly. If he looks familiar, that's because he is. Philip is kin to our Lead Engineer and super nerd, Matt Kelly (apparently coding chops run in the family).

While Philip says the best part about ZURB is the Thursday night frag fests, the high energy in the office is a close second.

ZURB says the best part about Philip (beside his mean skills) is being able to stage the "Spy vs. Spy"-esque scenarios between Matt and Philip— who we've dubbed BizarroMatt.

It's One More Step Toward World Domination

Next up, taking his place as ZURB's first-ever Marketing Lead is Dmitry Dragilev. Dmitry moved up from Monterey to start work at ZURB, but originally hails from Moscow, Russia. He's psyched to be starting at ZURB and help us get ready for Notable's upcoming public release.

Dmitry is going to be the new face behind ZURB's social media and marketing efforts. We're also looking forward to hearing from him often in the ZURBlog and ZURBnews.

Designers Can Be Such Girls

Quoting "Blazing Saddles" gets Kathleen big nerd points.

On the design side is our newest Design Lead, Kathleen Smith. She's a local from Los Gatos who's joining us after working all over the board, from a national security laboratory (Agent Smith?) to a stint in freelancing.

She's in her second week at ZURB and says the hardest part so far has been "getting three projects handed to me on the very first day before I even knew how to log in to anything."

Kathleen brings her great leadership skills, sense of humor and a vast range of interesting desk toys (is that tiny a croquet field?) to the mix and is looking forward to world domination, one pixel at a time.

Wait, Let Me Get My Business Card

Last, but certainly not least: Down from Saratoga to handle business development is Roeland van Krieken. Born in the Netherlands but raised in sunny Los Angeles, he has a long history in the Silicon Valley tech industry. He has four start-ups under his belt and is ready to use his skills to expand ZURB's already vast list of clients.

Less than two weeks in and already closing deals; Roeland has taken over sales and business development here at ZURB.

It's a great place to work; business-oriented and fun.
Roeland van Krieken on ZURB

So now our small team is bursting at the seams with a roster of 10 and 3/4. Looking to work with our great team? We're hiring. Check out our talent page for more info on working with us and for more complete bios on all the ZURBians.

Back to Basics with Interaction Design

Mon, 31 Aug 2009 15:20:00 -0500

As an interactive designer, it is easy to get carried away. Part of being a good designer is knowing how and when to use the techniques at your disposal. While there are tons of great tips on how to do certain things on the web, these few tips aim to help designers of any experience level avoid problematic situations by getting back to the basics.

Don't Forget That Your Users are Human

One of the most important aspects of a website is its usability. Don't forget your audience is human. When you forget this you don't communicate your message effectively.

A great example of this principle applied is found in form design. Ryan Singer outlined 10 ways to make forms better, one of which being the language that you use when a error occurs. We've all had it happen, you forget to fill out one of the questions on a form and when you submit it you get a nasty error screen that makes you feel like you've done something illegal.

Error: Not all of the fields were completed! Self-destructing in 5...4...3...2...

You have to consider that many people aren't as comfortable online as you and I. Errors that aren't friendly and informative are scary to users.

A Better Approach

Remember to be conversational in your errors/notifications. So what if they messed up a little bit? Gently let them know they skipped a field and move on.

It looks like you forgot to tell us your first name.

This allows for a better user experience that communicates to your users what you'd like them to do, not to mention it treats them with a little respect.

Don't Jump Straight Into Photoshop

So, you're excited about a new project and you start out by opening up a crisp white canvas in Photoshop. You've launched yourself into a huge ocean of tools without a good idea where to begin. By doing this you can end up with a design that is not very well informed and it makes it very difficult to create a successful web experience.

A Better Approach

Resist the temptation! At a minimum you should always map out the goals for each design and start by simply sketching out ideas.

Sketching is an efficient and effective way to explore concepts because you don't have to focus on typography or making everything pixel perfect. Photoshop is great for executing a design, but not so great for exploring broad ideas.

Design Sites That are Both Necessary and Useful

One of the highest priorities of any project should be to make it usable. If people can't use your site then what good is it? Many designers lose perspective of big picture goals and focus instead on just making something that looks good. Designing with no purpose in mind makes it hard to know where your going.

A Better Approach

Believe it or not the Shakers came up with a design philosophy that can be perfectly applied to design on the web.

"Don’t make something unless it is both necessary and useful; but if it is both necessary and useful, don’t hesitate to make it beautiful."

The Shaker Design Philosophy

The most beautiful site in the world can also be the most useless. As with all forms of design, the best work has a foundation of usefulness.

Got it. Now What?

These tips may seem like common sense, but unfortunately, many people don't consider them in their day to day web work. If you're just starting out, these tips can take some designers years to pick up so learn them now.

If you've been an interaction designer for a while, try to examine your daily routine to see if you can apply these tips. You may be surprised at where you've neglected the basics.

New Nerd Joins ZURB: Welcome Connor Sears

Tue, 18 Aug 2009 11:42:00 -0500

The ZURB team would like to welcome the newest ZURBian, Connor Sears, who is two days into his first week with us.

Connor Sears, ZURB's new guy, gets down to business. He's sporting a comfy t-shirt with a MBP laptop and hails from the great state of Kentucky.

Connor is an interaction designer from Bowling Green, Kentucky where he was born and raised —and where he acquired his proper Southern accent, unlike Jonathan whose lack of accent was an extreme dissapointment considering he spent several years in the South.

He earned his B.S. in Telecommunications from the University of Kentucky, during which he worked at two design firms and did a stint as a freelancer before seeking out ZURB and our team of interaction designers.

I'm really looking forward to working with people who are at the top of their game and who have a unique outlook on the industry as a whole.
Connor Sears

Connor also possesses the appropriate level of nerdy-ness to compliment the ZURB team nicely. Among his nerd credentials are an excitement for new type faces, a love of Apple products, a need to "look under the hood" of every website he visits and his claim that he made the Kessel run in less than 12 parsecs.

He's only been in California for a couple of days, but as soon as he starts sightseeing, what he'd really like to see is the house from "Full House," but he'll settle for the Golden Gate Bridge.

Welcome to ZURB, Connor.

It's Official: Captchas Are Bad for Business

Fri, 07 Aug 2009 08:30:00 -0500

Nearly a year ago, we told you captchas had seemed to become a necessary evil for websites. Between the spam and the abuse, web forms just aren't secure, and it felt like the only way to combat it was with those nasty captchas.

Captchas have always felt like a cop-out. As a business, you're passing your own business problem onto users. Moreover, the way in which the problem is passed onto users is half-assed and can cause loads of confusion.

Fundamentally, that's just wrong.

About the Study

I hate to say I told you so—wait, no I don't—but, according to a recent study by SEOmoz, captchas could be costing you conversions. Here's how their case study broke down:

It was performed across 50 websites, each ranging from one to five years old.
The study was done over six months, splitting it evenly with captchas on for three and off for the other three.
Each form was used to collect common contact information (name, address, etc).
Every successful, failed, and spam form submission was recorded and tallied for the numbers you see in the study.

The Results Are In

The results, shown in the graph below, weren't that shocking to us considering we've all been in the same position with captchas before and had at least one failed attempt in our lifetimes. See for yourself.

Results of three months of testing with captchas on across fifty sites.

In the graph, blue shows successful conversions, green indicates a failed submission, and red shows spam submissions. At first glance, the results are striking, but note the scale and the y-axis—we start at 600.

Still, we're looking at 7.3% lost opportunity because of a single element on your page. And while some spam got through without the captcha, we can't help but wonder if a powerful spam filter like Akismet could help decrease those occurrences. We use it on our own blog here and have had wild success with it.

It's worth noting that in a similar situation, a single change to a web form button brought in an additional $300,000,000. What's this mean for us and captchas? Well, in other words, that 7.3% of failed conversions could be costing you thousands of lost conversions and who knows how much lost revenue.

So, What Now?

We had plenty of feedback in the comments of our last post. The consensus has been that we have captchas, and they keep out the spam, but they are really a pain for users and not the best solution—but what else do we have?

The best solutions so far has been using what's called a "honeypot," a form field hidden to users like you and I, but visible to the typical spam bot. They're called honeypots because, like bees to honey, spam bots flock to any form field. There are numerous variations out there, and the premise seems quite sound. But can we count on this holding up in the future?

Not likely. We're sad to say that spam is inevitably here to stay. However, designers, developers, and businesses can make huge differences by solving this problem in better ways that don't create bad experiences for users. The business reasons alone should make such solutions even more appealling.

Our suggestion? Take notice, don't (mis)place problems on your visitors, and don't forget to use design to creatively and effectively solve your business problems.

CSS Deconstruction: Atebits

Wed, 05 Aug 2009 23:11:00 -0500

We love CSS - kind of a lot. We love it so much that we write a lot about it — including super awesome buttons, inline form labels with pizazz, tricks to bring out depth in your design and more. Now we could be like a lot of sites and just point you to some cool CSS, gallery style...but at ZURB we go the extra mile.

In this article (with some help from Notable, our new website feedback tool) we're going to deconstruct some of the cooler elements of atebits.com, home of great software like Tweetie. We'll see what works, what's awesome about it, and how you can do it on your own site.

What Works

Atebits' website does some cutting edge things that really make the design pop, all with CSS. We'll use Notable here to highlight the Atebits homepage — just click through to see the full annotation:

Many of these elements only work in extremely modern browsers like Safari 4 and Firefox 3.5, but more people are using those every day. Bringing them into your designs now not only acclimates you to their use, but puts your site at the front line of web design. Trust us: it's a fun place to be. It doesn't just show that you know your stuff, it also tells your customers that you care about their experience with your site, and that part of your brand is being on top of your market.

App Icons that Demand Attention

When you hover on atebits app icons in Safari 4 you'll get to see a really cool effect: the icons get larger and rotate just a little. It's a nice touch and something you don't really expect to see on a web page.

This effect is achieved through a couple of new CSS attributes: @-webkit-transform and @-webkit-transition.

#products a img {
-webkit-transition: all 0.15s ease-out;
/* This property tells the browser that when a value changes (all values) to make that change over a 0.15 second window, and to ease-out the change */
}
#products a:hover img {
-webkit-transform: scale(1.05) rotate (-1deg);
/* This property applies two transformation to the element on hover: scale 1.05x and rotate 1 degree left */
}

It's not an overbearing effect but the wow factor is huge. We like it so much we did something similar on Twitgoo.

Buttons That Really Click

This one's subtle, but incredibly easy. Buttons on the atebits homepage have an active (`mousedown`) effect where the button actually seems to click down when you press it. The code is amazingly simple:

#home #products a.more:active {
height: 31px;
padding-bottom: 1px;
padding-top: 2px;
}

Atebits is simply manipulating the top and bottom padding so the text moves down a pixel when the user clicks. It's a nice effect, but it breaks the notion of a button — you don't click a button label, you click the entire button. An incredibly easy effect that we frequently use for buttons is this:

a.button:active {
position: relative;
top: 1px;
}

Text, with Depth

Text shadows can make text pop in subtle but awesome ways.

In Safari (and probably soon in Firefox 3.5) the Atebits site uses text shadows to give the text on the page depth — it either hovers off the page, or appears to be inset. This is all just a matter of where you put the shadow and what color the text is. For most of the text, Atebits uses this text-shadow property:

#home #products p {
color: #ccc;
text-shadow: #000 0px 1px 3px;
/* text-shadow takes 4 values: color, x-displacement, y-displacement and blur size. */
}

In order to achieve that sexy inset text effect in the footer, they use this:

#slogan {
color: #111;
text-shadow: #444 0px 1px 1px;
}

On Atebits it's a beautiful effect — subtle enough not to draw much attention, bold enough to provide great definition around the copy. However, we can do one better: using that syntax the effect won't work across different background colors. If the footer had a lighter background, or if a text-shadow needed to generally apply to text across different background then the text-shadow would look wrong. We can fix that with RGBa.

#home #products p {
color: #ccc;
text-shadow: rgba(0, 0, 0, 0.9) 0px 1px 1px;
/* RGBA is the same as an RGB color, but with an added opacity (alpha) channel.*/
}

Inset Rules Totally Rule

The inset feel of this HR adds some refined depth to the page.

The horizontal rules on atebits are, sadly, not horizontal rules at all, but a background image for the #slogan area. Creating a horizontal rule that replicates the depth of this style is easy to do in CSS as we covered in a recent CSS blog post:

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

HR elements accept borders just like any other element, and using different colors (or even better, RGBa) you can create inset HRs that feel more like page divisions than simple lines.

Atebits has a really gorgeous site (and their apps are nice looking, too) that uses some cool CSS tricks that are easy to implement and even improve on a little. Now get out there and spruce up your designs!

ZURBlog

Crazy Go Nuts JavaScript Released by Google

Van Halen, Marriage and Crucial Mistakes

Listen to John Marshall's Podcast

Subscribe:

Marry Someone Who Can Take Risk

Crucial Mistake

Three Rules for Every Product

Van Halen and Losing Early

More Info

Behind the Scenes: Building the New Visual Annotations

Creating an Overlay with Layers

Fun with border-image

More Behind the Scenes

Easily Turn Your Images Into Polaroids with CSS3

Starting with the Images

Using :after to Create Content

Randomly Rotate the Images

Final Touches

View the Demo

How to Create Simple and Effective Sub Navs with Definition Lists

What's a DL?

Creating the Sub Navigation

The HTML

The CSS

The Finished Demo

ZURBSoapbox: John Marshall of MarketMotive Joins Us October 16th

Lessons Learned: ClickTracks to MarketMotive

Where?

When?

Subscribe to Our Podcast!

Behind the Scenes: Redesigning Notable Annotations

First Steps: Defining the Problem

Framing the Solution

Fast Iteration to an Awesome Solution

Coming Up Next...

Lessons Learned from Technorati to OffBeat Guides: A ZURBsoapbox Podcast with Dave Sifry

Listen to Dave Sifry's podcast

Subscribe:

Use data, not your own ego

Understand yourbusiness model

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

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

Be of service

Measure your virality

More Info

ZURBSoapbox: Dave Sifry of Technorati/OffBeat Guides Joins Us October 2nd

Lessons Learned: Technorati to OffBeat Guides

Where?

When?

Subscribe to Our Podcast!

Notable is Live, Get the iPhone app

What does this mean for me?

Do you have an iPhone app for Notable?

I heard I can win an iPod nano by using Notable?

Why is this an important event for ZURBians?

ZURBians Join the Mix

Yeah, it's Genetic

It's One More Step Toward World Domination

Designers Can Be Such Girls

Wait, Let Me Get My Business Card

Back to Basics with Interaction Design

Don't Forget That Your Users are Human

A Better Approach

Don't Jump Straight Into Photoshop

A Better Approach

Design Sites That are Both Necessary and Useful

A Better Approach

Got it. Now What?

New Nerd Joins ZURB: Welcome Connor Sears

It's Official: Captchas Are Bad for Business

About the Study

The Results Are In

So, What Now?

CSS Deconstruction: Atebits

What Works

App Icons that Demand Attention

Buttons That Really Click

Text, with Depth

Inset Rules Totally Rule

Van Halen and
Losing Early

Understand your
business model

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

Lessons Learned: Technorati to
OffBeat Guides