Mobile First Design: it’s worth your attention

Your product at hand, or what Mobile First Design is. Ease of use, high download speed, high functionality, and so on. Sounds great, doesn’t it? It depends on how the product was designed. We would like to offer you a more detailed understanding of Mobile First Design, how it works and what Google thinks about it.

First, there was a smartphone

The Mobile First Design is exactly what it says: first is mobile product construction. Historically, the creation of the product begins with a website for a large screen. The finished version is adapted to the rest of the gadgets. So, turn everything upside down and you will get Mobile First Design. Its production begins with the smartphones.

And if earlier it was believed that the optimization of websites for phones is irrational, as smartphones are mainly used for applications and social networks, the statistics in early 2019 shows absolutely different results. The percentage of mobile internet searches was 61%, which is 5% more than in 2018. And this rate will only increase with the development and improvement of compact portable devices, which can excel the PC.

You need to know that so you don’t get confused

Responsive design is not the Mobile First. The version that is created for your smartphone does not just adapt the web page for your phone. It is better to say that Mobile First replaces the responsive design. The mobile version also compresses the weight of files to speed up page loading, and the process of using the product through the mobile version becomes as comfortable as possible.

Ranking in search engines generates mobile versions first. Google was the first to announce such intentions:

“We will increase the mobile-friendly index in our results ranking. These changes will have an impact on mobile search in all languages of the world and will have a significant impact on search results. Therefore, users will find it easier to find results optimized for their devices.”

Progressive improvement or graceful degradation?

No one knows who is the author of these definitions, but they describe two main approaches to the product development.

Progressive improvement

At MVP, we also call it the cupcake method. It is when you have the basic functionality of a product, page, etc. And then you start to add some additional features, so that you don’t overload the product with unnecessary elements.

Elegant degradation

On the contrary in this approach: first of all, we create full functionality for the desktop version, and then simply remove the features that are not so important, but pleasant. Or those that will not work on mobile devices.

Both approaches are used and each product is eventually upgraded and supplemented after testing.

Why is Mobile First more of an advantage?

We believe it has a number of advantages, but we would like to emphasize the non-standard use of features. The great example is the Zara website. For instance, there is a convenient function of the barcode scanner with the use of the phone camera. You do not need to go to the shop assistant and find out about the presence of goods in the store, it’s simple – scan the barcode. Navigation is also built as a catalogue: choose what you like, click, e-fit and look through the shopping cart. Use the site is as convenient as possible from your mobile device.

The Walgreens website has an interesting feature to identify your geolocation when you use it to provide you with up-to-date information on discounts and special offers. All you have to do is open the resource, and then the network specialists will take care of you.

And that’s the bare minimum that companies use to improve the quality of user experience with cameras and GPS functions.

We decided not to describe all the advantages and disadvantages, but to briefly outline them. First the good thing:

• Acceleration of the buying and ordering process;
• Improved ranking by search engines;
• High download speed;
• Unusual functionality.

From the downsides:

• Mismatch the size of the interface for each device;
• High cost.

Let’s focus on the mismatch between the expansion and the problem. For instance, most of your target audience has an iPhone 6/7/8 and you are designing a product for it. But there are other models and you need to create new versions of the design to make it work the way it should on other gadgets.

Once you’ve developed a product to fit one device, you don’t have to adjust its size to other devices. You have the task to completely change the design for each screen, and this is a completely different time and cost of the product.

And now, let’s talk about ergonomics

Take a look at this image, here we see good, permissible areas for placing design elements and those places that should not be used at all.

The task of Mobile First Design is to place the right buttons, features and CTAs exactly where you need them.

Have you thought about what’s the best thing: scroll, tap or swipe? The popularity is as follows: tap, swipe and scroll.

Tap is believed to be the most popular, it interacts with any design element. Swipe is slightly less popular, but it is sometimes used as a protective design. In order not to make an accidental click.

Ergonomics of mobile applications allows you to calculate which action where is better to place and in which zone: pink, yellow or green. So, you can distribute important for conversion elements in the most advantageous places.

Last, but not least, the choice of menu. Surely you will focus on two main alternatives: hamburger menu or lower navigation.

First of all, it is worth noting that if your user does not understand the navigation of the site in 5 seconds of using the product, it is a bad design for your company. Marketing specialist Louis Ebrew recommends not to hide the menu in the icon, but just leave everything as it is: “Visitors will be very convenient to explore the Internet resource when they have such a guide at hand.”

The first hamburger menu icon was developed back in 1981.The most compromise solution is to use the usual hamburger with a reference to the “menu”. Scrolling hides the word and leaves only the icon.

As for the lower navigation, it is more modern. Often the mobile version of the site with lower navigation is very similar to the application. But the cost of development is less, and if you add the site to the screen home, you get the same icon of the app with similar navigation.

Let’s sum it up

Despite the number of different ways of site development and design for it, Mobile First is considered one of the most promising, complex and expensive. It is definitely suitable for commercial organizations, delivery services and other products that rely on a modern fast pace of life.