Le « responsive web design », l’ultime solution ?
Habituellement, à la création d’un site internet, le design de celui ci devait apparaitre à l’identique sur tous les navigateurs du plus ancien encore en circulation au dernier à la mode. Avec l’arrivée des smartphone et tablette, dont la résolution d’écran dépasse maintenant celui de certains ordinateur de bureau, la donne à changer et il faut maintenant en tenir compte. Il n’est plus question de créer un site principal pour les « desktops » et un site secondaire pour les » mobiles » car les résolutions d’écran ayant tendances à se croiser cela n’a plus de sens. C’est là que le responsive web design fait son apparition.
Ce terme est l’art de créer un site internet dont le design s’adapte au changement de résolution de l’écran (ou navigateur) de l’utilisateur. Le but étant, par exemple, qu’un site ayant un design sur 3 colonnes pour une résolution minimale de 1000px de large ait un design sur 2 colonnes lorsque la résolution de l’écran ou du navigateur descend sous 800px de large par exemple et enfin 1 colonne lorsque celle ci passe en dessous de 300px. Il s’agit donc d’adapter dynamiquement le design à l’aide de css.
C’est une manière de travailler qui est intéressante car nous sommes arrivé, en terme de web design et développement, à un point ou la multiplicité de dispositif avec des résolutions différents devient un vrai casse tête pour le développeur et/ou la société qui souhaite un design adapté à tous les formats. Il est certain qu’il n’est pas possible de développer autant de version de site qu’il existe de résolutions.
Voici un site, anderssonwise.com, qui a su remarquablement mettre en place le « responsive web design ».
Celui ci aussi : foodsense.is
Mais tout n’est pas parfait… loin de là
Malheureusement cette nouvelle façon de créer n’est pas exempt de défaut et de contrainte.
Le budget
Le cout de ce type de site est supérieur au site classique car il faut créer autant d’adaptation de page que de dispositif visé. Pour un site classique avec 5 pages, il faudra penser aux versions :
- smartphone
- tablette
- netbook
- ordinateur de bureau
Les images
C’est le problème le plus important qui se pose lors d’une conception utilisant cette technique. En responsive web design, les images sont redimensionnées pour s’adapter à un écran de bureau ou un écran de terminal mobile avec une résolution bien inférieure. De ce fait le mobile téléchargera une image extrêmement lourde et utilisera de la bande passante inutilement.
De plus redimensionner une image force le dispositif à consommer plus de mémoire et augmente la charge du processeur.
Sur un mobile, l’image dont les dimensions et le poids sont élevés est
- téléchargée,
- chargé dans la mémoire du téléphone
- et enfin redimensionné pour que sa dimension soit adaptée à l’écran du terminal mobile.
Pour une image de 1024X768 chargée sur un mobile lambda, celui ci aura besoin de 2,36MB de mémoire. Si vous chargé 4 images de cette taille, cela fera tout de même 9,44MB à charger. Les mobiles ont une mémoire limitée et beaucoup de téléphones ont une mémoire allouée au images et aux pages web limitées, et le fait de dépasser cette limitation cause des problèmes de chargement incomplète de pages ainsi que d’autres problèmes.
Le temps de chargement des pages et le chargement d’éléments qui ne seront pas visible
En responsive web design plus la résolution est grande , plus il y a d’éléments visible sur l’écran (images, vidéos, flash etc…) et plus certains éléments ont une taille plus élevée. A contrario, lorsque la résolution diminue, les médias voient leur dimensions diminuées ou tout simplement disparaisse de l’écran. Sur un ordinateur de bureau cela ne serait pas très grave (car celui ci est plus puissant qu’un mobile et dispose la plupart du temps de bien plus de mémoire), mais sur un mobile ces éléments sont toujours téléchargés même s’il ne sont pas visible. C’est un point encore plus gênant que le fait de redimensionner les images car au moins ceux ci sont visible. Ces fichiers téléchargés, visible et invisibles, auront un impact notable sur le temps de chargement de la page.
Si des éléments doivent être caché il est préférable de les supprimer : vérifier le type de résolution avant l’affichage ?
Plus de code , plus à mettre à jour
La mise en place d’un site utilisant le responsive web design nécessitera plus de code.
Étant donné que le site doit s’adapter si une modification est demandé, cette modification doit être visible (donc faites) sur les autres déclinaisons.