Principes du Responsive Web Design
Le Responsive Web Design est une technique permettant à un site de s’adapter à la résolution du support utilisé par le visiteur, que ce soit un smartphone, une tablette, un ordinateur ou une TV connectée.
Le principe du Responsive Web Design est simple : chaque bloc du site s'adapte en largeur (selon la taille de l'écran), et lorsque l'un des blocs devient trop petit, les blocs changent de place et sont réorganisés. C'est ce qu'on appelle les points de rupture, qui sont définis en fonction du nombre de pixel sur la largeur de l'écran :
Cette technique est entièrement liée à la définition d'écran des appareils concernés, il est donc important de la connaître :
Avantages du Responsive Web Design
Le Responsive Web Design permet d'économiser du temps et de l'argent sur le développement et la gestion d'un site mobile. En effet, un site utilisant cette technologie étant adaptée à tous les supports, il ne sera plus nécessaire de créer plusieurs sites en fonction des appareils. Il n'y aura donc plus qu'un seul url, un seul site à gérer et par conséquent, cela permettra d'atteindre le maximum de personnes à moindre coût.
Un autre avantage du Responsive Web design est le fait que cette technologie soit encore assez peu usitée. Ainsi, développer un projet en Responsive Web Design donne une image jeune et innovante pour le client et le professionnel à l’origine du projet.
Contraintes du Responsive Web Design
Le principal inconvénient du Responsive Web Design est le temps nécessaire à l'affichage du site sur les mobiles et tablettes. Cette technologie étant basée sur un principe de redimmensionnement, les temps de chargement augmentent sur certains supports :
- Lors de l'affichage d'un site sur mobile, les images sont d'abord chargées dans leur taille originale avant d'être redimmensionnées. Ces images, souvent assez lourdes, prendront plus de temps à s'afficher sur un mobile équipé d'une connection 3G, moins rapide que l'ADSL sur un ordinateur.
- Le Responsive Web Design repose sur une structure HTML5 couplée au CSS3. Cela implique que, lors de l'affichage d'un site, les différents supports devront charger toutes les données HTML, même si certains n'utiliseront pas l'ensemble de ces informations qui seront alors masquées (la version mobile par exemple). Ceci entraîne un chargement plus long sur ce type d'appareils équipés d'une connection internet plus lente. Or, il est important de savoir que sur mobile, 40% des utilisateurs quittent un site s'il n'est pas chargé en moins de 3 secondes.
Cependant, il est à noter que l'avènement de la 4G devrait pallier ce désagrément.
Articles associés :