Largeur ordinateur
Largeur tablette
Largeur smartphoneSite web adapté à la taille de l'écran
Avec la multiplication des objets connectés à l'internet, les sites web se trouvent confrontés à la multiplicité des tailles d'écrans.
Si un site est classiquement développé pour différentes tailles d'écran d'ordinateur, il faut développer une seconde version pour tablette, ainsi qu'une troisième pour s'adapter à la taille d'écran des smartphones.
Avec les CSS responsive, il est désormais possible de séparer réellement le contenu de la présentation, et d'adapter dynamiquement le contenu affiché à de la taille de l'écran. C'est ce que propose Bootstrap.
Bootstrap est un framework qui permet de construire la structure d'un site web en css responsive. Il est à la base de twitter, on parle même de Twitter Bootstrap.
Différents types de structure de site ont été développés (menu, pied de page, carrousel, grille), le framework permet de créer sa propre structure. En fin de création, le framework génère les feuilles de style, les fichiers javascript ainsi que les pages en html 5 avec la structure même du site. A partir de ces pages générées, il ne reste plus qu'à construire la version cible en adaptant l'ergonomie désirée, le design, ainsi que les fonctions. Du côté de l'affichage dynamique, cela s'appuie sur les CSS responsive.
Largeur ordinateurLargeur tabletteLargeur smartphone
Le principe de ces feuilles de style est de réagir lorsque la taille de l'écran change.
Différentes tailles d'écran sont donc ciblées dans les css :
Etant donné que l'écran est divisé en colonnes, il est possible d'afficher 3 colonnes côte à côte sur un ordinateur, seulement deux sur une tablette, et une seule sur un smartphone.
Pour chaque taille d'écran les styles sont générés par le framework et ce au niveau de la taille des objets (police de caractères, bouton, espace, hauteur ...), de telle sorte que l'affichage est réellement adapté à l'écran.
Pour les images, la taille n'est plus absolue en pixel, mais relative.
La largeur minimum est ainsi valorisée à 100 pour cent, alors que la hauteur est valorisée à auto.
Cette caractéristique fait que la taille de l'image est déclarée en feuille de style via une classe.
A ce niveau une astuce doit être trouvée pour ne pas télécharger sur un smartphone une image de plusieurs centaines de kilo-octet alors qu'elle va être affichée sur 400 pixel.
Bootstrap est un framework et permet de faire ce que l'on veut côté présentation. Les CSS responsives sont également prises en compte dans les CMS, de Drupal, SPSP à Wordpress.
Coté outils responsive, citons ZURB Foundation, Skeleton, Kube.
Le présent site a ainsi été révisé avec bootstrap et html5. Il s'affiche ainsi sur toutes les tailles d'écran avec la même version de contenu et de présentation, ce qu'il n'était pas possible de faire avec les versions précédentes d'html et css.