éco-conception web : Créer un site responsive

Livre - éco-conception web : les 100 bonnes pratiques - Eyrolles - couverture - small

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.


Commentaires

Un site « responsive » adapte la mise en forme et le contenu des pages web en fonction du contexte de visualisation”

Ah oui, comme greenit.fr, c’est ça ?!…

Le site sur le navigateur d’un GSM/Android est toujours le même que sur un PC, un sujet abordé depuis longtemps déjà…

PS : apparemment la recherche (de quand on a parlé de ça) dans le site ne fonctionne pas/plus. Quelle que soit la requête, la réponse est “Vous devez inclure au moins un mot-clé positif de 3 caractères ou plus.”
Un avis : s’il faut des mois/années pour mettre en place un CSS pour les mobiles (tous les moteurs de blogs en ont, Drupal aussi) et avoir un site qui ne rend pas les services qu’il est supposé rendre, peut-être faut-il secouer votre prestataire et/ou le mettre en concurrence… :o)

Anonyme (non vérifié) le 06/02/2013

@Anonyme : Nous sommes bien conscients de vos remarques. Notre prestataire a développé et héberge gratuitement GreenIT.fr depuis 10 ans. Il nous demande 15 000 euros pour migrer l’ensemble des données, vues, etc. sous Drupal 7. Le budget et la demande sont légitimes. Cependant, malgré notre trafic (1 million de visiteurs uniques) GreenIT.fr est un site 100 % bénévole et nous n’avons pas de budget de fonctionnement. La question est donc : qui veut nous sponsoriser ?

admin le 06/02/2013

Responsive ????
Pfff…
déjà “green IT” fleure bon la paresse intellectuelle et le manque de vocabulaire.
J’aime bien ce que vous faites mais là le titre me fait très mal aux yeux (sans parler des oreilles).
10 secondes avec google me donne ça :
“Responsive Web Design = conception de sites web adaptatifs selon l’OQLF” sur wikipedia
http://fr.wikipedia.org/wiki/Responsive_Web_Design

Sinon pour la migration à 15000 euros… on se fout de vous. Faites jouer la concurrence…

Anonyme (non vérifié) le 06/02/2013

Au risque de me faire l’avocat du diable, voici quelques stats concernant le chargement de cette page:

Traffic montant : 62Ko, inclus headers Ethernet, IP, TCP, HTTP et payload (HTML, CSS, js, …)
Traffic desccendant : 470 Ko, inclus headers Ethernet, IP, TCP, HTTP et payload (HTML, CSS, js, …)

Les payloads textuelles sont zippées et le principale partie du trafic est faite par le download des javascripts (dont l’utilité pourrait être discutée pour mon utilisation puisque elle est très statique).

J’ai l’impression que ça reste quand même raisonnable ;)

Enfin je terminerai par un “fun fact”:
Le chargement du bouton twitter coûte plus cher, en terme d’octets, que le chargement du code html de la page principale.

Anonyme (non vérifié) le 06/02/2013

@Anonyme : effectivement, ce sont les javascripts externes (Google Analytics, bouton “Tweeter”, etc.) qui pèsent le plus lourd et plombent le temps de réponse. Malheureusement, nous n’avons pas la main dessus et ils sont incontournables.

admin le 07/02/2013

Je suis militant d’une pratique du web “eco responsable” et j’aime bien ce que vous faites mais il ne faut pas raconter n’importe quoi. Le responsive n’est pas à proprement parlé une solution “green”, la plupart du temps le fait de voir la version mobile épurée ne change rien au poids de la page. C’est simplement avec la fonction css display : none que la bannière disparait de l’affichage, pas du chargement de la page, donc en terme de trafic sur les serveurs c’est idem. Dans la majorité des cas une version dédiée mobile est beaucoup plus efficace.

cigale34 (non vérifié) le 07/02/2013

@cigale34 : de par le coût de mise en place du css responsive, bon nombres d’entreprises oublient d’utiliser des tests de plateformes (côté serveur avec les infos du user-agent ou côté client avec du javascript) pour dire si on charge certaines parties du site en version desktop ou en version mobile.

Eastchild (non vérifié) le 07/02/2013

@Cigale34 : quand on développe correctement un site responsive, tous les médias (images, etc.) sont redimensionnés en conséquence. L’économie en bande passante et la réduction de l’empreinte ressource côté internaute sont conséquentes. Surtout à l’échelle du web.

admin le 07/02/2013

@admin:
C’est juste, mais dans une démarche d’optimisation on traite toujours en premier les éléments les plus coûteux (et avant tout on commence par une analyse complète de l’état courant)
Et dans le cas très spécifique de cette page, il semble que ce ne soit pas les médias qui représentent la majeure partie du trafic mais le javascript du site.

Anonyme (non vérifié) le 07/02/2013

Je soutiens cette approche responsive pour les sites internet. D’après moi, il est indispensable de réfléchir clairement à alléger le chargement de son site.

La 3G c’est beau, c’est rapide ! Mais si on réfléchis un peu plus loin, la batterie de n’importe quel smartphone avec la 3G se vide plus rapidement donc pourquoi laisser la 3G toujours up ? Donc, je pars du principe de laiser activé le edge, économie de batterie.

Donc, je trouve génial et important que les sites aillent dans le sens d’alléger leurs pages et d’améliorer la conception du site pour améliorer la bande passante.

Je soutiens.
 PyS

PyS (non vérifié) le 07/02/2013

Poster un nouveau commentaire

Le contenu de ce champ ne sera pas montré publiquement.