Andrew Wilkinson's Zappos "Redesign" which almost consisted of just putting gradients and drop shadows all over the page would definitely be easy with this project too!
I have totally hypothetical (but related) question, though: to what extent does a site's CSS need to be changed, for that CSS to be one's own? I'm just not sure to what legal limits people can use your site to save CSS code from other websites that aren't their own? Again, I have no expertise in this particular question, but maybe you want to include a small disclaimer...?
Good idea on the _appends_ - who wants to save the entire code for each iteration, rather than just the changes? (hitting myself over head) haha About Wordpress: their explanation seems more marketing-related rather than practical: http://codex.wordpress.org/License Maybe going GPL reflects a core change in their business model, now that they're hitched with all the Windows Live blogs?
The missing characters are because the of unicode decoding in Python. If the content-encoding if not found in the html headers it will replace all unknown characters. I'm working on improving that.
The // is something I can fix right now.
[edit] the // link bug is fixed, and it also allows https:// links (which i noticed that it didn't work because i pasted in your urls)
You'll have to do a blog post on how you pulled it off some time.
Design feedback is going to be so friggin' easy from now on. If you ever begin to lose money on this, I'd love to buy a premium account or look into a subscription model.
(Regardless, you should look into a premium user program. Some ideas: prioritized bandwidth, custom shorturl for credit(?) such as /<user>/<shorturl>, a profile to save a history and metrics similar to URL-shortening services. No ads.
It'd seriously be stupid not to monetize this; I can't emphasize how much I love your concept.)
You could also reach out to companies looking for redesigns (or -aligns) and find a way to match them with a designer.
Remember to put up a link on Forrst. Heck, you could turn this into a design community by your own, where people share redesigns of sites - and you could implement a favourite and upvote system to reward the best ones. Showing users how shitty airline websites could look - not just as Adobe mock-ups - is very powerful. Set up some basic Django, include some thumbnails of each site link and implement a basic upvote and favourite system - boom, Dribbble for CSS. Scale later. Basically imitate all the monetization Kyle has done for Forrst.
As someone gravitating between college and no job, finding a way to prove my skills publicly is very difficult. This service would be great to leverage and would make it very easy to accomplish this feat. A premium user system could also allow people to include a pretty embed csspivot portfolio.
And then there's the whole let-me-show-you-what-I-can-do-for-you-application discussion[1].
If I were anyone on HN, I'd pitch him an offer for a banner on the site, because there's a very good chance that this blows up and goes viral. If I had a site or service to plug, I'd already have done this. Here is his Twitter profile, the only contact information I can see: http://twitter.com/metachris.
Wow thanks for the great response! A lot to think about -- I'd definitely love to do something more with it! My contact is chris (at) metachris.org if anybody wants to get in touch.
[edit] kmfrk: just wanted to send you a mail, but you haven't got a contact in your profile
Good job.
I was thinking this money about something that migth interest you.
Here is the short story:
Sometime at HN it is penible to read all those hundred comments. There are few possible improvments:
- collapsible threads
How about a chrome plugin that allow one to add css to any website?
I know it look like a hackers only tool but how freakibg cool this could be.
Show me all the existing CSS (with syntax-highlighting) in an editor in a sidebar. Let me modify that or add to it, then share the result. Also, highlight new or modified code somehow. Basically, a save-able, shareable, Firebug editor with diffs.
I like the simplicity though. No need to make it busy and bloated. Most browsers already have a Firebug or something on them already (or you can add them yourself). No reason to have two.
I agree that there isn't a need to reinvent the wheel, but using it I find myself wanting some firebug-esq capabilities. I ended up just firing up inspector in Chrome, but there may be an opportunity here.
Or integrating something like that could ruin the simplicity of the app.
This is pretty creative. Question about the implementation: are you just using urllib to read the contents of the provided URL, then overriding the page's CSS with the user provided CSS?
Some kind of inspector would be nice, yeah. The downside is that it adds quite some javascript overhead. I don't know if it's possible to just integrate with Firebug or Chrome inspector.
This is brilliant,im constantly playing around with ideas using Firebug and then having to take a screenshot and mailing it,now its much simpler. Plus having the site with modified css open in the browser window makes it so much more intuitive for the viewer as opposed to an image. brilliant!
I'll put up a public demo soon. My implementation uses Node, and pulls the page html and css, then lets you edit it. If I can make a couple of unsolicited suggestions:
Right now when you click on a button or a link, it will redirect you to another website. Add a click handler for all elements and then event.preventDefault() so that the link doesn't take you off the page.
And second, add a css "outline" style on hover so that the user can see what they're clicking on.
Sub-suggestion, once you have a little time: add a radio button group at the top to group alternate designs for the same site - the first one being the non-changed one.
Nice project - I made something like this 10 years ago but with editing the HTML that was pulled in instead of CSS. Brings back memories :)
Only note; perhaps you should block out CSS expressions, going to http://www.csspivot.com/1HDq6 in IE will not be a pleasant experience at the moment...
* Load each website in a frame with a 50px bar at the top or bottom with your branding and more options. This is where you'll monetize. I know you're focused on usability right now, but if it goes viral you need it to pay you or it will go away.
* Don't bother with premium features until you have a working viral loop providing consistent growth.
Thank you! I'm definitely thinking about how to improve the app, added sharing options for fb and twitter, and now also switched over to javascript/iframes (which has the advantage of a 100% accurate display of the website and not needing to reload the whole site for a preview).
97 comments
[ 3.1 ms ] story [ 141 ms ] threadLightning Edit: and a friend IMs me with questions about CSS. I'm going in.
Here's the obligatory HN link: http://www.csspivot.com/CH7HJ (just a green background)
http://www.dustincurtis.com/dear_american_airlines_redesign....
http://www.metalabdesign.com/zappos/
In general, though, I thought of the same thing, and it might lead to an increased trend in these unsolicited redesigns.
That's a good question, though. I bet the WordPress GPL decision might have some relevance to it.
Super minor nits:
Missing characters https://skitch.com/rocktronica/rs5nx/csspivot1
External scripts/CSS brought in with "//" falsely prepended with URL https://skitch.com/rocktronica/rs5nk/csspivot2
The missing characters are because the of unicode decoding in Python. If the content-encoding if not found in the html headers it will replace all unknown characters. I'm working on improving that.
The // is something I can fix right now.
[edit] the // link bug is fixed, and it also allows https:// links (which i noticed that it didn't work because i pasted in your urls)
I'm not sure if this helps, but seems like it would.
It will make my part-time hobby of sending people completely unsolicited design suggestions even easier :)
Here's one for Github :) http://www.csspivot.com/8J5J4
You'll have to do a blog post on how you pulled it off some time.
Design feedback is going to be so friggin' easy from now on. If you ever begin to lose money on this, I'd love to buy a premium account or look into a subscription model.
(Regardless, you should look into a premium user program. Some ideas: prioritized bandwidth, custom shorturl for credit(?) such as /<user>/<shorturl>, a profile to save a history and metrics similar to URL-shortening services. No ads.
It'd seriously be stupid not to monetize this; I can't emphasize how much I love your concept.)
You could also reach out to companies looking for redesigns (or -aligns) and find a way to match them with a designer.
Remember to put up a link on Forrst. Heck, you could turn this into a design community by your own, where people share redesigns of sites - and you could implement a favourite and upvote system to reward the best ones. Showing users how shitty airline websites could look - not just as Adobe mock-ups - is very powerful. Set up some basic Django, include some thumbnails of each site link and implement a basic upvote and favourite system - boom, Dribbble for CSS. Scale later. Basically imitate all the monetization Kyle has done for Forrst.
As someone gravitating between college and no job, finding a way to prove my skills publicly is very difficult. This service would be great to leverage and would make it very easy to accomplish this feat. A premium user system could also allow people to include a pretty embed csspivot portfolio.
And then there's the whole let-me-show-you-what-I-can-do-for-you-application discussion[1].
If I were anyone on HN, I'd pitch him an offer for a banner on the site, because there's a very good chance that this blows up and goes viral. If I had a site or service to plug, I'd already have done this. Here is his Twitter profile, the only contact information I can see: http://twitter.com/metachris.
[1]: http://news.ycombinator.com/item?id=2361034
[edit] kmfrk: just wanted to send you a mail, but you haven't got a contact in your profile
How about a chrome plugin that allow one to add css to any website? I know it look like a hackers only tool but how freakibg cool this could be.
1) inject the style tags w/ javascript and it will refresh the CSS content without doing a page reload. We do this on our editors and works well:)
2) Make the text box more coder friendly (allow indents, for one).
Great idea!
Show me all the existing CSS (with syntax-highlighting) in an editor in a sidebar. Let me modify that or add to it, then share the result. Also, highlight new or modified code somehow. Basically, a save-able, shareable, Firebug editor with diffs.
Or integrating something like that could ruin the simplicity of the app.
Still, I like this a ton.
Or you can browse themes on http://stylebot.me/.
It is so simple too. I don't need highlighting or anything. Don't make it bloat. Keep the simplicity. This is great.
I'll put up a public demo soon. My implementation uses Node, and pulls the page html and css, then lets you edit it. If I can make a couple of unsolicited suggestions:
Right now when you click on a button or a link, it will redirect you to another website. Add a click handler for all elements and then event.preventDefault() so that the link doesn't take you off the page. And second, add a css "outline" style on hover so that the user can see what they're clicking on.
Great work!
====== ( http://www.fullmalls.com )====
Air jordan(1-24)shoes $30
Handbags(Coach l v f e n d i d&g) $35
Tshirts (Polo ,ed hardy,lacoste) $15
Jean(True Religion,ed hardy,coogi) $30
Sunglasses(Oakey,coach,gucci,A r m a i n i) $15
New era cap $12
Bikini (Ed hardy,polo) $20
accept paypal and free shipping
====== ( http://www.fullmalls.com )====
====== ( http://www.fullmalls.com )====
====== ( http://www.fullmalls.com )====
====== ( http://www.fullmalls.com )====
====== ( http://www.fullmalls.com )====
====== ( http://www.fullmalls.com )====
====== ( http://www.fullmalls.com )====
====== ( http://www.fullmalls.com )====
xray or an even simpler implementation being included would make this service even greater.
Only note; perhaps you should block out CSS expressions, going to http://www.csspivot.com/1HDq6 in IE will not be a pleasant experience at the moment...
https://chrome.google.com/extensions/detail/oiaejidbmkiecgbj...
See how they work here: https://optimizely.appspot.com/edit#url=news.ycombinator.com
* Add a way to delete previews you've made.
* Add more viral hooks. FB wall post, email, etc.
* Do the same concept but with javascript.
* Load each website in a frame with a 50px bar at the top or bottom with your branding and more options. This is where you'll monetize. I know you're focused on usability right now, but if it goes viral you need it to pay you or it will go away.
* Don't bother with premium features until you have a working viral loop providing consistent growth.
Best of luck!!