4 ms·

Stop SOPA site template

178 points by cjauvin 15y ago

clone1018 15y ago
Awesome work, this is amazing.
insickness 15y ago
It's cool but I feel like the gymnastics takes away a bit from the message. I prefer something plain, simple and not entertaining. Give them the message and tell them to call their legislator. The point to me is that the site is down, not that the site is interesting.
nazar 15y ago
Very genius work!
mcantelon 15y ago
Nicely done... I just updated my Drupal blackout module to use it. https://github.com/mcantelon/drupal-sopa-blackout https://github.com/mcantelon/drupal-sopa-blackout
kittxkat 15y ago
Wow, the effect is AMAZING, especially the dynamic shadow on "STOP SOPA". Nice work!
54mf 15y ago
It's nifty, but difficult to use, to read the actual "meat" of the page. Perhaps the spotlight should be a bit larger? And this is a total picked nit, but the kerning of SOP A is killing me. Wrap that P in a <span> and letter-spacing it, pleeeease.
deleted 15y ago
[deleted]
mrsebastian 15y ago
I think you should probably shy away from wording like 'vast majority of Americans' -- that might be consensus on the interwebs, but it's still a bit hyperbolic for something this serious. Very nice bit of code, though; especially the thrown shadow :)
someone13 15y ago
Absolutely stunning effect - nicely done. Just a small report - using Chrome 16.0.912.75 on Windows 7, waving the mouse around absolutely kills my CPU - the browser process uses 75% of one core.
- 54mf 15y ago
  Seconded, running it in Chrome on my 2011 Macbook Air is laggy.
  - Cushman 15y ago
    To dissent, Chrome 16.0.912.75 on my 2011 MBA is perfectly smooth, CPU under 30%.
hazelnut 15y ago
don't get me wrong. the idea is great, the effect is awesome. but we have to reach as many people as possible. i think a plain site with the message would be more effective.
petenixey 15y ago
This is a really nice design but it's missing an important opportunity to convert what will initially be shock and irritation into sympathy and action. When sites go dark, what remains will be the difference between the country getting behind the internet companies and hating them for causing disruption. The blackout page needs to do three things: 1) making people understand the SOPA proponents made the site go dark (and not Reddit etc.) 2) make people understand just one thing about why SOPA is dangerous 3) make people take some form of action to help prevent SOPA (sign a petition etc.) It's tough but it also has to do all of this in about 20s while people landing on it reel from the shock that Reddit / Twitter / Tumblr etc. have gone.
- jjcm 15y ago
  We tried to do that with http://sopablackout.org http://sopablackout.org. Granted, this drop shadow implementation will get people's attention more, but we wanted to focus on allowing people to learn why the site is blocked.
  - jbhelms 15y ago
    I think this is the method I plan on using and offering to my customers. It will get the point across and still allow them to function.
    - micro-ram 15y ago
      So I don't have to change the sites manually I check the date. Here is a snippet of php code to check the date and only include your .js on Jan 18, 2012: <? if(date("Ymd")=="20120118") echo '<script type="text/javascript" src="hxxp//js.sopablackout.org/sopablackout.js"></script>'; ?> Note: replace hxxp with http.
      - nodata 15y ago
        Needs timezone support.
    - nitrogen 15y ago
rufibarbatus 15y ago
As user of NoScript [1] (and its Chromium sidekick, ScriptNo), I'm often let down by pages posted to hacker news that have poor or no graceful degradation [2], and that often makes me feel like writing a comment complaining about it (which I haven't, won't, at least as long as I don't start offering quick fixes along with the complaint). It's really refreshing to see a page of such a design complexity having given thought to scenarios where javascript might not be available. Kudos! (I actually have a hunch this default state was crafted with mobile browsers in mind — but it was nonetheless a thoughtful thing.) [1] http://noscript.net/ http://noscript.net/ [2] http://www.rdrop.com/~half/Creations/Writings/Web.patterns/graceful.failure.html http://www.rdrop.com/~half/Creations/Writings/Web.patterns/g...
- TomGullen 15y ago
  Why do you use noscript to block JS? I've never understood. The inconvenience of dysfunctional sites surely outweighs the one in a million chance you will have your login to HackerNews stolen, or something else that's more of a nuisance than an actual danger.
  - rufibarbatus 15y ago
    I'm not a security guy. I don't know what reasons other people might have. I actually started it as an experiment, and grew fond of it for no specific laid-out reason. Actually seeing what trackers and other such spyware are embedded in most pages these days is interesting, but I could live without the granular control. I think what I'm most interested in is just really seeing how different pages will break (or degrade gracefully) confronted with the missing functionality of javascript. If you haven't yet, I suggest you give these add-ons a ride for, say, a week, if anything for the sake of learning.
    - there 15y ago
      i think you may be better suited with an add-on like ghostery which specifically blocks tracking scripts, rather than cutting off javascript completely.
  - 15y ago
Freaky 15y ago
Slow and barely usable in stock Android Gingerbread and Honeycomb browsers, as well as Firefox mobile. Massive clipping errors in stock ICS browser render it unusable. Opera Mobile manages about the best, ignoring the lighting outright. Hover effects really don't translate well to touchscreens.
- joejohnson 15y ago
  It looks great on my iPhone
tlrobinson 15y ago
Neat effect, but please make the spotlight slightly bigger so I don't have to move my mouse around as I read the text.
kazoolist 15y ago
FWIW, this page does not render at all on my Galaxy Nexus. Comes up as a black box in a grey box in the corner of the screen. Does it look OK on other mobile browsers? Seems like mobile browser support would be important for this "template"?
john-n 15y ago
Nice effect, may want to use your no-script version in IE, as it appears quite broken in IE 9.
jiggy2011 15y ago
Very clever, but that was horribly slow for me and as soon as I moved the mouse on the screen the spotlight moved so I was no longer able to read the text. Let's just keep this simple, do away with the mousemove following spotlight altogether, if you want to make the page more interesting then embed a youtube video explaining the issue. The text is kind of hard to read too. Personally I would just do a white background with dark text and possibly an amusing cartoon image or something to visually illustrate the concept of a blackout.

178 points by cjauvin 15y ago

Awesome work, this is amazing.

It's cool but I feel like the gymnastics takes away a bit from the message. I prefer something plain, simple and not entertaining. Give them the message and tell them to call their legislator. The point to me is that the site is down, not that the site is interesting.

nazar 15y ago

Very genius work!

mcantelon 15y ago

Nicely done... I just updated my Drupal blackout module to use it. https://github.com/mcantelon/drupal-sopa-blackout https://github.com/mcantelon/drupal-sopa-blackout

kittxkat 15y ago

Wow, the effect is AMAZING, especially the dynamic shadow on "STOP SOPA". Nice work!

54mf 15y ago

It's nifty, but difficult to use, to read the actual "meat" of the page. Perhaps the spotlight should be a bit larger? And this is a total picked nit, but the kerning of SOP A is killing me. Wrap that P in a <span> and letter-spacing it, pleeeease.

deleted 15y ago

[deleted]

mrsebastian 15y ago

I think you should probably shy away from wording like 'vast majority of Americans' -- that might be consensus on the interwebs, but it's still a bit hyperbolic for something this serious. Very nice bit of code, though; especially the thrown shadow :)

someone13 15y ago

Absolutely stunning effect - nicely done. Just a small report - using Chrome 16.0.912.75 on Windows 7, waving the mouse around absolutely kills my CPU - the browser process uses 75% of one core.

54mf 15y ago
Seconded, running it in Chrome on my 2011 Macbook Air is laggy.
- Cushman 15y ago
  To dissent, Chrome 16.0.912.75 on my 2011 MBA is perfectly smooth, CPU under 30%.

hazelnut 15y ago

don't get me wrong. the idea is great, the effect is awesome. but we have to reach as many people as possible. i think a plain site with the message would be more effective.

petenixey 15y ago

This is a really nice design but it's missing an important opportunity to convert what will initially be shock and irritation into sympathy and action. When sites go dark, what remains will be the difference between the country getting behind the internet companies and hating them for causing disruption. The blackout page needs to do three things: 1) making people understand the SOPA proponents made the site go dark (and not Reddit etc.) 2) make people understand just one thing about why SOPA is dangerous 3) make people take some form of action to help prevent SOPA (sign a petition etc.) It's tough but it also has to do all of this in about 20s while people landing on it reel from the shock that Reddit / Twitter / Tumblr etc. have gone.

jjcm 15y ago
We tried to do that with http://sopablackout.org http://sopablackout.org. Granted, this drop shadow implementation will get people's attention more, but we wanted to focus on allowing people to learn why the site is blocked.
- jbhelms 15y ago
  I think this is the method I plan on using and offering to my customers. It will get the point across and still allow them to function.
  - micro-ram 15y ago
    So I don't have to change the sites manually I check the date. Here is a snippet of php code to check the date and only include your .js on Jan 18, 2012: <? if(date("Ymd")=="20120118") echo '<script type="text/javascript" src="hxxp//js.sopablackout.org/sopablackout.js"></script>'; ?> Note: replace hxxp with http.
    - nodata 15y ago
      Needs timezone support.
  - nitrogen 15y ago

rufibarbatus 15y ago

As user of NoScript [1] (and its Chromium sidekick, ScriptNo), I'm often let down by pages posted to hacker news that have poor or no graceful degradation [2], and that often makes me feel like writing a comment complaining about it (which I haven't, won't, at least as long as I don't start offering quick fixes along with the complaint). It's really refreshing to see a page of such a design complexity having given thought to scenarios where javascript might not be available. Kudos! (I actually have a hunch this default state was crafted with mobile browsers in mind — but it was nonetheless a thoughtful thing.) [1] http://noscript.net/ http://noscript.net/ [2] http://www.rdrop.com/~half/Creations/Writings/Web.patterns/graceful.failure.html http://www.rdrop.com/~half/Creations/Writings/Web.patterns/g...

TomGullen 15y ago
Why do you use noscript to block JS? I've never understood. The inconvenience of dysfunctional sites surely outweighs the one in a million chance you will have your login to HackerNews stolen, or something else that's more of a nuisance than an actual danger.
- rufibarbatus 15y ago
  I'm not a security guy. I don't know what reasons other people might have. I actually started it as an experiment, and grew fond of it for no specific laid-out reason. Actually seeing what trackers and other such spyware are embedded in most pages these days is interesting, but I could live without the granular control. I think what I'm most interested in is just really seeing how different pages will break (or degrade gracefully) confronted with the missing functionality of javascript. If you haven't yet, I suggest you give these add-ons a ride for, say, a week, if anything for the sake of learning.
  - there 15y ago
    i think you may be better suited with an add-on like ghostery which specifically blocks tracking scripts, rather than cutting off javascript completely.
- 15y ago

Freaky 15y ago

Slow and barely usable in stock Android Gingerbread and Honeycomb browsers, as well as Firefox mobile. Massive clipping errors in stock ICS browser render it unusable. Opera Mobile manages about the best, ignoring the lighting outright. Hover effects really don't translate well to touchscreens.

joejohnson 15y ago
It looks great on my iPhone

tlrobinson 15y ago

Neat effect, but please make the spotlight slightly bigger so I don't have to move my mouse around as I read the text.

kazoolist 15y ago

FWIW, this page does not render at all on my Galaxy Nexus. Comes up as a black box in a grey box in the corner of the screen. Does it look OK on other mobile browsers? Seems like mobile browser support would be important for this "template"?

john-n 15y ago

Nice effect, may want to use your no-script version in IE, as it appears quite broken in IE 9.

jiggy2011 15y ago

Very clever, but that was horribly slow for me and as soon as I moved the mouse on the screen the spotlight moved so I was no longer able to read the text. Let's just keep this simple, do away with the mousemove following spotlight altogether, if you want to make the page more interesting then embed a youtube video explaining the issue. The text is kind of hard to read too. Personally I would just do a white background with dark text and possibly an amusing cartoon image or something to visually illustrate the concept of a blackout.