Quand on dessine un site, on se pose rapidement la question de la largeur de l’écran, qui va conditionner la largeur d’affichage de la page.
On est ainsi passé du 640 au 800, et maintenant au 1024.
Ce genre de réflexion conduit à faire un site de largeur fixe, adapté à une taille d’écran donné.
Si l’écran est plus petit, il y aura un vilain ascenseur en bas de la fenêtre du navigateur.
Si l’écran est plus grand, il y aura une bordure, à gauche et à droite du contenu… Comme sur ce blog par exemple.
Tout cela est en fait bien dommage, pour plusieurs raisons :
- La taille des écrans est très variable, et va continuer à évoluer. On ne peut donc pas avoir un site adapté à tous les cas ;
- C’est très réducteur de faire le choix du « plus petit dénominateur commun », faire des écrans étroits, qui ne seront pas adapté aux grands écrans ;
- Le navigateur n’est qu’une fenêtre dans l’écran. Qui nous dit que l’internaute veux afficher sa fenêtre en plein écran ? Donc, même si l’internaute à un grand écran, on ne peut pas préjuger de la taille qui nous sera allouée.
Comment répondre à cette problématique ?
La meilleure solution est probablement de concevoir sa page avec une largeur variable.
Concrètement, il faut quand même définir une largeur minimum. Tout ne peut pas être variable, il faut bien une taille minimum.
Ensuite, la disposition des éléments HTML s’adapte à la largeur de la fenêtre.
Prenons comme exemple Amazon (par hazard 😉 ).
Voici la fenêtre, la plus petite possible (880 pixels) :
Voici la même page, dans une fenêtre beaucoup plus large (1400 pixels) :
Cet exemple permet de montrer toute la richesse de cette adaptation dynamique :
- Les onglets restent de taille fixe et centrés (on doit pouvoir faire mieux 😉 ) ;
- La largeur de la colonne de gauche évolue, entre un minimum et un maximum ;
- La colonne de droite est de largeur fixe ;
- Pratiquement toute l’adaptation se fait en fait au milieu ;
- La partie la mieux faite étant la deuxième ligne, ou le nombre de produits évolue dynamiquement, en fonction de la largeur disponible (ajax…).
Dans cet exemple, on a bien une utiliation (presque) optimum de l’espace, quel que soit la taille de cet espace.
Mais voilà, concevoir de tels interfaces est beaucoup plus difficile, et réellement beaucoup plus long, donc, mécaniquement… plus cher !