The Mystery Is Resolved: GIFs, Crazy People and All That Malarkey

Ah, the good ol’ Smashing Book Mystery riddle1. Now that two days after the announcement have passed, it’s time to reveal the mystery and announce the winners. Oh, you want to figure it out first? Well, then please close this window since there are (obviously) spoilers in this post.

The Mystery Riddle

Alright, it wasn’t easy indeed. But with a quite smashing prize for the winners, we didn’t want to make it easy for you. However, we did want it to be hard enough, but not too hard which would make most readers stop trying. So after a series of usability rounds we thoroughly adjusted and edited the copy of the riddle, explaining that the mysterious animated GIF contains a hidden message.

Once you resolved the mystery, you’d see a Twitter hashtag displayed in plain text. So there shouldn’t be any room for vague interpretations. The solution should be displayed in plain text. The only hint was to watch out for the file name.

Smashing Book Mystery

The only hint was to watch out for the file name.

Now, in our usability tests, many people went beyond their way to go through each and every frame, check the colors of each frame in Photoshop, rotate the images, run a diff between images, color-highlight different areas of the images and even play around with hex-colors which are (surprise, surprise!) actually hashtags as well (#aed4dc2, anyone?).

Exploring the GIF in Photoshop
Okay, this (#merryxmas) could be a solution but it isn’t. Well done, @jussivirtanen3!

Of course, the initial reaction was to click anywhere and everywhere on the image. The house, the trees, the lake. And, according to our heatmaps, our dear readers literally set the house on fire. And yes, it’s lots and lots of clicks! Unfortunately, since it was an animated GIF and it wasn’t linked and had no clickable areas, all those clicks didn’t help resolve the riddle at all. Sorry about that!

Heatmap4
The clicks heatmap for the riddle. The lighter an area, the more clicks it had. Our readers set the house on fire! Large view5.

The solution is a bit easier though. Well, if you have to watch out for the file name, the first thing you probably do is look up the file name. The file name of the image was http://provide.smashingmagazine.com/mystery/look-into-the-house.gif. So how can you look into the house? Since it’s an animated GIF and there are no clickable elements on it, what about… changing the URL in the browser address bar? What about enter-the-house.gif6 or just house.gif7?

Smashing Book Mystery8
enter-the-house.gif revealed a person sitting in the house, distracted by a lamp.

Yes, the key was to figure out that the URL had to be adjusted. That’s it. In fact, we created a number of animated GIFs, including common aliases such as home.gif, for example, to make sure that people who “get” the idea, follow it through and get to the next level.

Well, since you entered the house already, at this point you might start to look closely at what’s going on in the image. If the image doesn’t exist on the server, you’ll be forwarded to the nobody-is-home.gif9.

Well, first you might want to explore lamp.gif or light-off.gif

Smashing Book Mystery10
Alright, the lamp is turned off now. Now we can keep reading.

…and book.gif.

Smashing Book Mystery11
Reading the book, day and night long.

Hmmm… What about sun.gif? No, no luck. Dead-end: the image doesn’t change. Alright. What else can we do? Well, what if we look under the carpet.gif?

Smashing Book Mystery12
Aha! The mouse is running under the carpet!

Aha! So we just found a mouse! But… it doesn’t help us much. So what else have we got? Well, what about the window.gif?

Smashing Book Mystery13
Oh… that’s… just… surreal.

Oh. That’s… weird. Maybe couch.gif?

Smashing Book Mystery14
The person still sitting on the couch reading the book.

Oh! Wait a second, what do we have here? Hasn’t something changed? Oh, look, we now have a pillow on the couch! You know what it means! pillow.gif.

Smashing Book Mystery15
Aha! The hashtag was hidden under the pillow!

But wait a second. We haven’t explored the picture just yet! picture.gif:

Smashing Book Mystery16
Aha! There is another hashtag hidden behind the picture!

So now it’s just about time to tweet both hashtags. You could tweet the color hex code of the house door as well (it doesn’t change in the animation), but you didn’t have to. So does it mean that the mystery is resolved? Oh, wait a second, mystery-resolved.gif?

Smashing Book Mystery17
The mystery is resolved! The winner will be going to Oxford in March 2014!

The Winners

Well, we knew that the riddle wouldn’t be that easy, but it was remarkable to see the first tweets with both correct hashtags appearing within minutes after the riddle was announced. In fact, it turned out that our dear readers are absolutely smashing indeed: #feelsmashing18 and #newsmb4perspective19.

The first place has earned the person who was the quickest to solve the riddle. We raffled the other lucky winners randomly, however the requirement was that at least one of the hashtags had to be found. The winners can select any prize of their choice (be it a bag, a Smashing Library account, printed books or anything else). And they all get the Smashing Cody Stress-Relief Ball20, too. All winners have been contacted. The winners are:

Congratulations! And thanks to everyone who participated! We hope we didn’t waste too much of your productive work time (and didn’t cause too many headaches either).

Behind The Scenes

Guillaume Kurdjian
Guillaume Kurdjian2928 is a 22 year old freelance illustrator and animator from Nantes, France. Guillaume likes to experiment with stuff on his computer and climb trees.

Do you know that feeling when you find a designer and just want to work with them no matter what? Well, as we had stumbled upon Guillaume Kurdjian2928‘s animated GIFs30, we knew that at some point we’d love to work with Guillaume on a series of animations. With the Smashing Book Mystery the opportunity presented itself.

So in a long — long — thread we discussed and designed all the different variations of GIFs, ending up with over 30 different GIFs, and drafts, and ideas that were thrown away and the ones that did make it to the final stage. Since we wanted the theme of the book — New Perspectives — to be recognizable, the design was quite surreal (the guy fishing a book from a lake, lamp going crazy, scary people outside the window) to indicate the “new perspectives” theme. Also, the visual design and the perspective of the person sitting in the house wasn’t chosen randomly.

Another tricky thing was the speed of the animations and the way animations would loop. We didn’t want to make it too difficult, or too fast, or have many things happening at the same time since the riddle would get more difficult in the end. In fact, in our usability tests we had poor souls staring at the GIF literally for hours to figure out what’s going on and trying to click all the different areas because the animation was a bit too quick.

All designs were a series of iterations to make the overall riddle not necessarily perfect, but just right. So a big “thank you” to Guillaume for following through and being so enthusiastic and kind about all the changes made.

Now, are you ready for the second round? ;-)

Footnotes

  1. 1 http://www.smashingmagazine.com/the-smashing-book-mystery-have-you-figured-it-out-yet/
  2. 2 https://twitter.com/search?q=%23aed4dc
  3. 3 http://www.twitter.com/jussivirtanen
  4. 4 http://www.smashingmagazine.com/wp-content/uploads/2013/11/heatmap-opt.png
  5. 5 http://www.smashingmagazine.com/wp-content/uploads/2013/11/heatmap-opt.png
  6. 6 http://provide.smashingmagazine.com/mystery/enter-the-house.gif
  7. 7 http://provide.smashingmagazine.com/mystery/look-into-the-house.gif
  8. 8 http://provide.smashingmagazine.com/mystery/enter-the-house.gif
  9. 9 http://provide.smashingmagazine.com/mystery/nobody-is-home.gif
  10. 10 http://provide.smashingmagazine.com/mystery/the-lamp.gif
  11. 11 http://provide.smashingmagazine.com/mystery/book.gif
  12. 12 http://provide.smashingmagazine.com/mystery/carpet.gif
  13. 13 http://provide.smashingmagazine.com/mystery/window.gif
  14. 14 http://provide.smashingmagazine.com/mystery/couch.gif
  15. 15 http://provide.smashingmagazine.com/mystery/pillow.gif
  16. 16 http://provide.smashingmagazine.com/mystery/picture.gif
  17. 17 http://provide.smashingmagazine.com/mystery/mystery-resolved.gif
  18. 18 https://twitter.com/search?q=%23feelsmashing&src=typd&f=realtime
  19. 19 https://twitter.com/search?q=%23newsmb4perspective&src=typd&f=realtime
  20. 20 https://shop.smashingmagazine.com/smashing-cody-mascot.html
  21. 21 https://twitter.com/Boberober/status/405321367123685376
  22. 22 https://twitter.com/qmanrique/status/405334109720805378
  23. 23 https://twitter.com/cliffseal/status/405327186564874241
  24. 24 https://twitter.com/iamrobmasters/status/405323042273771520
  25. 25 https://twitter.com/danielmarklund/status/405394207289778176
  26. 26 https://twitter.com/BeSublime/status/405365293796425728
  27. 27 https://twitter.com/pjetr/status/405334611615440896
  28. 28 http://guillaumekurkdjian.com/
  29. 29 http://guillaumekurkdjian.com/
  30. 30 http://bisouslescopains.tumblr.com/

Vitaly Friedman loves beautiful content and doesn’t like to give in easily. Vitaly is writer, speaker, author and editor-in-chief of Smashing Magazine. He runs responsive Web design workshops, online workshops and loves solving complex performance problems in large companies. Get in touch.

  1. 1

    This world now is full of genius minds from the other world!

    0
  2. 2

    Hi)
    great job, BUT it is slightly strange to write ‘hashtag'(singular) in description of the riddle but meaning two hashtagS as answer
    P.S> it is not a claim… just notice ;)

    0
    • 3

      Vitaly Friedman (editor-in-chief of Smashing Magazine)

      November 28, 2013 2:24 pm

      Figuring out just one hashtag was enough to join the raffle, bam ;-)

      0
  3. 4

    I didn’t figure it out but after all it is a absolute well done riddle. Didn’t expect something like that! Epic!

    0
  4. 5

    I was always prepending “the” to all the words since it worked for “window”, “lamp” and “house”, but it didn’t work for “carpet”, “picture” and “couch” (the ones I tried). I should have tried without.
    Nice riddle nonetheless!

    0
  5. 6

    Hmmm…it seems that the winner will go back in time to Oxford on MARCH 2013 !! ?? :)

    Do I get the Smashing Book #4 for noticing this? ;) :)

    0
  6. 8

    Can you share info on how many people actually tweeted the correct hashtag? That would be interesting…

    0
  7. 10

    I can’t believe I was changing the file name extension and it didn’t click in my mind I need to change the file name! I got as far as nobody-is-home.gif, though :-) It was good fun, well done for creating this challenge!

    0
    • 11

      The nobody-is-home.gif was the missing link for me, as the picture was not hanging on the wall anymore, so I tried out picture.gif from there.
      Way too late, though, and I missed a lot of nice animations.
      But it was a lot of fun, thanks for that!

      0
  8. 12

    Round 2 is on NotPr0n?

    0
  9. 13

    Good riddle, it was a little misleading that there were two hashtags when the actual riddle asked for one. I’m just happy I managed to get it right. Info about the number of people who correctly answered the riddle would be really nice. I fear I may have been helping setting the house on fire for the first minute I tried to solve this riddle. I also downloaded and looked at every frame in the first gif.

    cmd+shift+i then came to my rescue, although my filenames were a little more conversational e.g. look-in-the-house.gif and look-out-the-window.gif

    Got there in the end but missed the #feelsmashing hashtag

    I’m just happy I figured it out!

    0
  10. 15

    You had my entire campus photoshopping the pic! LOL!!!! Good one! Congrats to the winners!

    0
  11. 16

    Sun.gig should somehow lead to carpet.gif. There was no logical transition between the two. I stuck in that part. :[

    0
  12. 17

    That was some quantum stuff!!!

    0
  13. 18
  14. 19

    I think there should be a bonus prize for anyone who found both answers.
    How many did that? (I know I was one of them…)

    0
  15. 20

    This reminds me of the good old Notpron game. If you liked this riddle, you will like hacking your way through Notpron even better.
    notpron-dot-org

    0
  16. 21

    Thanks guys for stealing my mind for hours. First I tweeted the #aed4dc, but it didn’t convice me. The “plain text hashtag” made me rethink of a solution. I’ve checked the frames one by one, installed a software called ImageMagick and used it to change the gif’s attributes etc, but no luck.

    Then a friend of mine found one of the hashtags and helped me out :), kudos to Migen Karriqi.

    0
  17. 22

    great stuff… couldn’t solve it though :(

    0
  18. 23

    What a delightful post! I found out about the challenge just now, but no matter, for what a splendid read this was! Vitaly, you walked us from one part of this wonderful riddle to another with masterful prose! I felt I was one of the participants cracking my head in an attempt to unveil this seemingly easy puzzle! Thank you for that! Congrats to the winners! And please, continue promoting activities like this, for they fuel the kid within!

    :)

    0
  19. 25

    When I got to the man running outside GIF, I was like, running-shadow.gif? man-running.gif? man-outside-the-window.gif? crazy-man-running.gif? I was so sure figuring out what’s the name for that thing he’s doing will do the trick. Then I decided to just focus on another object and typed picture.gif. Tada! :D

    Just wondering, the draw was chosen from the top 10 (or something) quickest? Or everybody else who got it right?

    Anyway, good stuff! :)

    0
    • 26

      Since some readers from the US didn’t have a fair chance of winning if they tweeted once, we selected the main winner depending on the time of the tweet, and all the others randomly from the pool of everybody who has found at least one of the hashtags.

      0
  20. 27

    Andrew Barrington

    November 29, 2013 1:06 pm

    Fantastic riddle…although i didnt resolve it.

    I hope this becomes a regular test of wits from the Smashing Team, to us mere mortals!

    0
  21. 28

    Well – how do you get from that black-and-red image to #merryxmas?

    0
  22. 29

    Good stuff. Interesting to know about the mysterious animated GIF !!

    0
  23. 30

    nobody-is-home.gif links to the wrong gif, no?

    0
  24. 32

    I only managed to find #newsmb4perspective. I actually found it by entering ‘mountain.gif’ though instead of ‘picture.gif’.

    That was fun anyway, I enjoyed the puzzle regardless of any prizes.

    0
  25. 33
  26. 34

    Kashif Muhammad Qasim

    December 2, 2013 1:12 pm

    Good one!

    0
  27. 35

    Behnam Aboutalebi

    December 2, 2013 6:58 pm

    I can’t believe it was such a bad guess what game. I went through steganography stuff to find any hidden message within the .gif file. Wasn’t lucky! :)

    0
  28. 36

    Awesome! Awesome! Awesome!

    0
  29. 37

    alptekin enes kırdemir

    January 3, 2014 1:47 pm

    nice work

    0
  30. 38

    Beautiful animated gifs – but I still hate riddles!

    0

Leave a Comment

Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that comments are moderated and rel="nofollow" is in use. So, please do not use a spammy keyword or a domain as your name, or else it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!

↑ Back to top