For many months, your entire team has worked their butts off to create an awesome mobile app. Finally, with your team exhausted and excited, it’s showtime! But then, your dream app turns into the ultimate nightmare: Eager customers download the app, use it once and never return. All the sacrifice and months of hard work — wasted. What went wrong?
Your app has become another victim of the latest trend, joining a whopping 41% of today’s apps that are abandoned after only a single use. This trend has many parallels with the story of the 400-year-old Vasa ship. The most impressive warship of the day, Vasa floundered and sank just one mile into its maiden voyage due to fundamental design issues.
What if I told you there was an image format like GIF, but it worked with vectors? What if I said it was possible to reverse the direction of its animation? What if you could take one base image and animate different parts of it separately, at different speeds? Well, the image format, SVG, already exists. It just needs a little gentle encouragement.
In this article, I’ll be mixing old with new, taking a somewhat primitive art and breathing new life into it. With the help of Sass, I’ll be streamlining the necessary workflow and hopefully demonstrating that automation can, sometimes, be a friend to creativity.
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.
Hey there! I gathered some useful articles for you again this week. Let me inspire you to do something new, improve yourself or just think outside the box.
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.