Mapping Mobile First Approach at <Code> Level

With the PDA's Mobiles becoming more advanced and reactive, there is increase in traffic on mobile as compared to desktop and this trend is increasing every fortnight.

This has shifted the paradigm of building products and shifted it more towards the mobile side as stats suggested. The goal is becoming mobile first from desktop first and due to this responsive websites / apps are taking up industry by storm.

The term and goal is clear, but what impact it had brought on developers especially those who are coding at client side of the tech stack or rather ( to be more coding specific) how this will change the way we write our media queries. I mean we were writing media queries since ages but how mobile first approach would make a difference. This post strictly talks about it.

For those who are not aware of media queries, in layman it is a css which gets triggered whenever the width is change. This width can be browser width or device width. If you want to see it in action check this codepen link. :Resposive Demo: . Try decreasing the browser width and see how the boxes are shifting.

Now if we observe the code :code Link: we see that we have written two media query one at 720px other at 480px. So does this qualifies for mobile first approach? Since the design is responsive across desktop, pad's and mobiles. If your answer is yes I would request you to look at the media query and see the max-width param.

So still unable to figure it out. max-width says it is the maximum width till my rule will get applied after which it will fall under global rules. And since we are using max-width the changing rule is at mobile width which clearly violates the "Mobile first approach". To make this code "Mobile first compliant" the change should be as desktop width rather than mobile widths. It is like thinking of mobile while designing and write media queries for desktop.

So to change the code we have to write media queries considering min-width rather than max-width.

@media only screen and (min-width:480px)

The complete code can be found here CodePen where the change is at desktop widths rather than mobile widths, which makes our code "Mobile First Compliant".

For any doubts and suggestion tag me on twitter .