Responsive web design : les clés pour bien commencer Comment apprécier le meilleur du responsive web design

Nous sommes à présent armés pour apprécier le meilleur du responsive web design. Lancez votre navigateur préféré, dégainez votre outil pour les tailles d'écran et visitez thinkvitamin.com.

Si vous ouvrez la page dans une zone de visualisation plus large que 1060 pixels, vous obtiendrez ce qui est montré sur la capture d'écran suivante.   

Si vous consultez le site avec une zone de visualisation plus large que 930 pixels mais inférieure à 1060 pixels, vous verrez ce que montre la capture d'écran suivante.

Avez-vous remarqué le changement intervenu sur la navigation principale à côté du logo ? Les icônes sur la droite du contenu principal se trouvent l'une au-dessus de l'autre. Tout est parfaitement utilisable et, mieux, rien ne disparaît de l'écran. Regardez à présent dans une zone de visualisation inférieure à 880 pixels, comme ceci.

L'en-tête est le même, mais notez que la barre latérale de droite est encore plus étroite : les icônes sont placées deux par deux pendant que les blocs de texte se sont ajustés et que le texte s'est replacé en conséquence dans le bloc.

Si, toutefois, vous réduisez la zone de visualisation à une largeur inférieure à 600 pixels, vous constaterez un changement majeur comme l'illustre la capture d'écran suivante.

Alors ? La barre latérale a réagi à la nouvelle zone de visualisation, laissant au contenu, la partie la plus importante, toute la largeur de la fenêtre du navigateur. Notez également que les liens de l'en-tête sont placés horizontalement et non plus à côté du logo et que le logo lui-même s'est redimensionné. Ce sont tous ces changements fondés sur les dimensions de la zone de visualisation qui contribuent à fournir une meilleure expérience utilisateur.