Scott Hanselman

An analysis of SOPA and PIPA Protest "Blackout" HTML and CSS techniques

January 18, '12 Comments [28] Posted in Musings
Sponsored By

SOPA sucksMany popular sites are blacked out today in protest of two acts before Congress, known as the Protect IP Act (PIPA) in the Senate and the Stop Online Piracy Act (SOPA) in the House. Long story short, the legislators barely know how to email, much less understand what a DNS takedown is.

As I've been surfing around today bumping into SOAP sites, I noticed that every site is doing the blackout technique differently. This is interesting to me for a few reasons. First, things on the web aren't setup for an event like this. To shutdown your website for a day is one thing but to do it in such a way that your site presents a new temporary message without affecting search engines that have already indexed you is an interesting problem.

A number of people are changing their content for the day and some are rightfully concerned that this single day's protest will affect their search results. In fact, Google has announced via Google+ that they will be slowing the Googlebot in an attempt to mitigate the effects from the protest.

Put a giant DIV over your existing page

Wordpress.org had this clever technique. I hit the site, saw that it was black, then did a view source. However, when I did, the HTML source had the regular WordPress site that's always there. I used an element inspector as you can see below and started moving around. Note the blue outline that is outlining some phantom element.

WordPress › Blog Tool, Publishing Platform, and CMS - Windows Internet Explorer (106)

What's going on here? Let's blow it up using Tilt in Firefox.

image

Ah, see those three black buttons on the right? WordPress's original site is still under all that. They are floating a DIV over the top with a super large z-index.

If you change the CSS dynamically and change the z-indexes, (or just delete the DIVs) the actual site peeks out. Clever. A nice dramatic effect with minimal effort and effectively no SEO downside.

WordPress SOPA floats a giant DIV

However, the WordPress technique does kick off the process with JavaScript. What happens if you have JavaScript disabled? I assumed it just wouldn't work.

WordPress No JS

Nice! They've included a banner in the upper right corner using Pure CSS so there is still a visible protest on the page. A good compromise and a nice recognition of the six neckbeards that still surf the web without JavaScript. ;)

In my desperate search to learn everything I can about Justin Bieber, I turn to Wikipedia. I hit the site, I see Justin and then a curtain falls. Wikipedia's blackout page shows up AFTER a teasing flash of content.

Justin Bieber - Wikipedia

They've added a div at the VERY end of their page:

<div id="mw-sopaOverlay">
<div id="mw-sopaColumn">
<div id="mw-sopaHeadline">Imagine a World<br>Without Free Knowledge</div>
<div id="mw-sopaText"><p>For over a decade, we have spent millions of hours building the largest encyclopedia in human history. Right now, the U.S. Congress is considering legislation that could fatally damage the free and open Internet. For 24 hours, to raise awareness, we are blacking out Wikipedia. <a href="http://en.wikipedia.org/wiki/Wikipedia:SOPA_initiative/Learn_more" target="_blank">Learn more.</a></p></div><div id="mw-sopaAction">
<p class="mw-sopaActionHead">Contact your representatives.</p>
<div class="mw-sopaActionDiv">
<form action="/wiki/Special:CongressLookup">
<label for="zip">Your ZIP code:</label>
<input name="zip" size="5" type="text">
<input id="sopa-zipform-submit" value="Look up" type="submit">
</form>
</div>
</div>
</div>
</div>

At the very TOP of their page they have a bunch of positioning CSS. The flash happens because the DIV doesn't show up and get styled until the VERY end of the page gets loaded. Nice simple way to do it as SEO is so important to Wikipedia.

Actually Go Offline with an HTTP 503

The most impressive of the options, and arguably the most semantically correct, is the HTTP 503 Error. When you ask your browser for a page, it usually gets a 200 which means "OK, cool" or a 302 that means "temporarily over here" or even a 301 that means "permanently moved. Jimmy no live here! You no call back!"

An HTTP 503 means "Service Unavailable." I'd look it up on Wikipedia, but well, you know.

Notice in the Network tab picture below that they literally return a 503 result from the main HTTP GET. One could imagine them returning a 200 and just saying in the HTML it was a 503, but in this case they really used the web correctly. The Googlebot will visit the page, see the 503, assume the site is down temporarily and try again tomorrow.

Frankly, this is the technique everyone should have done. All the CSS and DIV work is clever, but not as easy , not as dramatic and certainly not as "correct."

503 Service Unavailable

Kudos to BoingBoing - a group that clearly gets the web - to use HTTP as it was designed to, to make their statement.

Redact by changing CSS Background Colors

From a design and stylistic perspective, Wired really nailed it. I love what they did here with the text intact and background colors in black.

Wired redacts text

You can hover over the text and see what's under it. No SEO affect, and still makes the point in a very dramatic way.

Zoom in on Wired Text Detail

Here's some of the their markup and CSS.

Wired.com censored class

They have a "censor" class" and apply it to a SPAN from a sopa.css.

Change an Image

My friends at DuckDuckGo changed their main image and linked to SOPA information. A simple change that won't affect SEO and is easily undone in the future.

image

 

Google did the same thing in fact, with simple markup.

image

Just:

<a href="//www.google.com/landing/takeaction/">
<img alt="Tell Congress: Please don't censor the web!"
title="Tell Congress: Please don't censor the web!"
border="0" height="196" src="/logos/2012/sopa12_hp.png"
width="445" style="padding-top:50px" id="hplogo">
</a>

Make you Wait or Click

Craigslist had an interstitial that blacked out their site with a link at the button to click to continue.

Craigslist against SOPA

Interestingly, Craigslist did their protest in the lowest-tech way possible. They literally just changed their first page. I suspect there will be a few days of SEO issues and we may see this page in search results.

Dramatic Animation

Today Firefox's about:home included a nice CSS animation that takes the background of the page from white to black to a nice effect.

Firefox blacked out in an animation

What other cool SOPA protest techniques have you seen today? You can add a SOPA widget to your own site with Grassroutes.


Sponsor: My thanks to DevExpress for sponsoring this week's feed: Introducing DXv2 – Welcome to the next generation of developer tools from DevExpress! Explore what’s new in the latest release.

About Scott

Scott Hanselman is a former professor, former Chief Architect in finance, now speaker, consultant, father, diabetic, and Microsoft employee. I am a failed stand-up comic, a cornrower, and a book author.

facebook twitter subscribe
About   Newsletter
Sponsored By
Hosting By
Dedicated Windows Server Hosting by ORCS Web
Wednesday, January 18, 2012 10:10:07 PM UTC
Not the best technique, but worth a look for the giggles.

http://theoatmeal.com/
Aaron
Wednesday, January 18, 2012 10:24:31 PM UTC
Excellent article, Scott. Thank you for not only providing something for developers, but also shining some light on the SOPA issues. Let's hope for the best.
Wednesday, January 18, 2012 10:27:25 PM UTC
I would have loved to see Google/Bing selectively implement the wired approach on search results.

If this abomination is signed into law, I hope they implement it *exactly* that way. More realistically, I hope they leave a *redacted* mark of some kind for everything they remove.
Wednesday, January 18, 2012 10:27:56 PM UTC
http://pragprog.com/

Dave and Andy put the Bill of Rights at the bottom of the page after they have their statement in why they are opposing SOPA and PIPA.
Wednesday, January 18, 2012 10:34:50 PM UTC
caniuse.com has an interesting approach, as well. Showcases some nice css3 effects.
Bob Dankert
Wednesday, January 18, 2012 10:40:51 PM UTC
http://www.zachstronaut.com/ (code at: https://github.com/zachstronaut/stop-sopa).

Very nice effect and it also returns HTTP 503 Service Unavailable


Carlos Guedes
Carlos Guedes
Wednesday, January 18, 2012 10:41:39 PM UTC
Take three:

http://blog.curry.com/stories/2012/01/16/sopaIsARedHerring.html

(Sorry Scott... if I could edit my comment I would have only needed one posting)
CMike
Wednesday, January 18, 2012 10:44:54 PM UTC
I also liked the Martin Fowler's site, which also returns HTTP 503.
Carlos Guedes
Wednesday, January 18, 2012 10:57:27 PM UTC
Yuo have to look this http://lostechies.com/
Wednesday, January 18, 2012 10:57:50 PM UTC
the daily wtf did something VERY different: http://thedailywtf.com/
Wednesday, January 18, 2012 11:01:34 PM UTC
The thedailywtf comes out in support of SOPA by suggesting we ban http, html and javascript ;) on a modal div that doesn't allow any interaction with the site, unless you click on the ip address link. Goes great with their normal theme of WTFs
Wednesday, January 18, 2012 11:07:11 PM UTC
While HTTP 503 might be the correct way to handle this, the various JS/CSS techniques do illustrate one interesting side of SOPA; those who want to access the material will still be able to do so. It will require a tad more work, but the material will still be accessible. Not sure that was intentional, but I like that aspect anyway.
Wednesday, January 18, 2012 11:22:10 PM UTC
Thank you for the summary on different techniques Scott.

By the way, did you notice thedailywtf.com is coming up in support of SOPA act.
Wednesday, January 18, 2012 11:36:32 PM UTC
XBMC takes the cake in my opinion: http://xbmc.org
Thursday, January 19, 2012 12:03:56 AM UTC
Scott, an interesting article. Thanks.
What tool/plugin did you use for the 3d view of WordPress css?
Thursday, January 19, 2012 12:23:43 AM UTC
With NotScript on Chrome (apparently I'm one of the six neckbeards that doesn't like reinstalling Windows), many of the sites still worked fine with no notice that they are even protesting. But, if you have Javascript off, chances are you already know about SOPA/PIPA.

Anyway, I wanted to point out that black/black (Wired method) is a total SEO killer. From Wikipedia (which is easy for me to get to):

"Black hat SEO attempts to improve rankings in ways that are disapproved of by the search engines, or involve deception. One black hat technique uses text that is hidden, either as text colored similar to the background, in an invisible div, or positioned off screen. Another method gives a different page depending on whether the page is being requested by a human visitor or a search engine, a technique known as cloaking. Search engines may penalize sites they discover using black hat methods, either by reducing their rankings or eliminating their listings from their databases altogether."
Thursday, January 19, 2012 12:26:43 AM UTC
I like the 503 technique. I believe the techniques imposed by sites like wired and theoatmeal are far too sensationalized. Neither of the "techniques" portrayed have anything to do with the actual legislation. theoatmeal's portrayal is an outright lie. The less technical internet surfers are not getting an accurate view of what the legislation says or what the internet would actually look like post-SOPA.

If you want to protest it, protest it accurately.
Thursday, January 19, 2012 7:53:48 AM UTC
Also check out this video that explains really well why it's important to protest, what effect it has on US citizens, but also world wide and the entire internet.

vimeo.com/31100268
Thursday, January 19, 2012 8:22:29 AM UTC
The wikipedia method presumably made it easier for them to serve the pages on censorship and SOPA/PIPA without the blackout, but I preferred the integrity of BoingBoing's approach.
Thursday, January 19, 2012 9:13:34 AM UTC
Hey Scott,

Really great article.
But the most impportant info is the link to the tilt AddOn for firefox.
I didn't know this amazing tool.

Thanks a lot!

Wolfgang
Thursday, January 19, 2012 10:05:19 AM UTC
The http://lostechies.com/ one already mentioned above is very effective on a mobile browser.
Thursday, January 19, 2012 3:33:31 PM UTC
Thanks for the Tilt tip!
Thursday, January 19, 2012 4:35:41 PM UTC
Hey Scott,

Loved the write up.

While it might not have been the most "politically correct" sopa protest page the one presented at http://theoatmeal.com/sopa provided a good laugh, and a potential example of a site that could be a target of sopa should it pass.
Matthew Zamora
Thursday, January 19, 2012 4:36:01 PM UTC
have you noticed that google was mainly serving anti-sopa ads via adsense?

also they decreased their crawl rate by large to minimize affects on rankings due to problematic blackout techniques. (like craigslist)
Thursday, January 19, 2012 8:15:58 PM UTC
Scott, great article. thanks
Thursday, January 19, 2012 8:37:15 PM UTC
The WIRED censorship looks the most clever. But, as PRMan noted, it is a bad SEO practice. I think that visual presentation plus the HTTP 503 response might be okay though. Right?
Thursday, January 19, 2012 8:44:46 PM UTC
I really don't think that the SEO will be affected. It's a nice clear span and you're assuming that the bots are smart enough to crawl and apply all the CSS rules.
Friday, January 20, 2012 5:53:18 AM UTC
"SOAP sites"?
Comments are closed.

Disclaimer: The opinions expressed herein are my own personal opinions and do not represent my employer's view in any way.