Switch from A Mobile-Friendly to a Mobile-First Strategy

sitesuper

Published on Nov 21, 2016

How do you find the online landscape now, when the air is filled with new possibilities, opportunities, forecasts, and wishes for 2017?

You do find it dominated by the digital environment’s own trends, and technological breakthroughs, right? Moreover, it’s just dictated, as it has always been, by the future-oriented end user, let’s face it.

Since more and more mobile users won’t even get to visit your website on their desktop devices anymore, but exclusively on their mobile devices. And since they will visit it more frequently from their mobile phones you need to cope with this context or else you’ll turn into a “dinosaur” stubbornly attached to his “desktop supreme” belief.

How should you cope with the (not so) latest shifts in the online world? You should go beyond the “mobile-friendly” approach and you should adopt the forward progression, the “mobile-first” plan!

Draft Your Mobile-First Strategy from Day One

If you want to boost its effectiveness, you must draft it from the very beginning, from the product’s/services creation phase, so that you can align it with all your further marketing strategies and business maneuvers.

Practically, starting with a mobile-first viewpoint allows you to automatically make all the other business strategies and operations revolve around it.

But First, Let’s Analyze Three Different Approaches to Mobile-Friendliness

1. Responsive Web Design

Let’s call this approach (which emerged in 2003) “the pioneer of all mobile-friendly techniques”.

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

Then, when web design responsiveness starts to show off its limitations, it was time for the “dedicated mobile sites” to shine!

Basically, they were subdomains of desktop websites. Users got “detected” when they accessed websites from their mobile devices and they got automatically directed to the mobile version of the desktop site, using a different URL.

The big step forward? This was the very first attempt of customizing the experience for the end-user visiting a specific website on his mobile device, instead of just delivering him/her a “compromise”: a shrunk version of the standard desktop 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)

And here is the most complex (for the team of developers who’ll have to respond so some bigger challenges now), but surely the most efficient (from the user’s experience standpoint) mobile-friendly approach!

What makes it better?

As a web developer, it allows you to display content, using just one URL, based on a user agent. The user reaches a specific website from his mobile device, he gets “detected” by the server-side JavaScript and the HTML, CSS, and JavaScript written and adapted to the mobile is delivered to him.

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.

Let’s sum up the pros:

one URL
a much-improved user experience
mobile-targeted content

Now, Let’s Dive Into the Mobile-First “Philosophy”

“I think it’s now the joint project of all of us to make mobile the answer to pretty much everything” Eric Schmidt (Google).

Do you need more reasons for making your mobile-first website a top priority than these 2 major ones?

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

It is a concretization of the need for a design to work properly across as many platforms and browsers as possible.

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.

Basically, the resulting website would need to scale back and lose some of the content that would slow it down or just didn't adapt to certain viewpoint sizes. It was about “losing the heavy content”: graceful “degradation”.

This viewpoint’s limitation is obvious: the final product often features the look of an afterthought, of an unpolished (one-size-fits-all) product.

2. Progressive Enhancement

The whole perspective changes when you adopt this mobile-first viewpoint.

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?

It’s a much more organic way of developing a website: from its nucleus, made of its most vital elements, to a far more complex version of it.

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!

Also, when it comes to content (you know, “the all mighty king”), to the way that it gets enhanced or constrained by these two types of “methods”, the progressive enhancement “wins again”.

It’s obvious why:

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

We’ve already tackled these two mobile-friendly types of approach, but without actually naming them, so we’ll just sum up the basics:

1. The Top-Down Method: creating a website for large-screened devices, then “decreasing” it for smaller and smaller-screened devices.

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!

Going from small to big is always far easier and it seems to be far more efficient, too!

Needless to add that the approach to mobile-first design is a flexible, constantly evolving strategy.

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!