éco-conception web : Créer un site responsive
Dans le cadre du lancement du livre Eco-conception web – Les 100 bonnes pratiques auquel plusieurs contributeurs de GreenIT.fr ont participé, nous vous proposons chaque semaine un focus sur une bonne pratique.
Aujourd’hui : Créer un site « responsive »
Un site « responsive » adapte la mise en forme et le contenu des pages web en fonction du contexte de visualisation :
· ordinateur de bureau
· tablette Wi-Fi
· smartphone EDGE
· etc.
Tout en améliorant le service rendu aux internautes, cette approche réduit considérablement la bande passante consommée.
Prenons le cas d’une page d’accueil d’un site institutionnel, avec une image en background et un carrousel.
Visualisation sur un ordinateur de bureau avec écran 1024 ou supérieur :
– image de background (1600 × 1200 -> 250 Ko)
– 1 vidéo à 3 Mo
– 3 images à 80 Ko, soit 240 Ko
– méga menu avec effets de transition (800 Ko)
– structure de la page à 250 Ko (HTML, CSS, JavaScript, images)
– contenu à 10 Ko
Soit 4,5 Mo au total après visualisation du carrousel.
Visualisation sur un smartphone (iPhone, Android, etc.) :
– pas d’image de background
– 1 vidéo optimisée à 1,2 Mo
– 3 images à 10 Ko, soit 30 Ko
– menu adapté sous la forme d’une liste déroulante (1 Ko)
– structure adaptée à 5 Ko (HTML, CSS)
– contenu à 10 Ko
Soit 1,2 Mo au total après visualisation du carrousel
Soit une optimisation de 3,3 Mo pour une page du site. Avec ne serait-ce que 5 000 pages vues sur mobile chaque mois, on imagine le gain final !
Découvrir le livre Eco-conception web – Les 100 bonnes pratiques
L’acheter chez amazon.fr, eyrolles.com, à la Fnac.com.
Frédéric Bordage
Expert en green IT, sobriété numérique, numérique responsable, écoconception et slow.tech, j'ai créé le collectif Green IT en 2004. Je conseille des organisations privées et publiques, et anime GreenIT.fr, le Collectif Conception Numérique Responsable (@CNumR) et le Club Green IT.