Menu Search
Jump to the content X X
Smashing Conf San Francisco

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf San Francisco, dedicated to smart front-end techniques and design patterns.

The Mystery Is Resolved: A Story Of Muffin Crumbs, Shady Characters And Invisible Letters

We’ve all been there, haven’t we? You find yourself in a coffee shop abroad, sipping cappuccino and chomping a muffin as you realize that your laptop’s battery charge is just about to crush your creative session to dust. Well, perhaps you’ve got your power adapter with you but, of course, it isn’t the right one for foreign power sockets.

So you end up looking around and chatting up with strangers asking for help. Some are more responsive than others, and before you know it, you don’t just have a full battery, but you’ve made a couple of new, surprisingly interesting acquaintances.

As it turns out, forgetting your power adapter is not only a great way to meet fantastic people but also a great strategy to come up with original ideas. In fact, this is exactly how the idea for the new Smashing Riddle1 was born—in a coffee shop in Zürich, Switzerland—and yes, it was indeed that cinnamon muffin that made all the difference in the end.

Letters Scattered All Over The Place, Like Muffin Crumbs Link

Animations have a way of drawing attention to themselves. So it’s understandable that a vibrant animated GIF might raise some interest, questions, or perhaps the reasonable concern of friendly strangers. Desperately looking for a charger, I sparked a number of awkward conversations with surprisingly unsurprised, friendly strangers around me.

In the end, as the charger issue was successfully resolved, I found myself sitting behind a large wooden desk, immersed in a profound discussion with a charming, smart math student from Switzerland, and an eager, seasoned engineer from Turkey. It was a fast-paced, inspiring discussion about life stories, experiences, biggest failures and creative endeavours.

This is how it all started. The letters scattered all over the GIFs were inspired by muffin crumbs scattered all over a plate. (Image source: jentilley2)

As the conversation continued—still sipping those Zürich cappucinos—I caught glimpses of one of the older animated GIFs looping on my screen, and before I knew it, the conversation was all about mysteries, riddles and mischievous animated GIFs. During an intensive, unscheduled, battery-recharge brainstorming session, we came up with a number of interesting ideas, all thoroughly written down, tagged and ready for use. One of the ideas was to play with the letters and the way they would be displayed.

You see, at SmashingMag, we cherish the idea of lasting traditions—be it monthly desktop wallpapers, editorial newsletters or those weird mystery riddles. So in the spirit of tradition, the riddle obviously had to be based on animated GIFs, but we wanted to do something entirely different from changing file names or guessing Twitter handles.

Originally, before my trip to Zürich, we had thought about using a number of invisible semi-transparent “layers” hidden in animated GIFs (erm, hey, we actually should do it for the next one!), and later on we spent quite some time prototyping the “reflection” idea in which a hidden message would be revealed once an actual mirror was placed up against the screen. The latter proved to be quite difficult later on in implementation, especially due to the wide diversity of screens out there.

During the brainstorming session, we came up with an idea to do something along the lines of Scrabble, so the readers would derive clues from a number of GIFs and construct a secret keyword out of the letters discovered in those GIFs. And what if letters were scattered all across the GIFs very much like the crumbs of the muffin were scattered all across my plate? Some letters could be hidden, others would be clearly visible, and all of them would be turned, or flipped, or rotated, or skewed for confusion—very much in the spirit of the “reflection” idea we had in the beginning. That’s one of the ideas I brought back to the office after my trip to Zürich.

A New Mystery, A New Design Challenge Link

Our previous mysteries required a lot of tinkering and experimentation but, frankly, quite a bit of luck as well. The most important bit was to come up with the right approach. For the new riddle, we wanted to keep things a bit simpler and apparently easier to draw in as many readers as possible without the riddle becoming too annoying after the first few tries.

Of course, the riddle shouldn’t be too easy either, so instead of hiding letters of one single word in GIFs, we felt that hiding parts of a sentence might work a bit better. We needed a twist though, something that would make the riddle a bit more interesting and cause one or two “Aha!” moments. We thought about using lowercase symbols to introduce more confusion but ‘i’ and ‘l’ might look too similar in a small resolution, so instead we looked specifically for letters that could be confusing and decided to rotate them or skew them until they actually become confusing. It wasn’t the only twist though, as you’ll see later in the article—a few fine adjustments and twists were added during the test phase later on.

Whenever a new mystery is created, the first thing we do is set up the scene for the riddle. Our dear animator Guillaume knows exactly how to create just the right atmosphere. An early draft. (Large preview)4

So when Paul Boag’s new book5 was about to be published, we jumped right into the idea, came up with a sentence and scattered parts of that sentence across three animated GIFs. Each GIF contained a few scattered letters (all uppercase) that readers were supposed to use to build words. Once you put the words from all the GIFs together, you’d be able to create a sentence—and, of course, no letters should be left unused. So once the sentence is constructed, it had to be tweeted @smashingmag using the hashtag #smashing. Of course, we’d also hidden a few clues in the image captions under each animation and in the corresponding file names.

Easy-peasy? Well, let’s see how it works, and what hidden clues those weird animations contain. (But seriously, who would put skewed letters on the floor and walls anyway, right?)

1. “Change”: Get Out Of That Desk Already Link

You know it, and we know it: nothing is more frustrating than stubborn management. Usually, changing workflows, processes and culture seems to be impossible, but perhaps something can be done about it after all. At least if you trust the hint provided for the very first animated GIF.

Smashing Book Mystery
Nothing is more frustrating than stubborn management. Perhaps it’s just about time to do something about it. Three words, one of them on the floor. (Large preview)6

Well, if you are playing Scrabble or any other word-building game, the first thing you have to do is gather everything you’ve gotc. So alright, we have to find three words in the GIF. Let’s collect the letters first, starting from the left-bottom corner:


Alright. Well, we are smart, so why don’t we just use an online anagram solver7 to make the sense of these letters? We don’t want to do it manually, right? Hmmmm.8 No result. It doesn’t make sense. That’s weird. There must be a trap. Perhaps we are missing something: we could argue about “O”, if it’s actually the letter ‘O’ or the digit ‘0’, but apparently we can rule out digits since all characters are supposed to be uppercase letters. But wait a second: if you rotate “Z” through 90 degrees, you end up with an “N”, right? So perhaps the combination is different:


Ah, that’s better. Looks more like English. We’d better watch out for those traps. Okay, if we play around with it, we can figure out that the word hidden here is… NORDIC TEU, erm, TCRIONDUCE, er… aha! INTRODUCE! Nailed it.9

Okay, it wasn’t too hard. So what about the two missing words? Same game, same rules. Let’s collect the letters first:


Mmm. Wait, wait. Only letters are allowed, so the yellow sticky notes with an equals sign and the dash are probably another trap since only uppercase letters have to be considered. We can remove them:


Okay, it smells… easy. Probably the best way to avoid mistakes in discovering the words is to move letters around until they start making sense, probably with CMD+X and CMD+V. Right, right. The shiny new book on the table can’t just sit there on its own—what’s the title again? Digital Adaptation. Ah wait; wouldn’t “DIGITAL” fit nicely here, and in fact, the letters are right there, aren’t they?


Well, it’s time to do something about that frustration, right? Probably just the right time for a change?


Bingo!10 Well, at this point we know that every animated GIF contains a couple of words, but it looks like they might be connected on their own as well. We might try to distribute the letters in an other way, but this solution does look quite fitting. Okay, let’s hope for the best and move to the next one.

2. “Convincing”: They Listen But Don’t Move Link

Well, perhaps you still have the enthusiasm to convince your colleagues about a more pragmatic, effective workflow. But is it really usually colleagues who need this kind of convincing?

Smashing Book Mystery
It’s difficult to convince them, though. But if not you, who else will help the company and bring it on the right path? Three words. (Large preview)11

Oh well, at least it looks like those people in the meeting are paying attention to what that guy is so passionately explaining. Again, let’s collect the letters scattered over the table first, and we should keep the variations in mind as well: “M” could be a “W” and “Z” could be an “N”, and “L” in left upper corner looks surprisingly similar to a skewed “J” (by design or by mistake?). So we’ve got:


Oh wait, there is another one, in the upper left corner under the plant! Is it “M” or “W”? Let’s consider both options. Okay, that’s freaky:


That’s quite a few combinations. We must be smarter about this. Let’s look at the image caption. The caption talks about “convincing them”, but what does it refer to? Ah, stubborn management from the first GIF. Perhaps the guy in the GIF is trying to convince… managers?


Umm… almost. So we have neither “R” nor “S” here, so what else could it be? Ah! Perhaps management?


Nice! Well, there aren’t many four-letter-words with “H”, “P” and “J”, so we probably should stick with the “L”. Could it be… HPLE, or to be more precise, HELP. Well, it sounds about right, especially since “help” is also mentioned in the image caption to that GIF.

Invisible A
The “A” was hidden fairly well in the pie chart on the presentation wall, wasn’t it?

Good, good, it wasn’t too difficult after all. Oh snap. It was supposed to be three words. Did we miss something? Let’s take a closer look around the room again. The presentation chart has a few graphs on it, doesn’t it? Circles, bars, a pie… but that pie, there’s something suspicious about it! Doesn’t the piece of the pie look like an “A”? An invisible “A”, maybe? Well, it is…


Alright! That’s a long shot, but let’s go with it for now, and let’s proceed with the last one.

3. “Difference”: It’s Going To Be Just Fine Link

Alright, we know how it works by now. Look closely everywhere on the image and gather all the letters first: that means looking on the carpet, under the chair and under the plant. And then double-check everything to make sure that we don’t miss anything. Also, we know that we can’t trust the colours and the position of letters, they didn’t help us in the past but instead confused (and annoyed) us a bit.

Smashing Book Mystery
In fact, you’ve got nothing to lose. And who knows, in the end, it might turn out even better than you expected. Four words. The letters on the floor belong together, in one word. (Large preview)12

We know that the words on the floor belong together, in one word. Let’s start with them:


Oh well, there aren’t too many options here: it could be either “ERA” or “ARE”. Could it be that easy? Well, let’s keep it this way for now, and gather all the other letters, from the left to the right:


And we have something that appears to be a blank piece of paper. What’s that thing now? An invisible character? Or a sign that a character is hidden? Or an empty space? Also, could something be hidden under the book, or behind the picture, or on the other side of the chair? OK, OK, let’s not get paranoid here. Deep breath. So we’ve got three words to figure out here.

Well, it might take a while, so let’s watch out for clues. The guy in the chair seems to have it all figured out. Perhaps we should check the larger preview of the image. Oh snap, its file name is… difference.gif. Is it… could it be…?


OK, this sounds about right. The combination of available unused letters doesn’t leave that many options: WEH KTEA, MATE HKE… Hmmm. Well, since the character in the chair is victorious, and it’s all about difference, perhaps he… made it?


Better! We’re almost there:

Invisible L
Sometimes thumbs-up could mean more than a sign of appreciation. The invisible “L” that was missing to turn “REA” into the word “REAL”.

Phew, now, that was quite a journey! But wait a second! That guy passing by, giving a thumbs-up to the character in the chair… Doesn’t it look like an “L”? The image caption says that the words on the floor belong together, but it doesn’t say that they build up an entire word. Well, if we added “L” to [ERA/ARE]… Oh:


“REAL”! So perhaps it’s about making a real difference in the end. OK, let’s keep it in mind for now.

Yes, of course, there might be many solutions and we would accept all of them if all letters were used, but after 45 minutes of collaborative brainstorming we discovered that it was highly unlikely that you could construct an entirely different, perfectly meaningful sentence by using all letters scattered across the GIFs, leaving no letters unused. Now it’s time to bring all these words together and try to construct something more or less meaningful out of it.

“Solution”: Making Sense Of It All Link


Okay, well, it doesn’t look too scary! It’s probably as easy as something along the lines of “Help the management introduce digital change: make real difference.” In fact, yes, we would accept all solutions which include “ERA” and “ARE”, but a sentence shouldn’t be just a loose pile of unconnected words. These are all the options which you could build out of this mess of letters:

Solving the Riddle13
Livia Labate14 is one of the solvers of the riddle. Yep, it was a bit of work indeed.
  • Help the management introduce digital change: make a real difference.
  • Help management make the difference. Introduce digital. Change era.
  • Digital era: introduce a change, help management, make the difference.
  • Manage digital era change, introduce a plan, make the difference.

So here we are. A little journey from muffin crumbs to letters scattered all over the place, shady characters and a few invisible characters. Time to reveal and reward the winners.

Winners! Link

It’s showtime! Surprisingly to us, the riddle didn’t take much less time to resolve than the previous ones. First place was earned by the person who was quickest and the closest to solving the riddle, i.e. have found all the right words in the riddle and leaving no letters unused. Please notice that since nobody discovered the “REAL” bit, we had to relax the rules a little. We raffled the other prizes across the first people who tweeted a correct sentence, and tried our best to exclude copycats. 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 first perfectly correct sentence with no letters left unused was tweeted by Dorin Moise15 from Brussels, Belgium, one hour and five minutes after the mystery went live, with: “there, make a difference: help management introduce digital change.” It’s not quite correct but it was the fastest and the most precise tweet. Congratulations, Dorin! You just won a roundtrip to our lovely hometown Freiburg for the Smashing Conference Freiburg, a stay in a fancy hotel and a few Smashing Books. Yaaay!

And here are the other winners:

  • Paul Rose16 (1h 2min): “Make a difference, help management introduce digital change.”
  • Braunson Yager17 (1h 17min): “Help management make the difference, introduce the digital era.”
  • Charlie Park18: “Introduce a digital era; help management make the change.”
  • Razvan19 (3h 21min): “Introduce digital change: help management make a difference there.”
  • Livia Labate20 (Washington DC, USA): “Help management introduce digital change: make a difference there!”
  • Eva Kavaliotou21: “Help management make the difference. Introduce digital. Change era.”
  • Ed Hicks22: “Digital era: introduce change, convince management, help make the difference.”
  • Andreas Busschop: “Make difference. Help introduce the digital management era.”

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 Link

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

Just like the last two times, we worked with talented Guillaume Kurdjian2423 on a series of animated GIFs25 for the riddle. This time the discussion thread was a bit shorter, and after thorough conversations and prototypes, we ended up with quite a number of different GIFs, drafts, and ideas that were thrown away, as well as the ones that made it to the final stage.

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.

make the difference26
Ah, it is a great feeling to solve that damn riddle, isn’t it? Well, you don’t really make the difference, but it’s pretty, pretty good nevertheless. (Large preview)27

As it always is with a public hashtag, it can be quite difficult to separate between the “real” tweets and copies of the tweets. We didn’t choose the hashtag #smashing by accident since it is a quite “messy” hashtag on Twitter, but it wasn’t good enough since we saw lots of weird activities going on, with people reusing tweets 1:1 which we of course didn’t accept. We did look very closely at the dates and profile and activities of every winner to prevent copycats from winning. (We probably will go with #cats next time or even better—will challenge you to construct the “right” hashtag on your own).

Riddle Heatmap28
Poor frames on the wall must have quite a number of finger prints now; we’ll have to bring the room in order later. And yes, apparently those yellow stick-it notes were quite confusing indeed! (Large preview)29

The first GIF wasn’t really a problem for anyone. However, for some weird reason the word “convincing” started to pop up in tweets, although the letter “V” didn’t make its public appearance anywhere—in neither of all those GIFs. Quite a number30 of readers31 discovered “game plan” in the second GIF and was confused about the number of words that would be hidden in the second GIF if “game plan” actually was hidden there.

Wordsmith3433 encountered server hiccups 30 minutes after the riddle went live, but of course we don’t take any responsibility for it.

The truth is that “game plan” wasn’t the part of our initial plan, so we take no responsibility for massive headaches or confusion caused—sorry about that!. Also, apparently Wordsmith3433 encountered server hiccups35 30 minutes after the riddle went live, but of course we don’t take any responsibility for it either.

Semaphore, marine alphabet36
Sam Stealth-Geek Tremaine and his colleagues37 went as far as trying to decode the movements of the character speaking in front, using semaphore. (Image credit.38)

The most trouble was caused by the second GIF which caused quite a lot of headache for many readers. You could go as far as trying to decode the movements of the animated character who could be using semaphore, a marine alphabet. This wasn’t the plan either.

Waiting for round 3 already?39
Are we waiting for round 4 already?

So this is it! It was quite a journey, but we hope it was worth it. We are really sorry about all the unproductive hours that you spent solving the riddle. Well, kind of. Now, are you ready for the next round? ;-) Stay tuned!40

.designer{float:right;margin:0 0 1em 1em;width:260px;}

Footnotes Link

  1. 1 /2014/03/27/smashing-mystery-riddle-have-you-figured-it-out-yet/
  2. 2
  3. 3 /wp-content/uploads/2014/03/scene1.jpg
  4. 4 /wp-content/uploads/2014/03/scene1.jpg
  5. 5 /books/#digital-adaptation
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20
  21. 21
  22. 22
  23. 23
  24. 24
  25. 25
  26. 26 /wp-content/uploads/2014/03/make-the-difference.gif
  27. 27 /wp-content/uploads/2014/03/make-the-difference.gif
  28. 28 /wp-content/uploads/2014/03/riddle1-heatmap1.png
  29. 29 /wp-content/uploads/2014/03/riddle1-heatmap1.png
  30. 30
  31. 31
  32. 32
  33. 33
  34. 34
  35. 35
  36. 36
  37. 37
  38. 38
  39. 39
  40. 40 /the-smashing-newsletter/

↑ Back to top Tweet itShare on Facebook

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, webinars and loves solving complex UX, front-end and performance problems in large companies. Get in touch.

  1. 1

    Still the second gif mentioned “Three words” as a hint and Help Management is two words.. (?)

  2. 2

    Hi! What’s about three words on the second gif? Where is the third word?

    • 3

      Vitaly Friedman

      March 31, 2014 3:03 pm

      Ouch, I’ve forgotten to cover this. Added now—thanks Iris and bam!

  3. 4

    The thing i don’t understand is that the caption of the second gif says “three words”, “help management” are two. I think that’s the reason of “the new gameplan”.

  4. 6

    And what about the description for the third gif. I remember it was ” The two words on the floor belong together, in one word. ” Now it seemed to be changed.

    • 7

      Vitaly Friedman

      March 31, 2014 3:27 pm

      In the very beginning, it was saying “The words on the floor belong together, in one word” which admittedly doesn’t make a lot of sense. It was change to the “letters on the floor belong together, in one word”—building either ERA, ARE or REAL if you discovered the letter “L”. My personal apologies if it brought you on the wrong path, Sid!

      • 8

        Thats fine.
        I thought may be those words on the floor had to be joined together to try out a new web link. Obviously spent some time on that.
        Anyways was a good challenge.
        Cheerz :)

      • 9

        Aaaaahhhhhh!!! “The WORDS on the floor belong together” clue was what made me finally bail out — couldn’t find a good way to combine introduce/reduction with era/are. Never saw the clue edited to “LETTERS on the floor.” :-(

  5. 10

    How come only one of the winners have 10 words in their solution?

    • 11

      Vitaly Friedman

      March 31, 2014 3:47 pm

      Again, we tried to find the best compromise to ensure that the winner is both the quickest to correctly detect as many words as possible and most precise in building the “correct” word. We had to find a compromise between the correctness and speed here, Razvan, and since the 100% correct solution wasn’t found, we had to relax the rules. I hope it makes sense?

      • 12

        It definitely makes sense. I was almost sure nobody will be able to find the solution and have been eager to find out who the winner is. But the tweet I posted in the other comment is almost the same as @livlab’s solution (and by the way, both her answer and mine miss an ‘a’) but way quicker (1h 22m). But some of the winners don’t even have all the letters.

        I really enjoyed working on this riddle and wrapped my head around it since it was the first riddle that I found about in time to have a chance to be among the first to solve it. It’s a great job Smashing Magazine does with these riddles but I just don’t get how come other answers were better and I’ve been left out :D.

  6. 13

    Even one of your solutions has 9 words: “Help management make the difference. Introduce digital. Change era.”

    Given these facts, I don’t understand why is not a viable solution.

    Updated: Oh folks, sorry about the mess I made here. The Smashing Mag contacted me through twitter prior to the messages I posted here and after that apologized for not mentioning me in the winners list. I guess I got a little bit too excited.

    Sorry again and congratulations to all the winners.

    • 14

      Oh folks, sorry about the mess I made here. The Smashing Mag contacted me through twitter prior to the messages I posted here and after that apologized for not mentioning me in the winners list. I guess I got a little bit too excited.

      Sorry again and congratulations to all the winners.

  7. 15

    May i say that my solution:
    is the first with all and only the correct words (maybe not in the right order)?

    Don’t get me wrong, you are amazing, and i’m ok with the winners, but no one of the firsts get it right:
    1st winner: “there” is not one of the admitted words
    2nd: missed “the” AND “era”
    3rd: missed “difference”
    etc. etc.

    Still love you guys!

  8. 17

    Justin Wilson

    April 1, 2014 6:01 am

    How did you create these animated gifs? These are really cool.

  9. 18

    saying a pie chart is a hidden letter “A” is a bit too much.

    There are circles and rectangles too they could be o, p, l, i, t, d…..

    that’s waay too many possibilities to guess if you have to look at the shapes of the graphics to get a letter out. that totally took me off the game! I had management help to begin with too =(

    • 19

      Vitaly Friedman

      April 1, 2014 8:51 am

      Point taken, eva. Yes, but only “I” and “A” were options since they are regular English words. But in the end we didn’t require the winners to have discovered it. But yes, it might have been a bit too much. Thanks for your feedback and we hope we didn’t cause too much trouble!

  10. 20

    Following the riddles I came to the conclusion that it’s almost impossible to solve them as non-native speaker. Even the walk-troughs are hard to understand because the assumptions that are made and the associations are much too hard.

  11. 21

    I really loved this one! Made my head hurt and my scrabble page looked MUCH worse than the one posted. Letters everywhere! haha! Maybe oneday I’ll win one of these suckers! Thanks again guys! Keep it up :)


↑ Back to top