Tendance du web design écologique : L’incontournable « mobile first »

Frédéric Bordage, spécialiste du numérique durable et auteur de l’ouvrage « Eco-conception web : les 115 bonnes pratiques: Doper son site et réduire son empreinte écologique » estime que l’approche « mobile first » est à privilégier. Cette dernière consiste à concevoir un site/service en ligne dédié aux appareils mobiles.

La création d’interfaces pour PC n’est à réaliser que si l’apport fonctionnel et ergonomique est justifié. Dans ce cas-là, il est préférable d’opter pour l’architecture Responsive Design + Server Side Components (RESS). « Cette architecture reprend les principes RWD (adaptation automatique de l’interface au contexte d’utilisation), mais sélectionne côté serveur les ressources qui seront envoyées au terminal. » Elle permet donc de ne pas « consommer inutilement de la bande passante » ou de « trop solliciter le processeur et la mémoire du terminal pour des traitements inutiles ». Comme le souligne Frédéric Bordage, « il s’agit de pousser à l’extrême la bonne pratique qui consiste à fournir du code spécifique à un navigateur en particulier. »[1]

En plus d’un design responsive, déclarer le code avec des composantes côté serveur permet à un site web de facilement s’adapter aux écrans de toute taille. L’un des principaux espoirs des composantes du web est de pouvoir facilement les partager et les utiliser avec d’autres navigateurs. Ce partage est possible. Les composantes du web sont basées sur des normes que tous les grands navigateurs s’efforcent de mettre en œuvre.[2] Ainsi, l’adaptation d’un site web aux différentes tailles d’écran devient plus intuitive et facile. Ce processus permet également d’économiser de l’énergie.

Être « Mobile Friendly »

Pour qu’un site web s’affiche correctement sur mobile, il y a encore quelques éléments à surveiller concernant l’optimisation technique. Par exemple, il faut :

• limiter le temps de chargement de ses pages à 4 secondes maximum
• réduire le poids de ses pages web au maximum et rester sous 1,5 Mo
• baisser son speed index à moins de 1000 [3]

Les images

Pour être en mesure de remplir ces critères, on est contraints de suivre des astuces potentiellement écologiques. L’une d’elles consiste à contrôler la taille des images sur une page web afin d’en limiter son poids. Comme l’explique Frédéric Bordage, « une image de 350 x 350 pixels encodée en PNG 24 pèse 41 Ko. Redimensionnée dans le code HTML, la même image affichée en vignette à 70 x 60 pixels pèse toujours 41 Ko, alors qu’elle ne devrait pas dépasser 3 Ko ! Soit 38 Ko téléchargés à chaque fois pour rien… »[4] Pour les vidéos, il sera également préférable de « prévoir plusieurs formats (taille, frame rate, compression audio, etc.) selon le contexte de lecture des vidéos (ordinateur de bureau, tablette Wi-Fi, smartphone EDGE…). »[5]

Depuis 2018, les images au format SVG (Scalable Vector Graphics, ou « graphique vectoriel adaptable » en français) sont à la mode grâce à leurs caractères petits et évolutifs. Par nature, ce format d’image est basé sur le langage de balisage XML. Il permet notamment de redimensionner des images sans perte de qualité quelle que soit la taille de l’écran. En parallèle, un fichier SVG est très léger. C’est donc très avantageux pour le chargement sur un portable.[6]

Les polices d’écriture

Pour ce qui est des polices d’écriture, on devrait se limiter à une ou deux typographies. En effet, les polices d’écriture ont, elles aussi, un impact sur la consommation des données. [7] De plus, si la nature du site nous le permet, il sera judicieux de « préférer les polices standards, car elles sont déjà présentes sur l’ordinateur de l’internaute, qui n’a donc pas besoin de les télécharger. On économise ainsi de la bande passante tout en accélérant l’affichage du site. »[8] Dans le cas où un seul glyphe est suffisant, il est inutile d’utiliser une image pour avoir le même effet. Les glyphes sont inclus dans les polices de caractères du système, ils n’ont donc pas besoin d’être téléchargés.

Une nécessité marketing

En France, en 2017, les requêtes faites sur téléphones mobiles dépassaient celles faites sur ordinateurs selon Google. L’approche « mobile first » n’est donc pas seulement plus écologique, c’est aussi une stratégie digitale indispensable sur le marché actuel. « Mobile First est un concept de Web Design optimisé pour le mobile qui va au-delà du Responsive Web Design. Il consiste à concevoir un site en mettant la priorité sur la version mobile et en adaptant progressivement le web design pour les écrans plus larges. »[9]

Même pour le SEO, un site « mobile first » est efficace. Il obtient plus facilement un meilleur classement dans les résultats de recherche. Depuis 2016, Google valorise les sites web qui possèdent un affichage mobile-friendly.[10]

Réduire à l’essentiel

La conception « mobile first » pourrait aussi amener le designer à mieux réfléchir aux éléments essentiels du site web et à réduire les éléments non essentiels puisque l’écran de portable a une taille limitée. Comme dans une petite maison, chaque mètre carré d’espace doit être calculé pour n’installer que des meubles indispensables et ne pas encombrer la circulation. À l’inverse, si l’on commence par concevoir un site web à partir d’un moniteur de grande taille (27 pouces, par exemple), on risque de mettre dès le départ trop d’éléments sur la page. Il sera donc difficilement responsive. Et même si on arrive à serrer tous les contenus sur un écran de portable, la page risque d’être trop longue. L’utilisateur devra faire défiler une bonne partie du contenu avant d’accéder à celle qui l’intéresse. Ainsi, il risque de perdre patience et de vivre une expérience désagréable.

L’ouvrage « Relever le défi du Web mobile : bonnes pratiques de conception et développement », de François Daoust et Dominique Hazaël-Massieux, apportent également quelques conseils : « Les navigateurs mobiles n’offrent généralement pas de possibilité pour accéder directement au début ou à la fin de la page. Une bonne page web mobile n’est donc pas trop longue : en guise d’ordre de grandeur, limitez-vous autant que possible à cinq hauteurs d’écran (soit environ 2 000 pixels de haut sur ces écrans de résolution moyenne).[11]

Rédigé par Shu-Min Huang