    
|
|
|
As a designer, you want to provide a superb service to your clients, and one of the best ways to do that is to base your designs around an existing template; it speeds up the process, keeps costs to a minimum and covers all bases. Everybody wins!
The better the template, the easier the job. So, we’re delighted that our sister-site, MightyDeals.com, has been able to arrange a huge deal on this bundle of one-page parallax templates built by the team at GT3Themes.
Coded using the popular Bootstrap 3.0 framework, this amazing collection of 5 premium themes is fully responsive and completely customizable: each template comes with all the CSS, HTML, JS, PHP and the original PSD you’ll need to completely customize the template for your project.
What’s more, each template uses the trendy parallax scrolling effect. You’ll also find lots of additional interactive features including FlexSlider, jPlayer Plugin, jQuery Carousel, PrettyPhoto, Isotope Sorting, an AJAX contact form, and more.
Just take a look at the great templates included in this deal:
The regular retail price of these templates is $375, but for a limited time you can get them for just $17, that’s a mighty 95% discount! Jump over to MightyDeals.com right now to grab this offer.
Have you used GT3Themes’ templates in your work? Which of these templates appeals the most? Let us know in the comments.
| Massive Discounts on Stock Photos – 90% off! |  |
|
|
When it comes to finding the perfect mate, people aren’t as fussy as they make out, say researchers studying behaviour on online dating sites.
There are 54 million single people in the US and around 40 million of them have signed up with various online dating websites such as match.com and eHarmony. As a result, about 20% of current romantic relationships turn out to have started online.&
When it comes to finding the perfect mate, people aren’t as fussy as they make out, say researchers studying behavior on online dating sites.
]]>
Today’s online meeting (Jan 30, 12:30-2:30 EST) in the 2014 Ontology Summit series is part of the Tools, Services, and Techniques track and features presentations by
Audio via phone (206-402-0100) or Skype. See the session page for details and access to slides.
]]>The XML Query Working Group has published a Proposed Recommendation of XQueryX 3.0. XQueryX is an XML representation of an XQuery. It was created by mapping the productions of the XQuery grammar into XML productions. The result is not particularly convenient for humans to read and write, but it is easy for programs to parse, and because XQueryX is represented in XML, standard XML tools can be used to create, interpret, or modify queries. Comments are welcome through 25 February 2014. Learn more about the Extensible Markup Language (XML) Activity.
]]>A complete Working Draft of Website Accessibility Conformance Evaluation Methodology (WCAG-EM) 1.0 was published today by the Web Content Accessibility Guidelines Working Group (WCAG WG) and Evaluation and Repair Tools Working Group (ERT WG), through the joint WCAG 2.0 Evaluation Methodology Task Force (Eval TF). WCAG-EM describes an approach for evaluating how websites, including Web applications and websites for mobile devices, conform to WCAG 2.0. Comments are welcome through 28 February 2014. After the comments from this review period are addressed, WAI expects to publish this as an informative (that is, non-normative) W3C Working Group Note. Learn more from the WCAG-EM Overview and about the Web Accessibility Initiative (WAI).
]]>The Web Applications Working Group has published a Working Draft of XMLHttpRequest Level 1. The XMLHttpRequest specification defines an API that provides scripted client functionality for transferring data between a client and a server. Learn more about the Rich Web Client Activity.
]]>
 |
Everybody loves a good riddle, but when you design one, you never know how it will be perceived until you try it out. The new Smashing Mystery Riddle didn’t emerge over night, and after weeks of fine adjustments and many — many — test runs, we prepared some coffee, pressed that shiny “Publish” button and, you know, started waiting for tweets. And now, exactly two days later, it’s time to reveal the mystery and announce the winners. Oh, you want to figure it out first? Well, then please close this tab since there are (obviously) spoilers in this post.
Admittedly, the new riddle turned out a bit harder than the previous one. Again, we didn’t want it to make it easy and we also didn’t want to make it too hard since most people would just drop it at some point. We did want to challenge you to be creative and think hard though, and finding this sweet spot of complexity took time and patience. So within the five weeks since the initial idea was conceived, we ran 17 various tests on various variations of various animated GIFs.
Well, obviously we got some of the testers totally confused and disoriented, and probably also annoyed and frustrated, and perhaps even angry since they had to stare at the infinitely looped GIFs for quite some time. Over the first two weeks of testing, out of 14 people not even one single person could solve the riddle! Now, that did not make for happy testers for sure! (Oh those poor, poor souls!).
In fact, once you start running tests and introduce little variations of GIFs, and edit the hints and change file names, you start interpreting things that are just not there, and you start seeing animated GIFs all over the place. At some point we started thinking about running looped animated GIFs within looped animated GIFs within looped animated GIFs (“Inception”), and we even created prototypes for that. (Seriously.)
The Inception idea was interesting to explore, but failed miserably in our tests, confusing testers. Large view.
Guillaume, the designer of the GIFs, wasn’t happy with this idea, and we weren’t sure what the heck we were doing. Also, testers went insane and complained about massive headaches and eye strain. That’s not a feeling you want to explore. Well, most of you at least. Going back and forth in our prototypes and drawing boards, by the end we had something that we felt was just right, and on average took around 38 minutes to solve.
Well, the rules were the same, and the game wasn’t much different either. We presented a mysterious animated GIF that contained a hidden message which had to be found. Once you resolved the mystery, you’d see a Twitter hashtag displayed in plain text. So again, just like last time, there wouldn’t be any room for vague interpretations. The solution would be displayed in plain text. And the only hint was to watch out for the file name. And just like the last time, the main difficulty was finding the right idea to pass level 1.
Level 1: The only hint was to watch out for the file name.
So how does it work? Well, if you look very closely at the animation, you’ll notice a steaming cup of coffee on the table with a sign: “Do Not Drink Hot”. Is there a way to cool down the cup of coffee? Initially, we wanted to have something like a responsive animated GIF, which would change depending on the screen resolution, and which would kind of simulate the cooling down of the coffee with JavaScript and/or media queries. However, this would be a bit too easy to detect for our smart audience, so it was a no-go.
Surprisingly, you can see many clicks outside the image on the right side — perhaps this is where the birds were supposed to fly out? We’ll never find out. Large view.
Now, if you watch out for the file name like you are asked to, you’ll discover that you are expected to catch the birds. Since it’s an animated GIF and it isn’t linked, clicking on any area of the image won’t help at all. Neither would an analysis of the color levels or frames lead you anywhere. Some readers noticed that a Twitter hashtag potentially could be a hex color code, so we started receiving lots of very… well, interesting tweets containing various hex values for the Twitter birds and surroundings in the room. It must have taken quite some time, but this was the wrong direction to take. Sorry about that!
So, how can you catch the birds? Well, since nothing is clickable, you have to change something else. Ah! Right. Let’s try changing the file name of the image to something like… open-the-window.gif?..
Changing the file names doesn’t really help. You still have to catch the birds.
Aha! So that’s a blind alley. Well, there is a steaming coffee pot on the table. Are you getting closer? Or is it just a distraction? Well, there is a note at the bottom. Changing image URLs won’t get you anywhere. That’s a bummer. But you are now supposed to look outside the window and notice what kind of birds you see. Well, they look like… Twitter birds, right? And according to the file name, you still have to catch them.
Okay, so you could just head over to Twitter and do a simple search for “Catch the birds”. Well, it isn’t particularly helpful. (Except that there are quite a few frustrated readers like us, though, so that’s probably a good thing. Well, at least we aren’t alone out there!). But wait: could #catchthebirds be the hidden hashtag? Well, potentially, yes, but the riddle clearly says that the hashtag will be hidden in plain text, so probably not.
But wait a second. If the hashtag doesn’t seem to be right, what about the Twitter handles? Let’s try to @CatchTheBirds. Bingo!
@CatchTheBirds would help bring you to Level 2.
Landing on “The Flying Voyage”, it looks like you are on the right path, and you’ve passed level 1. It wasn’t too easy, so a coffee break is probably well-deserved before we proceed to the next level. Oh wait, the coffee — what about that sign on the table saying “Do Not Drink Hot”? Could it be a key as well? @DoNotDrinkHot. Right on! At this point you are supposed to start feeling pretty awesome.
Indeed, the hints for each level are hidden somewhere on Twitter, so the question now is how to use the clues in animated GIFs and file names to pass the levels. Well, this will involve quite a bit of work.
So, you are brought to another animated GIF, and it looks like the main character already got his coffee and is now reading the book. The file name says that “something is wrong here” but there’s nothing wrong with a cat being afraid of thunder… right? So what else could it be?
Level 3: The file name says there’s “something wrong here”… but what could it be?
The couch? Check. The window? Check. The tree? Check. The table? Check. The portraits on the wall? Check. The book? Wait a second. Isn’t the Smashing Book held upside down? The cover of the book is displayed on the right page so how can the character actually read it? Could it be that we have to flip the book somehow or turn it around? Perhaps with, well, @FlipTheBook, @TurnTheBook, @TurnOverTheBook or @RotateTheBook?
@TurnTheBook would help bring you to Level 3.
Excellent. You’ve reached level 3 and apparently you are halfway through! You deserve warm milk, cookies, and probably a donut as well. Apparently, that cat afraid of thunder was just a sneaky distraction—you better watch out for those! Let’s proceed to level 3.
Okay, the book is now in order, and that mysterious person keeps drinking coffee and reading the book. The file name says that “these donuts are making me thirsty…” Now this sounds familiar. Isn’t it a reference to Seinfeld? Maybe that’s where you should look, or maybe it’s just yet another distraction. In fact, if you think about it, that character can’t be that thirsty since he keeps drinking all the time. Could it be that it’s the cat who is thirsty? Let’s try to @FeedTheCat. Oh, well. It was worth a shot.
Level 3: These donuts are making me thirsty…
But what do we know now? We know that @CatWantsMilk, so what if we @GiveCatSomeMilk? Alternatively, we could @FeedTheBlackCat as well. But doesn’t the cat look a bit bored? And since it’s playing with the ball of wool, perhaps it just wants to be distracted? Indeed, that cat is a @BoredBlackCat, so we could also try @PlayWithTheCat, right?
@PlayWithTheCat would help bring you to Level 4.
Right! But wait a second. Different Twitter handles contain tweets leading to different URLs, and yes, it was intentional. Some handles lead to smashed.by/map while others lead to smashed.by/journey. However, both handles lead to the final level 4.
Now that was a tough one. At this point you should start feeling proud of yourself. Time to get your donuts, and move to the final level.
So, we can see a similar scene, but it looks like it isn’t about the book any longer. The mysterious character seems to be busy examining the New York map, so he must be preparing for the trip already. Now there is something really weird about that clock making quick rounds on the wall. Could it be somehow connected with time travel, or time ticking too fast, or something like that? Or is it a just another distraction?
The final round in the mystery wasn’t necessarily the most difficult one, but it took quite some time to get your head around.
The clue in the file name is the question “Where are you going?”. Well, obviously you are going to New York, but there really is nothing you could do with “New York” alone. The main prize for solving the riddle is a trip to New York as well as a SmashingConf NY ticket.
So where exactly will the conference take place? Oh, okay, the TimesCenter, right off Times Square. Wait a second. Times. Square. Could it be a hint? On the wall, we have a clock showing the time, and we have a square and something that looks like a map. Could @TimeSquareMap be a solution? It is indeed! Now obviously, @TimesSquareMap would be a solution as well (and so would @TimeSquareLine and @TimesSquareLine), but your path will probably cross Times Square as well, so you could just go @ToTimesSquare as well.
“Nothing like a good ol’ cake”. But you know, cake is a lie, right? An alternative final GIF animation in the Smashing Mystery.
If you followed another path, you’d land at a different URL with a different animated GIF. You won’t find a map on the wall but instead a chocolate cake with a cherry on top. But wait a moment. The cake is a lie, so is it another distraction or isn’t it? If you follow the same train of thought as with the alternative animated GIF, you probably will end up with @TimeSquareCake or @TimesSquareCake. Could it be…? Is it…?
Phew! @TimesSquareMap revealed one of the final hashtags: #TimeSquareCircle.
Yes! Now you solved the mystery, and as it turns out you really are awesome! The secret hashtag is now displayed in plain text in the tweets from these accounts. Now that was quite a journey, wasn’t it?
You didn’t have to discover all the secret hashtags, but potentially you could find #TimeSquareLine, #TimeSquareCircle and #TimeSquareCenter. In fact, within two days over 400 readers found at least one of these hashtags which we didn’t really expect.
Some of you were quicker than others. While the first riddle back in November was solved within four minutes (!), this one took more time to crack. The first correct hashtag was tweeted by @typeform 53 minutes after we hit that shiny “Publish” button, with more and more tweets containing the right answer shortly after that. In fact, it turned out that our dear readers are absolutely smashing indeed: #TimeSquareCenter, #TimeSquareCircle and #TimeSquareLine.
The first place was earned by the person who was the quickest to solve the riddle. We allocated prizes to the other lucky winners randomly, though 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).
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.
Just like the last time, we worked with talented Guillaume Kurdjian on a series of animated GIFs for the riddle. This time the thread was a bit longer, and after thorough discussions and prototypes, we ended up with over 30 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.
At almost every point throughout the design process we wondered if Twitter might suspend some of the accounts. With 42 Twitter accounts registered over five weeks (we considered using different synonyms), we are still receiving lots of notification emails every single day. And, oh my, it really wasn’t easy to find meaningful Twitter handles that were still available.
Guillaume designed the scenery first; it was a starting point for the mystery riddle.
Besides, you have to work within Twitter restrictions on the accepted characters and the number of characters per Twitter handle (15 chars). It took quite a lot of testing and playing around on the Twitter registration page, and lots of alias emails to make it all work, and lots of CAPTCHAs to be filled in, and obviously, lots of coffee to stay sane! Since we had already played with file names for the first riddle, we had to be a bit more creative about how readers moved between the levels. The critical point was the clue given if the reader changed the image URL in the browser, and it took a lot of experimentation to get it right.
Actually, we wanted to use TimeSquareCircle as a final Twitter handle, but we couldn’t register it due to Twitter’s length restrictions. So we tried TimeSquareLine, TimeSquareMap and TimeSquareCake instead.
Initially we wanted to use Mystery: Level 1, Mystery: Level 2, etc. as Twitter names, but that would make it searchable via Twitter, so we decided to use code names for each level, according to the King Kong storyline that we’ve used throughout Smashing Conference New York, so the user journey went from The Voyage, to the Book Jungle, to Broadway, to the Dome.
Are we waiting for round 3 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 third round? ;-) Stay tuned!
© Vitaly Friedman for Smashing Magazine, 2014.
]]>
