Le responsive design(vue adaptative) est la pratique de concevoir un site web afin que celui-ci s'affiche correctement sur un grand nombre d'appareils différents. En particulier les mobiles et les tablettes, ainsi que les ordinateurs (portable ou de bureau).

Le facteur le plus évident ici est la taille d'écran, mais il y a aussi d'autres facteurs, incluant la densité de pixels de l'affichage ainsi que s’il est tactile ou non. Le mode vue adaptative vous donne un moyen simple de simuler ces facteurs, de tester à quoi ressembler votre site web et comment il se comportera sur différents appareils.

Activation et désactivation du mode de vue adaptative

Il existe trois façons d’activer la vue adaptative :

  • Dans le menu de Firefox, sélectionner le sous-menu Développement puis vue adaptative (ou le menu Outils si la barre de menus est affichée ou si vous êtes sur OS X).
  • Appuyer sur le bouton vue adaptative de la barre d’outils de développement:
  • Utiliser le raccourci clavier Ctrl+Maj+M pour Windows et Linux, ou Cmd+Option+M pour OS X.

Utiliser la vue adaptative

Lorsque l'outil est activé, la zone de contenu des pages web prend la taille de l'écran de l'appareil sélectionné. Par défaut la taille est de 320 x 480 pixels.

Il est possible d'afficher ou de cacher la boîte à outils indépendamment de la vue adaptative elle-même :

Quand la vue adaptative est activée, il est possible de continuer à naviguer comme vous le feriez normalement dans la zone de contenu redimensionnée.

Sélectionner un appareil

Juste au-dessus de la zone d'affichage, se trouve la ligne "Aucun appareil sélectionné". Cliquer sur cette ligne ouvrira une liste de noms d'appareils. Sélectionner un appareil, et le mode de vue adaptative configurera les propriétés suivantes correspondantes à l'appareil sélectionné :

  • Taille de l'écran
  • Ratio de pixel de l'appareil (le ratio de pixels physiques de l'appareil sur les pixels indépendants de l'appareil)
  • Simulation des évènements tactiles

En plus, Firefox modifiera l'en-tête HTTP User-Agent pour s'identifier en tant que navigateur par défaut. Par exemple si l'appareil sélection est un iPhone, alors Firefox s'identifiera comme Safari. La propriété navigator.userAgent aura la même valeur.

Les appareils listés ne sont qu'une partie de tous les appareils possibles. En bas de la liste, le bouton "Modifier la liste" ouvrira un panneau avec la liste complète de tous les appareils. Ce panneau permet de définir les appareils qui apparaitront dans la liste déroulante. La liste des appareils ainsi que leurs valeurs associées proviennent de : https://github.com/mozilla/simulated-devices.

Sauvegarder des appareils personnalisés

Depuis de Firefox 54, il est possible de sauvegarder des appareils personnalisés. Chaque appareil peut avoir ses propres propriétés de :

  • taille
  • devicePixelRatio (DPR)
  • user agent (UA)
  • support tactile

Il est également possible de prévisualiser les propriétés des appareils existants en survolant leur nom dans le menu des appareils.

Contrôler les appareils

Il est possible de fournir des valeurs personnalisées pour la plupart des propriétés d'un appareil.

Modifier la taille d'écran

Pour modifier la taille d'écran, il faut cliquer sur les valeurs en dessous de la zone d'affichage et les modifier :

Il est également possible de déplacer le coin en bas à droite de la zone d'affichage.

Depuis Firefox 59, il est possible d'éditer les tailles d'écran avec le clavier. Lorsque les dimensions sont sélectionnées (ou que le curseur d'écriture est dedans). Il est également possible d'utiliser les flèches haut et bas de 1px.

Pour changer les dimensions plus rapidement, il est possible d'utiliser maj pour itérer de 10pixels en 10 pixels.

Modifier le ratio pixel de l'appareil

Pour définir un ratio personnalisé, il faut cliquer sur la boite "DPR" et sélectionner la valeur voulue.

Activer/désactiver la simulation du touch

Pour ce faire, il faut cliquer sur l'icône en forme de doigt :

Lorsque la simulation est activée, les évènements de la souris sont transformés en évènements évènements touch.

Contrôler le comportement de rechargement de page

Depuis Firefox 60 le menu de sélection Actualiser quand... a été rajouté :

Cliquer dessus affiche deux options qui sont toutes deux désactivées par défaut :

  • Actualiser lors de l'activation/désactivation de la simulation tactile.
  • Actualiser lors du changement d'agent utilisateur.

Avant Firefox 60, ces actualisations étaient automatiques, car certains comportements de la page n'étaient pas fonctionnels sinon. Par exemple, certaines pages vérifient la compatibilité tactile au chargement, et n'ajoute des évènements que si tel est le cas.

Cependant, si vous n'êtes pas intéressé par de telles fonctionnalités (par exemple si vous avez juste envie de vérifier la mise en page dans différentes résolutions), ces rechargements peuvent s'avérer ennuyants. Il est donc utile de pouvoir contrôler ces rechargements.

Lors d'un changement de certaines options, un message d'avertissement est affiché pour vous prévenir que les rechargements ne sont plus automatiques, et précise comment réactiver ce comportement :

Activer/désactiver l'orientation

Pour alterner entre les orientations d'écran portrait et paysage, il suffit de cliquer sur l'icône à droite de la sélection d'appareils :

Bridage réseau

Si tout le développement est fait avec une bonne bande passante, il est possible d'avoir des problèmes avec une connexion moins rapide et de ne pas s'en rendre compte. La Vue Adaptative permet de dire au navigateur d'émuler (très approximativement) les caractéristiques de différents types de réseaux.

Les caractéristiques émulées sont :

  • La vitesse de téléchargement
  • La vitesse d'upload (téléversement (berk))
  • latence minimum

La table ci-dessous liste les valeurs associées à chaque type de réseau. Cependant, ne vous fiez pas à cela pour des mesures de performances exactes. Le but n'est d'avoir qu'une idée approximative de l’expérience utilisateur dans différentes conditions.

Sélection Vitesse de téléchargement Vitesse d'upload Latence minimum (ms)
GPRS 50 KB/s 20 KB/s 500
Regular 2G 250 KB/s 50 KB/s 300
Good 2G 450 KB/s 150 KB/s 150
Regular 3G 750 KB/s 250 KB/s 100
Good 3G 1.5 MB/s 750 KB/s 40
Regular 4G/LTE 4 MB/s 3 MB/s 20
DSL 2 MB/s 1 MB/s 5
Wi-Fi 30 MB/s 15 MB/s 2

Pour sélectionner un réseau il faut cliquer sur la liste déroulante qui par défaut vaut "Aucune limitation" :

Prendre une capture d'écran

Pour prendre une capture d'écran, il suffit de cliquer sur l'icône en forme d'appareil photo :

Les captures d'écran sont enregistrées à l'emplacement de téléchargement par défaut de Firefox.

Depuis Firefox 53, si la case "Enregistrer dans le presse-papier" est cochée dans la page des paramètres alors, la capture d'écran sera aussi enregistrée dans le presse-papier du système d'exploitation.

Étiquettes et contributeurs liés au document

Dernière mise à jour par : wbamberg,