Mobile first responsive web design "approach"

at first it seems kinda weird. But then I realized that the idea is not that bad. beside to ensure our page work properly in all devices, it help us focus to design the content as well.

when designing for mobile view not so much UI design work can be done. instead, we will focus on the "core" content and its arrangement (which content to be above or below). so, for me this first step is more on content instead of UI.

then it follows with tablet and desktop where we focus other elements (columns, layouts, navigation etc) and additional content.

just my 2 cents.

Is there any reason behind CSS frameworks like bootstrap and foundation using this "mobile first" approach? For me it is much more logical first to design desktop. Then tablet and mobile.

Bootstrap is not "mobile first" IMO.

Mobile is dominating the market, and is outselling desktop/laptop. So by focusing on mobile first, you are forced to prioritise and really evaluate your content. Starting by prioritizing content delivery, and enhancing the experience as the view-port gets larger ( Progressive Enhancement ).

@alenabdula nice links!

I find it much easier writing css for a mobile first approach myself. Instead of having to remove and override a lot of styling when going from large to small i can instead mostly just add new styling when i go from small to large.

Something like this:

// This is the mobile version, no need for media queries since its always the smallest.
.some-menu {
    background-color: #cecece;
    padding: 8px 12px;
}

// Tablet breakpoint, lets float the menu.
@media screen and (min-width: 768px) {
    .some-menu {
        float: left;
        margin: 0 10px;
    }
}

Very simple example but hopefully you see what i mean.

I have to admit tough that i do start with designing the desktop version first most of the time but i always keep in mind that it has to be able to scale from mobile up to the desktop design i have. Then when I'm happy with the desktop design i rewrite the css in a mobile first fashion.

Most of your core styling will apply to all screen sizes, so by starting with mobile, these styles can easily cascade (hence Cascading Style Sheets) from mobile to desktop. Personally, when implementing a design, I find it best to write my html markup to suit the tablet or desktop (depending on the complexity of the project. Most drastic differences are normally between the mobile & tablet). Once I have clean, semantic html markup, I'll then begin to style, normally working with mobile first. If you follow BEM/OOCSS or MVCSS you're probably breaking your styles out into components, eg. header.scss and slider.scss etc. which will certainly make your life easier. I suggest that you use Browserify to structure your JS files & folders much like your styles. For me, the best advantage with mobile first, is that if a client decides against a responsive website, by taking a mobile first approach, if (and when, they normally change their mind further down the road) a client requests a responsive version further down the road, the bulk of the work has already been done.

Having said all of that, I wouldn't put too much weight on existing Frameworks. Personally I find that Foundation with a good OOCSS approach gives me just enough freedom. Really, the most important thing you need is a good solid grid. The rest you can add on top later.

i do not use CSS frameworks for production. mostly i use susy, breakpoint and compass