Draft Your Mobile-First Strategy from Day One
But First, Let’s Analyze Three Different Approaches to Mobile-Friendliness
1. Responsive Web Design
It practically revolutionized the way web designers and mobile users started to envision and to navigate through mobile websites and it’s still quite alluring even now, for many developers, due to its obvious advantages:
- one URL for a given website across all devices
- cost-effectiveness (derived, of course, from the above-mentioned advantage)
- adaptability: web pages/content resize to any given width, enabling web users to quickly switch from the way they used to navigate through websites on their PCs, to the vertical type of navigation (scrolling)
And yet, as any “pioneer” in its field, responsive web design has slowly started to show its weaknesses:
- “adapting” content-heavy website for mobile devices with fewer functionalities and far less equipped for supporting all the heavy content lead to a significant increase in loading time
- it inevitably looks like some sort of “compromise”: developed for the desktop and re-thought so that it should somehow fit the small screen devices’ features
2. Dedicated Mobile Site
This approach paved the way for mobile-specific content strategies. And yet, there are certain disadvantages to this mobile-friendly approach, as well:
- You have multiple URLs to juggle with (mobile and desktop version)
- If wrongly configured, it could easily lead to SEO-related trouble
3. Dynamic Serving (Server Side Components+ Responsive Web Design)
That, instead of the same content being created for the desktop version of the website and then adapted... somehow, so that it should fit the mobile, too.
- one URL
- a much-improved user experience
- mobile-targeted content
Now, Let’s Dive Into the Mobile-First “Philosophy”
- desktop devices’ supremacy has started to fade away (more web users will try to access your website from their mobiles and, moreover, there will be quite a lot of them who will be using only those devices for visiting your site)
- Google itself is all into the “mobile-friendly” “craze”
To these two main reasons for “saying yes” to a mobile-first approach, add 2 main targets, too:
- freeing your future mobile-first website off all the heavy, unnecessary content, just an unwanted “legacy” from its “bigger brother”, the desktop version of the website
- reducing Its loading time and overall making all the displayed info looking neat irrespective of the technology used on the specific devices that your website’s accessed on.
Graceful Degradation vs Progressive Enhancement
As we delve deeper into the mobile-first type of mentality that more and more website developers and website owners adopt these days, we should point out two main viewpoints that subsequently developed.
1. Graceful Degradation
With this “goal” in mind, designers strive so that the user enjoys the best experience while visiting a certain website and makes efforts so that this website functions properly, despite the inevitable shortcomings.
2. Progressive Enhancement
You practically start by making your website look amazing and function properly on a low technology mobile device, thus trimming it to its core features, and then you progressively add new, heavier content, new features and turn it into a more robust desktop-ready website.
See the difference?
No need to rethink it from scratch so that it should work properly on mobile or, even worse, to “make it fit” (and it never does in a “natural” way) for mobile devices. You go your way up!
- the graceful degradation: all the heavy content gets loaded on the largest platform and even though much of that content is removed from the mobile web pages, the already loaded heavy content still slows down the mobile website.
- the progressive enhancement: the basic elements get loaded first, making navigation much smoother on a mobile device and loading time much lower, and then progressively additional resources get added, when/if needed (to platforms that can support them well).
The Top-Down Method vs The Mobile-First Method
The main shortcomings are:
- overloading mobile devices with way too heavy content, with too much information
- omitting many of the tempting features and functions specific to mobile phones
2. The Mobile-First Method is all about usability, all about user-friendliness.
Start with the highly simplified, core version of your site which should work perfectly on devices equipped with lower-tech and level it up so that it should evolve into a website suitable for the latest high-tech devices.
Facing simplicity (you’ll practically have to “work” with only 80% of your desktop’s screen size), maintaining it and turning it into your main goal, enables you to keep focused on the core elements of your website. And on how the end-user can carry out any given action on your site as quickly and intuitively as possible!
It needs constant “trimming”, constant modifications so that it organically adapts to all the technological changes and to the shifts in mobile users’ way of interacting with the digital world, as well!