Aujourd’hui, l’activité web mobile pèse plus de 50% du trafic Internet mondial. Conséquence en matière de création de site : adapter l’ergonomie pour la consultation via un smartphone n’est plus la cerise sur le gâteau mais un critère incontournable ! Je vous explique comment la soigner.
De l’origine du smartphone à la généralisation du web mobile
Pour comprendre certaines évolutions, repartons en arrière jusqu’en 2007 : date clé dans l’avènement des smartphones. L’ergonomie mobile impose plusieurs nouveautés dont la navigation au doigt. On tape une fois pour cliquer. On glisse pour défiler (scroll). On balaie pour changer (swipe).
Héritage du web mobile, on voit à l’époque fleurir, un peu comme une mode, les sites Internet dits en ‘infinite scroll’. Quézako ? Une interface dans laquelle les pages sont placées les unes en-dessous des autres pour former un site sur lequel on navigue en faisant défiler les éléments. Seul petit hic : si la navigation semble fluide, on oublie plusieurs détails d’importance. Tout d’abord le temps de chargement de cette enfilade de pages s’avère souvent assez long. Ensuite, pour certains internautes peu aguerris, ces dispositifs peuvent poser problème si par exemple le bas d’une partie de la page correspond à la ligne de flottaison* de son écran. Enfin, on peut penser que l’on a parcouru l’ensemble du site en passant éventuellement à côté de pages qui n’auraient pas été reprises dans l’infinite scroll de la page d’accueil.
Depuis 2019, le moteur de recherche Google a multiplié les mises à jour de son algorithme portant sur le caractère ‘mobile-friendly’ des sites. La proportion de trafic web issu des smartphones ne cessant d’augmenter, le géant américain tend à favoriser les interfaces ergonomiques pour les mobinautes, dans une logique d’expérience utilisateur.
Voici donc les bonnes pratiques à respecter pour se doter d’un site mobile-friendly.
1. Le temps de chargement
Plusieurs facteurs impactent la rapidité de chargement de vos pages web.
Qualité d’hébergement
Stocker les fichiers sur un vieil ordinateur au fond de son garage… fort heureusement, ça ne se fait plus ! Aujourd’hui, le pli est pris de se tourner vers un hébergeur comme OVH [mon chouchou parce que son siège se trouve à Roubaix] qui vous offrira la garantie d’un service professionnel (stabilité, sécurité, bande passante, absorptions d’éventuelles montées en charge…).
Le recours à un hébergement dédié (c’est-à-dire un serveur rien que pour vous) versus mutualisé (un serveur partagé entre plusieurs sites) dépend de l’envergure de votre site web.
NB : voici un comparatif tout frais d’hébergeurs de site web.
Poids des images
Il est indispensable de compresser au maximum les images de votre site afin d’obtenir le meilleur rapport qualité/poids. Il faut d’une part les recadrer. Il serait par exemple inutile de publier une photo de 2000 pixels de large pour l’afficher dans une zone de 200 pixels. Et d’autre part en limiter la définition (qui correspond à la densité de pixels au prorata de la taille).
Pour cela, si vous avez Photoshop, vous pouvez utiliser la fonction ‘enregistrer pour le web’. Auquel cas, en règle générale on privilégiera le format jpg pour les photos et le png ou le gif pour les dessins et pictos.
Vous n’avez pas de logiciel ? Pas de panique ! Il existe des utilitaires de compression en ligne comme CloudImages.
Il faut savoir qu’une photo constituée de nombreux détails et variantes de teintes sera forcément plus lourde. Une donnée à avoir en tête dès la sélection de vos visuels…
Poids des pages et du site
Limiter le poids des pages s’avère généralement plus complexe. On peut commencer par restreindre le nombre d’images bien entendu mais il faut aussi avoir des styles css** propres et éviter des pages surchargées en éléments fonctionnels.
Pensez aussi à ‘faire le ménage’ en limitant les extensions, en supprimant celles qui ne sont pas utilisées ainsi que les anciens éléments qui peuvent alourdir le poids (anciens visuels ou PDF dépubliés).
Pour être pragmatique et détecter les optimisations à réaliser en priorité, n’hésitez pas à vous appuyer sur des outils tels que LightHouse et Page Speed Insights.
2. Une ergonomie épurée
Ici c’est le confort de lisibilité et la facilité de navigation qui priment. Voici quelques pistes…
Contraste
Même si cela paraît élémentaire, il faut réellement y prêter attention et donc veiller à bien contraster le fond et le contenu. Ainsi Un texte gris clair peut être fatiguant à lire sur un écran de téléphone. De la même manière, un écart de teinte trop faible entre un contenu et l’arrière-plan risque de fatiguer inutilement l’œil de votre visiteur.
CTA clairs
Des ‘call-to’action’ clairs : c’est la base d’une interface web. Leur objectif étant de guider l’internaute dans sa navigation. Un bouton ou lien d’action doit être clairement identifiable grâce à sa forme, sa couleur autant que son emplacement. Et n’oublions pas l’item lui-même qui doit être parfaitement compréhensible et incitatif : ‘contactez-nous’, ‘demandez un devis’, ‘acheter’…
Blocs et espaces suffisants
Si la navigation sur smartphone et tablette suppose une habilité digitale (au sens premier du terme !), nous ne sommes sur ce point pas tous égaux, eu égard à la taille de nos doigts 😉 Aussi faut-il prévoir des zones cliquables suffisamment grandes. Il en va de même pour les gouttières qui les séparent afin d’éviter toute erreur de tape.
Typos lisibles
Vous l’aurez certainement constaté : le corps des polices web ont pris de l’embonpoint ces dernières années. Là où auparavant, le corps 12 pixels était la norme, on croise désormais davantage de textes en 14 voire 16 pixels, toujours dans une logique de confort de lecture. Orientez aussi le choix de la typo en fonction de sa lisibilité.
3. Un affichage responsive ou adaptive design
Commençons par le commencement : quelle est la différence entre ‘responsive’ et ‘adaptive’ ? Pour [essayer de] faire simple : le responsive design modifie la taille d’un élément de manière proportionnelle pour qu’il s’adapte à la résolution de n’importe quel écran alors que l’adaptive design vise à définir différents modèles d’affichage selon le type d’appareil (smartphone, tablette, ordinateur portable ou ordinateur de bureau).
Si le responsive design offre une ergonomie universelle, l’adaptive a quant à lui l’avantage de proposer une interface plus spécifique à chaque appareil.
Ce qui est certain c’est qu’une démarche visant à optimiser le confort de navigation, quelle que soit la taille de l’écran utilisée, est INDISPENSABLE !
Mais au-delà du confort de navigation, je pense que l’on peut, quand cela est possible, imaginer des déclinaisons voire des arbitrages en fonction de l’appareil utilisé. A titre d’exemple, un visuel d’illustration placé en arrière-plan peut être présent sur écran d’ordinateur mais disparaître sur tablette et smartphone, sur lesquels on va privilégier confort de lecture et poids des pages.
Comment savoir ce qu’il faut corriger sur un site ?
Afin de déterminer si votre site peut être optimisé, il convient de réaliser un audit des éléments précités. On sera ainsi en mesure de déterminer ce qui bloque, ce qui peut être amélioré ou si une refonte du site est incontournable. N’hésitez pas à me contacter.
*Ligne fictive qui matérialise le bas d’un écran (c’est-à-dire ce que l’on affiche dans défiler) dans une résolution standard.
**Le CSS pour ‘cascading styles sheet’, littéralement ‘feuille de styles en cascade’ est un fichier qui regroupe l’ensemble des styles graphiques d’un site (taille, couleurs des typos, des boutons…) et auquel chacune des pages fait référence (pour éviter de répliquer le code correspondant dans chaque page, et donc de l’alourdir).
Photo by Possessed Photography on Unsplash
