Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Which internet blackout technique works best?

Tags:

html

css

I am thinking of various ways to blackout my site for a blackout protest. Which technique would work best?

Method 1 (easiest): Replace existing style sheet with a new one that has this code in it:

* { display: none; }

The benefit here is that search engines can still crawl the site, and people that are familiar with the protest and likely to understand its ramifications can still view the content by viewing source. The downside is that people might think something is wrong as there is no content at all displayed (I am fine with that).

Method 2: Add a background-color: #000; to body and color: #000 to all text elements except for any text element that may be describing why the site looks different. The benefit to this is that more people will understand what is happening. The disadvantage is that it does not really portray the message of the protest. Also, I think it may be bad practice to give text the same color as the background as it is a proven spam technique.

Method 3: Display a test pattern.

like image 727
thequerist Avatar asked Jan 18 '12 03:01

thequerist


1 Answers

Many sites just block out their logos or have a dismissible dialog. I think you can still support a blackout protest without a 503. The point is to make people aware of the problem. You can put up a full-page fixed black div with a message and a link to relevant information. Even a banner about it would be helpful in getting the word out.

Here's what I'm using at http://thinkingstiff.com (link potentially NSFW due to language):

<a id="sopa" href="http://sopablackout.org/learnmore/">**** SOPA</a>
<style>
#sopa {
    background-color: black;
    color: white;
    cursor: pointer;
    display: block;
    font: normal 150px/500px Helvetica, Tahoma, Arial;
    height: 100%;
    letter-spacing: -11px;
    position: fixed;
    text-align: center;
    text-decoration: none;
    width: 100%;
    word-spacing: 50px;
    z-index: 9999;
}
</style>
like image 105
ThinkingStiff Avatar answered Nov 06 '22 07:11

ThinkingStiff