The mobile-first design pattern came into popularity over a decade ago mainly in response to the increase number in smartphone users and new CSS specifications that finally made designing for various screen sizes much simpler, mainly by using media queries.
The idea is essentially to design your website with a mobile layout by default first. This ensures that you have a functional mobile view from the start and because mobile-design is more difficult, it also makes sure that you address any holes that you might have in your design early on in the process. And you can then selectively begin to target various screen sizes after that without effecting your overall mobile-view.
Mobile design has been a point of contention for many web developers, myself included in the past. Websites change, and they change frequently for various reasons. Mainly in response to user habits. Elements on a page that don't garner enough attention, should definitely be removed after enough time is given for them to be observed and ignored.
Shifting elements around on a webpage however can be troublesome as they can have unexpected consequences on other elements that relied on them. And the problem is definitely magnified when dealing with a mobile-view due to other factors such as various screen sizes, resolutions and even mobile browser versions.
So today I'll break down a few reasons why you should consider implementing your websites using mobile-first design principles, and a few reasons why it might not be for you. Starting off with the most obvious reason.
Mobile phone usage increases
We tend to forget things really quickly, but just a little over a decade ago we did not have a browser on our phone. In fact, we didn't really have anything on our phones, except for a phone. I remember the first-time that I downloaded the browser app on my KRZR phone sometime in college. The excitement was palpable. And seeing the 300 x 200 display of Yahoo was awe inspiring. Jump to today where we have multiple high secure, built-in VPN, cloud synced browsers running on even the cheapest of phones and you could say that the market has grown in the mobile-browser department.
The current estimates for smartphone usage worldwide is roughly around the 3 billion mark. And the numbers are estimated to grow exponentially as technology advances and costs decrease for parts and manufacturing. And we already see this in action now with top of the line phone spec phones coming in under $400 dollars.
Getting your web properties prepared for this shift will become more important during the coming years for sure. One of the main reasons for any business not succeeding long term is their refusal to adapt to their changing environment. We've seen this happen with video stores of the past, which will go unnamed, who refused to go digital and even with food trends and diets that fall out of favor with the current social norm.
Lower maintenance cost
As mentioned above, making changes to a website is a tricky thing and can lead to issues if not done so properly. You will undoubtedly break the overall layout in some shape, way or form during the process. And the problem can be compounded when it comes to mobile responsive views.
For every change that you make on your desktop, you have to test for the mobile version as well. And so essentially, it comes down to an increase in time demand from the front-end developer. You can add several hours to a site redesign in this way and will inevitably have to do it all over again once another redesign is in place once again.
It isn't impossible, but it is more difficult to break a desktop view by modifying its default mobile counterpart however. Preventing this comes down to skill more than anything else. An experienced front-end developer can structure a webpage in a more responsive manner so as to avoid many breaking issues moving forward. But undoubtedly, regardless of skill, the chance for bugs and errors is always a possibility.
The key here is to reduce that chance of errors as much as possible and as efficiently as possible. In my experience, I've found that a good percentage of post-launch bugs and issues have come down to mobile display views not rendering as expected.
But...
Because there is always a but. Let's now go into some counter-arguments as to why you shouldn't focus so much on this design principle that was introduced over a decade ago. Because while it has its valid points for sure, we can't ignore its shortcomings either.
What about desktops?
It's hard to push for any one technology when we are still relatively young in this technological era and creating and innovating almost in real time now. While smartphone use is growing currently worldwide, so is desktop and laptop use. Computers are also getting cheaper as well and where you once only had 1 computing device in your home that your family shared, we are now in an age where pretty much every member can have their own without having to mortgage the house.
While I personally have my phone around me most of the time, I spend most of my working hours in front of a laptop. In fact, my laptop interactions are somewhere around the 95% mark as compared to with my smartphone. More screen real-estate is just more useful for a programmer. I have numerous tools open and dozens of browser tabs most of the time as I work on new projects or on client work. All of this pretty much requires a desktop view. In fact, a 13.3 inch laptop screen really isn't enough sometimes as my work scales upgrades and demands both, more power and more virtual space.
And as such, most of my browsing is done within a desktop view. This holds true not only for myself, but for many people who's jobs rely on computers, which I'd wager is a fair number these days. And in this regard, it might make more sense for some to prioritize larger displays.
Complex and dynamic websites
While any mobile website can be viewed just fine on a larger PC/laptop screen, the same can not be said for a desktop website being viewed on a mobile device. Some websites are dynamic and complex and have just too many moving parts to be crammed into a tiny screen.
Any type of online editor, for example, normally has various toolbars and panels to work with at any one time. And while you could find a way to make it 'workable' on mobile, you might not actually have an audience in that segment or even a useful product at that point. And as technology advances and we get improved specifications and API's in web development, you can rest assured that websites will get more complex as well.
Much of the time, designers will opt to remove sections of a website entirely in lieu of coming up with clever ways to represent them on a phone or tablet. Or they will prompt the users to switch to desktop mode, which I often do when mobile browsing. In a corporate setting, this isn't anyone's fault really. There are budgets and deadlines to meet and sometimes getting the online video editor to work on every mobile browser does not warrant the added weeks of work.
Your audience
This blog averages around an 85% desktop user base per month. Which makes sense since it is targeted towards programmers and developers. More than likely, you are sitting in front of a computer right now reading this. And so it would be odd for me to spend most of my time working on my mobile-layout.
I ensure that the content is readable on mobile as much as I can, as not all of the articles are code related. Some are just op-ed pieces that I write about my experience as a software engineer for the past 15 years. And this content makes sense to have readable on a smaller screen.
But because it is just a small part of my overall traffic, I tend to follow desktop-first design principles. This can change in the future, however, if as a society we begin to find a balance between computing and mobility becoming more commonplace. But as of now, we still aren't quite there yet. Although I will keep checking my traffic logs just to be sure.
So should you follow it?
There is no wrong answer here really. If your current project is targeting a mobile audience and you want to prevent headaches later on with redesigns, then it makes sense to follow a mobile-first design pattern. If you already have a steady audience of traffic and 85% are on a desktop or laptop, then spending your time switching your CSS upside down might not be the most beneficial use of time.
Always design for your target audience and for your particular needs. There is no one single reason to choose any one paradigm over another, which is what much of the web tries to do. Yes, mobile phone usage is on the rise, but they might not be anywhere near your websites.
But again, time will tell. At some point down the line, due to technology changes, we might not have another choice but to go mobile-first or maybe even wrist-first or triple-screen-first.
Happy web designing!