Mobile-first web design isn’t an extraordinarily new concept; Luke Wroblewski first proposed the idea about six years ago (which in technological terms is almost forever).
But since the percentage of mobile-only internet users has begun to exceed the percentage of desktop-only users, many visitors may only ever see the mobile version of your site. In other words, mobile UX can no longer be a secondary consideration—mobile friendly website design needs to be your primary concern.
Read on to discover the ins, outs, pros and cons of mobile-first web design.
Mobile-first web design is the process of strategizing the mobile version of a site first.
A little background: When the popularity of smartphones began picking up steam about five or six years ago, website developers realized the importance of a mobile-friendly UX. What emerged from this is the concept of graceful degradation.
Graceful degradation is the top-down approach to website design. The goal is to simplify the mobile user’s navigation, so your team takes the full desktop version of the site and gradually removes content and features until all that’s left are the bare essentials.
The problem with graceful degradation is when you start by designing a site optimized for desktop, you’ll likely want to utilize all of the available bells and whistles. But then as you scale down and are forced to remove these bells and whistles that don’t translate well to mobile, the result may appear as just a watered-down version of your full site. And in some cases, it can come across as a painfully obvious afterthought.
On the other side of the coin is progressive enhancement. With progressive enhancement, the process starts with designing the leaner, mobile-specific version of a site and then scaling up, adding more content and features to better fit the capabilities of larger screens (for example, tablets and desktops). You determine the most critical elements of your site and then slowly make it more robust.
I won’t try to hide the fact I’m a strong proponent of the mobile-first strategy and the progressive enhancement approach, especially since they complement growth-driven design so well. But after reading the benefits of this strategy, you’ll likely agree with me.
A mobile-first technique allows you to differentiate between the truly essential components of your site and the content which, though it may enhance the UX on desktop, becomes muck to trudge through on mobile. This method makes the mobile user’s path to conversion smoother, thereby benefiting both your visitors and your business. Plus, when you’ve identified the most crucial aspects of your site during the mobile site design, you’ll know to highlight these features in the desktop version.
Google values mobile-friendliness, and a clunky mobile site that is difficult to navigate or takes too long to load can hurt your search rankings. Google’s main priority is the UX, and yours should be, too.
In the interest of fairness, let’s discuss some of the drawbacks of the mobile-first strategy.
Developers and designers might argue that focusing on the mobile UX is constraining because it means not taking advantage of the full range of everything desktop has to offer. A mobile-friendly website is a great thing, but a site stripped down to the minimum for mobile might be overly simplistic on a desktop screen.
Furthermore, most website designers and developers honed their skills for a desktop interface and making the switch to mobile-first can be difficult.
These are all valid points. However, taking the mobile-first approach doesn’t mean having tunnel vision and completely ignoring the desktop UX. You can certainly brainstorm the entire set of features and content you want in the full version of the site. But once you have this list, rather than jumping headfirst into implementing every photo or video or link, start simple.
And while it may be challenging for designers and developers to transition from desktop first to mobile-first, it’s an opportunity to learn new techniques and expand skillsets.
Mobile-first web design may not be for you. Remember: Your users are your highest priority. Always consider the purpose of your site and how it aligns with your user’s needs. Sometimes it makes sense to focus on the mobile UX, and sometimes it doesn’t. How you want your website to fit into your user’s life should dictate the approach you take.
