A little over a year ago we wrote blog post outlining 5 techniques to help people critique a website in less then 30 seconds. The post received enormous traction and drew a lot of attention. What we found out is that people are hungry to learn how to quickly critique a website. Today, we're excited to announce of our newest app, Spur, which helps people do just that — critique a website in less then 30 seconds.
What is Spur?
Spur is a webapp that teaches and helps people critique a webpage in 30 seconds through hands on examples, using your own website. It lets you apply these very techniques to any mobile or web screenshot.
How to Critique a Webpage
Just type in a URL and press Enter. You can then use one of Spur's seven tools to gain a new perspective on your design and see things you might have missed. Here is an example of two of the tools:
Behind the Scenes: Using Backbone, CSS3 and JQuery
As you click through Spur, you'll notice that each page slides in with a transition. This stateless effect is accomplished using backbone.js and creates a smooth experience throughout the app. If you play with the intersection tool, you'll see the result of how we used the jQuery UI Widget Factory to create the grid lines.
To create the awesome visual layer for Spur, we used a few CSS3 tricks. All of the shadows you see in the app are created using the css property, text-shadow. Even though the background pattern is subtle, we used the ability for newer browsers to include multiple images. Older browser will only see the last background listed. The shorthand for that is:
body { background: url("path/to/image.png") 0 0 repeat, url("path/to/image2.png") 0 0 repeat #e8ecea; }
What are you waiting for? Give it a spin.
Spur it on