The whole story started by a recent post in the AdEspresso facebook group:
“I’ve been reviewing a lot of campaigns the past few days and the trend I’m noticing is that mobile isn’t just important it’s literally getting 99% of the traffic for some campaigns.”
Although 99% is a rhetorical exaggeration, our experience is that at least 50% of our visitors come from mobile. It depends on many factors but we can definitely say that this number is increasing. Therefore I decided to take a closer look at ‘Mobile first design’ and go through some aspects that need to be considered.
There are three main concepts that we should clarify before we go deeper just to get everyone on the same page: mobile responsive, mobile first and progressive web apps.
I guess this is the most well-known and seemingly easiest practice for all of us since it allows the desktop webpages to be viewed “in response to the size of the device” that you use. In other words, the full content of your webdesign on desktop is available to be viewed on mobile as well.
In the case of mobile first design, you rather start with the essentials on mobile and then scale them up and add some extra only on desktop.
The newest concept of all is the app-like user experience. In the case of a well-designed progressive web app you immediately forget that you reached the website from the browser because it takes the outfit and some functions of a mobile application.
“Progressive Web App can be seen as an evolving hybrid of regular web pages (or websites) and a mobile application.”
How can you decide when to start building your app or webpage on mobile first? First you should answer some essential questions.
Let’s see some examples to make it more tangible. If you build a video sharing app for young people (18-25) who live in the USA, you definitely consider starting your product on mobile first. I bet that more than 60% of your users will come from mobile platforms. Or if you have a webshop for women at the age of 30-55 in Eastern Europe you can’t miss big if you start it on desktop first.
The context of browsing your page on mobile also suggests that your visitors are willing to spend even less time with waiting on a loading page plus the superquick data connection is also questionable. Though it sounds strange, the truth is that one of the most important reasons to go mobile 1st is to decrease your page’s loading time.
Content 1st does not only suggest that you need to work hard on the copy but also to reduce the functions of your page when viewed on mobile. In order to determine those minimum number of functions and get the best out of your product, take a look at our blogpost on the design process we apply at UXstudio.
Your fingers are much bigger than the cursor on your screen. Keep in mind to leave enough space between buttons or any clickable elements on mobile screens. Apple’s recommendation is to give at least 44px for every touchable targets.
Information architecture and thus navigation is more important on mobile than on desktop. You have to plan every step beforehand. You need to consider using a navigation section at the bottom of the screen instead of using a hamburger menu. At least the most important menu options need to be visible. And one more thing: it is also advisable to use a search icon instead of search bar on mobile.
Click here to find more examples for bottom navigation!
When you go through all those steps and create a prototype, start testing it with real people on all kinds of devices. Yes, testing is also unavoidable on the fragmented platform of Android. On the other hand, you also need to test the copy with extra care as that is the core essence of your content. Testing your prototypes will help you find out whether there are any ‘misclicks’ (or rather ‘mistaps’), or your message went through at all. It’s going to be easier to identify those touchpoints that need some facelift – maybe by a nicely put animation or some helpful microinteractions.
Did I miss something? Let’s create this checklist together! If you have anything in your mind which is advisable to add to this post, please share your thoughts with us in the comment section and we are going to update this post based on your recommendations. Thank you! 🙂
It's hard to find any product designers nowadays who don't use or at least don't…
As we step into 2024, the significance of investing in user experience (UX) and user…
Are you interested in how eye-tracking in UX research can be leveraged to gather reliable…
In this episode, we have a conversation with Sándor Zelenka and Benedek Göbölös as they…
Current generative AI tools can come up with videos and images within minutes. We still…
Even if you are far from being a football fan, I’m sure you’ve heard of…