Ce site a été construit sur le principe du responsive design. Cela signifie en fait qu’il est construit de manière à s’adapter automatiquement à la résolution des différents écrans. A partir du moment où vous êtes équipés d’un navigateur moderne (c’est à dire à peu près tous les navigateurs à part Internet Explorer 8 et versions inférieures), il s’ajustera de lui-même à votre écran.
Pour tester cela il vous suffit simplement de redimensionner la fenêtre de votre navigateur pour voir si les éléments se repositionnent automatiquement d’eux-même afin de respecter la largeur de la fenêtre.
Si vous surfez sur ce site via une tablette tactile ou la plupart des smartphones actuels (à quelques exceptions près), le rendu sera différent et les éléments de la page réajustés afin de pouvoir en faciliter la lecture et la navigation. Cela permet également de pouvoir naviguer sans avoir à systématiquement zoomer/dézoomer (comme c’est souvent le cas avec le surf sur iPhone…)
Une technique d’avenir
Le responsive design utilise le principe des media queries institué par CSS3 afin de pouvoir ajuster automatiquement l’apparence du site en fonction de la résolution de votre navigateur.
Je suis un fervent défenseur de cette technique; en effet elle permet, en collaboration avec le design dit "liquide", de s’affranchir de la vision traditionnelle de sites Internet rigides et basés sur des designs calculés en pixels plutôt qu’en pourcentages. Le nombre de navigateurs supportant cette technique est de plus très large :
- Mozilla Firefox : 3.5+
- Internet Explorer : 9+
- Google Chrome : 5+
- Opera : 10.5+, Opera Mobile : 10+, Opera Mini : 5+
- Apple Safari : 4+ et iOS (mobile) 3.2+
- Android : 2.1+
- Webkit en général
(source Alsacréations)
Le surf "nomade" tend à se développer de plus en plus, il y a donc un enjeu clé pour les développeurs de sites Internet : réussir à s’adapter à cette évolution des appareils, qu’ils soient portables, mobiles, tablettes ou autres. L’utilisation du responsive design et des media queries me parait être la réponse parfaite à cette problématique.
Quelques exemples
Le site e-commerce de Sony est un bel exemple de site appliquant ces techniques. En voici d’autres pêle-mêle :
(via @RWD - D’autres exemples sont disponibles sur webdesignerwall.com)