technique du Responsive web design
est une façon de programmer afin d’adapter dynamiquement les pages internet à la taille de l’écran.
Tout est une question de largeur d’écran
Chaque terminal doté d’un écran possède une largeur d’écran accessible par tout navigateur internet.
Ce dernier lit la taille utile de l’écran de façon à calculer puis générer un affichage des pages adapté.
La largeur d’écran se mesure en pixels ou points élémentaires.
D’ailleurs, la largeur actuelle de votre affichage d’écran est de X pixels.
La technique du Responsive web design se base sur les « media queries » du CSS3
Sans rentrer dans des considérations techniques, sachez juste que sur un terminal mobile la largeur d’écran est petite, tandis que sur un écran d’ordinateur la largeur d’écran est grande. En fonction de la taille de l’écran, les directives d’affichage seront différentes grâce à la programmation et l’utilisation des « media queries » issues du CSS3.
Voici un petit exemple pour les plus courageux :
Le carré ci-après change de couleur selon la taille de l’écran.
Il apparait vert sur un grand écran ou sinon bleu sur un petit écran.
/* Feuille de style CSS3 */
/* Une directive pour les TABLETTES et les ORDINATEURS */
@media screen and (min-width: 768px) { /* media query #1 */
#carré {
background : green; /* Le carré devient vert */
}
}
/* Une autre directive pour les SMARTPHONES uniquement */
@media screen and (max-width: 767px) { /* media query #2 */
#carré {
background : blue; /* Le carré devient bleu */
}
}
La technique du « Mobile first »
La technique du Mobile first (Mobile en premier) est une optimisation destinée aux écrans « mobiles » des tablettes et des smartphones.
En gros, cela revient à écrire du code pour un affichage prioritaire sur les terminaux mobiles. Cela est aussi un choix de conception pour privilégier l’affichage sur les terminaux mobiles.
Le code sera lu par votre navigateur dans un ordre où les directives pour les petits écrans (dans l’ordre : smartphones et tablettes) seront prioritaires à celles des grands écrans d’ordinateurs.
Pourquoi ? Parce ce que les terminaux mobiles sont plus lents à cause de processeurs moins rapides comparés aux ordinateurs. Rédiger du code « Mobile First » accélère donc la lecture et par conséquence la rapidité des terminaux mobiles. Les ordinateurs disposant d’une plus grande puissance de calcul ne subiront aucun impact sans aucune différence de vitesse notable.
Conclusion
La technique du Responsive web design permet d’adapter l’affichage des pages internet à la taille de chaque écran.
Combinée à la technique du Mobile first, elle favorise la rapidité d’affichage sur les terminaux mobiles.