Mobile-first is a coined term used to describe the act of designing a mobile version of a website before the desktop version. Although there is this misconception that the web is accessed more often via a mobile device (as opposed to a desktop computer), the data surrounding this is deeply flawed.
It’s true, mobile devices are used more frequently than desktop computers, but most of that is through the use of apps, not the actual mobile web. Despite this, the usage of the mobile web is still very high and is growing every day.
Smart Insights is a terrific source of information for this sort of thing.
So Why Mobile-First?
Designing the mobile experience first comes with three main benefits: it makes the website load (and respond to interaction) faster across all devices, it does wonders for backwards compatibility, and it improves the user experience as a whole.
Lets take a look at these benefits and how to acquire them.
1. Cellular Devices and Page Load Speeds
Probably the most immediate concern is website loading times, and there are two main issues surrounding this. First of all, cellular devices tend to be much slower than desktops, and even if you’re lucky enough to have access to a 4G connection (which is much faster, although quite expensive in most cases), you might nonetheless have a data cap (a limited amount of data).
Even if you do have unlimited data and the fastest connection in the world, due to the smaller screens of handheld devices there’s only a limited amount of screen real estate. Wasting that valuable space with large images is very undesirable.
Really, the main focus of the mobile experience should be cutting the crap and directing the user straight to the high-value information. Keep the user on a need-to-know basis.
Perceived Page Load Speeds
By perceived, I mean how fast the user thinks the website is loading. Perceived loading times is the time between when the user opens the webpage and when the critical above-the-fold content has fully loaded (and can be interacted with). After this, the rest of the website (the below-the-fold content) starts to load, sometimes unknown to the user, however the user is still interpreting the above-the-fold content so it’s okay.
If the rest of the website is still loading, try to deliver the above-the-fold content so the user has something to read.
2. Backwards Compatibility and Progressive Enhancement
Mobile-first approaches can help you build cleaner websites (in terms of code) with widely-supported features, meaning faster loading times and features that work even in older browsers.
Backwards Compatibility
Backwards compatibility is the art of building websites that work in outdated browsers. Code elements derived from new design trends can take years become a “standard,” and even then, older browsers are rarely introduced to these standards. Sometimes this involves using what’s called a polyfill, a sort-of hack that makes these features work in older browsers (I’m looking at you IE8), and this requires more code, extra processing power from the browser, and ultimately results in a slower website.
You can still create lovely websites with widely-supported code, so don’t feel the need to use current trends for the sake of it.
Progressive Enhancement vs. Graceful Degradation
Back when the mobile web wasn’t as huge as it is today, it made sense to design for desktop computers (as normal) and gracefully degrade the experience for the few mobile users out there; this of course wasn’t the best solution for mobile users, but since there were only a handful at the time, it was the best overall.
Now that the mobile web and desktop web are very neck-and-neck, we need to offer a responsive solution that works for both — these are the most challenging of times. Keeping things simple (and upscaling the class-factor for desktop computers, also known as progressive enhancement) is the best way of doing so.
A mobile-first approach forces us to do that.
3. Cutting the Crap for a Better User Experience
Certain web features (especially scroll events like scroll-snap and parallax scrolling) can act horribly on older desktop machines—these can render a mobile website unusable if degraded ungracefully, and the same applies to animations too.
As a rule (and I’m strictly talking about arbitrary features here, not content), you should always question the use of desktop-only features. Some features, inexpensive animations and subtle micro-interactions for example, can quite often be optimised and even add a significant amount of value to the user experience, despite being additionally used for visual appeal.
Always debate the added-value of luxury features, and if it’s decided that there is some—test, test, test. And test again!
Conclusion
Before you code, even before you design, rethinking your approach to gear your focus towards mobile design will result in a faster, simpler and overall better web experience across all devices and screens, not only the mobile experience.
