Mobile version (Display Regular Site)

Skip to: Navigation | Content | Sidebar | Footer


Weblog Entry

Poisson d'avril

April 02, 2004

Yesterday’s little prank seems to have gone over well. Interestingly, I never thought for a second we’d genuinely confuse anyone, but it sounds like a lot of that went around. Hard to say why it worked so well, I guess you take for granted a site’s chrome once you’ve visited enough. Thanks for being good sports about it, it was plenty of fun.

Doug has followed up with a detailed account of the steps we took, so here are a few notes of my own.


The Idea

We did start discussing this in January. A quick attempt back then showed us that it wasn’t impossible, but it would prove a little more difficult than simply swapping CSS files. And so it sat; busy lives, busy people.

We were supposed to take it further at SXSW, but between madly preparing for our Monday panels and the subsequent relief and enjoyment immediately following, we lost focus.

Cut to this past weekend, where we picked up again. I believe ‘down to the wire’ was the phrase that Doug originally used to describe our timeline. So true; I spent the past few evenings hacking imagery and swapping markup.

How did we go about it?

We initially thought about swapping CSS files. The net effect would have been a site-wide redesign for the day. Theoretically possible (you may not have realized it, but we’re both big fans of separate structure and presentation), but it proved to be more time-consuming than either of us were prepared for. It’s just a joke after all, not a critical business proposition, so we decided to minimize the time involved.

Instead we grabbed static archives of our home pages and hacked away. I caught myself modifying the markup structure quite a bit, and at one point almost decided to just drop my content in Doug’s structure and be done with it. In the end I ended up with a hybrid mix between my site and his markup-wise, and the CSS files are completely customized for this little project alone.

I should note that while our markup structure is different, some of that is because I feel my own structure is inherently wrong in spots. (My heading order in particular: post titles are <h3>’s, which just feels wrong now. Fixing that will have to wait for a redesign.) In other cases, we just have different pieces of content that demand different structure. You can’t standardize that which isn’t standard, after all.

Imagery

I had to go back to my original .PSD files to re-create the graphics which was itself a challenge. The files go back to last year and due to gamma corrections and content adjustment along the way, they’re terribly out of synch with what’s currently on the site.

Another problem is my graphic editing policy, in that I have none. Editing one of the striped headers on the right involves opening up a previous one, blanking out the text, overlaying new text, and saving a new GIF. I have no problems with this process because I have a plethora of tricks to combat image degradation, but I know some of my processes are quirky and not conducive to later work by other designers. I ended up sending my original mockup PSD to Doug, for which I apologize: hey, if nothing else you got to see how bad it really is!

Setup

The home page redirect was easy. I added this to my root .htaccess file:

Redirect index.php 
www.mezzoblue.com/archives/covers/apr01-04/

Which basically directed all requests for the home page on to the permanently archived ‘cover’ spoof page. Since all the links on that page pointed back to real content on the site, it effectively functioned as this site’s home page for the day.

This is the way I’ve done it for past covers on Remembrance Day and Christmas last year. It’s how I’ll continue to do it for any covers in the future; I like the method because you can be sure as soon as seeing the page/URL that a) it’s not the home page, and b) you can link to that page without expecting it’ll change. Cool URIs don’t change, after all.

Customizing

We launched about 10:30pm West Coast time on the 30th. Doug had gone quite a bit further than I by spoofing his individual post/comments page too. Jumping from my spoofed home page to my ‘real’ comments page for the post was disorienting, because two different styles were going on. Doing the same on Doug’s site was seamless. And jumping back and forth between two visually identical comments pages was too much. Clearly I had to do something.

A mad rush of CSS coding to pull the extra style back in for the forms (I stripped a bunch originally since it wasn’t needed), and a ton of Googling to aid with the redirects, and I finally got my own comments page working around 11:30 or midnight or so. Some of you saw the comments page before this happened. Oh well.

The Movable Type setup to do that was actually pretty easy. I created a new individual entry archive, and in my weblog config I added it to the existing one — the key here is to realize that even though you only set one default archive template, MT generates all templates you’ve attached. I didn’t know this until Doug told me how he set up his; it’s going to come in handy for more than just this one project.

So once MT was generating two templates, one for ‘regular’ posts and one for ‘April Fool’s’ posts (yes, this means I now have a second joke file for all 250-odd posts on my site I’ll have to clean up), the trick was redirecting just the one post on to the new file. I looked into .htaccess again, which Doug was apparently able to use, but for whatever reason I couldn’t get it working. In MT I threw into my standard template a custom PHP script that redirected if and only if the title of the post was ‘Sickening’. That did the trick. I considered leaving that one post formatted with the spoof template from now on, but instead we’ve both archived the post pages.

Feeds

No doubt what aided the confusion is the RSS variable. Because a lot of people are reading our sites from newsreaders instead of in a browser, we figured the joke would be perpetuated/lost on some if they didn’t click through. We both worded the posts as salaciously as we could to encourage clicking. I ended up temporarily rigging MT to stop producing a new feed, and I hacked the URLs to point to the spoofed page as well. Some may not have got the full effect, and I’d hate to think there are some out there who now think Doug is a thief, albeit a highly-capable one, but I’d imagine it’s safe to assume most are in on the joke by now.

Reverting

And the last piece of the puzzle was taking it all down after 24 hours. Easy as anything — I removed the home page redirect, dropped the PHP from my templates, re-established the RSS feeds, and now we’re back.

It was a fun little experiment, and if nothing else I’ve taken away the itch to finally finish the redesign I’ve had brewing for six months or so. We’ll see how that goes. Thanks for the laughs, and a big thanks to Doug for playing along.


Reader Comments

1
Jeremy S. says:
April 02, 01h

I highly enjoyed the change, and reading the way you do your covers is great. It’s probably much better then just switching the index.php for the day. :)

2
April 02, 01h

The reason it got me for 15 seconds was because I saw the post in an RSS reader. Out of context it was a little harder to get.

3
April 02, 01h

Nice write ups from both Doug and Dave on how they achieved their day of infamy. Good work in making sure things all worked 99% right.

Incidently, would it have been easier to transformed respective site’s XHTML semantics from one to the other using XSL then applying “vanilla” CSS stylesheets making use of a CSS signature?

4
April 02, 02h

Amazing job, you two.
Yesterday, I completely skipped the header image because it looked so much alike as the “real” one, and I went on to reading the post… It wasn’t obvious ‘til I read Doug’s post, which gave it away. Way to go!

5
Ian Firth says:
April 02, 02h

What I find most interesting is that Doug’s Mezzoblue’d StopDesign worked in IE6/Win, whereas your version does not.

Maybe you could borrow some of his CSS so your rollovers up top work correctly without forcing users like me to copy and paste a link from FeedDemon into FireFox.

6
April 02, 02h

Absolutely amazing! I nearly fell out of my chair laughing so hard.

You guys have me (and some of my friends) working up something for next year!

This definately caps off my list of April Fool’s jokes: this was simple THE BEST!

Thanks for all the troubles – just for our benefit

7
Dave S. says:
April 02, 02h

“What I find most interesting is that Doug’s Mezzoblue’d StopDesign worked in IE6/Win, whereas your version does not.”

I’ve been meaning to write about this for a while. Thanks for the push, I’ll do that sometime this weekend.

8
jgraham says:
April 02, 03h

You RSS people think you’ve got it bad? The first time I saw the post, I was using Links (as in the terminal based text only browser). That was *really* confusing - whatever happened to making content accessible anyway? ;)

(Seriously, it was very well done. I’m pretty sure I would have given up when it proved to be more than trival to pull off)

9
Peter Zignego says:
April 02, 03h

Haha, I love it. Brilliant joke:P Though I truly liked the S in the Mezzodesign logo!

10
April 02, 11h

Very nicely done. You guys always impress. And thanks for the details on the work. Makes it that much more relevant to everyone in their own work!

I kind of wish you’ve kept Doug’s design… I got more refers from your site yesterday using his presentation because the Links seemed to stand out more…. 8^)

11
April 02, 11h

It messed me up all day - I’d glance and see the blue and subconsciously think “dave”. I don’t know how many double takes I did during the day.

I, for one, am glad you guys switched back. It just felt… unnatural.

12
April 02, 11h

And thank you, Dave. It certainly was fun. As I mentioned, even *I* was disoriented a few times while reading the comments on each site. Reverting back *was* incredibly easy, given that we kept all our original templates intact, and used redirects/PHP to pass everyone on to the duplicate files.

But, oh, I’m sorry about this:

“(yes, this means I now have a second joke file for all 250-odd posts on my site I’ll have to clean up)”

I should have mentioned that you could have generated the extra joke file for only that post just by going into MT and resaving the entry (rather than rebuilding all individual archives). Resaving the entry, even if you haven’t made any changes to it, rebuilds all the associated files, including the addition of any new templates you’ve just added, without touching any non-associated entry files. Useless to Dave after the fact, I know. But thought this might be helpful for more people to know than just Dave, for avoiding this very scenario. Creating a duplicate individual archive file makes temporary testing for new changes possible. And saving one entry, instead of rebuilding the entire archive list, means you can limit the amount of new temp files created. Not to mention it’s much faster to rebuild one or two files, than to rebuild hundreds.

One last note I’ll add: There were actually quite a few things I learned from working with Dave’s code and design. Some things that I wish the design and/or code on Stopdesign allowed, so it was more than just an April Fool’s day joke. It was good learning experience all around.

13
Christine says:
April 02, 12h

Since I am trying to learn about all this, and just started my own thoughts page, I found this to be ‘cool’.

I hadn’t checked the pages for couple of days, so was surprised when my teacher asked me this morning to check. First I was shocked, thought, no, he wouldn’t do that, then realized what was going on as I looked back through the days. Very cute.

Told my teacher, too bad I had not seen this in ‘real’ time, for surely I would have sent in a ‘April Fool’s page’ for my project assignment with link to real one. Guess that will teach me to keep up-to-date with everything!

14
Steve says:
April 02, 12h

“Hard to say why it worked so well, I guess you take for granted a site’s chrome once you’ve visited enough.”

It’s all about branding:
http://www.mezzoblue.com/archives/2003/12/18/css_copyrigh/#c002899

Great gag, guys. :)

15
Trent says:
April 02, 12h

“Unnatural” is a good word. It was like my dad wearing a dress and my mom donning a suit.

Wait, that was last Thanksgiving. Never mind…

16
KC says:
April 04, 11h

Great job. It’s a pity that swapping CSS couldn’t work but also predictable. I may have to use the redirected homepage trick in the future if you don’t mind. I just KNOW there’s some uses for it.

17
April 06, 07h

It was a great idea and very well implemented. I salute both of you :)

Being a loyal visitor to both blogs, I detected the change at once and burst into laughter, knowing it could only be a joke.
i really loved it.

Really cool one.