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. C’est ainsi qu’est née la construction Mobile First. 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 ? Apprenons la mentalité du Mobile First.

 

Qu’est ce qu’une Web App ?

D’un nom peu utilisé, la Web App est ni plus ni moins un site responsive aux allures d’application mais à la mise à jour instantanée des sites web. Pas besoin de téléchargement sur le Google Play ou l’App Store. L’accès se fait via le navigateur mobile mais peut s’intégrer dans une icône de raccourcit. Parfaitement adaptée aux devices mobiles, il se compose d’une différence nette entre les différents formats de lecture : Desktop/Laptop, Tablettes, et Smartphone. L’avantage est qu’elles sont aussi disponibles sur Desktop et Laptop (les deux plus grandes devices). Cependant cette Web App est toujours sous stratégie de construction Mobile-First C’est-à-dire d’abord pensée pour les mobiles et ensuite adaptée aux écrans larges. Contrairement aux applications natives mobiles, développées pour deux OS.
Il est vrai que la construction d’une application mobile de ce genre permet la synchronisation avec le mobile. Les notifications push, par exemple, ne seront pas disponible pour une Web App en Mobile First.

 

“La Web App pour intégrer le Mobile First ?”

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. Cette mise à jour instantanée est extrêmement intéressante pour les debugs et implantations de nouvelles fonctionnalités. A 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 device Mobile First

 

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. Entre autres : les fonctionnalités et les services que propose le projet en Mobile First. Le reste doit être compacté et ranger dans un onglet clair et compréhensible. En général ce sont les pictogrammes qui prennent le relais du texte. Ce dernier, prenant une plus grande place en terme de pixels. Par exemple, le projet Mika Sushi voit plus de 60% de ses utilisateurs venir via Mobile ! La stratégie de Mobile First doit alors être visible et proposer une interface ultra adaptée.

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. Le contenu riche et qualitatif est et reste la clé du succès. Pour s’assurer d’un bon référencement par Google, la méthode à considérer est la pondération entre le contenu SEO et le cadre. Le contenu étant le textuel et visuel qui répond à la requête de l’internaute. Le cadr est, quant à lui la navigation, le header, le footer et les sidebars. Ces derniers ne sont pas pris en compte par les moteurs de recherche car “dupliqués” sur l’ensemble du site. Il faut aussi savoir que les contenus non visibles par l’utilisateur ne sont pas lus par Google pour le référencement (display:none ou hidden, opacity:0). La technique consiste donc à déplacer le bloc hors du champs de l’écran. Par exemple des gros blocs de description supplémentaires 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 et hors du champs de vision de l’internaute.

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 !

 

Synthèse de la mentalité Mobile-First

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. Changeons nos mentalités et pensons en premier aux plus petites devices : wireframes, visuels, maquettes et fonctionnalités.