I was a kid back when cell phones didn’t have screens and computer modems made funny noises when connecting the “World Wide Web.” For me, the idea of having a computer on my palm was something that happened in sci-fi movies or Saturday morning cartoons. And yet, here we are: the world has gone mobile.
Back when Apple introduced the iPhone in 2007, few of us could predict just how much the smartphone was going to change the way we relate to technology, the internet, and society. To put it in perspective, in 2012 worldwide mobile data traffic amounted to 1.12 exabytes per month. In 2022? 77.49 exabytes. The growth in the mobile industry is like nothing we’ve ever seen before.
Since 2018 half of the internet traffic is due to mobile devices, including smartphones and tablets. That’s just data transmission, mind you. If we take a look at the market share, we get to see a very different picture. In 2022, mobile devices has nearly 60% of the market, while computers only take around 40%. We might transmit more data by PC, but the market of phone users is simply larger.
In its Q2 2022 investors call, Activision Blizzard, the studio behind the extremely successful game World of Warcraft and the juggernaut that is Call of Duty, reported that their mobile division made more money than the rest of their products combined. The culprit? One 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, it’s the guiding principle that the mobile experience should be at the front and center of the software development process. Yes, that means giving priority to the needs of the mobile market.
From a coding perspective, mobile-first CSS means that we write the interface styling in such a way that smaller devices can access their instructions without having to wade through the instructions for desktop displays. In other words, it’s writing the code for mobile first.
The question is, why?
- The desktop experience is very different from mobile, from the view size of the screen to how we interact with the screen. Scrolling and tapping are very different from using a mouse.
- Because smart devices often transmit data over metered connections with extra charges, the economy of data is extremely important.
- Phone signals tend to be less reliable than desktop internet access, which means that data-intensive web pages may not load properly due to bad signals or slow internet speeds.
In other words, not only is the potential user base from mobile devices bigger, but there are more variables to take into account that make designing web apps or web pages trickier. I can guarantee that navigating a web page designed for mobile on a PC is a lot less frustrating than the other way around.
Building From the Ground Up
Considering that the internet has been around for a lot longer than mobile devices, it’s no surprise that most traditional approaches for designing web pages focus first and foremost on the desktop experience. A common example of this is writing an extensive style sheet and then using max-width media queries at the bottom of the code to “undo” the extra stuff for desktop devices.
It’s as if the process goes something like “I’ve got my big screen and now I have to figure out the maximum width of the mobile device to adjust my page.” That’s a desktop-first approach.
An alternative is what we call progressive enhancement. With this approach, a web page gets more sophisticated when the device is bigger or more powerful. The process begins with creating a web page for the lowest common denominator and then adding more and more functionalities for other devices.
This way we guarantee that the core features of our web product will run on every device, from a wide-screen computer to the smallest of smartphones.
Building for the Future
If there is a constant in the world of mobile devices, it’s that there is no constant. Smartphones keep getting bigger, and tablets come in all imaginable shapes and sizes. Trying to build a style based on the expected width of the device is a problem waiting to happen.
Instead, the size of the web page should be guided by its content. In other words, breakpoints shouldn’t be built for specific screen sizes, but rather based on where the content would need to be relocated based on the available space. That may require a change in our way of thinking, but once it clicks, it’s not that complicated.
What About Images?
Images are the bane of mobile-first web pages. Not only do they consume a comparatively massive amount of width, but they are extremely hard to fit for every conceivable device out there. Instead of images, many developers are opting for CSS3 gradients and font icons as lightweight alternatives.
If you must serve images, then 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 It Necessary?
If mobile-first CSS is so important, why isn’t everyone doing it already? As I mentioned before, the internet is a lot older than mobile devices, and some practices have become so ingrained that it’s really hard 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 will immediately think of a monitor. It’s natural for developers to be biased toward our tools of work.
But the truth is that the mobile market is growing, and the frontier between mobile and PC is getting smaller by the day. So we have to start looking at mobile not as the uncomfortable alternative to our huge screens, but as what it is, a technology that is already mainstream. 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.
