Depuis plusieurs années, nous entendons parler du mobile first design en développement web. Et de fait, nous sommes de plus en plus entourés d’écrans : à la maison, sur notre lieu de travail, dans les transports… Partout les écrans sont omniprésents. Que ce soit notre smartphone, notre tablette, notre télévision ou encore notre ordinateur, nous passons une bonne partie de la journée derrière nos écrans.
Parmi ce panel de choix à notre disposition, il y en a un qui reste le grand gagnant : le mobile. Face à un usage grandissant depuis plusieurs années, et la praticité qu’il représente, c’est tout l’univers de web qui s’adapte à cet usage. En effet, dans notre secteur d’activité, on parle du mobile first. On vous propose dans cet article de décrypter la tendance ou le véritable standard qui se cache derrière.
Pour comprendre le mobile first, il faut d’abord revenir sur quelques chiffres d’utilisations de nos téléphones mobiles. En 2019, 79,8% des français possèdent et utilisent leurs smartphones contre 52,5% en 2014. On peut y effectuer énormément de tâches : consulter ses e-mails, utiliser des applications mobiles, utiliser la géolocalisation pour chercher son chemin, échanger par messages et par appels, regarder des vidéos… Et surtout, naviguer sur internet ! Des tâches mobile friendly, qui ne requièrent plus d’avoir un ordinateur si l’on possède un téléphone tactile.
Le mobile first design, quézako ?
Le mobile first, une stratégie et une technique
Vous avez déjà dû entendre parler de ce terme si vous vous êtes renseignés sur les dernières tendances du web. Le mobile first design est une stratégie et une technique qui consiste à concevoir un site web en priorisant l’interface mobile, pour ensuite s’adapter aux écrans, plus grands et plus larges, des tablettes et des ordinateurs.
Concrètement, cela signifie que l’on va penser, concevoir, développer nos sites web en pensant mobile. Facile vous direz vous ? Oui, mais pas que.
C’est un véritable changement de paradigme pour nos métiers qui consiste à concevoir un site dans sa version mobile en premier lieu pour ensuite le décliner dans sa version desktop. En d’autres termes, nous sommes passés d’un développement responsive desktop (ordinateur de bureau) à un développement responsive mobile (ou mobile first).
S’il s’agissait de diminuer progressivement les éléments d’un design de la version desktop vers sa version mobile, il s’agit aujourd’hui d’améliorer progressivement la version mobile vers la version desktop.
Afin de décrypter au mieux le mobile first, il nous faut revenir sur quelques tendances de fréquentation et d’usage.
Nos tendances actuelles
Depuis 2007, de plus en plus d’internautes utilisent le mobile et ce, pour tous types de requêtes. Recherche d’un restaurant, d’un menuisier, d’un plombier ou encore d’une place de concert, tous les secteurs sont concernés, sans exception.
Récemment, la crise sanitaire a accentué notre présence numérique et le trafic mobile. En France, en 2020, on passe 15% de temps en plus sur internet qu’en 2019. En fin d’année 2020, presque 92% des foyers sont équipés de connexion internet. Pour 53 millions d’internautes par mois, deux tiers utilisent leur smartphone pour surfer sur le web en 2020. C’est-à-dire qu’ils consultent les sites web pensés pour les ordinateurs sur leurs smartphones !
On constate également une grande utilisation des mobiles dans le commerce électronique. En effet, plus de 70% des visites de sites e-commerce dans le monde proviennent de smartphones en 2021.
Alors les métiers du digital ont-ils reconsidéré l’ordre des priorités en développement : commencer par la version desktop ou la version mobile ?
L’approche conventionnelle est de prioriser l’interface desktop. On utilise la notion de responsive web design, ou responsive design, qui permet aujourd’hui de s’adapter aux différentes tailles d’écrans. Cela consiste à la création des mises en page grâce à une grille fluide pour faciliter l’adaptation à la taille d’écrans. Il s’agit donc de commencer par l’interface desktop du site (ordinateur), pour progressivement diminuer à l’interface tablette, puis finir par l’interface mobile du site. La compatibilité mobile est plus difficile à obtenir par cette approche.
Depuis leur apparition, on conçoit traditionnellement les sites web pour les ordinateurs. Ce sont les premières machines sur lesquelles les internautes consultent les sites depuis la création du web, en 1989.
C’est en 2007 que le web mobile a été démocratisé avec le lancement du premier iPhone. Plusieurs navigateurs ont été adaptés en application pour être lisibles sur smartphone. Par la suite, l’utilisation du mobile pour naviguer sur internet n’a cessé de croître.
Quel est l’intérêt de l’approche mobile first ?
Les internautes présents sur smartphone
Sur les 79,8% des Français qui utilisent leur mobile, 64% utilisent leur portable principalement pour naviguer sur internet, contre 5% en 2008. Ce nombre de mobinautes n’est donc pas négligeable et reste croissant. Le smartphone a pris une place importante dans le quotidien des français. Il reste un appareil plus accessible qu’un ordinateur : on l’utilisera en déplacement, dans les transports, pour une recherche rapide, pour consulter un site avant de pouvoir y avoir accès sur son ordinateur… Les internautes auront tendance à privilégier les appareils mobiles dans beaucoup de situations.
Les nombreux avantages techniques du mobile first design
Google friendly en référencement naturel
Pour commencer, en terme de SEO (Search Engine Optimization), les algorithmes de Google, le moteur de recherche le plus utilisé, vont privilégier le mobile au desktop. Le référencement naturel de votre site sera donc plus performant s’il est présent et consulté sur mobile. Plus votre site sera présent et compatible sur les différents appareils, plus votre site aura de chance d’être consulté.
En développement, une meilleure compatibilité technique
Ensuite, concevoir un site avec la méthode mobile first permet d’avoir un code optimisé. La programmation du site doit être légère pour le mobile pour différentes raisons :
– Il est plus simple d’intégrer un site en commençant par le mobile, puis ajouter des éléments de code pour l’adapter au desktop. Retrier des éléments de code et l’adapter au mobile demeure plus long.
– Le temps de chargement doit rester court. Un smartphone n’a pas le même temps de réactivité qu’un ordinateur. Il arrive souvent qu’on effectue une recherche mobile avec une mauvaise connexion internet, via le WiFi ou par les données mobiles, où la navigation sera plus lente.
Un design fluide en UX/UI design
En webdesign, plusieurs éléments font partie des prérequis du mobile first. Par exemple, il est important de simplifier les modèles de pages pour optimiser les contenus et les informations mises à disposition sur le site.
Un autre élément essentiel à prendre en compte pour fluidifier la navigation mobile, c’est l’affichage du menu. En effet, il peut être totalement différent de sa version desktop. On utilise le menu burger qui affiche les éléments du menus les uns en dessous des autres afin de respecter la taille de l’écran.
Les formulaires de contacts ou encore les boutons qui appellent à l’action doivent être faciles d’accès pour faciliter l’ergonomie du site et simplifier une page. Pour se faire, on va intégrer des roll over ou tiroirs pour les systèmes d’onglets (toujours accessibles en un clic). On peut aussi intégrer des fonctionnalités mobiles telles que clic to call qui permet au mobinaute d’appeler en un seul clic.
Pour finir, en ergonomie, on peut réfléchir en premier lieu à la taille et à l’occupation dans l’espace des éléments cliquables. En prenant avec structure la taille d’un écran mobile, on obtient un affichage mobile aéré et clair en webdesign. L’UX (User experience) n’en sera que meilleure si votre site est adapté au mobile permettra une conversion des mobinautes vers votre site.
Alors, le mobile first design est-t-il adapté à votre site ?
Aujourd’hui, on peut dire que le mobile first design est primordial dans une refonte ou dans la création d’un site web.
C’est une tendance adaptée aux terminaux mobiles et aux utilisateurs du web. C’est une stratégie qui permet de pallier aux problématiques de navigation mobile et de compatibilité. Des sites adaptés au mobile permettent un meilleur référencement naturel.
En développement, il est plus simple de commencer par la version mobile pour progressivement s’adapter aux résolutions tablette et desktop. Enfin, cette technique est une solution ergonomique qui optimise le design design afin d’avoir une interface adaptée à n’importe quelle résolution.
Alors oui, le mobile first est bien plus qu’une simple mode. C’est une réelle tendance du web adaptée aux utilisateurs comme aux concepteurs qui contribue à augmenter le taux de conversion.
Chez Astraga, le mobile first est devenu un prérequis pour le développement de nos sites web. Tous nos projets sont pensés en version mobile avant la version desktop.
Si on allait encore plus loin…
Avez-vous déjà entendu parler des web apps ? De l’app first, ou encore du mobile only ? Ces méthodes tendent toutes vers une stratégie mobile sans même passer par une adaptation desktop pour certaines. Il s’agit de se concentrer uniquement sur le format mobile et plus précisément, sur la création d’un site mobile ou sur la création d’une application et sur son ASO (App Store Optimization). Autrement dit le référencement de votre app sur les boutiques d’applications.
On compte 4,32 milliards d’utilisateurs du web mobile dans le monde et 143 milliards de téléchargements d’applications en 2020. Des chiffres qui illustrent l’avènement de ces stratégies axées sur l’application mobile.
Sur smartphone, on retrouve également les réseaux sociaux qui ont une place prépondérante dans le quotidien des mobinautes aujourd’hui. Une stratégie Social Media ne serait donc pas à négliger dans votre présence et votre image digitale, en complément de votre site et/ou de votre application mobile.
Pour en savoir plus sur la stratégie Social Media…
Alors, quelle.s stratégie.s envisagez-vous pour votre entreprise ou votre marque ?
Sources chiffres et données :
Médiamétrie
Statista
Statcounter