Mobile-first approach to designing modern websites

[mostakimvip06]

Not so long ago, no one had probably heard of the mobile-first approach. No wonder, since mobile-first design is closely linked to the dynamic history of the development of computers and mobile devices .

Contents
Desktops and laptops
Mobile first
There are two commonly known methods of web design.
Why is it still worth moving towards mobile first?
Okay, but how do you start creating with a mobile-first mindset?
Desktops and laptops
Desktops and laptops are one of the greatest achievements of civilization, we can't argue with that fact. They have significantly influenced almost every sector of human life. Computers are used in every industry: from education, medicine, logistics, administration, to entertainment. I remember like it was yesterday when my parents bought me my first laptop with the money I received for my communion, it was an HP Compaq weighing over a kilogram, which I still have out of sentiment. This laptop, apart from most of the wonderful (for those times) parameters, has 256 MB of RAM.

Today, we have devices in our pockets that are equipped with up to 16GB, which is 64 times more efficient! This is great evidence of the direction we are heading technologically.

In the first years of the 21st century, there was a strong technological development, which was based on computers. At that time, no mobile device could compare to them. Therefore, stationary devices were used to browse the Internet. As time passed and progressed, mobile phones turned into smartphones with more and more possibilities, so people began to reach for them more and more willingly. The graph below shows the ratio of mobile devices to computers used to browse the Internet.

The ratio of mobile devices to computers used to browse the internet
As you can see, since 2017, mobile device users have constituted the majority of Internet users.

Mobile first
Knowing that more and more visits to websites come from smartphones, we need to adapt our website to these devices as best as possible, so that everything is displayed on them as we want it to be. This is why the mobile first ideology was created.

The difference between desktop and mobile is psychological, because browsing websites or stores on a smartphone provides us with completely different experiences and emotions. For example, we want to buy something online, looking for it on a computer, most users after finding an offer simply leave the tab open, hoping that they will find a better offer or claiming lebanon telemarketing data that they still need to sleep on the thought of making a purchase. While 63% of mobile users decide to buy products found using a smartphone, about 70% of whom decide to buy it the same day .

The vast majority of buyers, as many as 67% , declared that they would be much more likely to make a purchase from a website that is compatible with their mobile device.

73% of consumers visit websites on their mobile devices, while only 20% of companies offer mobile versions.

There are two commonly known methods of web design.
a graceful degradation
Graceful Degradation , also known as Desktop First, is a technique that involves designing a complete website, a complete product for computers. The ideal solution in this case is to use Full HD resolution, which gives us plenty of space to freely place elements and implement the full functionality of the site. The next step is to reduce the resolution and remove or hide elements that no longer fit. This technique has been widely used so far.

progressive improvement
Progressive Enhancement , also known as Desktop First, is a technique that involves designing a complete website, a complete product for computers. The ideal solution in this case is to use Full HD resolution, which gives us plenty of space to freely place elements and implement the full functionality of the site. The next step is to reduce the resolution and remove or hide elements that no longer fit. This technique has been widely used so far.

Why is it still worth moving towards mobile first?
Thanks to this approach to design, we will gain a much more refined mobile version of our website, and as we already know, most users use smartphones than computers.
We are still designing a fully functional version of our site for desktop devices.
The mobile version does not include some elements that we often use in the desktop version, including hovers (elements that respond to hovering over them with the cursor), which makes the site lighter and loads faster.
Thanks to the fact that the website works faster and more efficiently, the conversion rate will also go up.
Okay, but how do you start creating with a mobile-first mindset?
You just need to follow a few very important rules:

Resolution - The most important thing is to start designing with mobile resolution instead of desktop resolution.
Source: dribbble.com
Visual hierarchy - this is nothing new, although in the case of mobile first it is very important and worth mentioning. Let's first collect all the data and elements that we want to include on the page and determine which of them are the most important.
Source: dribbble.com
Specific buttons - first of all, we can safely give up buttons and replace them with various types of swipes and other gestures that are intuitive for smartphone users. However, if we decide to stick with classic buttons, remember that the human finger has a much larger margin of error than the cursor. So let's design buttons in such a way that they can be tapped without any problems.