Search code examples
cssresponsive-designmedia-queries

What's the difference between mobile first and non mobile first responsive layout?

Well, I'm not sure I got the difference between mobile first and non mobile first responsive layout?

This is what I know, and probably something is not right:

  1. Use Media queries with CSS (also for non mobile first layout)
  2. Create a layout by starting from mobile and not from desktop version

I've saw there's a difference between bootstrap setting and foundation setting, is it important for that difference?

<!-- Bootstrap -->
<!-- I've read it's not mobile first -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- Foundation -->
<!-- I've read it's mobile first -->
<meta name="viewport" content="width=device-width">

At the end that's all I know, is there something more to know about it?
Where i can find a good guide?

Solution

  • Just as it says....

    "mobile first" and "non-mobile first" layout.

    Mobile first means from the start, it is made to look how you want it to look in mobile. Then in most cases you then use min-width media query to adjust according to larger screen sizes.

    Non-Mobile first means you design it for desktop or large screens first. Then in most cases using max-width media query to go back and make it look better in smaller/mobile screens.

    I hear there are problems with browser's understanding min-device-width and max-device-width. Just use min-width and max-width.

    If your designing a responsive theme, it is best to start mobile first.

    Watch This Video: http://www.youtube.com/watch?v=-BVmrSG93XE