The world is ruled by mobile devices, so it makes sense to develop for mobile first, but are we leaving the traditional computer behind?
I was a kid when cell phones didn't have screens and computer modems made funny noises when connecting to the “World Wide Web.” For me, the idea of having a computer in the palm of your hand was something that happened in science fiction movies or Saturday morning cartoons. And yet here we are: the world has gone mobile.
Back when Apple launched the iPhone in 2007, few of us could predict how much the smartphone would change the way we relate to technology, the Internet and society. To give you an idea, in 2012 global mobile data traffic amounted to 1.12 exabytes per month. In 2022? 77.49 exabytes. The growth of the mobile industry is unlike anything we've seen before.
Since 2018, half of internet traffic has been due to mobile devices, including smartphones and tablets. This is just data transmission, mind you. If we look at market share, we see a very different picture. In 2021, mobile devices have almost 60% of the market , while computers only take up about 40%. We could transmit more data via PC, but the market for phone users is simply larger.
In its Q2 2022 investor call, Activision Blizzard, the studio behind the massively successful game World of Warcraft and the juggernaut that is Call of Duty, reported that its mobile division made more money than the rest of their combined products. The culprit? A little game called Candy Crush. The signs are there: we have to target the mobile market.
Mobile-first CSS
Mobile first is defined in many ways. Philosophically, the guiding principle is that the mobile experience should be front and center in the software development process. Yes, that means prioritizing the needs of the mobile market.
From a coding perspective, mobile-first CSS means we write the interface style in such a way that smaller devices can access its instructions without having to scroll through the instructions for desktop monitors. In other words, it's writing code for mobile devices first.
The question is: why?
- The desktop experience is very different from the mobile experience, from the size of the screen view to the way we interact with the screen. Scrolling and tapping are very different from using a mouse.
- Since smart devices often transmit data over limited connections at extra costs, saving data is extremely important.
- Phone signals tend to be less reliable than desktop Internet access, which means data-intensive web pages may not load properly due to poor signals or slow Internet speeds.
In other words, not only is the potential mobile user base larger, but there are more variables to take into consideration that make designing apps or web pages more complicated. I can guarantee that browsing a web page designed for mobile devices on a PC is much less frustrating than the other way around.
Building from scratch
Considering that the Internet has been around much longer than mobile devices, it's no surprise that more traditional approaches to designing web pages focus primarily on the desktop experience. A common example of this is writing a long stylesheet and then using full-width media queries at the bottom of the code to “strip” the extra stuff for desktop devices.
It's as if the process is something like “I have my big screen and now I need to figure out the maximum width of the mobile device to fit my page”. This is a desktop-first approach.
An alternative is what we call progressive enhancement . With this approach, a web page becomes more sophisticated when the device is larger or more powerful. The process starts with creating a web page for the lowest common denominator and then adding more and more functionality for other devices.
This way, we guarantee that the main functionalities of our web product will run on all devices, from a widescreen computer to the smallest smartphone.
Building for the Future
If there is one constant in the world of mobile devices, it is that there is no constant. Smartphones are getting bigger and tablets come in every shape and size imaginable. Trying to build a style based on the expected width of the device is a problem waiting to happen.
Instead, web page size should be guided by its content . In other words, breakpoints should not be created for specific screen sizes, but rather based on where content would need to be relocated based on available space. This may require a change in our way of thinking, but when it works, it's not that complicated.
What about images?
Images are the bane of mobile-first web pages. Not only do they consume a comparatively large amount of width, but they are also extremely difficult to fit into every conceivable device. Instead of images, many developers are opting for CSS3 gradients and font icons as lightweight alternatives.
If you need to serve images, consider having different images for different devices. The impact on storage is minimal, but in terms of data transfer, there is a big difference between downloading a 4K image and a 480 image.
Is this necessary?
If mobile-first CSS is so important, why isn't everyone doing it already? As I mentioned before, the Internet is much older than mobile devices and some practices have become so ingrained that it's really difficult to break the habit. I spend most of my time coding in front of a computer screen; ask me to imagine a web page and my mind immediately thinks of a monitor. It's natural for developers to be biased towards our work tools.
But the truth is that the mobile market is growing and the border between mobile devices and PCs is shrinking every day. So we need to start looking at mobile devices not as an uncomfortable alternative to our huge screens, but as what they really are, a technology that is already popular. As the market grows, so do our opportunities to reach new users. As the old saying goes, we have to strike while the iron is hot.
