As far back as 2008, designers knew about mobile-first design – only it was under a different name: progressive enhancement.
While essentially the same concept, mobile phone browsers were still in their infancy and designers were more concerned with webpages displaying properly on outdated desktop browsers rather than 3 1/2 inch screens. Once smartphone use gained in popularity, the term changed to what we know now as mobile-first design.
Mobile-first design is the concept of designing a website for the smallest browser first and then building up for larger and larger screen sizes. In this manner, the most important content is prioritized and shown first. It ensures a baseline positive user experience from the very beginning.
The constraint of usable space is to thank for this. It forces designers to make critical decisions on what information is most valuable and relevant to the user. It also is, frankly, much less daunting to begin designing on a small empty canvas rather than staring blankly at a huge empty one. (Although that might just be me)
There are some exceptions to mobile-first design (at least, in its literal interpretation). Sometimes it does not make sense to design for a mobile screen-size because that is not what the project requires. The project could be designing an app used exclusively on tablets for example. In cases like these, the principle of mobile-first design is still applicable. By focusing on content and prioritizing the information shown to the user, the designer can still ensure that a good user experience is more likely!
