Aujourd’hui, le téléphone est devenu un objet essentiel aux yeux des consommateurs. Ils l’ont, pour la grande majorité, en permanence à portée de main. D’ailleurs, on assiste même, au fil du temps, à une transformation de l’internaute classique en un" mobinaute" car 60% des recherches Google proviendraient d’un mobile ! Par conséquent, le trafic vers les sites web en est fortement impacté.
Il y a encore quelques années, on avait l'habitude d'adapter d’abord le web design à l’ordinateur, avant de progressivement l’optimiser pour le mobile. Aujourd’hui, la tendance s’est largement inversée. Et pour cause, en 2020, 2/3 du trafic en ligne mondial provenait des smartphones, soit une augmentation de 16% par rapport à 2019, selon une étude ContentSquare.
En 2022, on imagine facilement que ce chiffre ait encore grimpé. Le Mobile First Design n’est donc plus un marché de niche mais bien un marché qu’il est essentiel de prendre en compte dans sa stratégie digitale. Et cette inversion de la tendance impose aux développeurs web de nouveaux usages.
Google recommande le mobile first, mais analysez bien les visites de votre site pour savoir si votre audience le consulte sur davantage sur mobile ou sur desktop. Une analyse complète permet de faire le choix du mobile first.
Il est très pertinent de s’assurer que notre site web s’adapte parfaitement au dernier téléphone sorti. Cependant, il peut être intéressant de consulter, en premier lieu, les données analytiques de notre site avant d’envisager l’approche Mobile First ou au contraire Desktop first.
Le mobile First est une approche de construction différente, qui permet d'optimiser un site sur mobile, quitte à prioriser le mobile au desktop (PC / MAC). Il ne faut pas tenir pour acquis la tendance du mobile first: Chaque produit d'adresse à une cible bien particulière. Sur le site de l'agence de communication digitale Citron Noir par exemple, nous n'avons pas adopté le mobile first. En effet, les statistiques du site web sur l'année précédente montre que les 2/3 des visiteurs du site sont sur desktop.
Dans le cas où ces données indiquent que vos utilisateurs ne consultent pratiquement pas votre site via un mobile, il est éventuellement plus pertinent de choisir l’approche desktop first. En optant pour le Mobile First Design, vous pouvez être amenés à négliger l’UX experience d’une partie de vos utilisateurs en risquant de délaisser la qualité du parcours client de l’ensemble des utilisateurs qui n’utilisent pas le mobile. En revanche, si vous vous apercevez que 80% de vos clients passent par le biais d’un mobile pour consulter votre site, n’hésitez pas une seule seconde avant d’adopter cette méthode.
En résumé : bien que Google recommande fortement le mobile first, attention à prendre en considération l'utilisation de votre support par votre audience. l'internaute est la priorité !
Avec le concept d’ATAWAD - Any Time, AnyWhere, Any Device - les consommateurs sont libres de faire des recherches via leur navigateur et ce, depuis n’importe quel appareil : mobiles, sites web ou encore tablettes. Pour que le design s’adapte au mieux à toutes les résolutions d’écran, le Responsive Web Design est une des méthodes privilégiées.
Le Responsive Web Design (RWD) est une méthode permettant de concevoir des interfaces utilisateur capables de s'adapter aux différentes résolutions d’écrans. Autrement dit, cette approche permet aux utilisateurs d’accéder à un même fichier de base par le biais de leur navigateur, et ce, quel que soit l’appareil. Le code CSS contrôle la mise en page et la rend différente en fonction de la taille de l’écran. C’est donc l’opposé du principe de Mobile First Design, car ici, le web design est d’abord créé pour le site, puis adapté aux différents appareils.
Cette approche se base sur un design flexible composé :
Ces éléments permettent l’adaptation automatique du design à l’appareil utilisé. L’avantage du RWD, c’est que les designers n’ont pas à créer des versions adaptées à chaque écran. L’expérience de navigation est garantie pour chaque device.
*Les Media Queries (ou requêtes média en français) permettent de modifier l'apparence d'un site en fonction du type d'appareil utilisé et de ses caractéristiques (la résolution d’un écran ou la largeur du viewport).
Adopter une approche adaptée pour le mobile possède des avantages indéniables et tend à devenir primordial, si ça n'est pas déjà le cas. Alors, que vous choisissiez d’opter pour l’approche Mobile First ou l’approche desktop, vous avez tout à y gagner.
Cette dernière vous permet de garantir une certaine cohérence ergonomique sur tout type de support. Par exemple, le Mobile First Design se base, lors de la création, sur le plus petit écran possible. Par la suite, il sera toujours plus facile de l’adapter à des écrans plus grands. Lorsque l’on crée ce type de design, on réfléchit en “blocs”. Ces derniers se répartissent de manière intelligente selon l’écran et la place disponible, pour permettre une expérience utilisateur des plus optimales.
En optant pour une approche Mobile First Design, vous serez obligé de maîtriser la quantité d’informations présente sur votre site pour qu’elle soit appréciable par l’utilisateur malgré la taille réduite de l’écran. Concentrez vous sur l’essentiel, car, dans tous les cas, il est plus facile d’ajouter des options présentes exclusivement sur desktop plutôt que d’en supprimer sur mobile. Et en ayant un site moins lourd, le temps de chargement n’en sera qu’amélioré.
Un autre avantage, et pas des moindres, est le fait que le Responsive Web Design puisse améliorer votre référencement naturel. Pour vous remettre dans le contexte, après la montée en puissance de l’utilisation du smartphone, Google a été contraint de revoir son algorithme de référencement et d’accorder une importance plus conséquente à l’aspect “mobile friendly” d’un site.
Les robots Google ont par conséquent tendance à préférer les sites responsives lors du crawl car ces derniers possèdent une seule URL (et un même code HTML) sur n’importe quel appareil, ce qui permet une meilleure indexation et vous promet une meilleure position dans le SERP (le SERP correspond à la page de résultat d’un moteur de recherche).
Opter pour une approche mobile friendly, au détriment d’une version mobile classique, vous permet de conserver le même site, avec le même nom de domaine et, ainsi, d’éviter au maximum le duplicate content entre vos deux URL et de conserver votre link juice et vos page rank.
Dans tous les cas, quelle que soit la méthode d’adaptation que vous privilégiez, il est important de prendre conscience de la place que le mobile occupe dans notre société à l’heure actuelle. Il est donc clair qu'il ne faut pas négliger l’affichage de votre web design sur un smartphone, afin que l’expérience utilisateur soit agréable en toute circonstance.
Demain, vos données ne seront plus seulement analysées devant votre écran mais tout au long de vos journées. De nombreuses technologies ont vu le jour ces dernières années, au moyen de caméras...