I made a thing. The idea is to have a super-quick, nearly mindless way to get a critique-based conversation thread going based on any URL. See:
http://critiquethesite.com/css-tricks.com (it works best with big wide monitors, since there is the fixed left comment area, then the entire site to the right)
You could even use a path to an image file for a unique critique on that.
If you want to get notifications for any new comments on your specific URL, just be the first to comment at it and use the “follow” featured when commenting.
This is intentionally super simple. It’s just some URL parsing PHP, an iframe, and Echo. Some iframe-busting sites (e.g. Twitter) won’t work. You can’t moderate your own comments. People can’t post anonymously though, so I think rudeness will be kept down. Don’t mistake a harsh critique for rudeness though, critique by nature is pointing out flaws (to be helpful).
Someday I’d love to build in some drawing and annotation tools directly over the iframe for making context-specific notes.
I’m going to throw out there that this is “Beta”. So maybe someday the comment system will change and comments made now will be lost. This isn’t meant for long term storage like that anyway. The idea is quick feedback.
If you find any bugs/problems, or have any other kind of feedback, you can leave it in the comments here. Thanks!
Quick heads up re: spelling in the title!
really helpful. thanks
Maybe a collapse button on the frame so you can make it smaller and see more of the site?
really outstanding collection..amazing list..keep it up!
This is great! And kudos for making it so simple…
I am not getting what you want to say?
Can you be little more about it??
Reminds me of Google Sidewiki. If you’re not familiar with it, check it out, might get some ideas on future enhancements.
What an awesome little app and idea! I can see a lot of people making use of it.
I think i found a bug, if you try to link to a photo, and it has an uppercase name it will try to make it lowercase, therefore rendering a 404 in the iframe
{like}
Great skills, a bit like something i made last year whilst at an agency. It was made to improve client demos instead of having red marker pen all over print-outs of concepts being shown to clients.
http://pixelcoder.co.uk/delete/index.html
Whatever you do, don’t click the Critique image more than once, it will open multiple panels of the thing.
I would like it better if you could slide it in or out with the click of a button, and bring the main site back to the center.
Love the slider idea.
really outstanding collection..amazing list..keep it up!
lol what list?
sorry, I’m so confused
cool concept chris, well done.
I know this is nit-picky, but I feel what could have really improved the user experiece would be to ditch the double scroll bar on the right and had one purely for the comments on the left and one for the website on the right.
the left column is a variable height, but with a small amount of JS you could easily max it out at the window height.
food for thought.
Agreed.
The concept is great, and I can see myself using it but the double scrollbar on the right is confusing and an eye-sore.
I understand this is an early release so please take this flaw as constructive criticism.
Like Daniel mentioned I think a scrollbar for the comments and a separate one for the actual iFrame image would be a nice way of handling it.
Overall, I like it a lot!
Very cool idea. Looks extremely similar to http://covie.ws. Admittedly yours is easier to use. The login system is great.
Also is would be cool to have a sort of random button that brought you to a random page that already had comments on it. idk
yea very similar… but i like yours too
：）不错。。。
Great idea Chris, well implemented.
The first thing to jump to mind is, as other people have asked, ‘how do people know what sites are being critiqued’. I understand your intentions are more for an informal “tell your friends/clients to check it out” approach, but I think you could be missing a trick.
You have the NOMNOM dog at the root of the site – why not build it up so you list recently critiqued sites/popular sites (you could include a rating system for each site)/suggested for critique (developers could put their site up and ask for advice). This has the scope for a larger scale community project.
You’ve probably had these thoughts already, but just a bit of content at the root could expand the useful-ness of the tool no end.
Keep up the impressive work – how you find the time I dont know!
we started zpeech.com with the same idea in 2007. And sold it in 2008 because it didn´t attrack enough interest. good luck ;)
This is a great idea.
Would be great if you created a little icon for it so that owners of the sites could put the icon on their site and have it link to their site with the critique side bar so people can see what other are saying about the site, as at the moment how would people know about it unless they came here.
Also some people are not so lucky in having large screen (thankfully not me!) but I had a look at it on my smaller screen and I have sideways scrolling, so maybe a tab that will hide/show the critique bar would be useful. Also having the critique scroll bar next to the column rather than doubled up next to the browser scroll bar.
Also as Laurie has mentioned, if critique had its own functional site with top rated sites that would be pretty cool, maybe as well as the comment rating you could have a 5 star system in place as well :)
Really great idea though!
For the annotations you could use this http://jquery-notes.rydygel.de/index.php, this is for images but I think that could work for the “live” site.
Nice idea.
this is cool post…like the idea
You had me at ‘I made a thing’ ! :)
Chris awesome idea! I love this.
Great idea Chris. Though the other feedback sites are nicer and full of features. This critique site is all the feedback you really need to get a feel for a design or page.
Thanks!
I’ve never seen anything like this before, a very cool idea though :)
I don’t see anyone else having trouble logging in…
I’m trying to login with my twitter account. I’m directed to the twitter login, log in, and I’m redirected back to critiquethesite. However, the “Connect to twitter” dialog box is still there, and I still can’t submit a critique.
If I try to log in again, it doesn’t ask for my password (I’m already logged in). I’m just asked to confirm that I want to allow js-kit to access my account, then I’m redirected back – right back where I started.
…?
I logged in through twitter and worked fine :/
nice little pice of fine webwork and innovative too.
@chriscoyier
Do you ever sleep, man?
Hi Chris,
Thanks for another great article as always!
Cheers,
Jay.
Hey Chris! LOVE the idea. I played around with it a little and the only thing I didn’t like was once I click on someone’s post to see their work, there’s no link back to the homepage. Or if there was I couldn’t find it. I think this is something the web design community can really use though!
Have you thought about making this as a Javascript bookmark that you can overlay over any website you are currently viewing?
That would rock, and its easily done.
nice and neat! but what about facebook and twitter…?
What about them?
it seems like twitter and facebook use some kind of iframe blocker…you cant critique them..
THANK you, everyone! Tons of good ideas here. I think I’ll be working on:
– Making the comments area collapsible to the left
– Deal with two scrollbar issue (have comments scroll and have iframe be the size of current browser window)
– Darn it, there was a couple others I thought were a good idea, they must be someplace else. I’ll update this when I find them.
Long term:
– Bookmarklet to open it as an overlay on any site
– Drawing/overlay tools
The bookmarklet would be sweet.
If you reviewed the site through bookmarklet, it could auto tweet a link to the ‘Critique The Site’ site page with shortened URL.
And a ‘Recently Added’ or ‘Critiqued’ link. Everyone loves to get in on what’s hot and new.
Great concept, once the critique area is collapsible I might try this with clients. Or spam designers until they critique my sites :P
Sweet tool, dude.
Some suggestions:
1. Make the home page a list of sites that want critiquing
2. Make the panel collapsible
3. Make the logo link back to the home page.
Just came across this, looks to have very similar functionality to yours…
http://covie.ws/
Thought you may be interested…
oh, and they have it as a bookmarklet, just as i suggested :)
Nice app.. but you could increase the interface a lot! As someone commented earlier, you could include a collapse button so that the viewer can see more of the site and whats with the back ground image?! lol ( No offense meant, different people have different tastes :P )
Great idea!! I think to improve the usability you could use a jQuery sliding panel so that users with smaller monitors can view the site full screen if they are’nt using the comment area.
Thanks for sharing.