Responsive - Site

De Didaquest
Aller à la navigationAller à la recherche
Autres Fiches Conceptuelles
Posez une Question


(+)

Target Icon.pngVotre Publicité sur le Réseau Target Icon.png

Puce-didaquest.png Traduction

Site web adaptatif (Français) / Responsive web design ou RWD (Anglais)

Puce-didaquest.png Réponse possible

  • Domaine, Discipline, Thématique :

Catégorie:Informatique / Catégorie:Internet

  • 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.


Titre de la définition graphique 1 Titre de la définition graphique 2 Titre de la définition graphique 3

Puce-didaquest.png Concepts ou notions associés

Puce-didaquest.png Exemples, applications, utilisations

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).

Puce-didaquest.png Questions possibles

  • 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 ?

Puce-didaquest.png Liaisons enseignements et programmes



Puce-didaquest.png Aides, Astuces,...

= Puce-didaquest.png Difficultés liées à son enseignement =


Puce-didaquest.png Liens Internet

  • URL :
  • URL :


Puce-didaquest.png Bibliographie