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

About The Author

Vitaly Friedman loves beautiful content and doesn’t like to give in easily. When he is not writing, he’s most probably running front-end & UX … More about Vitaly ↬

Email Newsletter

Weekly tips on front-end & UX.
Trusted by 200,000+ folks.

Today, Vitaly Friedman reveals the Smashing Book Mystery riddle and announces the winners! (in case you want to figure it out first, close this window since there are spoilers in this post.

Ah, the good ol’ Smashing Book Mystery riddle. 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 (#aed4dc, anyone?).

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

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!

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

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 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.gif or just house.gif?

Smashing Book Mystery
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.gif.

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

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

…and book.gif.

Smashing Book Mystery
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 Mystery
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 Mystery
Oh... that's... just... surreal.

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

Smashing Book Mystery
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 Mystery
Aha! The hashtag was hidden under the pillow!

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

Smashing Book Mystery
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 Mystery
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: #feelsmashing and #newsmb4perspective.

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 Ball, 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 Kurdjian 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 Kurdjian’s animated GIFs, 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? ;-)

Further Reading

Smashing Editorial (mrn)