Back in spring 2013, Smashing Magazine sported a <select> menu as its mobile navigation. It wasn’t considered an anti-pattern back then and Marco Hengstenberg still thinks it’s a viable solution to the complex problem of how to build accessible and functional cross-device navigation. Brad Frost wrote a few words about the pros and cons of this pattern on his blog and Marco couldn’t agree more. In this article, Marco will explain how he helped rebuild the mobile navigation in order to enhance the experience for the readers of Smashing Magazine.
Read more…
Hey, lovely to have you back here. Facebook announced that they built their first cross-platform React Native app. After nearly three years of development, Modernizr 3 is out now. Heydon Pickering explains how to re-create the goodness of gifs in a vector format with SVG. 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.
Read more…
For those of us who use Varnish and also want to move to HTTPS, there is a problem: Varnish doesn’t support HTTPS. If you make the move to SSL, configuring Apache to serve your website securely, then you lose the speed advantage of Varnish. There is a relatively straightforward way to deal with this issue, and that is to stick something in between incoming SSL requests and Varnish, a layer that handles the secure connection and SSL certificates and then passes the request back to Varnish. In this article, Rachel Andrew will show you how to move your website to HTTPS, taking advantage of Varnish Cache.
Read more…
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. The most impressive warship of the day, Vasa floundered and sank just one mile into its maiden voyage due to fundamental design issues. In this article, Greg Nudelman will explore how the lessons from the Vasa ship can help you keep your mobile project from sinking right out of the port. Before you begin, put your vision in place as a storyboard. Take the time to test it with potential customers and stakeholders — ensure that they are as enthusiastic about your idea as you are.
Read more…
In this article, Heydon Pickering mixes old with new, taking a somewhat primitive art and breathing new life into it. With the help of Sass, he streamlines the necessary workflow and hopefully demonstrating that automation can, sometimes, be a friend to creativity. The reason he conceived the technique and wrote the necessary code for this article is because he really wanted to make cel animations of his drawings. There was already a goal. The design part is in determining what we want to make in the first place, for whom, and whether it’s really such a good idea.
Read more…
The industry wants us to waste broken gadgets and buy new ones, even if it would only take minutes for anyone to repair it. But without companies sharing how we can repair things, it’s a tough task. We, including the gadget vendors need to start thinking about how to produce less waste. 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.
Read more…
Mmost 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. Look at the examples in this article, and consider the checklist to spot opportunities for improvement in your current user experience. If you are starting out from scratch, you have a unique opportunity to embed these principles from the outset.
Read more…
Interactive maps can be intimidating, but they don’t have to be a black box. You can create your own custom SVG maps with open data and software. In no time at all, you will have enhanced your website with a beautiful, fully customizable, interactive map. In this article Chris Youderian 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, he will create an SVG world map.
Read more…
Our work serves the community and belongs to everybody, and 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. We’ve prepared a little something for you to celebrate the day: a chapter on responsive design patterns (free 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.
Read more…
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. Below you’ll find the first animated GIF that contains a location clue. Identify the location, go there and find a hidden print-out. Once you’ve reached the last level (you’ll know when), just tweet out all the keys in one single hashtag to @smashingmag on Twitter! Alright, let’s get down to business. Are you ready? Action!
Read more…
