Differences between mobile -first -responsive and progressive web apps

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.

Mobile responsive design

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.

Mobile first design

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.

Progressive web app

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.”

What’s the progressive web app good for?

• Instant loading: It means that there is a new technology behind which helps decreasing the loading time of the content
• Add to home screen: Progressive web app allows you to save it’s icon on your mobile’s home screen just like your most favored applications.
• Push notifications: You can easily send push notifications with a progressive web app through user’s browser. It helps you to evolve stronger engagement with your users.

How to decide about mobile first design?

How can you decide when to start building your app or webpage on mobile first? First you should answer some essential questions.

• Who’s going to use or visit this app / site?
• What’s going to be your main feature?
• What’s going to be the context behind you site / app?
• How is the mobile connection in that area where your visitors are?

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.

Your mobile first design checklist

Think of your potential customers clicking on your page on the go

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.

Mobile first is content 1st

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.

Design for your hands

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.

Navigation

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!

Test, test, test

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! 🙂