The ZURBlog is where we discuss interaction design and strategy.

We strive to make it as easy as possible for our users to provide meaningful feedback. We listen and learn from our users everyday. The biggest pain point reported by Notablians (you, our users) is the complexity and difficulty of sharing a post. We'd like to let you know - we heard you! We're releasing a number of updates today to make it easier for all of you to share your posts! Here are the specific pain points and our solutions for them.

Is it really easier to share posts with others now?

Yes it is. It's about as simple as it can get now. There are two things to keep in mind before trying to share a post:

• Posts are not shared by default
• Posts start as drafts and then are shared after you add your feedback and save them

Want to know the quickest way to share a post? Easy!

1. Capture





2. Click Share Now in top right

3. Add people through the modal, enter message and click "Share"

Did you have an old draft? Here is how to share that post:

1. Click on Feedback in top left



2. Select the old draft post you want and click the share button





3. Follow the directions to share above

Can I just share a post with everyone on my team?

Yes its easy!!! It's really easy to share with everyone on your team/account. Click Share as shown in directions above and simply click Select All.

What if I want to share feedback with a specific groups of people so others can't see?

Sure thing! You can use Workspaces to share privately with specific groups of people just like you could before, but we think you'll find it's easier to understand and use now. For those with small teams you're no longer required to save feedback in a workspace before sharing. Just save it to your account and click 'Share' and bam!

There are few things to keep in mind if you'd like to use workspaces:

• A workspace is simply another way to organize your stuff just like a folder
• You can share feedback with a team of people in a workspace. This lets you keep your feedback private from people on the main account or in other workspaces."

To share feedback with a specific group of people:

1. After you click the Share button on the post you'll need to select the workspace you want to share in





2. Make sure you double check the people you're sharing with before you share

This is a quick overview of the updates to Notable. If you have questions or comments please don't hesitate to use Notable Forum or email us at support@notableapp.com

P.S. The batch uploader will be released VERY soon!

We're pleased to announce the release of our new SEO feature in Notable which allows your team to quickly and easily provide feedback on website SEO data.

Creating an optimized site is a painful process for most web teams. In my previous gigs it went something like this:

1. Open up the source code for the page and look through the keywords, title, description, and other meta data of the site.
2. After coming up with changes for these elements, construct an email with all the changes and send it to a product manager and founder.
3. They would critique and challenge my suggestions. We would iterate a few times over email which took a long time to get consensus from everyone.
4. Confusion would happen. Was it a new title or description the person is giving feedback on? What do they want me to do? The endlessly scrollable threads email got very confusing.

I used to dread improving the SEO data for our site. When I started at ZURB a few months back and was introduced to Notable SEO feature (which was still in development) I was instantly pumped to start using it. “Man, isn’t this an easy way to give feedback on SEO data!” I thought. So here we are – finally went public with it.

What is Notable SEO feature?

The Notable SEO tool is a new feature which lets a manager or SEO expert provide feedback on SEO data of a website. For example: I can provide feedback on how to optimize the Notable website to Jeremy (product manager) or Matt (engineer) and they can see exactly which SEO element needs to be changed.

Each piece of feedback is tied to specific piece of data on the Notable SEO report. No emails, no long meetings, no spending tons of time on marking things up in Photoshop, I just capture our site with Notable and show Jeremy and Matt exactly what needs to change in our website data to improve our SEO.

If Jeremy has a clarification on the feedback he received he would point to that specific feedback and add a comment on it. I would get an email notification and would respond to his directed feedback.

How do I use the feature?

After you capture a post you’ll click on Add Notes as you usually do. Woila! You’ll see the SEO tab right there. Click on SEO. You can annotate this SEO report the same way as you annotate Visual, Code and Copy. Add your annotations to the report. You can then click the new Share button right near the Save button to share your feedback on the SEO. That’s all. It’s that simple.

What data in the Notable SEO tool can I provide feedback on?

You can annotate all the data in the Notable SEO report. The report captures all the SEO data for the website. Anything from top keywords with the count of appearance to meta data tags for Title, URL, Keywords, Description as well as body content H1, H2, H3, H4 headings and the inbound and outbound links. Take a look here at a sample SEO notable report.

So what do you think?

The SEO feature helps us internally to get stuff done a great deal. We decided to share it with the world and we hope it helps all of you as well. We love to hear from our users. We’re curious to hear about your thoughts about Notable SEO. Find Notable SEO useful? Want improvements? Please leave a comment on this blog post or add a forum question.

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

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

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

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

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

Fun with border-image

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

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

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

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

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

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

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

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

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

More Behind the Scenes

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

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

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!

ZURB went live with the release of Notable about two weeks ago and we simply could not have hoped for a better response from folks all around the world. We have received a tremendous stream of "love" for the product from a mass of online blogs, publications and excited users all over Twitter.

TechCrunch was the first to cover our tool in the early hours of the morning.

MacWorld was next in line to cover the tool and the iPhone app.

PCWorld followed up with an excited review of Notable.

The press picked up the news quickly — it was great to see Notable all over the web in publications like:

Cameron Moll recognized Notable on his blog's hot links. Cameron is one of the industry's most balanced new media designers, and his work has been recognized by National Public Radio, Communication Arts, and Veer. Read more about Cameron »

After the fans added us on TweetMeme the Twitter traffic exploded as we tried to keep up with all the tweets coming in. We tried to keep up with all the tweets coming in, but the response was overwhelming. Here are a few of them:

You can see a more complete list of tweets here »

We are truly happy to hear all the excitement around Notable! Please comment on this blog post and let us know your thoughts about Notable. We encourage feature requests, questions, and comments. Thank you and keep in touch with us @notableapp on Twitter.