Le bon mix pour réussir l’écoconception de votre site ou de votre app

Voici LE cocktail à la mode. Il est LE guide dont vous avez besoin pour concevoir votre site internet ou application mobile, j’ai nommé : LE MONECOCONCEPTION. 

En vous dévoilant la recette du MONECOCONCEPTION adapté du célèbre Monaco, nous allons vous donner des astuces pour réussir l’écoconception de votre site internet ou de votre application mobile. 

Une nouvelle édition du livre “Écoconception web, les 115 bonnes pratiques” vient juste de sortir. N’hésitez pas à vous le procurer pour compléter notre recette !

Comme toujours, nous vous proposons cette recette en deux façons :

• Le cul sec : si vous n'avez qu'1 minute à consacrer à cet article, retenez seulement les 5 ingrédients principaux présents sur le visuel ci-dessous.
• La dégustation : si vous avez un peu plus de temps, allez plus loin en parcourant les ingrédients détaillés plus bas.

‍

‍

GARDEZ L’ESSENTIEL
“Sélectionnez bien vos ingrédients” 

‍

Avant de se lancer dans la réalisation de votre site ou application, il est important de définir clairement le besoin, l’objectif et la fonction principale de votre produit numérique. 

On évite alors l’ajout superflu de fonctionnalités.

À savoir que 45% des fonctionnalités demandées ne sont jamais utilisées et 70% sont considérées comme non essentielles. 

Bonnes pratiques 1 & 2 de Écoconception web / les 115 bonnes pratiques - édition 3

‍

‍

ÉVALUEZ L’IMPACT ENVIRONNEMENTAL DE VOTRE SITE ACTUEL
“Vérifiez la contenance de votre verre”  

‍

Si vous envisagez une refonte de votre site ou application, il est primordial d’évaluer son impact environnemental actuel. Cela vous permet d’identifier les axes d’amélioration.

Dans le cas d’un nouveau service digital, vous pouvez mesurer l’impact environnemental de l’un de vos concurrents en vous basant sur vos données projetées (ex : nombre de visiteurs). Cela vous permet d’éviter de faire les mêmes erreurs et d'orienter vos futures décisions.

L’outil GreenIT Analysis, disponible sur Chrome et Firefox, peut vous aider à évaluer l’impact environnemental du parcours utilisateur de votre site. Il vous faut au préalable définir le scénario utilisateur et le réaliser en activant l’option “Activate best practices analysis” de l’outil.

‍

‍

SIMPLIFIEZ AU MAXIMUM
“Juste ce qu’il faut de sirop” 

‍

Plus un parcours utilisateur est fluide, moins l’utilisateur passera de temps sur un site/application et plus son empreinte environnementale sera faible. 

Il est donc important de prendre en compte les bonnes pratiques d’économies de l’attention. Pour cela, on privilégie un nombre restreint d’écrans et d’étapes et on réduit à l’essentiel les interactions et informations à inclure dans les interfaces.

Bonnes pratiques 4 & 5 de Écoconception web / les 115 bonnes pratiques - édition 3

‍

‍

PRIVILÉGIEZ LE MOBILE FIRST
“Toujours bien fraîche la bière !” 

‍

Optimiser la conception sur mobile permet d’aller à l’essentiel. On s'affranchit des fonctionnalités et contenus inutiles. Grâce au responsive design, le contenu s’adapte plus simplement sur desktop.

Privilégier la conception sur des mobiles ayant la 3G (au lieu de la 4G ou 5G), permet de se consacrer techniquement sur l’essentiel et de concevoir un système sobre, épuré et peu impactant.

Bonnes pratiques 6 de Écoconception web / les 115 bonnes pratiques - édition 3

‍

‍

‍

OPTIMISEZ LA TAILLE DES CONTENUS
“L’abus d’alcool est dangereux pour la santé” 

‍

Les médias (images, vidéos, animations, plugin…) sont les ressources qui utilisent le plus de bande passante sur le web, il est donc important d’optimiser leur taille pour réduire leur impact environnemental. 

Nous allons vous donner des astuces pour optimiser vos contenus et ainsi réduire au maximum leur impact environnemental.

‍

IMAGES

• Redimensionner les images avant de les intégrer
• Avoir une largeur maximum de 800 pixels
• Préférez les formats : .jpg pour vos photos, .svg pour les illustrations vectorielles
• Compresser vos images avant de les mettre en ligne

En appliquant déjà ces 3 techniques, vous pouvez réduire la taille de vos images par 10 !

‍Bonnes pratiques 34, 35, 36, 37, 59, 80 et 107 de Écoconception web / les 115 bonnes pratiques - édition 3

‍

VIDÉOS

Les vidéos en ligne représentent entre 60% à 90% du trafic internet (61 % rien que pour les plateformes de streaming : Youtube, Netflix…)

• Limiter l’usage de vidéo.
• Privilégier un format court dans le cas où le format vidéo est indispensable. En marketing, le temps recommandé pour une vidéo est de 1 min 30 maximum.
• Refuser les fonds vidéo en page d’accueil par exemple, ou les autoplay qui tournent en boucle. 
• Compresser vos vidéos au maximum.
• Préférer une image cliquable qui renvoie vers une plateforme d'hébergement vidéo comme Youtube ou Viméo pour présenter vos vidéos.

Petit + accessibilité : sous-titrer vos vidéos. De plus en plus d’utilisateurs regardent les vidéos sans son (85% des vidéos Facebook sont regardés sans le son) 

Bonnes pratiques 107 et 114 de Écoconception web / les 115 bonnes pratiques - édition 3

‍

ANIMATIONS

• Éviter les gifs animés car ils ne peuvent être stoppés. 
• Proscrire les carrousels automatiques. En plus d’être lourd à afficher, il est contre-productif d’utiliser ce type d’animation  en termes d’expérience utilisateur.
• Privilégier les transitions instantanées plutôt qu'animées.‍

Bonnes pratiques 39, 55 et 115 de Écoconception web / les 115 bonnes pratiques - édition 3

‍

PLUGINS & WIDGETS

• Remplacer les icônes de réseaux sociaux par un lien et une image.
• Supprimer les fils d’actualité des réseaux sociaux intégrés.
• Remplacer la carte Google Maps par une image et un lien ou simplement un lien.
• Remplacer les cartes interactives par une recherche avec des critères et une liste de résultats.

Bonnes pratiques 12, 19,  de Écoconception web / les 115 bonnes pratiques - édition 3

‍

INTERACTIONS

• Remplacer le scroll infini qui augmente considérablement le poids de la page par une pagination ou un bouton d’action “voir plus”.
• Éviter la complétion automatique qui demande beaucoup de requêtes au serveur.

Bonnes pratiques 13 de Écoconception web / les 115 bonnes pratiques - édition 3

‍

‍

C’est prêt, plus qu’à déguster !

‍

Comme on vous le dit, rien ne vaut la pratique alors lancez-vous en suivant la recette ! Et, si vous avez encore des doutes, n’hésitez pas à solliciter nos équipes d’experts. Ils seront ravis de vous aider à concevoir votre site internet de manière écoresponsable ! 

À bientôt pour une nouvelle recette…

‍

Source :

Écoconception web / les 115 bonnes pratiques - édition 3

NOUVEAU ! Écoconception web / les 115 bonnes pratiques - édition 4