You know, we use ad-blockers as well. 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. our upcoming SmashingConf Barcelona,
dedicated to smart front-end techniques and design patterns.
This category features articles on best and emerging practices for responsive website design, Web apps and native apps. While the mobile Web is still in it’s infancy, we can learn from the experiences of professionals who are working on mobile every day. Curated by Derek Allard. Subscribe to the RSS-Feed.
Imagine that it's a hot day. The sun is out, and the temperature is rising. Perhaps, every now and then, there's a cool breeze. A good song is playing on the radio. At some point, you get up to get a glass of water, but the exact reason why you did that at that particular time isn't easy to explain. It was "too hot" and you were "somewhat thirsty," but also maybe "a little bored." Each of these qualities isn't either/or, but instead fall on a spectrum of values.
In contrast, our software is usually built on Boolean values. We set isHot to true and if isHot && isThirsty && isBored, then we call getWater(). If we use code like this to control our game characters, then they will appear jerky and less natural. In this article, we'll learn how to add intelligent behavior to the non-player characters of a game using an alternative to conventional Boolean logic.
Once someone starts using your app, they need to know where to go and how to get there at any point. Good navigation is a vehicle that takes users where they want to go. But establishing good navigation is a challenge on mobile due to the limitations of the small screen and the need to prioritize content over chrome.
Different navigation patterns have been devised to solve this challenge in different ways, but they all suffer from a variety of usability problems. In this article, we’ll examine five basic navigation patterns for mobile apps and describe the strengths and weaknesses of each of them. If you’d like to add some patterns and spice up your designs, you can download and test Adobe XD for free and get started right away.
In 2015, Google announced that mobile searches surpassed desktop searches in at least 10 countries. 56% of traffic on major websites comes from mobile. In light of this, Google’s decision to improve the mobile user experience by various means, such as AMP pages and a dedicated mobile index, comes across as a sound business move.
More than half of the 2 trillion searches Google processes each year come from mobile devices. Mobile devices have changed the way we approach search, ushering in new types of habits such as local search, voice search and more. These consumer habits have greatly affected the way search engine providers think about user search intent.
Why write requirements? Well, let's imagine you want to produce a mobile app, but you don’t have the programming skills. So, you find a developer who can build the app for you, and you describe the idea to him. Surprisingly, when he showcases the app for the first time, you see that it is not exactly what you want. Why? Because you didn’t provide enough detail when describing the idea.
To prevent this from happening, you need to formalize the idea, shape it into something less vague. The best way to do that is to write a requirements document and share it with the developer. A requirements document describes how you see the result of the development process, thus making sure that you and the developer are on the same page.
Voice-based interfaces are becoming commonplace. Voice assistants such as Siri and Cortana have been around for a few years, but this past holiday season, voice-driven devices from Amazon and Google made their way into millions of homes.
Recent analysis from VoiceLabs estimates that 24.5 million voice-driven devices will be shipped this year, almost four times as many as last year. As experience designers, we now have the opportunity to design voice experiences and interfaces!
In case you're wondering what OAuth2 is, it's the protocol that enables anyone to log in with their Facebook account. It powers the “Log in with Facebook” button in apps and on websites everywhere.
This article shows you how “Log in with Facebook” works and explains the protocol behind it all. You’ll learn why you’d want to log in with Facebook, Google, Microsoft or one of the many other companies that support OAuth2.
Sometimes you have to step back and ask why a tradition exists. In mobile-first design, serving an image in three sizes — one for smartphones, one for tablets and one for desktops — using media queries and responsive images has become a tradition. But is it the best solution?
It's most likely better than doing nothing, but how well does it actually work? And is there room for improvement? In this article, we'll look closely at how well the one-size-per-form-factor approach really works and how we can use smart content delivery networks to improve image performance.
When you develop a game, you need to sprinkle conditionals everywhere. If Pac-Man eats a power pill, then ghosts should run away. If the player has low health, then enemies attack more aggressively. If the space invader hits the left edge, then it should start moving right.
Usually, these bits of code are strewn around, embedded in larger functions, and the overall logic of the game is difficult to see or reuse to build up new levels.
To say that responsive web design has changed our industry would be an understatement at best. We used to ask our clients which resolutions and devices they wanted us to support, but we now know the answer is “as many as possible.” To answer a challenge like this and to handle our increasingly complex world, our industry has exploded with new thinking, patterns and approaches.
In this article, I want to look specifically at the issue of responsive navigation. We will first talk about information architecture, then the purpose of navigation, and finally we will look at three responsive navigation patterns that have served well over time.
In the first article of this series, we walked through how to put together the hardware board and all of its additional components into a single rig. I also gave you a glimpse of the decision-making process behind the selection of the board.
In this second (and last) article of the series, we will go over the code that will drive the sensor and the communication to the cloud. Additionally, we will configure a custom dashboard on Adafruit IO, so that we can visualize our data in real time.
Big news from Google: Within a few months, the infamous search engine will divide its index to give users better and fresher content. The long-term plan is to make the mobile search index the primary one. Why does this matter for e-commerce website owners?
Well, it will enable Google to run its ranking algorithm differently for purely mobile content. This means that mobile content won't be extracted from desktop content to determine mobile rankings. That's definitely something that retailers can leverage, thanks to AMP. This article outlines how to get started with AMP and how to gain an edge over the competition with your e-commerce website.
The world is constantly evolving with frameworks, such as the Internet of Things (IoT) and virtual reality (VR). These and many others are opening opportunities to rethink how we approach prototyping: They introduce avenues to marry the digital software with the tangible aspect of the overall user engagement.
This two-article series will introduce readers of different backgrounds to prototyping IoT experiences with minimum code knowledge, starting with affordable proof of concept platforms, before moving to costly commercial offerings.