The mobile-first design and development approach is exactly what it sounds like: designing and developing a website or application for the smallest screen and working your way up. It is one of the best strategies to create either a responsive or adaptive design. Mobile first is the ideology that mobile design, as the hardest, should be done first. Once the mobile design questions are answered, designing for other devices will be easier. What it boils down to is that, the smallest of the designs will have only the essential features, so right away you have designed the heart of your UX.
If your site looks good and performs well on a mobile device, it translates better to all devices. More importantly, is that the mobile-first approach is also a content-first approach. If content is king then mobile-first is queen. Mobile has the most limitations – screen size and bandwidth to name a few, and so designing within these parameters will force you to prioritize content ruthlessly.
The mobile-first approach organically leads to a design that’s more content-focused, and therefore user-focused. The heart of any website is content — that’s what the users are there for.
Something to keep in mind is that mobile users sometimes require different content than desktop users. Device-specific content can be gauged by considering context — what, in a given situation and a given environment, will your user appreciate more. The best way to plan ahead for these is creating user scenarios.
Another advantage to mobile-first approach is that the small-screen breakpoints can better fit around the content. Again, the alternative is worse: having to squeeze an already plump design into a tiny framework. But with the mobile-first approach, the breakpoints develop naturally around content, so you don’t need any awkward edits.