Chargement...

Le responsive design


En CSS le resposive design est le fait de créer un design adapté au support. Il ne s'agit pas seulement d'esthétisme mais aussi offrir une meilleur expérience utilisateur à l'internaute en augmentant l'ergonomie de votre site web.

La methode la plus basique de responsive design est d'afficher ou de cacher un élément en fonction de la largeur et de la hauteur du support. Il est donc possible de créer deux menus et afficher le petit menu sur les écrans de faible résolution. Le problème de cette pratique c'est qu'on créer deux fois la même ressource. Il est donc plus judicieux de changer les propriétés d'un élément en fonction de la taille de l'écran.

Exemple:
<style>
#menu{ width:350px; }
@media (min-width: 500px) {
#menu{ width:450px; }
}
@media (min-width: 1000px) {
#menu{ width:800px; }
}
</style>
Dans cet exemple, notre élément #menu aura par défaut une taille de 350 pixels. Si le support est supérieur à 500 pixels en largeur alors cet élément passera à 500px de largeur et si le support est supérieur à 1000 pixels de largeur le menu fera 800 pixels de largeur. Il est possible de tester son responsive design en changeant la taille de son navigateur mais un support tablette ou smartphone peut parfois être plus parlant.

Résolution iphone



Bootstrap Twitter Grid Bootstrap Twitter Grid





UNE QUESTION SUR L'ARTICLE?


CSSW Apprendre à créer son site web CSSW