Le Mobile First : Pourquoi et Comment ?

Le smartphone à envahit nos vies, c’est un fait. De simple téléphone, il est devenu une véritable boîte à outils pratique, rapide et accessible. En outre, un mini ordinateur puissant et minimaliste. En tant que consommateurs du web, nous aimons naviguer sur internet, parcourir les pages des sites responsives comme des web-app’. Pourquoi avons-nous pas cette même démarche du “Mobile d’abord” lors de la conception de nos sites web ? La mobile device deviendra-t-elle la norme ?

 

Web-App’ Kesako ?

D’un nom peu utilisé, la web-app’ est ni plus ni moins un site parfaitement responsive aux allures d’applications mais à la mise à jour instantanée des sites web. Aussi bien adapté aux larges comme aux petits devices, il se compose d’une différence nette entre les différents formats de lecture : Desktop/Laptop, Tablettes/Smartphone. Cependant cette web-app’ peut être sous stratégie de construction Mobile-First, c’est-à-dire d’abord pensée pour les mobiles et ensuite adaptée aux écrans larges.
Il est vrai que la construction d’une application mobile redouble d’idées ingénieuses pour offrir toutes les fonctionnalités promises en très peu d’espace. Les burgers-menu remplacent les barres de menu à rallonge ou les side bars de navigation, les icônes remplacent de nombreuses dénominations textuelles, et les informations sont compactées, synthétisées.

 

“Le mobile : nouvel outil des internautes.”

Il est vrai que le mobile est pratique car portable et de petite taille. Il est, de plus, équipé d’une connexion Internet quasi-intégrée grâce aux données mobiles des opérateurs téléphoniques. Si cette connexion internet est si pratique, le contenu auquel elle fait accéder doit l’être aussi.
La réelle différence entre un site web et une application est le but de celui ou celle-ci. Si le site offre un contenu très riche et complet, l’application est généralement destinée à une ou deux actions bien précises. La web-app’ parcoure cette manière de différencier les envies et les besoins un même utilisateur, bien plus loin que la largeur du device. Mais avec une mise à jour instantanée, à contrario des applications qui, bien qu’automatique sur les derniers smartphones, nécessitent un téléchargement d’une version plus récente, donc un débit plus important que le simple chargement d’une page.

augmentation du mobile device

 

Less Is More = Less Is Better

Si le web nous a habitué à du contenu en pagaille, le Mobile ne doit contenir que l’essentiel et aller droit au but. Le smartphone étant, comme nous l’avons vu plus tôt, un couteau-suisse digital. L’utilisateur doit pouvoir trouver tout de suite, et si possible sans devoir scroller, les fonctionnalités et les services que propose le site ou la web-app’. Le reste doit être compacté et ranger dans un onglet illustré par un pictogramme clair et compréhensible.

Exemple de structure de page desktop et de page d'application en mobile first

“Et le brand content pour le Référencement ?”

En effet, le moins est le mieux, mais pas pour le référencement, dont le contenu riche et qualitatif est la clé du succès. Pour donc s’assurer d’un bon référencement par Google, la méthode à considérer est l’ajout progressif du contenu textuel SEO-friendly et la minimisation de celui du cadre (navigation, header, footer et side-bars) non pris en compte par les moteurs de recherche car “dupliqués” sur l’ensemble du site. Effectivement, les contenus non visibles par l’utilisateur ne sont pas lus par Google pour le référencement (display:none ou hidden, opacity:0). Une technique à déplacer le bloc hors du champs de l’écran, comme par exemple les blocs de sous-menus déroulants en position:absolute et en left:9999px. Reste à voir si les robots spider de Google ne vont pas contrer, dans un avenir proche, ce subterfuge. Mais en attendant, cette solution est efficace pour garder un contenu indexable

Cependant, si ce contenu est indexable, cela veut dire qu’il est utile à l’utilisateur. Pourquoi ne pas dédié une page à ce contenu ? Sa mise en forme Mobile-First sera bien plus simple et ces pages alliant référencement et informationnel peuvent devenir des landings pages efficaces et très utiles pour les campagnes AdWords !

 

Le Mobile First est la réponse à l’évolution des utilisateurs. Si tout les sites ne sont pas forcément sujets à une stratégie pour petits écrans, adapter son contenu à ces devices dès le départ est un gain de temps exceptionnel. En effet, coder un site pour les grands écrans est si facile, qu’adapter par la suite ce code au responsive mobile devient long et ennuyeux. Mais puisque la montée en puissance du mobile ne date pas d’hier, diverses solutions de design responsive en Mobile First s’incorporent