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 New York, dedicated to smart front-end techniques and design patterns.
The word anticipatory comes from the Latin anticipare, which means "taking care of ahead of time." We normally associate it with something that happens, is performed or felt in anticipation of something.
In a way, most products contain at least one element of anticipation. Aaron Shapiro from HUGE defined anticipatory design as a method where it’s up to the designer to simplify processes as much as possible for users, minimizing difficulty by making decisions on their behalf.
Interactive maps are a fantastic way to present geographic data to your visitors. Libraries like Google Maps and Open Street Maps are a popular choice to do this and they excel at visualizing street-level data. However, for small-scale maps, SVG maps are often a better option. They are lightweight, fully customizable and are not encumbered by any licensing restrictions.
It's possible to find a number of SVG maps released under permissible licenses in the Wikimedia Commons. Unfortunately, it's likely that you will eventually find these options lacking. The map you need may not exist, may be out of date (as borders change), or may not be well-formatted for web use. This article will explain how to create your own SVG maps using Natural Earth data and open source tools. You will then be able to create SVG maps of any area of the world, using any projection, at any resolution. As an illustration, we will create an SVG world map.
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.
Advanced Custom Fields (ACF) is a free WordPress plugin that replaces the regular custom fields interface in WordPress with something far more powerful, offering a user-friendly interface for complex fields like location maps, date pickers and more.
In this article I'll show you how you can extend ACF by adding your own controls to tailor the experience to your needs.
What's happening in the industry? What important techniques have emerged recently? What about new case studies, insights, techniques and tools? Our dear friend Anselm Hannemann is keeping track of everything in the web development reading list so you don't have to. The result is a carefully collected list of articles that popped up over the last week and which might interest you. — Ed.
This week we saw a new Google logo but while the “I like it” and “I hate it” posts dominated our social media channels, some great technical articles were published as well.
Visual effects in games define their overall look and feel, and gameplay. Players are attracted to high visual quality, which generate more traffic and reach. It’s key for creating successful games and providing a lot of fun for players.
In this article I want to present a few ideas of how to implement different visual effects in <canvas>-based HTML5 games. These examples will be based on effects we made in our game, Skytte. I will explain the basic ideas supporting them and provide the effects used in our work.
There are reasons you’re still saying the same thing after all these years — still talking about how it always seems like design gets tacked on to the end of the process. You should be at the concept meeting, you say, where you can make a real difference.
I’ve been hearing it for 15 years. I once had a job where I got to say it myself a few times. I got tired of that pretty quickly. I don’t say it anymore. You shouldn’t either. Primarily because it’s not true.
There is no winner in the battle between iOS and Android, and we all know that. If a product succeeds on one platform, it will undoubtedly be ported to the other. Sometimes app developers don’t even bother waiting, and release apps for both platforms simultaneously. For designers this means only one thing — they will have to adapt an application’s UI and UX to another platform while ensuring a consistent design language across the product.
There are three different scenarios for UI multiplatform adaptation: retaining brand consistency; aligning with the conventions specific to the platform; and seeking a balance between the two. We decided to analyze these three approaches by looking at the most popular apps out there so that you get some insight into what method might work best for you.