Responsive web design


Apparu à l'été 2012 avec l'arrivée des médiaqueries dans les feuillets css (feuillets de style graphique), le Responsive web Design permet d'adopter des règles de design en fonction de la largeur de l'écran. C'est donc particulièrement utile dans le cas où il est question d'afficher les sites web sur smartphone ou tablette, un critère désormais retenu par Google dans le classement de ses résultats.

Comment fonctionne le Responsive ?

Le RWD consiste à utiliser les règles conditionnelles écrites dans les feuillets css, comme par exemple :


@media only screen and (min-width:993px){
    Règles applicables aux écrans d'ordinateur
}
@media only screen and (min-width:601px) and (max-width: 992px){
    Règles applicables au tablettes en portrait
}
@media only screen and (max-width:600px){
    Règles applicables pour les smartphones
}

On parle de site web adpatatif et de plasticité des interfaces car les sites web responsive affichent leur contenu avec le même confort visuel, sans entraver la navigation.

Les images sont également redimensionnées en unité relative afin de prévenir un éventuel débordement du contenu en dehors de son élément conteneur.

Pour faciliter la conception de modèles adaptatifs pour le web, il existe de nombreux framework en responsive CSS (Bootstrap, Foundation, Skeleton, Materializecss ).



Dernière modification : 25/02/2019

Top