Version du 26 décembre 2016 à 01:11

Autres Fiches Conceptuelles

Posez une Question

Votre Publicité sur le Réseau

Traduction

Le Responsive Web Design : qu'est-ce que c'est ?
Comment savoir si mon site web s’affiche correctement sur un smartphone ou une tablette ?
Comment savoir si mon site est responsive ?

Un site web adaptatif (responsive) possède la capacité à adapter son affichage à la dimension de l’écran de l’internaute. Le site est dit responsive si il s'adapte à la largeur réduite de l'écran avec lequel il est visualisé (PC, Smartphone, Tablette, Androïde, Iphone,..) pour que sa consultation reste agréable : son menu peut se replier sous une icône facile d'accès (par exemple en haut à gauche ou à droite), la taille des textes reste importante pour les lire sans effort, et le contenu du site s'est réorganisé dans la hauteur sans déborder en largeur. Il est inutile de zoomer ou de faire défiler le site horizontalement par des manipulations tactiles complexes. Il suffit de faire défiler le site verticalement avec un seul doigt pour le parcourir, comme sur le PC. Les boutons et liens sont faciles à pointer avec le doigt sans risque d'erreur.

Concept1 / Concept2 / Concept3 / Concept4 / Concept5

Il y a plusieurs moyens très simples pour savoir comment se comportera un site existant sur un mobile ou une tablette :

Consultez votre site sur smartphone et tablettes : si le site s'affiche en entier comme sur votre PC mais plus petit parce que le navigateur a fait un zoom arrière pour qu'il tienne en largeur c'est que le site n'est pas responsive.
Consultez votre site dans votre navigateur habituel mais réduisez la largeur de la fenêtre : si une barre de défilement horizontale apparaît c'est que le site n'est pas responsive. Faites le même test sur notre site dans votre navigateur et observez comme le site se réorganise au fur et à mesure que la largeur diminue.
Utilisez une des pages suivantes (saisissez l'adresse de votre site et voyez comment il se comporte dans différentes largeurs).

= Difficultés liées à son enseignement =

@@ Ligne 5 : / Ligne 5 : @@
 [[Site web adaptatif]] (Français) /  [[Responsive web design]] ou '''RWD''' (Anglais)
+= {{Widget:Questions-possibles-Fiche}} =
+* Le Responsive Web Design : qu'est-ce que c'est ?
+* Comment savoir si mon site web s’affiche correctement sur un smartphone ou une tablette ?
+* Comment savoir si mon site est responsive ?
 = {{Widget:Reponses}} =
@@ Ligne 49 : / Ligne 55 : @@
 * Utilisez une des pages suivantes (saisissez l'adresse de votre site et voyez comment il se comporte dans différentes largeurs).
-= {{Widget:Questions-possibles-Fiche}} =
-* Le Responsive Web Design : qu'est-ce que c'est ?
-* Comment savoir si mon site web s’affiche correctement sur un smartphone ou une tablette ?
-* Comment savoir si mon site est responsive ?
 = {{Widget:Liens-enseignement-Fiche}} =