Mobile First in Responsive Web Design

Tram Ho

1. Open the beginning

For you, making Web Developer on the Front-end or Back-end is certainly no stranger to the Responsive Design Web (WRD) concept, it is a method to make your website appear well. on different types of screens such as Desktop, Laptop, Tablet or Mobile.

WRDs seem to exist in every website you visit every day and also in every web product you participate in. Earlier I did mostly with the Back-end with Laravel but recently I had the opportunity to participate in responsive web interfaces and tried doing WRD in both directions First Mobile Desktop +. After further investigation, I have now moved to the only method, Mobile First because of the advantages that it brings more than Desktop First . This article will share with you what you learn about both.

2. WRD

We will first explore the difference in WRD development by Desktop First and Mobile First .

a. Desktop First

For your interface Desktop First method will be prioritized code to suit your Desktop first and then continue to add new CSS code with @media query so that the interface and layout of the site Your fit for smaller screens is Laptop, Tablet and Mobile, respectively. The development process will look like this:

Suppose we have a simple HTML and CSS code like this (reference link) :

For the Desktop First method we will use the max-width attribute as you see in the CSS code. In other words, our interface will change if the width of the current screen is less than or equal to the break points , which we set above. The break points you can understand are the width of the screen that we want the interface to change and this will be 1024px and 768px . The result of the above code will give the following result:

  • On the Desktop interface screen will look like:

  • When our screen touches the first break point or in other words has a width less than or equal to 1024px, it will look like this:

  • And finally, when the last break point is reached, the width of the screen is less than or equal to 768px will look like this:

With the above method, the Desktop or can be said to be the default, the title and content will be red and green. With a smaller screen that is specifically here that can be considered a Tablet screen (<= 1024px), the title and content will be orange and lighter blue. And finally on the Mobile screen (<= 768px) will be brown and green.

b. Mobile First

In contrast to Desktop First , in this method, your web interface will be implemented in the direction of small screen device (Mobile) and then devices with larger screens are Tablet and Laptop respectively. and Desktop. Similar to Desktop First , we will also use CSS’s @media query to perform this process. Specifically, it will be as follows:

We will reuse the same example above and only change it a bit as follows (reference link) :

For Mobile First we will use min-width attribute instead of max-width like Desktop First . At this point our interface will also change when touching specific break points if our screen has a width (width) greater than or equal to the break points we set then (768px, 1024px). When you run the above code, you will see that the result is identical to the first method, only the opposite way.

In general, each method will be different as follows:

Desktop First :

  • Use max-width
  • The interface changes when the screen width is smaller or equal to the break point

Mobile First :

  • Use min-width
  • The interface changes when the screen width is larger or with break point

Maybe you are interested

67 useful tools, libraries and resources to save time for web developers

From MVC to the Modern Web Framework

3. Why Mobile First?

As the example I showed above, you can see that we will get identical results then the question is why split into two or why Mobile First .

a. Number of Mobile devices

Nowadays, the number of mobile devices is increasingly used compared to desktop devices. This is simply due to usability because we can carry a mobile phone anywhere, anytime and access the internet instantly. As for Desktop, this is not possible, imagine we have to always carry 1 screen and 1 computer case with a bunch of messy wires.

It is for this reason that the increasing number of Mobile devices means that internet access from Mobile also increases so it is not uncommon for users to access your website from Mobile more than devices. other. I have obtained a photo from Google Analytic about the amount of traffic to my friend’s website and the result is as follows:

As you can see, the traffic from Mobile is 77.4% compared to Desktop with only 17.9% , a big difference. So from the beginning if you follow the Mobile First route, it will be very much optimized for Mobile devices.

b. Optimize content

For each site we can see a lot of different content in it. With a large desktop, we can give a variety of content, different components such as sidebar, slider, .. to increase the amount of information that appears on our screen:

However, when our screen is much smaller, especially the screen size is only half or 1/6 of the original size, we will definitely need to re-optimize the content, optimize it again. The components appear on the site by deleting the other one and measuring the weight in the contents of the screen where it is needed. It is very annoying that you lose enough things in the big screen to make it hoàn hảo in your eyes and then have to gradually erase it. But with the Mobile First method, we only have about 320px in width from the beginning, so of course we will need to focus on the content as well as the most important components that users want. and may not need to think about other colorful things.

Then when developing the next screen, we can be more comfortable adding new content or new components such as slider, side-bar.

c. Limit errors

As you know by now, the number of devices with different screen sizes is extremely numerous and we have no way to interface code with break points that match each screen.

With the simple example above, of course there is no problem, however, your actual interface will be much more complicated. To demonstrate this, we will add an interface as follows ( reference link ) towards Desktop First (with initial width 1440px):

As above is the result we achieved after implementing the style for the desktop interface. Next to the Tablet interface (with 768px size). Since our header bar is quite simple, when you try to minimize the screen to this size, the interface will still be very good, so there is no need to fix anything:

Next to the mobile interface. The dimensions I choose here are the corresponding sizes when we use the responsive test capacitors in Chrome Dev Tool :

The first largest screen size mobile I see in the Chrome Dev Tool is 633px (the size when we rotate across the screen), we will fix the interface as follows:

Here it seems to be fine, but naturally one day there is a monstrous screen between 768px and 633px, the following will happen (644px):

This happens because your interface only changes if its screen width is less than or equal to 633px so the interval between break points is completely error-prone especially when you have a complicated interface. . However, if you choose to follow the Mobile First route, your interface will initially look like:

The interface you see above will remain until your screen is larger than or equal to 768px and it will turn into this:

So you can ensure that between the first mobile direction break points will not break your interface if you encounter some screen sizes a little bit back because it will forever look like the mobile interface until it’s big enough – or exactly the screen size is 768px bigger or equal. If you do not believe, you can check the example above but with Mobile First version here .

d. Other reasons

  • If you learn about SEO, then surely you also know that Google also requires very specific mobile friendly if you want your website to be highly appreciated.
  • You probably are not strange with libraries that support Front-end like Bootstrap . Boostrap itself also goes in the direction of Mobile First, if you do not believe you can open the code of bootstrap to see this.

4. Finish the lesson

Through what I have shared in the article, I hope that you will gain a little knowledge of Responsive Web Design . Thank you for reading the article !!!

Share the news now

Source : Viblo