What is mobile first web design?
Mobile first web design is pretty much exactly what it sounds like. It is the principle that designers should use to provide the best user experience for mobile first, then continually build up to much larger screens such as iPad, and eventually desktop. It is almost always paired with another best practice in web design, which is responsive web design. Responsive web design is essentially a methodology that enables web content to fit the screens of different devices automatically.
These two practices combined allow for the user to feel most comfortable, and to increasingly add more “bells and whistles” as you get more of a canvas as you scale up.
Previously, most designers and developers favored a desktop first, and mobile was simply an afterthought that ended up losing many important features that were deemed of highest importance on desktop. The result? A paradigm shift into mobile first web design.
Why mobile first?
With over 52% of all web traffic coming from mobile devices (see article here), designers and developers both realized that by building a desktop first website with a ton of canvas space to work with, as you scale down you begin removing things (because of the overall design flow) that were actually deemed of high importance. This resulted in a “watered down” desktop version. This is what is known as graceful degradation, you are figuring out what you need to cut out.
By designing mobile first, you are forced, with the limited canvas space, to identify all the things you want to feature, or highlight, on your website first. By doing this you are putting your best foot forward and showing off what you do best. Instead of figuring out what you need to cut, you get to figure out how to make your website more robust! This is also known as progressive enhancement.
So how should I start a website?
The biggest problem with a mobile first design and the limited screen size on step one, is that you may not think of all the possibilities you could offer.
A good idea would be to start at least with the brainstorming aspect of the big picture, what are the most important things that I want to show off to my audience and go from there. Once you have identified these features, then you can go and start making these smaller decisions on how to implement and how you can make them more robust as you start scaling up.
Now that you know the basics of mobile first web design, go on out there and play around, you will find it is much easier than you think!