Une maquette variable en fonction de la taille de la fenêtre
On connaît depuis longtemps les mises en page extensibles, où le texte s’étend en fonction de l’espace disponible.
Ce dont je vous parle ici est beaucoup plus subtil : un changement complet de la mise en page en fonction des conditions d’affichage.
Le site The Man in Blue vous en fait la brillante démonstration.
Voyez vous-même…
Si la fenêtre de votre navigateur offre plus de 800 pixels de largeur, le site adopte une mise en page en quatre colonnes :
En-deça de 800 pixels de largeur, le contenu est ramené à une seule colonne :
Testez la mise en page modulaire sur le site The Man in Blue.
Commentaires des lecteurs
Commentaire by Matthieu — 15 septembre 2006
Je suis vraiment pas du tout fan de ce genre de redimensionnement dépendant de la fenêtre de visualisation de l’utilisateur. A l’heure actuelle, aucune des solutions que j’ai pu tester n’est fiable à 100%. Quant à The Man In Blue, lorsque l’on redimesionne la fenêtre en dessous de 600 pixels de largeur, on commence à avoir de drôles de surprises…
Commentaire by Aymeric Jacquet — 18 septembre 2006
En reardant vite fait, il semble que l’on ait affaire à un « switcher » automatique javascript qui choisit la feuille de style en fonction de la résolution. Je rejoins ce que dit matthieu, même si le rendu est interessant, il est toujours dangereux de se baser sur la résolution du visiteur, tellement il y’a de parametres à prendre en compte. Exemple classique, les utilisateurs de Firefox ou de IE qui naviguent avec un panneau lateral ouvert, et là, la mise en page « pensée » pour du 1024 ne passe plus, ou du moins perd grandement son interet.
Commentaire by jmh — 18 septembre 2006
Effectivement, il s’agit d’une combinaison Javascript/CSS. Merci pour vos arguments.
Commentaire by Baudouin de Menten — 20 septembre 2006
4 col sans images, les textes sont identiques. Celà reste théorique. Avec un CMS, si le client se goure dans les tailles des images pour rendre les news plus sexy, le template explose. Je préfère des templates soignés et optimisés pour les (types de)contenus. L’adaptabilité est parfois au détriment de l’ergonomie.