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. new
Smashing Book 5 features smart responsive design techniques and patterns.
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 UX, front-end and performance problems in large companies. Get in touch.
Guess what: those tricky mystery riddles are never easy to design. The idea has to be evaluated and brought into life, just to be crashed by painful user tests and then adjusted over and over again until it's easy enough to solve — but difficult enough to not solve fast.
When we started out with riddles, we wanted to have an entertaining yet challenging game that wouldn't be easy to crack, and would keep our dear readers busy for quite some time.
In many projects, responsive images aren’t a technical issue but a strategic concern. Delivering different images to different screens is technically possible with srcset and sizes and <picture> element and Picturefill (or a similar) polyfill; but all of those variants of images have to be created, adjusted and baked into the logic of the existing CMS. And that's not easy.
On top of that, responsive images markuphas to be generated and added into HTML as well, and if a new image variant comes into play at some point (e.g. a file format like WebP or a large landscape/portrait variant), the markup has to be updated. The amount of extra work required often causes trouble — so if you have a perfect product shot, you need to either manually create variants for mobile and portrait and landscape and larger views, or build plugins and extensions to somehow automate the process.
Nothing is perfect on the web. We can't make sure that our websites always work as intended, but we can try our best to design resilient and flexible websites that aren't that easy to break — both in terms of interface design and security. Yet neither resilience nor flexibility are usually reflected in our deliverables and mock-ups.
In practice, mock-ups usually represent a perfect experience in a perfect context with perfect data which doesn't really exist. A good example for it are “optimal" usernames which are perfectly short, fit on a single line on mobile and wrap nicely, or perfect photography that allows for perfectly legible text overlays. It's not realistic. We need to work with dynamic content in our prototypes, with both average and extremes being represented.
Hear, hear! SmashingConf NYC 2016 is coming! A spectacular performance about failures, successes and superpowers in front-end and UX — now on Broadway! A flabbergasting show on fascinating endeavours in web design, with busted myths, horror design stories and wisdom gained from daunting real-life struggles! Don't miss the most remarkable show of the year!
Can you dispel the truth from the lies? Honesty from deception? Myths from heartbreaking real-life experience? Have you figured out responsive design, mobile, pattern libraries, SVG, flexbox, performance, HTTP/2 — and all of the other mischievous, erratic facets of designing for the web today?
Yep, one of those mysteryriddlesagain? To celebrate the launch of SmashingConf NYC, we’ve prepared yet another riddle, and this time it will be a matter of patience and following clues. As usual, we've hidden secret keys hashtags in a series of animated GIFs.
Below you'll find the first animated GIF, containing a location clue. To move to the next level, you have to find a hidden hash tag and follow a link in a tweet containing it. Once you've reached the last level (you'll know when), just tweet all of the keys in one single hash tag (or a screenshot if there isn't enough characters left!) to @smashingmag on Twitter! Not that difficult, right?
Some books deserve a spot at your desk. The brand new Hardboiled Web Design by Andrew Clarke is one of them. In its 5th anniversary edition, Andy explains how you can use HTML/CSS efficiently in responsive design — and how to reduce wasted time in the process with developers, designers and clients. No fluff, no theory — just insights into his own experiences with clients such as ISO and WWF.
If you get a printed copy (free worldwide shipping), you'll get the eBook for free — available in PDF, ePUB, Amazon Kindle. All printed copies will ship from Dec 8th. Softcover, 441 pages. Jump to the table of contents. Proudly published by yours truly Smashing Magazine.
So you know what's going on in front-end. You've been working with pattern libraries and atomic design and Gulp and SMCSS and BEM and HTTP/2 and Flexbox and SVG. What you might not know though is what pitfalls and traps other web designers have encountered in practice — to prevent issues creeping out down the road.
We love organizing events that deliver value and leave a long-lasting impression. SmashingConf Oxford is taking place again next year, on March 15–16th 2016. The conference will be packed with smart real-life solutions and techniques, ranging from front end to design to UX — and a few delightful surprises along the way. Two days, one track, 14 brilliant speakers and 350 fantastic attendees. Tickets are now on sale.
Discussions about design trends and visual style are often very subjective and they rarely provide actionable, valuable takeaways. Nothing beats a conversation about what worked and what didn’t work in actual real-life projects and what decisions were made along the way. That's exactly what we're setting off to explore in Oxford — accompanied by a lot of learning and networking in the beautiful pathways and gardens of legendary Oxford.
Exactly 9 years ago we published the very first article on this very website. Many things changed since then, but one thing remained the same: our obsession for publishing valuable, practical quality content. We proudly stand behind our work — the books, the eBooks, the conferences; our craft is ours, but our work serves the community and belongs to everybody.
As a team, we are happy and privileged to do what we truly love, and we know that this wouldn't be possible without your kind and generous support. So thanks for sticking around. Now, a birthday calls for a birthday party, so we've prepared a little something for you to celebrate the day: a free chapter on responsive design patterns (PDF), a Mystery Riddle, a new free eBook and a birthday special: if you grab the hardcover of the Smashing Book 5 today, you'll get five Smashing eBooks as a gift for your kind support.
Ah, these mysteryriddlesnever stop, do they? To celebrate our ninth birthday, we’ve prepared yet another riddle, and this time it will require a bit more teamwork. We've hidden secret keys in different (physical) locations across the world. To move from one level to another, you'll have to find a hidden print-out in all (four) locations. Watch out for GIF file names.
To find the key password, you have to follow the clues and hints in a series of animated GIFs. Once put together, the keys will add up to a secret Twitter hashtag. Below you'll find the first animated GIF that contains a location clue. Identify the location, go there (yourself, or ask a friend, colleague or a total stranger) and find a hidden print-out.