Différences entre versions de « Responsive - Site »

De Didaquest
Aller à la navigationAller à la recherche
 
(2 versions intermédiaires par le même utilisateur non affichées)
Ligne 5 : Ligne 5 :
  
 
[[Site web adaptatif]] (Français) /  [[Responsive web design]] ou '''RWD''' (Anglais)
 
[[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}} =
 
= {{Widget:Reponses}} =
Ligne 18 : Ligne 24 :
 
{{Widget:Fin-cadre-Bleu}}
 
{{Widget:Fin-cadre-Bleu}}
  
−
* {{Widget:Elements-graphique}}
+
* '''Éléments-graphique'''
  
 
{{Widget:Debut-cadre-Bleu}}
 
{{Widget:Debut-cadre-Bleu}}
Ligne 47 : Ligne 53 :
 
* 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 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.
 
* 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).
 
−
 
−
= {{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}} =
 
−
 
−
 
−
{{widget:LienSiteEducatifs}}
 
  
  
 
= {{Widget:Aides-astuces-Fiche}} =
 
= {{Widget:Aides-astuces-Fiche}} =
  
 +
'''Utilisez une des pages suivantes'''(saisissez l'adresse de votre site et voyez comment il se comporte dans différentes largeurs).
  
−
= {{Widget:Difficultes-enseignement-Fiche}} =
+
* [[Youresponsive]]
−
 
+
* [[Google resizer]]
  
 +
 
= {{Widget:Liens-internet-Fiche}} =
 
= {{Widget:Liens-internet-Fiche}} =
  
−
* '''URL''' :  
+
{{widget:LienSiteEducatifs}}
−
* '''URL''' :
 
−
 
 
  
 
= {{Widget:Bibliographie-Fiche}} =
 
= {{Widget:Bibliographie-Fiche}} =

Version actuelle datée du 26 décembre 2016 à 01:23

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 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 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.
  • Éléments-graphique


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.


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

Utilisez une des pages suivantes(saisissez l'adresse de votre site et voyez comment il se comporte dans différentes largeurs).


Puce-didaquest.png Liens Internet


Puce-didaquest.png Bibliographie

Récupérée de « https://didaquest.org/w/index.php?title=Responsive_-_Site&oldid=22190 »