Mobile first responsive web design with css media queries

Responsive web pages also called adaptive web pages which fits nicely fits on various devices like mobile , tablets , desktops. And mobile first approach first writing styles for mobile devices and then for larger devices like tablets and desktop. In this post , we’ll know why we need importance of mobile first design approach and how to implement it.

Why follow mobile first approach?

Around 2 billion people are using smartphones in 2018

This number is increasing and I estimate this number will cross 3 billion in next year ! This number is huge and people use their smartphones to visit websites more than desktops ! We should give priority to mobile users.

How to write mobile first CSS

Look at the example css code below.

/* Extra small devices (portrait phones, less than 576px) */
/* No media query since this is the default css for extra small devices */

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) { ... }

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) { ... }

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) { ... }

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { ... }

The example code above is according to Bootstrap’s breakpoints. In the first section we should write styles for mobile phones. Mobile phone styles will be the default styles. Then we can write styles for larger devices.

Benefits of mobile first approach

• Better user experience: When you think about mobile users first , web page tends to become minimal . Unnecessary menu items , links , buttons get reduced first !
• Compatibility: Since in mobile first approach , mobile style is the default style very old mobile browsers will be able to show websites without any problems.
• Fast loading: Mobile first CSS loads fast on mobile browser.

Some disadvantages

You will have to use developer tools to view how it will look on mobile devices . If you are familiar with desktop first approach , then this may seem a little awkward to you. But when you get used to use mobile first approach, this will be fun !

Comment below, how you felt coding mobile first CSS for first time ?